npm - @posiwise/smart-crm - Versions diffs - 0.0.3 → 0.0.4 - Mend

@posiwise/smart-crm 0.0.3 → 0.0.4

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 (50) hide show

package/fesm2022/posiwise-smart-crm.mjs CHANGED Viewed

@@ -430,10 +430,10 @@ class SmartCrmCompanyDetailsComponent extends AppBaseComponent {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmCompanyDetailsComponent, deps: [{ token: i0.Injector }, { token: i2.SubscriptionService }, { token: i1.CrmService }, { token: i2.CommonService }, { token: i2.GeoService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: SmartCrmCompanyDetailsComponent, selector: "pw-company-details", usesInheritance: true, ngImport: i0, template: "<div class=\"me-auto col-xs-6\">\n  <a href=\"javascript:void(0)\"\n    (click)=\"back()\"\n    class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n  <h3 class=\"m-subheader__title m-subheader__title--separator\">\n    <span>{{ 'Crm.AccountMessage.Account' | transloco }}:\n      {{ data?.name ? data?.name : ('Label.AddNew' | transloco) }}</span>\n  </h3>\n</div>\n<div class=\"p-2 mt-3\">\n  <form [formGroup]=\"form\"\n    (ngSubmit)=\"onSave()\">\n    <div class=\"row\">\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.AccountMessage.Name' | transloco\"\n          name=\"name\"\n          [errorMsg]=\"'User.Account.Validation.Name' | transloco\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"name\"\n            id=\"name\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['name'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.AccountMessage.Location' | transloco\"\n          [errorMsg]=\"'Crm.AccountMessage.LocationErrorMessage' | transloco\"\n          name=\"location\">\n          <input ngx-gp-autocomplete\n            class=\"form-control\"\n            #places=\"ngx-places\"\n            formControlName=\"location\"\n            (onAddressChange)=\"handleAddressChange($event)\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['location'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"ui-fluid skills-modal col-sm-4\">\n        <label class=\"mb-2\">{{ 'Crm.AccountMessage.Country' | transloco\n                    }}<span class=\"text-danger\">*</span></label>\n        <p-autoComplete formControlName=\"country\"\n          [suggestions]=\"filteredCountries\"\n          (completeMethod)=\"onSearchCountry($event)\"\n          dataKey=\"code\"\n          field=\"name\"\n          [multiple]=\"false\"\n          styleClass=\"w-100\"\n          placeholder=\"Search Country\"\n          [dropdown]=\"true\"\n          [inputStyle]=\"\n                        submitted && f['country'].errors\n                            ? { border: '1px solid #ff586b' }\n                            : { border: '1px solid gray' }\n                    \">\n        </p-autoComplete>\n      </div>\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.AccountMessage.Tel' | transloco\"\n          name=\"tel\"\n          [errorMsg]=\"'Crm.AccountMessage.TelErrorMessage' | transloco\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"tel\"\n            id=\"tel\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['tel'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"ui-fluid skills-modal col-sm-4\"\n        [class.d-none]=\"!hasAccess\">\n        <label class=\"mb-2\">{{ 'Crm.AccountMessage.Owner' | transloco\n                    }}<span class=\"text-danger\">*</span></label>\n        <p-autoComplete formControlName=\"owner_id\"\n          [suggestions]=\"filteredOwners\"\n          (completeMethod)=\"onSearchOwner($event)\"\n          dataKey=\"id\"\n          field=\"first_name\"\n          [multiple]=\"false\"\n          styleClass=\"w-100\"\n          placeholder=\"Search Owner\"\n          [dropdown]=\"true\">\n        </p-autoComplete>\n      </div>\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.AccountMessage.CompanyUrl' | transloco\"\n          name=\"company_url\">\n          <input type=\"url\"\n            class=\"form-control\"\n            formControlName=\"company_url\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['company_url'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-4 col-lg-4\">\n        <pw-input-container [label]=\"'Organization.OrganizationType' | transloco\"\n          name=\"organization_type_id\"\n          *ngIf=\"organizationTypes$ | async as types\">\n          <select class=\"form-select\"\n            formControlName=\"organization_type_id\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['organization_type_id'].errors }\">\n            <option *ngFor=\"let option of types['organization_types']\"\n              [value]=\"option.id\">\n              {{ option.name }}\n            </option>\n          </select>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-4 col-lg-4\">\n        <pw-input-container [label]=\"'Organization.OrganizationIndustry' | transloco\"\n          name=\"organization_industry_id\"\n          *ngIf=\"organizationIndustries$ | async as industries\">\n          <select class=\"form-select\"\n            formControlName=\"organization_industry_id\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['organization_industry_id'].errors }\">\n            <option *ngFor=\"let option of industries['organization_industries']\"\n              [value]=\"option.id\">\n              {{ option.name }}\n            </option>\n          </select>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-4 col-lg-4\">\n        <pw-input-container [label]=\"'Crm.AccountMessage.Size' | transloco\"\n          name=\"organization_size_id\"\n          *ngIf=\"organizationSizes$ | async as sizes\">\n          <select class=\"form-select\"\n            formControlName=\"organization_size_id\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['organization_size_id'].errors }\">\n            <option *ngFor=\"let option of sizes['organization_sizes']\"\n              [value]=\"option.id\">\n              {{ option.name }}\n            </option>\n          </select>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-4 col-lg-4\">\n        <pw-input-container [label]=\"'Crm.AccountMessage.Status' | transloco\"\n          name=\"status\">\n          <select class=\"form-select\"\n            formControlName=\"status\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['status'].errors }\">\n            <option *ngFor=\"let option of status\"\n              [value]=\"option\">{{ option }}</option>\n          </select>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-4 col-lg-4\">\n        <pw-input-container [label]=\"'Crm.AccountMessage.Priority' | transloco\"\n          name=\"priority\">\n          <select class=\"form-select\"\n            formControlName=\"priority\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['priority'].errors }\">\n            <option *ngFor=\"let option of priority\"\n              [value]=\"option\">\n              {{ option }}\n            </option>\n          </select>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-4 col-lg-4\">\n        <pw-input-container [label]=\"'Crm.AccountMessage.Source' | transloco\"\n          name=\"crm_source_id\">\n          <select class=\"form-select\"\n            formControlName=\"crm_source_id\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['crm_source_id'].errors }\">\n            <option *ngFor=\"let option of source\"\n              [value]=\"option.id\">\n              {{ option.name }}\n            </option>\n          </select>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-12 mt-2\">\n        <pw-input-container [label]=\"'Crm.AccountMessage.Description' | transloco\"\n          name=\"description\">\n          <textarea rows=\"5\"\n            type=\"text\"\n            class=\"form-control\"\n            formControlName=\"description\"\n            id=\"description\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors }\"></textarea>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 text-end mt-3\">\n        <button type=\"button\"\n          class=\"btn btn-outline-default me-2\"\n          (click)=\"back()\">\n          {{ 'Button.Cancel' | transloco }}\n        </button>\n        <button type=\"submit\"\n          class=\"btn btn-primary\"\n          [disabled]=\"form.invalid\">\n          {{ 'Button.Submit' | transloco }}\n        </button>\n      </div>\n    </div>\n  </form>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i9.NgxGpAutocompleteDirective, selector: "[ngx-gp-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "component", type: i7.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"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: i11.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmCompanyDetailsComponent, deps: [{ token: i0.Injector }, { token: i2.SubscriptionService }, { token: i1.CrmService }, { token: i2.CommonService }, { token: i2.GeoService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmCompanyDetailsComponent, selector: "pw-company-details", usesInheritance: true, ngImport: i0, template: "<div class=\"me-auto col-xs-6\">\n  <a href=\"javascript:void(0)\"\n    (click)=\"back()\"\n    class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n  <h3 class=\"m-subheader__title m-subheader__title--separator\">\n    <span>{{ 'Crm.AccountMessage.Account' | transloco }}:\n      {{ data?.name ? data?.name : ('Label.AddNew' | transloco) }}</span>\n  </h3>\n</div>\n<div class=\"p-2 mt-3\">\n  <form [formGroup]=\"form\"\n    (ngSubmit)=\"onSave()\">\n    <div class=\"row\">\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.AccountMessage.Name' | transloco\"\n          name=\"name\"\n          [errorMsg]=\"'User.Account.Validation.Name' | transloco\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"name\"\n            id=\"name\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['name'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.AccountMessage.Location' | transloco\"\n          [errorMsg]=\"'Crm.AccountMessage.LocationErrorMessage' | transloco\"\n          name=\"location\">\n          <input ngx-gp-autocomplete\n            class=\"form-control\"\n            #places=\"ngx-places\"\n            formControlName=\"location\"\n            (onAddressChange)=\"handleAddressChange($event)\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['location'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"ui-fluid skills-modal col-sm-4\">\n        <label class=\"mb-2\">{{ 'Crm.AccountMessage.Country' | transloco\n                    }}<span class=\"text-danger\">*</span></label>\n        <p-autoComplete formControlName=\"country\"\n          [suggestions]=\"filteredCountries\"\n          (completeMethod)=\"onSearchCountry($event)\"\n          dataKey=\"code\"\n          field=\"name\"\n          [multiple]=\"false\"\n          styleClass=\"w-100\"\n          placeholder=\"Search Country\"\n          [dropdown]=\"true\"\n          [inputStyle]=\"\n                        submitted && f['country'].errors\n                            ? { border: '1px solid #ff586b' }\n                            : { border: '1px solid gray' }\n                    \">\n        </p-autoComplete>\n      </div>\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.AccountMessage.Tel' | transloco\"\n          name=\"tel\"\n          [errorMsg]=\"'Crm.AccountMessage.TelErrorMessage' | transloco\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"tel\"\n            id=\"tel\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['tel'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"ui-fluid skills-modal col-sm-4\"\n        [class.d-none]=\"!hasAccess\">\n        <label class=\"mb-2\">{{ 'Crm.AccountMessage.Owner' | transloco\n                    }}<span class=\"text-danger\">*</span></label>\n        <p-autoComplete formControlName=\"owner_id\"\n          [suggestions]=\"filteredOwners\"\n          (completeMethod)=\"onSearchOwner($event)\"\n          dataKey=\"id\"\n          field=\"first_name\"\n          [multiple]=\"false\"\n          styleClass=\"w-100\"\n          placeholder=\"Search Owner\"\n          [dropdown]=\"true\">\n        </p-autoComplete>\n      </div>\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.AccountMessage.CompanyUrl' | transloco\"\n          name=\"company_url\">\n          <input type=\"url\"\n            class=\"form-control\"\n            formControlName=\"company_url\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['company_url'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-4 col-lg-4\">\n        <pw-input-container [label]=\"'Organization.OrganizationType' | transloco\"\n          name=\"organization_type_id\"\n          *ngIf=\"organizationTypes$ | async as types\">\n          <select class=\"form-select\"\n            formControlName=\"organization_type_id\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['organization_type_id'].errors }\">\n            <option *ngFor=\"let option of types['organization_types']\"\n              [value]=\"option.id\">\n              {{ option.name }}\n            </option>\n          </select>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-4 col-lg-4\">\n        <pw-input-container [label]=\"'Organization.OrganizationIndustry' | transloco\"\n          name=\"organization_industry_id\"\n          *ngIf=\"organizationIndustries$ | async as industries\">\n          <select class=\"form-select\"\n            formControlName=\"organization_industry_id\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['organization_industry_id'].errors }\">\n            <option *ngFor=\"let option of industries['organization_industries']\"\n              [value]=\"option.id\">\n              {{ option.name }}\n            </option>\n          </select>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-4 col-lg-4\">\n        <pw-input-container [label]=\"'Crm.AccountMessage.Size' | transloco\"\n          name=\"organization_size_id\"\n          *ngIf=\"organizationSizes$ | async as sizes\">\n          <select class=\"form-select\"\n            formControlName=\"organization_size_id\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['organization_size_id'].errors }\">\n            <option *ngFor=\"let option of sizes['organization_sizes']\"\n              [value]=\"option.id\">\n              {{ option.name }}\n            </option>\n          </select>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-4 col-lg-4\">\n        <pw-input-container [label]=\"'Crm.AccountMessage.Status' | transloco\"\n          name=\"status\">\n          <select class=\"form-select\"\n            formControlName=\"status\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['status'].errors }\">\n            <option *ngFor=\"let option of status\"\n              [value]=\"option\">{{ option }}</option>\n          </select>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-4 col-lg-4\">\n        <pw-input-container [label]=\"'Crm.AccountMessage.Priority' | transloco\"\n          name=\"priority\">\n          <select class=\"form-select\"\n            formControlName=\"priority\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['priority'].errors }\">\n            <option *ngFor=\"let option of priority\"\n              [value]=\"option\">\n              {{ option }}\n            </option>\n          </select>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-4 col-lg-4\">\n        <pw-input-container [label]=\"'Crm.AccountMessage.Source' | transloco\"\n          name=\"crm_source_id\">\n          <select class=\"form-select\"\n            formControlName=\"crm_source_id\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['crm_source_id'].errors }\">\n            <option *ngFor=\"let option of source\"\n              [value]=\"option.id\">\n              {{ option.name }}\n            </option>\n          </select>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-12 mt-2\">\n        <pw-input-container [label]=\"'Crm.AccountMessage.Description' | transloco\"\n          name=\"description\">\n          <textarea rows=\"5\"\n            type=\"text\"\n            class=\"form-control\"\n            formControlName=\"description\"\n            id=\"description\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors }\"></textarea>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 text-end mt-3\">\n        <button type=\"button\"\n          class=\"btn btn-outline-default me-2\"\n          (click)=\"back()\">\n          {{ 'Button.Cancel' | transloco }}\n        </button>\n        <button type=\"submit\"\n          class=\"btn btn-primary\"\n          [disabled]=\"form.invalid\">\n          {{ 'Button.Submit' | transloco }}\n        </button>\n      </div>\n    </div>\n  </form>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i9.NgxGpAutocompleteDirective, selector: "[ngx-gp-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "component", type: i7.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.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmCompanyDetailsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmCompanyDetailsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pw-company-details', template: "<div class=\"me-auto col-xs-6\">\n  <a href=\"javascript:void(0)\"\n    (click)=\"back()\"\n    class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n  <h3 class=\"m-subheader__title m-subheader__title--separator\">\n    <span>{{ 'Crm.AccountMessage.Account' | transloco }}:\n      {{ data?.name ? data?.name : ('Label.AddNew' | transloco) }}</span>\n  </h3>\n</div>\n<div class=\"p-2 mt-3\">\n  <form [formGroup]=\"form\"\n    (ngSubmit)=\"onSave()\">\n    <div class=\"row\">\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.AccountMessage.Name' | transloco\"\n          name=\"name\"\n          [errorMsg]=\"'User.Account.Validation.Name' | transloco\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"name\"\n            id=\"name\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['name'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.AccountMessage.Location' | transloco\"\n          [errorMsg]=\"'Crm.AccountMessage.LocationErrorMessage' | transloco\"\n          name=\"location\">\n          <input ngx-gp-autocomplete\n            class=\"form-control\"\n            #places=\"ngx-places\"\n            formControlName=\"location\"\n            (onAddressChange)=\"handleAddressChange($event)\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['location'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"ui-fluid skills-modal col-sm-4\">\n        <label class=\"mb-2\">{{ 'Crm.AccountMessage.Country' | transloco\n                    }}<span class=\"text-danger\">*</span></label>\n        <p-autoComplete formControlName=\"country\"\n          [suggestions]=\"filteredCountries\"\n          (completeMethod)=\"onSearchCountry($event)\"\n          dataKey=\"code\"\n          field=\"name\"\n          [multiple]=\"false\"\n          styleClass=\"w-100\"\n          placeholder=\"Search Country\"\n          [dropdown]=\"true\"\n          [inputStyle]=\"\n                        submitted && f['country'].errors\n                            ? { border: '1px solid #ff586b' }\n                            : { border: '1px solid gray' }\n                    \">\n        </p-autoComplete>\n      </div>\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.AccountMessage.Tel' | transloco\"\n          name=\"tel\"\n          [errorMsg]=\"'Crm.AccountMessage.TelErrorMessage' | transloco\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"tel\"\n            id=\"tel\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['tel'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"ui-fluid skills-modal col-sm-4\"\n        [class.d-none]=\"!hasAccess\">\n        <label class=\"mb-2\">{{ 'Crm.AccountMessage.Owner' | transloco\n                    }}<span class=\"text-danger\">*</span></label>\n        <p-autoComplete formControlName=\"owner_id\"\n          [suggestions]=\"filteredOwners\"\n          (completeMethod)=\"onSearchOwner($event)\"\n          dataKey=\"id\"\n          field=\"first_name\"\n          [multiple]=\"false\"\n          styleClass=\"w-100\"\n          placeholder=\"Search Owner\"\n          [dropdown]=\"true\">\n        </p-autoComplete>\n      </div>\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.AccountMessage.CompanyUrl' | transloco\"\n          name=\"company_url\">\n          <input type=\"url\"\n            class=\"form-control\"\n            formControlName=\"company_url\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['company_url'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-4 col-lg-4\">\n        <pw-input-container [label]=\"'Organization.OrganizationType' | transloco\"\n          name=\"organization_type_id\"\n          *ngIf=\"organizationTypes$ | async as types\">\n          <select class=\"form-select\"\n            formControlName=\"organization_type_id\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['organization_type_id'].errors }\">\n            <option *ngFor=\"let option of types['organization_types']\"\n              [value]=\"option.id\">\n              {{ option.name }}\n            </option>\n          </select>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-4 col-lg-4\">\n        <pw-input-container [label]=\"'Organization.OrganizationIndustry' | transloco\"\n          name=\"organization_industry_id\"\n          *ngIf=\"organizationIndustries$ | async as industries\">\n          <select class=\"form-select\"\n            formControlName=\"organization_industry_id\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['organization_industry_id'].errors }\">\n            <option *ngFor=\"let option of industries['organization_industries']\"\n              [value]=\"option.id\">\n              {{ option.name }}\n            </option>\n          </select>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-4 col-lg-4\">\n        <pw-input-container [label]=\"'Crm.AccountMessage.Size' | transloco\"\n          name=\"organization_size_id\"\n          *ngIf=\"organizationSizes$ | async as sizes\">\n          <select class=\"form-select\"\n            formControlName=\"organization_size_id\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['organization_size_id'].errors }\">\n            <option *ngFor=\"let option of sizes['organization_sizes']\"\n              [value]=\"option.id\">\n              {{ option.name }}\n            </option>\n          </select>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-4 col-lg-4\">\n        <pw-input-container [label]=\"'Crm.AccountMessage.Status' | transloco\"\n          name=\"status\">\n          <select class=\"form-select\"\n            formControlName=\"status\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['status'].errors }\">\n            <option *ngFor=\"let option of status\"\n              [value]=\"option\">{{ option }}</option>\n          </select>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-4 col-lg-4\">\n        <pw-input-container [label]=\"'Crm.AccountMessage.Priority' | transloco\"\n          name=\"priority\">\n          <select class=\"form-select\"\n            formControlName=\"priority\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['priority'].errors }\">\n            <option *ngFor=\"let option of priority\"\n              [value]=\"option\">\n              {{ option }}\n            </option>\n          </select>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-4 col-lg-4\">\n        <pw-input-container [label]=\"'Crm.AccountMessage.Source' | transloco\"\n          name=\"crm_source_id\">\n          <select class=\"form-select\"\n            formControlName=\"crm_source_id\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['crm_source_id'].errors }\">\n            <option *ngFor=\"let option of source\"\n              [value]=\"option.id\">\n              {{ option.name }}\n            </option>\n          </select>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-12 mt-2\">\n        <pw-input-container [label]=\"'Crm.AccountMessage.Description' | transloco\"\n          name=\"description\">\n          <textarea rows=\"5\"\n            type=\"text\"\n            class=\"form-control\"\n            formControlName=\"description\"\n            id=\"description\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors }\"></textarea>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 text-end mt-3\">\n        <button type=\"button\"\n          class=\"btn btn-outline-default me-2\"\n          (click)=\"back()\">\n          {{ 'Button.Cancel' | transloco }}\n        </button>\n        <button type=\"submit\"\n          class=\"btn btn-primary\"\n          [disabled]=\"form.invalid\">\n          {{ 'Button.Submit' | transloco }}\n        </button>\n      </div>\n    </div>\n  </form>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i2.SubscriptionService }, { type: i1.CrmService }, { type: i2.CommonService }, { type: i2.GeoService }] });
@@ -447,7 +447,7 @@ class SmartCrmCompanyFilesComponent extends AppBaseComponent {
         this.cdr = cdr;
         this.isLoaded = false;
         this.searchText = '';
-        this.totalRecordsUnFilter = 0;
+        this.totalRecordsUnFiltered = 0;
         this.loading = true;
         this.page = 1;
         this.routers = ROUTERS;
@@ -493,7 +493,7 @@ class SmartCrmCompanyFilesComponent extends AppBaseComponent {
                     .subscribe(filesResponse => {
                     this.allFiles = filesResponse?.crm_account_files || [];
                     this.totalRecords = filesResponse.object_count;
-                    this.totalRecordsUnFilter = filesResponse.unfiltered_count;
+                    this.totalRecordsUnFiltered = filesResponse.unfiltered_count;
                 })
                     .add(() => {
                     this.isLoaded = true;
@@ -591,12 +591,12 @@ class SmartCrmCompanyFilesComponent extends AppBaseComponent {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmCompanyFilesComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }, { token: i2$2.NgbModal }, { token: i2.AuthService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: SmartCrmCompanyFilesComponent, selector: "pw-smart-crm-company-files", inputs: { accountId: "accountId", contactId: "contactId", opportunityId: "opportunityId" }, usesInheritance: true, ngImport: i0, template: "<div class=\"row d-none\">\n  <div class=\"col-12 mb-3\">\n    <h2>Account Files</h2>\n  </div>\n</div>\n<div class=\"row\">\n  <div class=\"col-12 mb-3\">\n    <a class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"add-file\"\n      (click)=\"openModal(content)\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Add File' | transloco }}\n    </a>\n  </div>\n</div>\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container table-responsive\"\n  [class.hideTable]=\"totalRecordsUnFilter === 0\">\n  <p-table #dt\n    [value]=\"allFiles\"\n    [paginator]=\"true\"\n    [lazy]=\"true\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"totalRecords\"\n    [loading]=\"loading\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n    <ng-template pTemplate=\"caption\">\n      <div class=\"text-end\">\n        <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n        <input type=\"text\"\n          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search Files...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"owner_id\">\n          {{ 'Crm.AccountFilesMessage.Owner' | transloco }}\n          <p-sortIcon field=\"owner_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"crm_account_id\">\n          {{ 'Crm.AccountFilesMessage.Account' | transloco }}\n          <p-sortIcon field=\"crm_account_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"crm_contact_id\">\n          {{ 'Crm.AccountFilesMessage.Contact' | transloco }}\n          <p-sortIcon field=\"crm_contact_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"crm_opportunity_id\">\n          {{ 'Crm.AccountFilesMessage.Opportunity' | transloco }}\n          <p-sortIcon field=\"crm_opportunity_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"file\">\n          {{ 'Crm.AccountFilesMessage.File' | transloco }}\n          <p-sortIcon field=\"file\"></p-sortIcon>\n        </th>\n        <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-file>\n      <tr>\n        <td data-head=\"Owner\">{{ file.owner?.first_name }} {{ file.owner?.last_name }}</td>\n        <td data-head=\"Account\">\n          <a *ngIf=\"file.crm_account_id\"\n            [routerLink]=\"[\n                            '/' + subscription?.slug + routers.accountInfo,\n                            file.crm_account_id\n                        ]\">{{ file.crm_account?.name }}</a>\n        </td>\n        <td data-head=\"Contact\">\n          <a *ngIf=\"file.crm_contact_id\"\n            [routerLink]=\"[\n                            '/' + subscription?.slug + routers.contactInfo,\n                            file.crm_contact_id\n                        ]\">{{ file.crm_contact | ifNameNullShowEmail }}</a>\n        </td>\n        <td data-head=\"Opportunities\">{{ file?.crm_opportunity?.title }}</td>\n        <td data-head=\"Files\">\n          <a href=\"{{ file.file?.url }}\"\n            target=\"blank\">{{\n                        file.file.url.split('?')[0].split('/')[\n                            file.file.url.split('?')[0].split('/').length - 1\n                        ]\n                    }}</a>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline\">\n            <ng-container *ngIf=\"hasAccess || file.owner_id === userId\">\n              <li ngbTooltip=\"Delete\"\n                class=\"me-2 me-sm-3\">\n                <i\n                                    class=\"fa fa-trash delete-icon\"\n                                    (click)=\"onDelete(file.id)\"\n                                    aria-hidden=\"true\"\n                                ></i>\n              </li>\n            </ng-container>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  <div *ngIf=\"totalRecords === 0 && totalRecordsUnFilter !== 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\">{{ 'Label.Total' | transloco }}: {{ totalRecords }}</span>\n</div>\n<div *ngIf=\"totalRecordsUnFilter === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountFilesMessage.NoDataMessage' | transloco\"> </pw-no-data>\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", dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]" }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i8.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i11.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i12$1.NgFileDropDirective, selector: "[ngFileDrop]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "directive", type: i12$1.NgFileSelectDirective, selector: "[ngFileSelect]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "pipe", type: i14.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmCompanyFilesComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }, { token: i2$2.NgbModal }, { token: i2.AuthService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmCompanyFilesComponent, selector: "pw-smart-crm-company-files", inputs: { accountId: "accountId", contactId: "contactId", opportunityId: "opportunityId" }, usesInheritance: true, ngImport: i0, template: "<div class=\"row d-none\">\n  <div class=\"col-12 mb-3\">\n    <h2>Account Files</h2>\n  </div>\n</div>\n<div class=\"row\">\n  <div class=\"col-12 mb-3\">\n    <a class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"add-file\"\n      (click)=\"openModal(content)\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Add File' | transloco }}\n    </a>\n  </div>\n</div>\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container table-responsive\"\n  [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n  <p-table #dt\n    [value]=\"allFiles\"\n    [paginator]=\"true\"\n    [lazy]=\"true\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"totalRecords\"\n    [loading]=\"loading\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n    <ng-template pTemplate=\"caption\">\n      <div class=\"text-end\">\n        <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n        <input type=\"text\"\n          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search Files...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"owner_id\">\n          {{ 'Crm.AccountFilesMessage.Owner' | transloco }}\n          <p-sortIcon field=\"owner_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"crm_account_id\">\n          {{ 'Crm.AccountFilesMessage.Account' | transloco }}\n          <p-sortIcon field=\"crm_account_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"crm_contact_id\">\n          {{ 'Crm.AccountFilesMessage.Contact' | transloco }}\n          <p-sortIcon field=\"crm_contact_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"crm_opportunity_id\">\n          {{ 'Crm.AccountFilesMessage.Opportunity' | transloco }}\n          <p-sortIcon field=\"crm_opportunity_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"file\">\n          {{ 'Crm.AccountFilesMessage.File' | transloco }}\n          <p-sortIcon field=\"file\"></p-sortIcon>\n        </th>\n        <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-file>\n      <tr>\n        <td data-head=\"Owner\">{{ file.owner?.first_name }} {{ file.owner?.last_name }}</td>\n        <td data-head=\"Account\">\n          <a *ngIf=\"file.crm_account_id\"\n            [routerLink]=\"[\n                            '/' + subscription?.slug + routers.accountInfo,\n                            file.crm_account_id\n                        ]\">{{ file.crm_account?.name }}</a>\n        </td>\n        <td data-head=\"Contact\">\n          <a *ngIf=\"file.crm_contact_id\"\n            [routerLink]=\"[\n                            '/' + subscription?.slug + routers.contactInfo,\n                            file.crm_contact_id\n                        ]\">{{ file.crm_contact | ifNameNullShowEmail }}</a>\n        </td>\n        <td data-head=\"Opportunities\">{{ file?.crm_opportunity?.title }}</td>\n        <td data-head=\"Files\">\n          <a href=\"{{ file.file?.url }}\"\n            target=\"blank\">{{\n                        file.file.url.split('?')[0].split('/')[\n                            file.file.url.split('?')[0].split('/').length - 1\n                        ]\n                    }}</a>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline\">\n            <ng-container *ngIf=\"hasAccess || file.owner_id === userId\">\n              <li ngbTooltip=\"Delete\"\n                class=\"me-2 me-sm-3\">\n                <i\n                                    class=\"fa fa-trash delete-icon\"\n                                    (click)=\"onDelete(file.id)\"\n                                    aria-hidden=\"true\"\n                                ></i>\n              </li>\n            </ng-container>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  <div *ngIf=\"totalRecords === 0 && totalRecordsUnFiltered !== 0\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n  </div>\n  <span class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{ totalRecords }}</span>\n</div>\n<div *ngIf=\"totalRecordsUnFiltered === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountFilesMessage.NoDataMessage' | transloco\"> </pw-no-data>\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", dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i8.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i11.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i12$1.NgFileDropDirective, selector: "[ngFileDrop]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "directive", type: i12$1.NgFileSelectDirective, selector: "[ngFileSelect]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "pipe", type: i14.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmCompanyFilesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmCompanyFilesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-smart-crm-company-files', template: "<div class=\"row d-none\">\n  <div class=\"col-12 mb-3\">\n    <h2>Account Files</h2>\n  </div>\n</div>\n<div class=\"row\">\n  <div class=\"col-12 mb-3\">\n    <a class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"add-file\"\n      (click)=\"openModal(content)\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Add File' | transloco }}\n    </a>\n  </div>\n</div>\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container table-responsive\"\n  [class.hideTable]=\"totalRecordsUnFilter === 0\">\n  <p-table #dt\n    [value]=\"allFiles\"\n    [paginator]=\"true\"\n    [lazy]=\"true\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"totalRecords\"\n    [loading]=\"loading\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n    <ng-template pTemplate=\"caption\">\n      <div class=\"text-end\">\n        <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n        <input type=\"text\"\n          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search Files...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"owner_id\">\n          {{ 'Crm.AccountFilesMessage.Owner' | transloco }}\n          <p-sortIcon field=\"owner_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"crm_account_id\">\n          {{ 'Crm.AccountFilesMessage.Account' | transloco }}\n          <p-sortIcon field=\"crm_account_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"crm_contact_id\">\n          {{ 'Crm.AccountFilesMessage.Contact' | transloco }}\n          <p-sortIcon field=\"crm_contact_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"crm_opportunity_id\">\n          {{ 'Crm.AccountFilesMessage.Opportunity' | transloco }}\n          <p-sortIcon field=\"crm_opportunity_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"file\">\n          {{ 'Crm.AccountFilesMessage.File' | transloco }}\n          <p-sortIcon field=\"file\"></p-sortIcon>\n        </th>\n        <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-file>\n      <tr>\n        <td data-head=\"Owner\">{{ file.owner?.first_name }} {{ file.owner?.last_name }}</td>\n        <td data-head=\"Account\">\n          <a *ngIf=\"file.crm_account_id\"\n            [routerLink]=\"[\n                            '/' + subscription?.slug + routers.accountInfo,\n                            file.crm_account_id\n                        ]\">{{ file.crm_account?.name }}</a>\n        </td>\n        <td data-head=\"Contact\">\n          <a *ngIf=\"file.crm_contact_id\"\n            [routerLink]=\"[\n                            '/' + subscription?.slug + routers.contactInfo,\n                            file.crm_contact_id\n                        ]\">{{ file.crm_contact | ifNameNullShowEmail }}</a>\n        </td>\n        <td data-head=\"Opportunities\">{{ file?.crm_opportunity?.title }}</td>\n        <td data-head=\"Files\">\n          <a href=\"{{ file.file?.url }}\"\n            target=\"blank\">{{\n                        file.file.url.split('?')[0].split('/')[\n                            file.file.url.split('?')[0].split('/').length - 1\n                        ]\n                    }}</a>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline\">\n            <ng-container *ngIf=\"hasAccess || file.owner_id === userId\">\n              <li ngbTooltip=\"Delete\"\n                class=\"me-2 me-sm-3\">\n                <i\n                                    class=\"fa fa-trash delete-icon\"\n                                    (click)=\"onDelete(file.id)\"\n                                    aria-hidden=\"true\"\n                                ></i>\n              </li>\n            </ng-container>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  <div *ngIf=\"totalRecords === 0 && totalRecordsUnFilter !== 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\">{{ 'Label.Total' | transloco }}: {{ totalRecords }}</span>\n</div>\n<div *ngIf=\"totalRecordsUnFilter === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountFilesMessage.NoDataMessage' | transloco\"> </pw-no-data>\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" }]
+            args: [{ selector: 'pw-smart-crm-company-files', template: "<div class=\"row d-none\">\n  <div class=\"col-12 mb-3\">\n    <h2>Account Files</h2>\n  </div>\n</div>\n<div class=\"row\">\n  <div class=\"col-12 mb-3\">\n    <a class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"add-file\"\n      (click)=\"openModal(content)\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Add File' | transloco }}\n    </a>\n  </div>\n</div>\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container table-responsive\"\n  [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n  <p-table #dt\n    [value]=\"allFiles\"\n    [paginator]=\"true\"\n    [lazy]=\"true\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"totalRecords\"\n    [loading]=\"loading\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n    <ng-template pTemplate=\"caption\">\n      <div class=\"text-end\">\n        <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n        <input type=\"text\"\n          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search Files...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"owner_id\">\n          {{ 'Crm.AccountFilesMessage.Owner' | transloco }}\n          <p-sortIcon field=\"owner_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"crm_account_id\">\n          {{ 'Crm.AccountFilesMessage.Account' | transloco }}\n          <p-sortIcon field=\"crm_account_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"crm_contact_id\">\n          {{ 'Crm.AccountFilesMessage.Contact' | transloco }}\n          <p-sortIcon field=\"crm_contact_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"crm_opportunity_id\">\n          {{ 'Crm.AccountFilesMessage.Opportunity' | transloco }}\n          <p-sortIcon field=\"crm_opportunity_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"file\">\n          {{ 'Crm.AccountFilesMessage.File' | transloco }}\n          <p-sortIcon field=\"file\"></p-sortIcon>\n        </th>\n        <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-file>\n      <tr>\n        <td data-head=\"Owner\">{{ file.owner?.first_name }} {{ file.owner?.last_name }}</td>\n        <td data-head=\"Account\">\n          <a *ngIf=\"file.crm_account_id\"\n            [routerLink]=\"[\n                            '/' + subscription?.slug + routers.accountInfo,\n                            file.crm_account_id\n                        ]\">{{ file.crm_account?.name }}</a>\n        </td>\n        <td data-head=\"Contact\">\n          <a *ngIf=\"file.crm_contact_id\"\n            [routerLink]=\"[\n                            '/' + subscription?.slug + routers.contactInfo,\n                            file.crm_contact_id\n                        ]\">{{ file.crm_contact | ifNameNullShowEmail }}</a>\n        </td>\n        <td data-head=\"Opportunities\">{{ file?.crm_opportunity?.title }}</td>\n        <td data-head=\"Files\">\n          <a href=\"{{ file.file?.url }}\"\n            target=\"blank\">{{\n                        file.file.url.split('?')[0].split('/')[\n                            file.file.url.split('?')[0].split('/').length - 1\n                        ]\n                    }}</a>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline\">\n            <ng-container *ngIf=\"hasAccess || file.owner_id === userId\">\n              <li ngbTooltip=\"Delete\"\n                class=\"me-2 me-sm-3\">\n                <i\n                                    class=\"fa fa-trash delete-icon\"\n                                    (click)=\"onDelete(file.id)\"\n                                    aria-hidden=\"true\"\n                                ></i>\n              </li>\n            </ng-container>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  <div *ngIf=\"totalRecords === 0 && totalRecordsUnFiltered !== 0\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n  </div>\n  <span class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{ totalRecords }}</span>\n</div>\n<div *ngIf=\"totalRecordsUnFiltered === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountFilesMessage.NoDataMessage' | transloco\"> </pw-no-data>\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" }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1.CrmService }, { type: i2$2.NgbModal }, { type: i2.AuthService }, { type: i0.ChangeDetectorRef }], propDecorators: { accountId: [{
                 type: Input
             }], contactId: [{
@@ -624,7 +624,7 @@ class SmartCrmCompanyInfoComponent extends AppBaseComponent {
         this.editComment = false;
         this.isContactValid = true;
         this.isLoaded = false;
-        this.totalRecordsUnFilter = 0;
+        this.totalRecordsUnFiltered = 0;
         this.loading = true;
         this.searchText = '';
         this.potential = ['low', 'medium', 'high'];
@@ -968,7 +968,7 @@ class SmartCrmCompanyInfoComponent extends AppBaseComponent {
                     if (response.contacts) {
                         this.contacts = response.contacts;
                         this.totalRecords = response.object_count;
-                        this.totalRecordsUnFilter = response.unfiltered_count;
+                        this.totalRecordsUnFiltered = response.unfiltered_count;
                         this.contacts.forEach(member => {
                             member.displayName = `${member.first_name || ''} ${member.last_name || ''} - ${member.email}`.trim();
                         });
@@ -1144,12 +1144,12 @@ class SmartCrmCompanyInfoComponent extends AppBaseComponent {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmCompanyInfoComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }, { token: i2.SubscriptionService }, { token: i2.GeoService }, { token: i2.CommonService }, { token: i2$2.NgbModal }, { token: i2.AuthService }, { token: i0.ChangeDetectorRef }, { token: i2.LogoCacheService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: SmartCrmCompanyInfoComponent, selector: "pw-smart-crm-company-info", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 mb-0\">\n    <div class=\"me-auto mb-0\">\n      <h2 class=\"mb-0\">\n        <a href=\"javascript:void(0)\"\n          (click)=\"back()\"\n          class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n        Account Info\n      </h2>\n    </div>\n    <a class=\"btn btn-sm btn-outline-primary float-end mb-3\"\n      data-cy=\"add-opportunities\"\n      (click)=\"navigateToAddOpportunities()\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n    </a>\n  </div>\n  <div class=\"col-12 col-md-4\">\n    <div class=\"user-info p-3 card pb-0 h-auto\">\n      <div class=\"mb-2 text-center\">\n        <a class=\"profile-image\">\n          <img alt=\"Profile Image\"\n            width=\"100\"\n            height=\"100\"\n            [src]=\"getAccountLogo(data?.company_url)\"\n            class=\"img-fluid company-logo\"\n            onerror=\"this.onerror=null;this.src='assets/img/icons/company.png';\" />\n        </a>\n      </div>\n      <div class=\"mb-4 d-flex justify-content-between align-items-center\">\n        <h4 class=\"d-inline-block\">\n          About <span *ngIf=\"data?.id\">{{ data.name }}</span>\n        </h4>\n        <a href=\"javascript:void(0);\"\n          *ngIf=\"isFormEdit\"\n          class=\"btn btn-sm btn-outline-primary float-end\"\n          (click)=\"isFormEdit = !isFormEdit; this.getAllSubscriptionMembers()\">{{ 'Button.Edit' | transloco }}</a>\n      </div>\n      <form [formGroup]=\"aboutControls\"\n        [class.isDisabled]=\"isFormEdit\">\n        <div class=\"mb-3\">\n          <label class=\"label mb-0\">{{ 'Crm.AccountMessage.Name' | transloco }}</label>\n          <input type=\"text\"\n            class=\"form-control rounded-0 ps-1 user-value\"\n            formControlName=\"name\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['name'].errors }\" />\n        </div>\n        <div class=\"mb-3\">\n          <label class=\"label mb-0\">{{\n                        'Crm.AccountMessage.Location' | transloco\n                    }}</label>\n          <input ngx-gp-autocomplete\n            class=\"form-control rounded-0 ps-1 user-value\"\n            #places=\"ngx-places\"\n            formControlName=\"location\"\n            (onAddressChange)=\"handleAddressChange($event)\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['location'].errors }\" />\n        </div>\n        <div class=\"mb-3\"\n          *ngIf=\"countries$ | async as countries\">\n          <label>{{ 'Crm.AccountMessage.Country' | transloco\n                        }}<span class=\"text-danger\">*</span>\n          </label>\n          <select class=\"form-select\"\n            formControlName=\"country\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['country'].errors }\">\n            <option *ngFor=\"let country of countries\"\n              [value]=\"country.code\">\n              {{ country.name }}\n            </option>\n          </select>\n        </div>\n        <div class=\"mb-3 ui-fluid skills-modal\">\n          <label class=\"label mb-2\">{{ 'Crm.AccountMessage.Owner' | transloco }}</label>\n          <p class=\"form-control d-block pb-2 ps-1 user-value\"\n            *ngIf=\"isFormEdit && data?.owner_id\">\n            {{ data?.owner?.first_name }} {{ data?.owner?.last_name }}\n          </p>\n          <p-autoComplete *ngIf=\"!isFormEdit || !data?.owner_id\"\n            [suggestions]=\"filteredOwner\"\n            formControlName=\"owner_id\"\n            dataKey=\"id\"\n            field=\"first_name\"\n            [dropdown]=\"true\"\n            (completeMethod)=\"search($event)\"\n            styleClass=\"w-100\"\n            placeholder=\"Search owner\"\n            [multiple]=\"false\">\n          </p-autoComplete>\n        </div>\n        <div class=\"mb-3\">\n          <label class=\"label mb-0\">{{\n                        'Crm.AccountMessage.CompanyUrl' | transloco\n                    }}</label>\n          <a [href]=\"data?.company_url\"\n            target=\"blank\"\n            class=\"form-control d-block pb-2 ps-1 user-value\"\n            *ngIf=\"isFormEdit && data?.company_url\">{{ data?.company_url }}</a>\n          <input *ngIf=\"!isFormEdit || !data?.company_url\"\n            type=\"text\"\n            class=\"form-control rounded-0 ps-1 user-value\"\n            formControlName=\"company_url\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['company_url'].errors }\" />\n        </div>\n        <div class=\"mb-3\"\n          *ngIf=\"data?.tel\">\n          <label class=\"label mb-0\">{{ 'Crm.AccountMessage.Tel' | transloco }}</label>\n          <input type=\"text\"\n            class=\"form-control rounded-0 ps-1 user-value\"\n            formControlName=\"tel\" />\n        </div>\n        <div class=\"mb-3\"\n          *ngIf=\"organizationTypes$ | async as types\">\n          <label>{{ 'Organization.OrganizationType' | transloco }}</label>\n          <div class=\"mb-3\">\n            <select formControlName=\"organization_type_id\"\n              class=\"form-control form-select\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['organization_type_id'].errors }\">\n              <option *ngFor=\"let option of types['organization_types']\"\n                [value]=\"option.id\">\n                {{ option.name }}\n              </option>\n            </select>\n          </div>\n        </div>\n        <div class=\"mb-3\"\n          *ngIf=\"organizationIndustries$ | async as industries\">\n          <label>{{ 'Organization.OrganizationIndustry' | transloco }}</label>\n          <select formControlName=\"organization_industry_id\"\n            class=\"form-control form-select\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['organization_industry_id'].errors }\">\n            <option *ngFor=\"let option of industries['organization_industries']\"\n              [value]=\"option.id\">\n              {{ option.name }}\n            </option>\n          </select>\n        </div>\n        <div class=\"mb-3\"\n          *ngIf=\"organizationSizes$ | async as sizes\">\n          <label>{{ 'Crm.AccountMessage.Size' | transloco }}</label>\n          <select formControlName=\"organization_size_id\"\n            class=\"form-control form-select\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['organization_size_id'].errors }\">\n            <option *ngFor=\"let option of sizes['organization_sizes']\"\n              [value]=\"option.id\">\n              {{ option.name }}\n            </option>\n          </select>\n        </div>\n        <div class=\"mb-3\">\n          <label>{{ 'Crm.AccountMessage.Status' | transloco }}</label>\n          <select formControlName=\"status\"\n            class=\"form-control form-select\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['status'].errors }\">\n            <option *ngFor=\"let option of status\"\n              [value]=\"option\">{{ option }}</option>\n          </select>\n        </div>\n        <div class=\"mb-3\">\n          <label>{{ 'Crm.AccountMessage.Priority' | transloco }}</label>\n          <select formControlName=\"priority\"\n            class=\"form-control form-select\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['priority'].errors }\">\n            <option *ngFor=\"let option of priority\"\n              [value]=\"option\">\n              {{ option }}\n            </option>\n          </select>\n        </div>\n        <div class=\"mb-3\">\n          <label>{{ 'Crm.AccountMessage.Source' | transloco }}</label>\n          <select formControlName=\"crm_source_id\"\n            class=\"form-control form-select\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['crm_source_id'].errors }\">\n            <option *ngFor=\"let option of source\"\n              [value]=\"option.id\">\n              {{ option.name }}\n            </option>\n          </select>\n        </div>\n        <div class=\"mb-3\">\n          <pw-input-container [label]=\"'Crm.AccountMessage.Description' | transloco\"\n            name=\"description\">\n            <textarea rows=\"5\"\n              type=\"text\"\n              class=\"form-control\"\n              formControlName=\"description\"\n              id=\"description\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors }\"></textarea>\n          </pw-input-container>\n        </div>\n        <div *ngIf=\"!isFormEdit\"\n          class=\"text-end form-action-buttons\">\n          <input type=\"button\"\n            class=\"btn btn-outline-primary\"\n            (click)=\"isFormEdit = !isFormEdit; getAccountDetails()\"\n            value=\"Cancel\" />\n          <input type=\"button\"\n            class=\"btn btn-primary ms-3\"\n            value=\"Submit\"\n            (click)=\"updateAccountInfo()\" />\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)=\"onSave()\">\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 && actionControls.get('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=\"yyyy-mm-dd\"\n                      formControlName=\"when\"\n                      ngbDatepicker\n                      #d=\"ngbDatepicker\"\n                      (click)=\"d.toggle()\" />\n                  </div>\n                </div>\n                <div class=\"ui-fluid skills-modal col-sm-4 ps-0\">\n                  <p-autoComplete [suggestions]=\"filteredContact\"\n                    formControlName=\"crm_contact_id\"\n                    dataKey=\"id\"\n                    field=\"displayName\"\n                    [dropdown]=\"true\"\n                    (completeMethod)=\"searchContact($event)\"\n                    (onSelect)=\"selectContact($event)\"\n                    (onBlur)=\"OnContactBlur()\"\n                    styleClass=\"w-100\"\n                    placeholder=\"Search contact\"\n                    [multiple]=\"false\"\n                    (onDropdownClick)=\"onDropdownClick()\">\n                  </p-autoComplete>\n                </div>\n                <div class=\"col-sm-4 pe-0 completed-toggle\">\n                  <div class=\"mb-3\">\n                    <ui-switch 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              <a class=\"btn btn-outline-primary me-0 me-sm-2\"\n                (click)=\"openModal(content)\">{{ 'Upload file' | transloco }}</a>\n              <input type=\"submit\"\n                [disabled]=\"buttonDisable\"\n                class=\"btn btn-primary mt-2 mb-2\"\n                value=\"Submit Note\" />\n            </div>\n            <div *ngIf=\"buttonDisable\"\n              class=\"no-actions pt-4\">\n              <pw-no-data [withImage]=\"true\" [message]=\"\n                                    'Crm.AccountMessage.NoActionsInAccountInfoMessage' | transloco\n                                \">\n              </pw-no-data>\n            </div>\n          </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=\"!accountComments?.length && isLoaded\"\n            class=\"no-actions pt-2\">\n            <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoActionsMessage' | transloco\">\n            </pw-no-data>\n          </div>\n          <div *ngIf=\"accountComments?.length\">\n            <div id=\"timeline\"\n              class=\"pt-3 clear-both timeline-center timeline-wrapper timeline-container\"\n              infiniteScroll\n              [infiniteScrollDistance]=\"2\"\n              [infiniteScrollThrottle]=\"50\"\n              [infiniteScrollContainer]=\"selector\"\n              [fromRoot]=\"true\"\n              (scrolled)=\"onScrollTimeline()\">\n              <ul class=\"timeline\">\n                <li class=\"timeline-line\"></li>\n              </ul>\n              <ul class=\"timeline\">\n                <li class=\"timeline-line\"></li>\n                <li class=\"timeline-item\"\n                  [ngClass]=\"{ 'mt-5': odd || last }\"\n                  *ngFor=\"\n                                        let item of accountComments;\n                                        index as i;\n                                        let odd = odd;\n                                        let even = even;\n                                        let last = last;\n                                        let first = first\n                                    \">\n                  <div class=\"timeline-badge\">\n                    <span class=\"bg-red bg-lighten-1\">\n                      <span class=\"timeline-year\">\n                        <span class=\"d-block date-year\">{{\n                                                    item.when | date: 'medium' | slice: 0:3\n                                                }}</span>\n                        <span>{{ item.year }}</span></span>\n                    </span>\n                  </div>\n                  <div class=\"timeline-card shadow card pb-0 rounded border-grey border-lighten-2 position-static\">\n                    <div class=\"card-header py-4\">\n                      <div class=\"mb-0 clearfix\">\n                        <textarea type=\"text\"\n                          name=\"comment\"\n                          class=\"comment-field form-control p-0\"\n                          [(ngModel)]=\"item.comment\">{{ item.comment }}</textarea>\n                        <div class=\"auto-complete mb-3 ui-fluid skills-modal\">\n                          <p-autoComplete [(ngModel)]=\"item.crm_contact\"\n                            [suggestions]=\"filteredContactComment\"\n                            dataKey=\" id \"\n                            field=\"first_name\"\n                            dropdown=\" true \"\n                            (completeMethod)=\"\n                                                            searchContactInComment($event)\n                                                        \"\n                            (onSelect)=\"selectCommentContact($event)\"\n                            (onBlur)=\"OnContactBlur()\"\n                            styleClass=\" w-100 \"\n                            placeholder=\" Search contact \"\n                            [multiple]=\"false\"\n                            (onDropdownClick)=\"onDropdownClick()\">\n                          </p-autoComplete>\n                        </div>\n                        <p class=\"float-start mb-0\"\n                          *ngIf=\"\n                                                        !showFullComment || item.id !== commentId\n                                                    \">\n                          {{ item.comment | slice: 0:170\n                                                    }}<a *ngIf=\"item.comment.length > 170\"\n                            class=\"text-secondary\"\n                            (click)=\"\n                                                            showFullComment = true;\n                                                            commentId = item.id\n                                                        \">...show more\n                          </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 &&\n                                                            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, item)\"\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=\"yyyy-mm-dd\"\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                      <a class=\"text-secondary action-owner\"\n                        *ngIf=\"item.crm_contact\"\n                        [routerLink]=\"[\n                                                    '/' + subscription?.slug + routers.contactInfo,\n                                                    item.crm_contact.id\n                                                ]\">{{ item.crm_contact.first_name }}\n                        {{ item.crm_contact.last_name || '' }}</a>\n                      <p>\n                        By\n                        {{\n                                                    item.owner.first_name +\n                                                        ' ' +\n                                                        item.owner.last_name\n                                                }}\n                      </p>\n                      <span class=\"badge bg-primary\">{{\n                                                item?.crm_action?.name\n                                            }}</span>\n                      <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                        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\n                                                    class=\"fa fa-tasks completed\"\n                                                    aria-hidden=\"true\"\n                                                ></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                        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                        href=\"javascript:void(0);\"\n                        (click)=\"\n                                                    setAsCompletedOrUncompleted(\n                                                        item.id,\n                                                        item,\n                                                        item.completed\n                                                    )\n                                                \"\n                        class=\"ms-2\">\n                        <i\n                                                    class=\"far fa-window-close\"\n                                                    aria-hidden=\"true\"\n                                                ></i>\n                      </a>\n                      <div class=\"control-btns mt-3 text-end form-action-buttons\">\n                        <button type=\"button\"\n                          class=\"btn btn-sm btn-outline-default me-2\"\n                          (click)=\"showEditControls(undefined, '')\">\n                          {{ 'Button.Cancel' | transloco }}\n                        </button>\n                        <button class=\"btn btn-sm btn-primary\"\n                          type=\"button\"\n                          (click)=\"updateComment(item)\">\n                          {{ 'Button.Submit' | transloco }}\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </div>\n        </ng-template>\n      </li>\n      <li [ngbNavItem]=\"2\">\n        <a ngbNavLink>Contacts</a>\n        <ng-template ngbNavContent>\n          <div class=\"row\">\n            <div class=\"col-12 mb-3\">\n              <a class=\"btn btn-sm btn-outline-primary float-end\"\n                data-cy=\"add-contact\"\n                [routerLink]=\"[\n                                    '/' + subscription?.slug + routers.contactAdd,\n                                    accountId\n                                ]\">\n                <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n                {{ 'Crm.ContactMessage.AddContact' | transloco }}\n              </a>\n            </div>\n          </div>\n          <div class=\"primeng-datatable-container table-responsive\"\n            [class.hideTable]=\"totalRecordsUnFilter === 0\">\n            <p-table class=\"table\"\n              #dt\n              [value]=\"contacts\"\n              [paginator]=\"true\"\n              [rows]=\"PAGE_SIZE\"\n              [totalRecords]=\"totalRecords\"\n              [loading]=\"loading\"\n              [lazy]=\"true\"\n              (onLazyLoad)=\"onLazyLoad($event)\"\n              [customSort]=\"true\">\n              <ng-template pTemplate=\"caption\">\n                <div class=\"text-end\">\n                  <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n                  <input type=\"text\"\n                    [(ngModel)]=\"searchText\"\n                    pInputText\n                    size=\"50\"\n                    placeholder=\"Search contact...\"\n                    (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n                    class=\"mw-90\" />\n                </div>\n              </ng-template>\n              <ng-template pTemplate=\"header\">\n                <tr>\n                  <th scope=\"true\"\n                    pSortableColumn=\"first_name\">\n                    {{ 'Label.Name' | transloco }}\n                    <p-sortIcon field=\"first_name\"></p-sortIcon>\n                  </th>\n                  <th scope=\"true\"\n                    pSortableColumn=\"owner_id\">\n                    {{ 'Crm.ContactMessage.ContactOwner' | transloco }}\n                    <p-sortIcon field=\"owner_id\"></p-sortIcon>\n                  </th>\n                  <th scope=\"true\"\n                    pSortableColumn=\"headline\">\n                    {{ 'Crm.ContactMessage.Headline' | transloco }}\n                    <p-sortIcon field=\"headline\"></p-sortIcon>\n                  </th>\n                  <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n                </tr>\n              </ng-template>\n              <ng-template pTemplate=\"body\"\n                let-contact>\n                <tr>\n                  <td data-head=\"Name\"\n                    class=\"contactname\">\n                    <a [routerLink]=\"[\n                                                '/' + subscription?.slug + routers.contactInfo,\n                                                contact.id\n                                            ]\">{{\n                                                contact.first_name + ' ' + contact.last_name\n                                                    | textTruncate: 20\n                                            }}</a>\n                  </td>\n                  <td data-head=\"OwnerName\">\n                    {{ contact.owner | ifNameNullShowEmail }}\n                  </td>\n                  <td data-head=\"Headline\"\n                    class=\"headline-content\">\n                    {{ contact?.headline | textTruncate: 20 }}\n                  </td>\n                  <td data-head=\"Action\">\n                    <ul class=\"list-unstyled list-inline\">\n                      <li ngbTooltip=\"Show\"\n                        class=\"me-2 me-sm-3\"\n                        [routerLink]=\"[\n                                                    '/' + subscription?.slug + routers.contactInfo,\n                                                    contact.id\n                                                ]\">\n                        <i\n                                                    class=\"fa fa-eye see-icon\"\n                                                    aria-hidden=\"true\"\n                                                ></i>\n                      </li>\n                      <li *ngIf=\"\n                                                    hasAccess ||\n                                                    contact.owner_id === userId ||\n                                                    contact.crm_account.owner_id === userId\n                                                \"\n                        ngbTooltip=\"Add opportunity\"\n                        class=\"me-2 me-sm-3\"\n                        [routerLink]=\"[\n                                                    '/' +\n                                                        subscription?.slug +\n                                                        routers.opportunityAdd\n                                                ]\"\n                        [queryParams]=\"{ contact_id: contact.id }\">\n                        <i\n                                                    class=\"fa fa-plus-circle add-icon\"\n                                                    aria-hidden=\"true\"\n                                                ></i>\n                      </li>\n                      <li *ngIf=\"\n                                                    hasAccess ||\n                                                    contact.owner_id === userId ||\n                                                    contact.crm_account.owner_id === userId\n                                                \"\n                        ngbTooltip=\"Edit\"\n                        class=\"me-2 me-sm-3\"\n                        [routerLink]=\"[\n                                                    '/' +\n                                                        subscription?.slug +\n                                                        routers.contactDetails,\n                                                    contact.id\n                                                ]\">\n                        <i\n                                                    class=\"fa fa-edit edit-icon\"\n                                                    aria-hidden=\"true\"\n                                                ></i>\n                      </li>\n                      <li *ngIf=\"\n                                                    hasAccess ||\n                                                    contact.owner_id === userId ||\n                                                    contact.crm_account.owner_id === userId\n                                                \"\n                        ngbTooltip=\"Delete\"\n                        class=\"me-2 me-sm-3\">\n                        <i\n                                                    class=\"fa fa-trash delete-icon\"\n                                                    (click)=\"onDeleteContact(contact.id)\"\n                                                    aria-hidden=\"true\"\n                                                ></i>\n                      </li>\n                    </ul>\n                  </td>\n                </tr>\n              </ng-template>\n            </p-table>\n            <div *ngIf=\"totalRecords === 0 && totalRecordsUnFilter !== 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\">{{ 'Label.Total' | transloco }}: {{ totalRecords }}</span>\n          </div>\n          <div *ngIf=\"totalRecordsUnFilter === 0\">\n            <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.ContactsAdminMessage' | transloco\">\n            </pw-no-data>\n          </div>\n        </ng-template>\n      </li>\n      <li [ngbNavItem]=\"3\">\n        <a ngbNavLink>Versioning</a>\n        <ng-template ngbNavContent>\n          <div *ngFor=\"let versioning of accountVersioning\">\n            <p>\n              <strong>Event: </strong>{{ versioning.event }} |\n              <strong>Author: </strong><a *ngIf=\"versioning?.author\"\n                [routerLink]=\"['/members', versioning?.author?.slug]\">{{ versioning?.author | ifNameNullShowEmail }}</a>\n              | <strong>Created at: </strong>{{ versioning.created_at | dateFormat: 'datetime' }}<br />\n              <strong>Object: </strong>{{ versioning.object | json }}\n            </p>\n            <hr />\n          </div>\n          <div *ngIf=\"accountVersioning?.length === 0\">\n            <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoVersionsMessage' | transloco\">\n            </pw-no-data>\n          </div>\n        </ng-template>\n      </li>\n      <li [ngbNavItem]=\"4\">\n        <a ngbNavLink>Files</a>\n        <ng-template ngbNavContent>\n          <pw-smart-crm-company-files [accountId]=\"accountId\"></pw-smart-crm-company-files>\n        </ng-template>\n      </li>\n    </ul>\n    <div [ngbNavOutlet]=\"nav\"></div>\n  </div>\n</div>\n<ng-template #content\n  let-modal>\n  <div class=\"modal-header\">\n    <h3 class=\"modal-title mb-0 p-0\">{{ 'Upload File' | transloco }}</h3>\n    <button type=\"button\"\n      class=\"btn-close float-end\"\n      aria-label=\"Close\"\n      (click)=\"modal.dismiss()\">\n\n    </button>\n  </div>\n  <div class=\"modal-body\">\n    <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n    <div class=\"row p-2\">\n      <div class=\"col-12\">\n        <div class=\"upload-box\">\n          <div class=\"upload-box-content\">\n            <div class=\"drop-container\"\n              ngFileDrop\n              [options]=\"options\"\n              (uploadOutput)=\"onUploadOutput($event)\"\n              [uploadInput]=\"uploadInput\">\n              <p>\n                Drag files here or\n                <label class=\"upload-button\">\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_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.user-info .label{color:#777;font-size:14px;text-transform:capitalize}.user-info .user-value{border:0;border-bottom:1px solid rgb(119,119,119)}.user-info .user-value:focus{box-shadow:none}.user-info .user-value.is-invalid{border-color:#ff586b}.control-btns{display:none}.comment-field{border:0;border-bottom:1px solid rgb(242,242,242);color:#1769e1;display:none;font-size:15px;min-height:100px;padding:2px 5px!important}.comment-field:focus{border:1px solid rgb(23,105,225)!important;border-bottom:0;box-shadow:none}p{max-width:85%;white-space:pre-wrap}.auto-complete{display:none;margin-top:10px}.show-controls .comment-field,.show-controls .auto-complete,.show-controls .control-btns{display:block}.show-controls p,.show-controls .edit-btn,.show-controls .action-owner{display:none}select{appearance:none}textarea{resize:none}.clear-both{clear:both}.isDisabled input[type=text],.isDisabled 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}.timeline-container{height:700px;overflow-y:scroll}.action-btn.active{color:#fff!important;background-color:var(--first)}.form-action-buttons{margin-bottom:14px;margin-top:15px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]" }, { kind: "component", type: i4$1.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "directive", type: i5.LazyImgDirective, selector: "img" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "directive", type: i2$2.NgbNavContent, selector: "ng-template[ngbNavContent]" }, { kind: "directive", type: i2$2.NgbNav, selector: "[ngbNav]", inputs: ["activeId", "animation", "destroyOnHide", "orientation", "roles", "keyboard"], outputs: ["activeIdChange", "shown", "hidden", "navChange"], exportAs: ["ngbNav"] }, { kind: "directive", type: i2$2.NgbNavItem, selector: "[ngbNavItem]", inputs: ["destroyOnHide", "disabled", "domId", "ngbNavItem"], outputs: ["shown", "hidden"], exportAs: ["ngbNavItem"] }, { kind: "directive", type: i2$2.NgbNavItemRole, selector: "[ngbNavItem]:not(ng-container)" }, { kind: "directive", type: i2$2.NgbNavLink, selector: "a[ngbNavLink]" }, { kind: "directive", type: i2$2.NgbNavLinkBase, selector: "[ngbNavLink]" }, { kind: "component", type: i2$2.NgbNavOutlet, selector: "[ngbNavOutlet]", inputs: ["paneRole", "ngbNavOutlet"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i9.NgxGpAutocompleteDirective, selector: "[ngx-gp-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i8.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i7.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"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: i11.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText"] }, { kind: "component", type: i11.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i12$1.NgFileDropDirective, selector: "[ngFileDrop]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "directive", type: i12$1.NgFileSelectDirective, selector: "[ngFileSelect]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "directive", type: i17.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "component", type: SmartCrmCompanyFilesComponent, selector: "pw-smart-crm-company-files", inputs: ["accountId", "contactId", "opportunityId"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.JsonPipe, name: "json" }, { kind: "pipe", type: i2$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "pipe", type: i14.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i14.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i14.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmCompanyInfoComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }, { token: i2.SubscriptionService }, { token: i2.GeoService }, { token: i2.CommonService }, { token: i2$2.NgbModal }, { token: i2.AuthService }, { token: i0.ChangeDetectorRef }, { token: i2.LogoCacheService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmCompanyInfoComponent, selector: "pw-smart-crm-company-info", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 mb-0\">\n    <div class=\"me-auto mb-0\">\n      <h2 class=\"mb-0\">\n        <a href=\"javascript:void(0)\"\n          (click)=\"back()\"\n          class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n        Account Info\n      </h2>\n    </div>\n    <a class=\"btn btn-sm btn-outline-primary float-end mb-3\"\n      data-cy=\"add-opportunities\"\n      (click)=\"navigateToAddOpportunities()\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n    </a>\n  </div>\n  <div class=\"col-12 col-md-4\">\n    <div class=\"user-info p-3 card pb-0 h-auto\">\n      <div class=\"mb-2 text-center\">\n        <a class=\"profile-image\">\n          <img alt=\"Profile Image\"\n            width=\"100\"\n            height=\"100\"\n            [src]=\"getAccountLogo(data?.company_url)\"\n            class=\"img-fluid company-logo\"\n            onerror=\"this.onerror=null;this.src='assets/img/icons/company.png';\" />\n        </a>\n      </div>\n      <div class=\"mb-4 d-flex justify-content-between align-items-center\">\n        <h4 class=\"d-inline-block\">\n          About <span *ngIf=\"data?.id\">{{ data.name }}</span>\n        </h4>\n        <a href=\"javascript:void(0);\"\n          *ngIf=\"isFormEdit\"\n          class=\"btn btn-sm btn-outline-primary float-end\"\n          (click)=\"isFormEdit = !isFormEdit; this.getAllSubscriptionMembers()\">{{ 'Button.Edit' | transloco }}</a>\n      </div>\n      <form [formGroup]=\"aboutControls\"\n        [class.isDisabled]=\"isFormEdit\">\n        <div class=\"mb-3\">\n          <label class=\"label mb-0\">{{ 'Crm.AccountMessage.Name' | transloco }}</label>\n          <input type=\"text\"\n            class=\"form-control rounded-0 ps-1 user-value\"\n            formControlName=\"name\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['name'].errors }\" />\n        </div>\n        <div class=\"mb-3\">\n          <label class=\"label mb-0\">{{\n                        'Crm.AccountMessage.Location' | transloco\n                    }}</label>\n          <input ngx-gp-autocomplete\n            class=\"form-control rounded-0 ps-1 user-value\"\n            #places=\"ngx-places\"\n            formControlName=\"location\"\n            (onAddressChange)=\"handleAddressChange($event)\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['location'].errors }\" />\n        </div>\n        <div class=\"mb-3\"\n          *ngIf=\"countries$ | async as countries\">\n          <label>{{ 'Crm.AccountMessage.Country' | transloco\n                        }}<span class=\"text-danger\">*</span>\n          </label>\n          <select class=\"form-select\"\n            formControlName=\"country\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['country'].errors }\">\n            <option *ngFor=\"let country of countries\"\n              [value]=\"country.code\">\n              {{ country.name }}\n            </option>\n          </select>\n        </div>\n        <div class=\"mb-3 ui-fluid skills-modal\">\n          <label class=\"label mb-2\">{{ 'Crm.AccountMessage.Owner' | transloco }}</label>\n          <p class=\"form-control d-block pb-2 ps-1 user-value\"\n            *ngIf=\"isFormEdit && data?.owner_id\">\n            {{ data?.owner?.first_name }} {{ data?.owner?.last_name }}\n          </p>\n          <p-autoComplete *ngIf=\"!isFormEdit || !data?.owner_id\"\n            [suggestions]=\"filteredOwner\"\n            formControlName=\"owner_id\"\n            dataKey=\"id\"\n            field=\"first_name\"\n            [dropdown]=\"true\"\n            (completeMethod)=\"search($event)\"\n            styleClass=\"w-100\"\n            placeholder=\"Search owner\"\n            [multiple]=\"false\">\n          </p-autoComplete>\n        </div>\n        <div class=\"mb-3\">\n          <label class=\"label mb-0\">{{\n                        'Crm.AccountMessage.CompanyUrl' | transloco\n                    }}</label>\n          <a [href]=\"data?.company_url\"\n            target=\"blank\"\n            class=\"form-control d-block pb-2 ps-1 user-value\"\n            *ngIf=\"isFormEdit && data?.company_url\">{{ data?.company_url }}</a>\n          <input *ngIf=\"!isFormEdit || !data?.company_url\"\n            type=\"text\"\n            class=\"form-control rounded-0 ps-1 user-value\"\n            formControlName=\"company_url\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['company_url'].errors }\" />\n        </div>\n        <div class=\"mb-3\"\n          *ngIf=\"data?.tel\">\n          <label class=\"label mb-0\">{{ 'Crm.AccountMessage.Tel' | transloco }}</label>\n          <input type=\"text\"\n            class=\"form-control rounded-0 ps-1 user-value\"\n            formControlName=\"tel\" />\n        </div>\n        <div class=\"mb-3\"\n          *ngIf=\"organizationTypes$ | async as types\">\n          <label>{{ 'Organization.OrganizationType' | transloco }}</label>\n          <div class=\"mb-3\">\n            <select formControlName=\"organization_type_id\"\n              class=\"form-control form-select\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['organization_type_id'].errors }\">\n              <option *ngFor=\"let option of types['organization_types']\"\n                [value]=\"option.id\">\n                {{ option.name }}\n              </option>\n            </select>\n          </div>\n        </div>\n        <div class=\"mb-3\"\n          *ngIf=\"organizationIndustries$ | async as industries\">\n          <label>{{ 'Organization.OrganizationIndustry' | transloco }}</label>\n          <select formControlName=\"organization_industry_id\"\n            class=\"form-control form-select\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['organization_industry_id'].errors }\">\n            <option *ngFor=\"let option of industries['organization_industries']\"\n              [value]=\"option.id\">\n              {{ option.name }}\n            </option>\n          </select>\n        </div>\n        <div class=\"mb-3\"\n          *ngIf=\"organizationSizes$ | async as sizes\">\n          <label>{{ 'Crm.AccountMessage.Size' | transloco }}</label>\n          <select formControlName=\"organization_size_id\"\n            class=\"form-control form-select\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['organization_size_id'].errors }\">\n            <option *ngFor=\"let option of sizes['organization_sizes']\"\n              [value]=\"option.id\">\n              {{ option.name }}\n            </option>\n          </select>\n        </div>\n        <div class=\"mb-3\">\n          <label>{{ 'Crm.AccountMessage.Status' | transloco }}</label>\n          <select formControlName=\"status\"\n            class=\"form-control form-select\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['status'].errors }\">\n            <option *ngFor=\"let option of status\"\n              [value]=\"option\">{{ option }}</option>\n          </select>\n        </div>\n        <div class=\"mb-3\">\n          <label>{{ 'Crm.AccountMessage.Priority' | transloco }}</label>\n          <select formControlName=\"priority\"\n            class=\"form-control form-select\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['priority'].errors }\">\n            <option *ngFor=\"let option of priority\"\n              [value]=\"option\">\n              {{ option }}\n            </option>\n          </select>\n        </div>\n        <div class=\"mb-3\">\n          <label>{{ 'Crm.AccountMessage.Source' | transloco }}</label>\n          <select formControlName=\"crm_source_id\"\n            class=\"form-control form-select\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['crm_source_id'].errors }\">\n            <option *ngFor=\"let option of source\"\n              [value]=\"option.id\">\n              {{ option.name }}\n            </option>\n          </select>\n        </div>\n        <div class=\"mb-3\">\n          <pw-input-container [label]=\"'Crm.AccountMessage.Description' | transloco\"\n            name=\"description\">\n            <textarea rows=\"5\"\n              type=\"text\"\n              class=\"form-control\"\n              formControlName=\"description\"\n              id=\"description\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors }\"></textarea>\n          </pw-input-container>\n        </div>\n        <div *ngIf=\"!isFormEdit\"\n          class=\"text-end form-action-buttons\">\n          <input type=\"button\"\n            class=\"btn btn-outline-primary\"\n            (click)=\"isFormEdit = !isFormEdit; getAccountDetails()\"\n            value=\"Cancel\" />\n          <input type=\"button\"\n            class=\"btn btn-primary ms-3\"\n            value=\"Submit\"\n            (click)=\"updateAccountInfo()\" />\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)=\"onSave()\">\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 && actionControls.get('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=\"yyyy-mm-dd\"\n                      formControlName=\"when\"\n                      ngbDatepicker\n                      #d=\"ngbDatepicker\"\n                      (click)=\"d.toggle()\" />\n                  </div>\n                </div>\n                <div class=\"ui-fluid skills-modal col-sm-4 ps-0\">\n                  <p-autoComplete [suggestions]=\"filteredContact\"\n                    formControlName=\"crm_contact_id\"\n                    dataKey=\"id\"\n                    field=\"displayName\"\n                    [dropdown]=\"true\"\n                    (completeMethod)=\"searchContact($event)\"\n                    (onSelect)=\"selectContact($event)\"\n                    (onBlur)=\"OnContactBlur()\"\n                    styleClass=\"w-100\"\n                    placeholder=\"Search contact\"\n                    [multiple]=\"false\"\n                    (onDropdownClick)=\"onDropdownClick()\">\n                  </p-autoComplete>\n                </div>\n                <div class=\"col-sm-4 pe-0 completed-toggle\">\n                  <div class=\"mb-3\">\n                    <ui-switch 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              <a class=\"btn btn-outline-primary me-0 me-sm-2\"\n                (click)=\"openModal(content)\">{{ 'Upload file' | transloco }}</a>\n              <input type=\"submit\"\n                [disabled]=\"buttonDisable\"\n                class=\"btn btn-primary mt-2 mb-2\"\n                value=\"Submit Note\" />\n            </div>\n            <div *ngIf=\"buttonDisable\"\n              class=\"no-actions pt-4\">\n              <pw-no-data [withImage]=\"true\" [message]=\"\n                                    'Crm.AccountMessage.NoActionsInAccountInfoMessage' | transloco\n                                \">\n              </pw-no-data>\n            </div>\n          </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=\"!accountComments?.length && isLoaded\"\n            class=\"no-actions pt-2\">\n            <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoActionsMessage' | transloco\">\n            </pw-no-data>\n          </div>\n          <div *ngIf=\"accountComments?.length\">\n            <div id=\"timeline\"\n              class=\"pt-3 clear-both timeline-center timeline-wrapper timeline-container\"\n              infiniteScroll\n              [infiniteScrollDistance]=\"2\"\n              [infiniteScrollThrottle]=\"50\"\n              [infiniteScrollContainer]=\"selector\"\n              [fromRoot]=\"true\"\n              (scrolled)=\"onScrollTimeline()\">\n              <ul class=\"timeline\">\n                <li class=\"timeline-line\"></li>\n              </ul>\n              <ul class=\"timeline\">\n                <li class=\"timeline-line\"></li>\n                <li class=\"timeline-item\"\n                  [ngClass]=\"{ 'mt-5': odd || last }\"\n                  *ngFor=\"\n                                        let item of accountComments;\n                                        index as i;\n                                        let odd = odd;\n                                        let even = even;\n                                        let last = last;\n                                        let first = first\n                                    \">\n                  <div class=\"timeline-badge\">\n                    <span class=\"bg-red bg-lighten-1\">\n                      <span class=\"timeline-year\">\n                        <span class=\"d-block date-year\">{{\n                                                    item.when | date: 'medium' | slice: 0:3\n                                                }}</span>\n                        <span>{{ item.year }}</span></span>\n                    </span>\n                  </div>\n                  <div class=\"timeline-card shadow card pb-0 rounded border-grey border-lighten-2 position-static\">\n                    <div class=\"card-header py-4\">\n                      <div class=\"mb-0 clearfix\">\n                        <textarea type=\"text\"\n                          name=\"comment\"\n                          class=\"comment-field form-control p-0\"\n                          [(ngModel)]=\"item.comment\">{{ item.comment }}</textarea>\n                        <div class=\"auto-complete mb-3 ui-fluid skills-modal\">\n                          <p-autoComplete [(ngModel)]=\"item.crm_contact\"\n                            [suggestions]=\"filteredContactComment\"\n                            dataKey=\" id \"\n                            field=\"first_name\"\n                            dropdown=\" true \"\n                            (completeMethod)=\"\n                                                            searchContactInComment($event)\n                                                        \"\n                            (onSelect)=\"selectCommentContact($event)\"\n                            (onBlur)=\"OnContactBlur()\"\n                            styleClass=\" w-100 \"\n                            placeholder=\" Search contact \"\n                            [multiple]=\"false\"\n                            (onDropdownClick)=\"onDropdownClick()\">\n                          </p-autoComplete>\n                        </div>\n                        <p class=\"float-start mb-0\"\n                          *ngIf=\"\n                                                        !showFullComment || item.id !== commentId\n                                                    \">\n                          {{ item.comment | slice: 0:170\n                                                    }}<a *ngIf=\"item.comment.length > 170\"\n                            class=\"text-secondary\"\n                            (click)=\"\n                                                            showFullComment = true;\n                                                            commentId = item.id\n                                                        \">...show more\n                          </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 &&\n                                                            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, item)\"\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=\"yyyy-mm-dd\"\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                      <a class=\"text-secondary action-owner\"\n                        *ngIf=\"item.crm_contact\"\n                        [routerLink]=\"[\n                                                    '/' + subscription?.slug + routers.contactInfo,\n                                                    item.crm_contact.id\n                                                ]\">{{ item.crm_contact.first_name }}\n                        {{ item.crm_contact.last_name || '' }}</a>\n                      <p>\n                        By\n                        {{\n                                                    item.owner.first_name +\n                                                        ' ' +\n                                                        item.owner.last_name\n                                                }}\n                      </p>\n                      <span class=\"badge bg-primary\">{{\n                                                item?.crm_action?.name\n                                            }}</span>\n                      <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                        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\n                                                    class=\"fa fa-tasks completed\"\n                                                    aria-hidden=\"true\"\n                                                ></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                        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                        href=\"javascript:void(0);\"\n                        (click)=\"\n                                                    setAsCompletedOrUncompleted(\n                                                        item.id,\n                                                        item,\n                                                        item.completed\n                                                    )\n                                                \"\n                        class=\"ms-2\">\n                        <i\n                                                    class=\"far fa-window-close\"\n                                                    aria-hidden=\"true\"\n                                                ></i>\n                      </a>\n                      <div class=\"control-btns mt-3 text-end form-action-buttons\">\n                        <button type=\"button\"\n                          class=\"btn btn-sm btn-outline-default me-2\"\n                          (click)=\"showEditControls(undefined, '')\">\n                          {{ 'Button.Cancel' | transloco }}\n                        </button>\n                        <button class=\"btn btn-sm btn-primary\"\n                          type=\"button\"\n                          (click)=\"updateComment(item)\">\n                          {{ 'Button.Submit' | transloco }}\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </div>\n        </ng-template>\n      </li>\n      <li [ngbNavItem]=\"2\">\n        <a ngbNavLink>Contacts</a>\n        <ng-template ngbNavContent>\n          <div class=\"row\">\n            <div class=\"col-12 mb-3\">\n              <a class=\"btn btn-sm btn-outline-primary float-end\"\n                data-cy=\"add-contact\"\n                [routerLink]=\"[\n                                    '/' + subscription?.slug + routers.contactAdd,\n                                    accountId\n                                ]\">\n                <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n                {{ 'Crm.ContactMessage.AddContact' | transloco }}\n              </a>\n            </div>\n          </div>\n          <div class=\"primeng-datatable-container table-responsive\"\n            [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n            <p-table class=\"table\"\n              #dt\n              [value]=\"contacts\"\n              [paginator]=\"true\"\n              [rows]=\"PAGE_SIZE\"\n              [totalRecords]=\"totalRecords\"\n              [loading]=\"loading\"\n              [lazy]=\"true\"\n              (onLazyLoad)=\"onLazyLoad($event)\"\n              [customSort]=\"true\">\n              <ng-template pTemplate=\"caption\">\n                <div class=\"text-end\">\n                  <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n                  <input type=\"text\"\n                    [(ngModel)]=\"searchText\"\n                    pInputText\n                    size=\"50\"\n                    placeholder=\"Search contact...\"\n                    (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n                    class=\"mw-90\" />\n                </div>\n              </ng-template>\n              <ng-template pTemplate=\"header\">\n                <tr>\n                  <th scope=\"true\"\n                    pSortableColumn=\"first_name\">\n                    {{ 'Label.Name' | transloco }}\n                    <p-sortIcon field=\"first_name\"></p-sortIcon>\n                  </th>\n                  <th scope=\"true\"\n                    pSortableColumn=\"owner_id\">\n                    {{ 'Crm.ContactMessage.ContactOwner' | transloco }}\n                    <p-sortIcon field=\"owner_id\"></p-sortIcon>\n                  </th>\n                  <th scope=\"true\"\n                    pSortableColumn=\"headline\">\n                    {{ 'Crm.ContactMessage.Headline' | transloco }}\n                    <p-sortIcon field=\"headline\"></p-sortIcon>\n                  </th>\n                  <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n                </tr>\n              </ng-template>\n              <ng-template pTemplate=\"body\"\n                let-contact>\n                <tr>\n                  <td data-head=\"Name\"\n                    class=\"contactname\">\n                    <a [routerLink]=\"[\n                                                '/' + subscription?.slug + routers.contactInfo,\n                                                contact.id\n                                            ]\">{{\n                                                contact.first_name + ' ' + contact.last_name\n                                                    | textTruncate: 20\n                                            }}</a>\n                  </td>\n                  <td data-head=\"OwnerName\">\n                    {{ contact.owner | ifNameNullShowEmail }}\n                  </td>\n                  <td data-head=\"Headline\"\n                    class=\"headline-content\">\n                    {{ contact?.headline | textTruncate: 20 }}\n                  </td>\n                  <td data-head=\"Action\">\n                    <ul class=\"list-unstyled list-inline\">\n                      <li ngbTooltip=\"Show\"\n                        class=\"me-2 me-sm-3\"\n                        [routerLink]=\"[\n                                                    '/' + subscription?.slug + routers.contactInfo,\n                                                    contact.id\n                                                ]\">\n                        <i\n                                                    class=\"fa fa-eye see-icon\"\n                                                    aria-hidden=\"true\"\n                                                ></i>\n                      </li>\n                      <li *ngIf=\"\n                                                    hasAccess ||\n                                                    contact.owner_id === userId ||\n                                                    contact.crm_account.owner_id === userId\n                                                \"\n                        ngbTooltip=\"Add opportunity\"\n                        class=\"me-2 me-sm-3\"\n                        [routerLink]=\"[\n                                                    '/' +\n                                                        subscription?.slug +\n                                                        routers.opportunityAdd\n                                                ]\"\n                        [queryParams]=\"{ contact_id: contact.id }\">\n                        <i\n                                                    class=\"fa fa-plus-circle add-icon\"\n                                                    aria-hidden=\"true\"\n                                                ></i>\n                      </li>\n                      <li *ngIf=\"\n                                                    hasAccess ||\n                                                    contact.owner_id === userId ||\n                                                    contact.crm_account.owner_id === userId\n                                                \"\n                        ngbTooltip=\"Edit\"\n                        class=\"me-2 me-sm-3\"\n                        [routerLink]=\"[\n                                                    '/' +\n                                                        subscription?.slug +\n                                                        routers.contactDetails,\n                                                    contact.id\n                                                ]\">\n                        <i\n                                                    class=\"fa fa-edit edit-icon\"\n                                                    aria-hidden=\"true\"\n                                                ></i>\n                      </li>\n                      <li *ngIf=\"\n                                                    hasAccess ||\n                                                    contact.owner_id === userId ||\n                                                    contact.crm_account.owner_id === userId\n                                                \"\n                        ngbTooltip=\"Delete\"\n                        class=\"me-2 me-sm-3\">\n                        <i\n                                                    class=\"fa fa-trash delete-icon\"\n                                                    (click)=\"onDeleteContact(contact.id)\"\n                                                    aria-hidden=\"true\"\n                                                ></i>\n                      </li>\n                    </ul>\n                  </td>\n                </tr>\n              </ng-template>\n            </p-table>\n            <div *ngIf=\"totalRecords === 0 && totalRecordsUnFiltered !== 0\">\n              <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n            </div>\n            <span class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{ totalRecords }}</span>\n          </div>\n          <div *ngIf=\"totalRecordsUnFiltered === 0\">\n            <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.ContactsAdminMessage' | transloco\">\n            </pw-no-data>\n          </div>\n        </ng-template>\n      </li>\n      <li [ngbNavItem]=\"3\">\n        <a ngbNavLink>Versioning</a>\n        <ng-template ngbNavContent>\n          <div *ngFor=\"let versioning of accountVersioning\">\n            <p>\n              <strong>Event: </strong>{{ versioning.event }} |\n              <strong>Author: </strong><a *ngIf=\"versioning?.author\"\n                [routerLink]=\"['/members', versioning?.author?.slug]\">{{ versioning?.author | ifNameNullShowEmail }}</a>\n              | <strong>Created at: </strong>{{ versioning.created_at | dateFormat: 'datetime' }}<br />\n              <strong>Object: </strong>{{ versioning.object | json }}\n            </p>\n            <hr />\n          </div>\n          <div *ngIf=\"accountVersioning?.length === 0\">\n            <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoVersionsMessage' | transloco\">\n            </pw-no-data>\n          </div>\n        </ng-template>\n      </li>\n      <li [ngbNavItem]=\"4\">\n        <a ngbNavLink>Files</a>\n        <ng-template ngbNavContent>\n          <pw-smart-crm-company-files [accountId]=\"accountId\"></pw-smart-crm-company-files>\n        </ng-template>\n      </li>\n    </ul>\n    <div [ngbNavOutlet]=\"nav\"></div>\n  </div>\n</div>\n<ng-template #content\n  let-modal>\n  <div class=\"modal-header\">\n    <h3 class=\"modal-title mb-0 p-0\">{{ 'Upload File' | transloco }}</h3>\n    <button type=\"button\"\n      class=\"btn-close float-end\"\n      aria-label=\"Close\"\n      (click)=\"modal.dismiss()\">\n\n    </button>\n  </div>\n  <div class=\"modal-body\">\n    <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n    <div class=\"row p-2\">\n      <div class=\"col-12\">\n        <div class=\"upload-box\">\n          <div class=\"upload-box-content\">\n            <div class=\"drop-container\"\n              ngFileDrop\n              [options]=\"options\"\n              (uploadOutput)=\"onUploadOutput($event)\"\n              [uploadInput]=\"uploadInput\">\n              <p>\n                Drag files here or\n                <label class=\"upload-button\">\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_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.user-info .label{color:#777;font-size:14px;text-transform:capitalize}.user-info .user-value{border:0;border-bottom:1px solid rgb(119,119,119)}.user-info .user-value:focus{box-shadow:none}.user-info .user-value.is-invalid{border-color:#ff586b}.control-btns{display:none}.comment-field{border:0;border-bottom:1px solid rgb(242,242,242);color:#1769e1;display:none;font-size:15px;min-height:100px;padding:2px 5px!important}.comment-field:focus{border:1px solid rgb(23,105,225)!important;border-bottom:0;box-shadow:none}p{max-width:85%;white-space:pre-wrap}.auto-complete{display:none;margin-top:10px}.show-controls .comment-field,.show-controls .auto-complete,.show-controls .control-btns{display:block}.show-controls p,.show-controls .edit-btn,.show-controls .action-owner{display:none}select{appearance:none}textarea{resize:none}.clear-both{clear:both}.isDisabled input[type=text],.isDisabled 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}.timeline-container{height:700px;overflow-y:scroll}.action-btn.active{color:#fff!important;background-color:var(--first)}.form-action-buttons{margin-bottom:14px;margin-top:15px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "component", type: i4$1.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "directive", type: i5.LazyImgDirective, selector: "img" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "directive", type: i2$2.NgbNavContent, selector: "ng-template[ngbNavContent]" }, { kind: "directive", type: i2$2.NgbNav, selector: "[ngbNav]", inputs: ["activeId", "animation", "destroyOnHide", "orientation", "roles", "keyboard"], outputs: ["activeIdChange", "shown", "hidden", "navChange"], exportAs: ["ngbNav"] }, { kind: "directive", type: i2$2.NgbNavItem, selector: "[ngbNavItem]", inputs: ["destroyOnHide", "disabled", "domId", "ngbNavItem"], outputs: ["shown", "hidden"], exportAs: ["ngbNavItem"] }, { kind: "directive", type: i2$2.NgbNavItemRole, selector: "[ngbNavItem]:not(ng-container)" }, { kind: "directive", type: i2$2.NgbNavLink, selector: "a[ngbNavLink]" }, { kind: "directive", type: i2$2.NgbNavLinkBase, selector: "[ngbNavLink]" }, { kind: "component", type: i2$2.NgbNavOutlet, selector: "[ngbNavOutlet]", inputs: ["paneRole", "ngbNavOutlet"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i9.NgxGpAutocompleteDirective, selector: "[ngx-gp-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i8.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i7.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.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText"] }, { kind: "component", type: i11.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i12$1.NgFileDropDirective, selector: "[ngFileDrop]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "directive", type: i12$1.NgFileSelectDirective, selector: "[ngFileSelect]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "directive", type: i17.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "component", type: SmartCrmCompanyFilesComponent, selector: "pw-smart-crm-company-files", inputs: ["accountId", "contactId", "opportunityId"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.JsonPipe, name: "json" }, { kind: "pipe", type: i2$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "pipe", type: i14.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i14.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i14.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmCompanyInfoComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmCompanyInfoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-smart-crm-company-info', 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 href=\"javascript:void(0)\"\n          (click)=\"back()\"\n          class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n        Account Info\n      </h2>\n    </div>\n    <a class=\"btn btn-sm btn-outline-primary float-end mb-3\"\n      data-cy=\"add-opportunities\"\n      (click)=\"navigateToAddOpportunities()\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n    </a>\n  </div>\n  <div class=\"col-12 col-md-4\">\n    <div class=\"user-info p-3 card pb-0 h-auto\">\n      <div class=\"mb-2 text-center\">\n        <a class=\"profile-image\">\n          <img alt=\"Profile Image\"\n            width=\"100\"\n            height=\"100\"\n            [src]=\"getAccountLogo(data?.company_url)\"\n            class=\"img-fluid company-logo\"\n            onerror=\"this.onerror=null;this.src='assets/img/icons/company.png';\" />\n        </a>\n      </div>\n      <div class=\"mb-4 d-flex justify-content-between align-items-center\">\n        <h4 class=\"d-inline-block\">\n          About <span *ngIf=\"data?.id\">{{ data.name }}</span>\n        </h4>\n        <a href=\"javascript:void(0);\"\n          *ngIf=\"isFormEdit\"\n          class=\"btn btn-sm btn-outline-primary float-end\"\n          (click)=\"isFormEdit = !isFormEdit; this.getAllSubscriptionMembers()\">{{ 'Button.Edit' | transloco }}</a>\n      </div>\n      <form [formGroup]=\"aboutControls\"\n        [class.isDisabled]=\"isFormEdit\">\n        <div class=\"mb-3\">\n          <label class=\"label mb-0\">{{ 'Crm.AccountMessage.Name' | transloco }}</label>\n          <input type=\"text\"\n            class=\"form-control rounded-0 ps-1 user-value\"\n            formControlName=\"name\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['name'].errors }\" />\n        </div>\n        <div class=\"mb-3\">\n          <label class=\"label mb-0\">{{\n                        'Crm.AccountMessage.Location' | transloco\n                    }}</label>\n          <input ngx-gp-autocomplete\n            class=\"form-control rounded-0 ps-1 user-value\"\n            #places=\"ngx-places\"\n            formControlName=\"location\"\n            (onAddressChange)=\"handleAddressChange($event)\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['location'].errors }\" />\n        </div>\n        <div class=\"mb-3\"\n          *ngIf=\"countries$ | async as countries\">\n          <label>{{ 'Crm.AccountMessage.Country' | transloco\n                        }}<span class=\"text-danger\">*</span>\n          </label>\n          <select class=\"form-select\"\n            formControlName=\"country\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['country'].errors }\">\n            <option *ngFor=\"let country of countries\"\n              [value]=\"country.code\">\n              {{ country.name }}\n            </option>\n          </select>\n        </div>\n        <div class=\"mb-3 ui-fluid skills-modal\">\n          <label class=\"label mb-2\">{{ 'Crm.AccountMessage.Owner' | transloco }}</label>\n          <p class=\"form-control d-block pb-2 ps-1 user-value\"\n            *ngIf=\"isFormEdit && data?.owner_id\">\n            {{ data?.owner?.first_name }} {{ data?.owner?.last_name }}\n          </p>\n          <p-autoComplete *ngIf=\"!isFormEdit || !data?.owner_id\"\n            [suggestions]=\"filteredOwner\"\n            formControlName=\"owner_id\"\n            dataKey=\"id\"\n            field=\"first_name\"\n            [dropdown]=\"true\"\n            (completeMethod)=\"search($event)\"\n            styleClass=\"w-100\"\n            placeholder=\"Search owner\"\n            [multiple]=\"false\">\n          </p-autoComplete>\n        </div>\n        <div class=\"mb-3\">\n          <label class=\"label mb-0\">{{\n                        'Crm.AccountMessage.CompanyUrl' | transloco\n                    }}</label>\n          <a [href]=\"data?.company_url\"\n            target=\"blank\"\n            class=\"form-control d-block pb-2 ps-1 user-value\"\n            *ngIf=\"isFormEdit && data?.company_url\">{{ data?.company_url }}</a>\n          <input *ngIf=\"!isFormEdit || !data?.company_url\"\n            type=\"text\"\n            class=\"form-control rounded-0 ps-1 user-value\"\n            formControlName=\"company_url\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['company_url'].errors }\" />\n        </div>\n        <div class=\"mb-3\"\n          *ngIf=\"data?.tel\">\n          <label class=\"label mb-0\">{{ 'Crm.AccountMessage.Tel' | transloco }}</label>\n          <input type=\"text\"\n            class=\"form-control rounded-0 ps-1 user-value\"\n            formControlName=\"tel\" />\n        </div>\n        <div class=\"mb-3\"\n          *ngIf=\"organizationTypes$ | async as types\">\n          <label>{{ 'Organization.OrganizationType' | transloco }}</label>\n          <div class=\"mb-3\">\n            <select formControlName=\"organization_type_id\"\n              class=\"form-control form-select\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['organization_type_id'].errors }\">\n              <option *ngFor=\"let option of types['organization_types']\"\n                [value]=\"option.id\">\n                {{ option.name }}\n              </option>\n            </select>\n          </div>\n        </div>\n        <div class=\"mb-3\"\n          *ngIf=\"organizationIndustries$ | async as industries\">\n          <label>{{ 'Organization.OrganizationIndustry' | transloco }}</label>\n          <select formControlName=\"organization_industry_id\"\n            class=\"form-control form-select\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['organization_industry_id'].errors }\">\n            <option *ngFor=\"let option of industries['organization_industries']\"\n              [value]=\"option.id\">\n              {{ option.name }}\n            </option>\n          </select>\n        </div>\n        <div class=\"mb-3\"\n          *ngIf=\"organizationSizes$ | async as sizes\">\n          <label>{{ 'Crm.AccountMessage.Size' | transloco }}</label>\n          <select formControlName=\"organization_size_id\"\n            class=\"form-control form-select\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['organization_size_id'].errors }\">\n            <option *ngFor=\"let option of sizes['organization_sizes']\"\n              [value]=\"option.id\">\n              {{ option.name }}\n            </option>\n          </select>\n        </div>\n        <div class=\"mb-3\">\n          <label>{{ 'Crm.AccountMessage.Status' | transloco }}</label>\n          <select formControlName=\"status\"\n            class=\"form-control form-select\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['status'].errors }\">\n            <option *ngFor=\"let option of status\"\n              [value]=\"option\">{{ option }}</option>\n          </select>\n        </div>\n        <div class=\"mb-3\">\n          <label>{{ 'Crm.AccountMessage.Priority' | transloco }}</label>\n          <select formControlName=\"priority\"\n            class=\"form-control form-select\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['priority'].errors }\">\n            <option *ngFor=\"let option of priority\"\n              [value]=\"option\">\n              {{ option }}\n            </option>\n          </select>\n        </div>\n        <div class=\"mb-3\">\n          <label>{{ 'Crm.AccountMessage.Source' | transloco }}</label>\n          <select formControlName=\"crm_source_id\"\n            class=\"form-control form-select\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['crm_source_id'].errors }\">\n            <option *ngFor=\"let option of source\"\n              [value]=\"option.id\">\n              {{ option.name }}\n            </option>\n          </select>\n        </div>\n        <div class=\"mb-3\">\n          <pw-input-container [label]=\"'Crm.AccountMessage.Description' | transloco\"\n            name=\"description\">\n            <textarea rows=\"5\"\n              type=\"text\"\n              class=\"form-control\"\n              formControlName=\"description\"\n              id=\"description\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors }\"></textarea>\n          </pw-input-container>\n        </div>\n        <div *ngIf=\"!isFormEdit\"\n          class=\"text-end form-action-buttons\">\n          <input type=\"button\"\n            class=\"btn btn-outline-primary\"\n            (click)=\"isFormEdit = !isFormEdit; getAccountDetails()\"\n            value=\"Cancel\" />\n          <input type=\"button\"\n            class=\"btn btn-primary ms-3\"\n            value=\"Submit\"\n            (click)=\"updateAccountInfo()\" />\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)=\"onSave()\">\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 && actionControls.get('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=\"yyyy-mm-dd\"\n                      formControlName=\"when\"\n                      ngbDatepicker\n                      #d=\"ngbDatepicker\"\n                      (click)=\"d.toggle()\" />\n                  </div>\n                </div>\n                <div class=\"ui-fluid skills-modal col-sm-4 ps-0\">\n                  <p-autoComplete [suggestions]=\"filteredContact\"\n                    formControlName=\"crm_contact_id\"\n                    dataKey=\"id\"\n                    field=\"displayName\"\n                    [dropdown]=\"true\"\n                    (completeMethod)=\"searchContact($event)\"\n                    (onSelect)=\"selectContact($event)\"\n                    (onBlur)=\"OnContactBlur()\"\n                    styleClass=\"w-100\"\n                    placeholder=\"Search contact\"\n                    [multiple]=\"false\"\n                    (onDropdownClick)=\"onDropdownClick()\">\n                  </p-autoComplete>\n                </div>\n                <div class=\"col-sm-4 pe-0 completed-toggle\">\n                  <div class=\"mb-3\">\n                    <ui-switch 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              <a class=\"btn btn-outline-primary me-0 me-sm-2\"\n                (click)=\"openModal(content)\">{{ 'Upload file' | transloco }}</a>\n              <input type=\"submit\"\n                [disabled]=\"buttonDisable\"\n                class=\"btn btn-primary mt-2 mb-2\"\n                value=\"Submit Note\" />\n            </div>\n            <div *ngIf=\"buttonDisable\"\n              class=\"no-actions pt-4\">\n              <pw-no-data [withImage]=\"true\" [message]=\"\n                                    'Crm.AccountMessage.NoActionsInAccountInfoMessage' | transloco\n                                \">\n              </pw-no-data>\n            </div>\n          </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=\"!accountComments?.length && isLoaded\"\n            class=\"no-actions pt-2\">\n            <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoActionsMessage' | transloco\">\n            </pw-no-data>\n          </div>\n          <div *ngIf=\"accountComments?.length\">\n            <div id=\"timeline\"\n              class=\"pt-3 clear-both timeline-center timeline-wrapper timeline-container\"\n              infiniteScroll\n              [infiniteScrollDistance]=\"2\"\n              [infiniteScrollThrottle]=\"50\"\n              [infiniteScrollContainer]=\"selector\"\n              [fromRoot]=\"true\"\n              (scrolled)=\"onScrollTimeline()\">\n              <ul class=\"timeline\">\n                <li class=\"timeline-line\"></li>\n              </ul>\n              <ul class=\"timeline\">\n                <li class=\"timeline-line\"></li>\n                <li class=\"timeline-item\"\n                  [ngClass]=\"{ 'mt-5': odd || last }\"\n                  *ngFor=\"\n                                        let item of accountComments;\n                                        index as i;\n                                        let odd = odd;\n                                        let even = even;\n                                        let last = last;\n                                        let first = first\n                                    \">\n                  <div class=\"timeline-badge\">\n                    <span class=\"bg-red bg-lighten-1\">\n                      <span class=\"timeline-year\">\n                        <span class=\"d-block date-year\">{{\n                                                    item.when | date: 'medium' | slice: 0:3\n                                                }}</span>\n                        <span>{{ item.year }}</span></span>\n                    </span>\n                  </div>\n                  <div class=\"timeline-card shadow card pb-0 rounded border-grey border-lighten-2 position-static\">\n                    <div class=\"card-header py-4\">\n                      <div class=\"mb-0 clearfix\">\n                        <textarea type=\"text\"\n                          name=\"comment\"\n                          class=\"comment-field form-control p-0\"\n                          [(ngModel)]=\"item.comment\">{{ item.comment }}</textarea>\n                        <div class=\"auto-complete mb-3 ui-fluid skills-modal\">\n                          <p-autoComplete [(ngModel)]=\"item.crm_contact\"\n                            [suggestions]=\"filteredContactComment\"\n                            dataKey=\" id \"\n                            field=\"first_name\"\n                            dropdown=\" true \"\n                            (completeMethod)=\"\n                                                            searchContactInComment($event)\n                                                        \"\n                            (onSelect)=\"selectCommentContact($event)\"\n                            (onBlur)=\"OnContactBlur()\"\n                            styleClass=\" w-100 \"\n                            placeholder=\" Search contact \"\n                            [multiple]=\"false\"\n                            (onDropdownClick)=\"onDropdownClick()\">\n                          </p-autoComplete>\n                        </div>\n                        <p class=\"float-start mb-0\"\n                          *ngIf=\"\n                                                        !showFullComment || item.id !== commentId\n                                                    \">\n                          {{ item.comment | slice: 0:170\n                                                    }}<a *ngIf=\"item.comment.length > 170\"\n                            class=\"text-secondary\"\n                            (click)=\"\n                                                            showFullComment = true;\n                                                            commentId = item.id\n                                                        \">...show more\n                          </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 &&\n                                                            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, item)\"\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=\"yyyy-mm-dd\"\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                      <a class=\"text-secondary action-owner\"\n                        *ngIf=\"item.crm_contact\"\n                        [routerLink]=\"[\n                                                    '/' + subscription?.slug + routers.contactInfo,\n                                                    item.crm_contact.id\n                                                ]\">{{ item.crm_contact.first_name }}\n                        {{ item.crm_contact.last_name || '' }}</a>\n                      <p>\n                        By\n                        {{\n                                                    item.owner.first_name +\n                                                        ' ' +\n                                                        item.owner.last_name\n                                                }}\n                      </p>\n                      <span class=\"badge bg-primary\">{{\n                                                item?.crm_action?.name\n                                            }}</span>\n                      <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                        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\n                                                    class=\"fa fa-tasks completed\"\n                                                    aria-hidden=\"true\"\n                                                ></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                        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                        href=\"javascript:void(0);\"\n                        (click)=\"\n                                                    setAsCompletedOrUncompleted(\n                                                        item.id,\n                                                        item,\n                                                        item.completed\n                                                    )\n                                                \"\n                        class=\"ms-2\">\n                        <i\n                                                    class=\"far fa-window-close\"\n                                                    aria-hidden=\"true\"\n                                                ></i>\n                      </a>\n                      <div class=\"control-btns mt-3 text-end form-action-buttons\">\n                        <button type=\"button\"\n                          class=\"btn btn-sm btn-outline-default me-2\"\n                          (click)=\"showEditControls(undefined, '')\">\n                          {{ 'Button.Cancel' | transloco }}\n                        </button>\n                        <button class=\"btn btn-sm btn-primary\"\n                          type=\"button\"\n                          (click)=\"updateComment(item)\">\n                          {{ 'Button.Submit' | transloco }}\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </div>\n        </ng-template>\n      </li>\n      <li [ngbNavItem]=\"2\">\n        <a ngbNavLink>Contacts</a>\n        <ng-template ngbNavContent>\n          <div class=\"row\">\n            <div class=\"col-12 mb-3\">\n              <a class=\"btn btn-sm btn-outline-primary float-end\"\n                data-cy=\"add-contact\"\n                [routerLink]=\"[\n                                    '/' + subscription?.slug + routers.contactAdd,\n                                    accountId\n                                ]\">\n                <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n                {{ 'Crm.ContactMessage.AddContact' | transloco }}\n              </a>\n            </div>\n          </div>\n          <div class=\"primeng-datatable-container table-responsive\"\n            [class.hideTable]=\"totalRecordsUnFilter === 0\">\n            <p-table class=\"table\"\n              #dt\n              [value]=\"contacts\"\n              [paginator]=\"true\"\n              [rows]=\"PAGE_SIZE\"\n              [totalRecords]=\"totalRecords\"\n              [loading]=\"loading\"\n              [lazy]=\"true\"\n              (onLazyLoad)=\"onLazyLoad($event)\"\n              [customSort]=\"true\">\n              <ng-template pTemplate=\"caption\">\n                <div class=\"text-end\">\n                  <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n                  <input type=\"text\"\n                    [(ngModel)]=\"searchText\"\n                    pInputText\n                    size=\"50\"\n                    placeholder=\"Search contact...\"\n                    (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n                    class=\"mw-90\" />\n                </div>\n              </ng-template>\n              <ng-template pTemplate=\"header\">\n                <tr>\n                  <th scope=\"true\"\n                    pSortableColumn=\"first_name\">\n                    {{ 'Label.Name' | transloco }}\n                    <p-sortIcon field=\"first_name\"></p-sortIcon>\n                  </th>\n                  <th scope=\"true\"\n                    pSortableColumn=\"owner_id\">\n                    {{ 'Crm.ContactMessage.ContactOwner' | transloco }}\n                    <p-sortIcon field=\"owner_id\"></p-sortIcon>\n                  </th>\n                  <th scope=\"true\"\n                    pSortableColumn=\"headline\">\n                    {{ 'Crm.ContactMessage.Headline' | transloco }}\n                    <p-sortIcon field=\"headline\"></p-sortIcon>\n                  </th>\n                  <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n                </tr>\n              </ng-template>\n              <ng-template pTemplate=\"body\"\n                let-contact>\n                <tr>\n                  <td data-head=\"Name\"\n                    class=\"contactname\">\n                    <a [routerLink]=\"[\n                                                '/' + subscription?.slug + routers.contactInfo,\n                                                contact.id\n                                            ]\">{{\n                                                contact.first_name + ' ' + contact.last_name\n                                                    | textTruncate: 20\n                                            }}</a>\n                  </td>\n                  <td data-head=\"OwnerName\">\n                    {{ contact.owner | ifNameNullShowEmail }}\n                  </td>\n                  <td data-head=\"Headline\"\n                    class=\"headline-content\">\n                    {{ contact?.headline | textTruncate: 20 }}\n                  </td>\n                  <td data-head=\"Action\">\n                    <ul class=\"list-unstyled list-inline\">\n                      <li ngbTooltip=\"Show\"\n                        class=\"me-2 me-sm-3\"\n                        [routerLink]=\"[\n                                                    '/' + subscription?.slug + routers.contactInfo,\n                                                    contact.id\n                                                ]\">\n                        <i\n                                                    class=\"fa fa-eye see-icon\"\n                                                    aria-hidden=\"true\"\n                                                ></i>\n                      </li>\n                      <li *ngIf=\"\n                                                    hasAccess ||\n                                                    contact.owner_id === userId ||\n                                                    contact.crm_account.owner_id === userId\n                                                \"\n                        ngbTooltip=\"Add opportunity\"\n                        class=\"me-2 me-sm-3\"\n                        [routerLink]=\"[\n                                                    '/' +\n                                                        subscription?.slug +\n                                                        routers.opportunityAdd\n                                                ]\"\n                        [queryParams]=\"{ contact_id: contact.id }\">\n                        <i\n                                                    class=\"fa fa-plus-circle add-icon\"\n                                                    aria-hidden=\"true\"\n                                                ></i>\n                      </li>\n                      <li *ngIf=\"\n                                                    hasAccess ||\n                                                    contact.owner_id === userId ||\n                                                    contact.crm_account.owner_id === userId\n                                                \"\n                        ngbTooltip=\"Edit\"\n                        class=\"me-2 me-sm-3\"\n                        [routerLink]=\"[\n                                                    '/' +\n                                                        subscription?.slug +\n                                                        routers.contactDetails,\n                                                    contact.id\n                                                ]\">\n                        <i\n                                                    class=\"fa fa-edit edit-icon\"\n                                                    aria-hidden=\"true\"\n                                                ></i>\n                      </li>\n                      <li *ngIf=\"\n                                                    hasAccess ||\n                                                    contact.owner_id === userId ||\n                                                    contact.crm_account.owner_id === userId\n                                                \"\n                        ngbTooltip=\"Delete\"\n                        class=\"me-2 me-sm-3\">\n                        <i\n                                                    class=\"fa fa-trash delete-icon\"\n                                                    (click)=\"onDeleteContact(contact.id)\"\n                                                    aria-hidden=\"true\"\n                                                ></i>\n                      </li>\n                    </ul>\n                  </td>\n                </tr>\n              </ng-template>\n            </p-table>\n            <div *ngIf=\"totalRecords === 0 && totalRecordsUnFilter !== 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\">{{ 'Label.Total' | transloco }}: {{ totalRecords }}</span>\n          </div>\n          <div *ngIf=\"totalRecordsUnFilter === 0\">\n            <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.ContactsAdminMessage' | transloco\">\n            </pw-no-data>\n          </div>\n        </ng-template>\n      </li>\n      <li [ngbNavItem]=\"3\">\n        <a ngbNavLink>Versioning</a>\n        <ng-template ngbNavContent>\n          <div *ngFor=\"let versioning of accountVersioning\">\n            <p>\n              <strong>Event: </strong>{{ versioning.event }} |\n              <strong>Author: </strong><a *ngIf=\"versioning?.author\"\n                [routerLink]=\"['/members', versioning?.author?.slug]\">{{ versioning?.author | ifNameNullShowEmail }}</a>\n              | <strong>Created at: </strong>{{ versioning.created_at | dateFormat: 'datetime' }}<br />\n              <strong>Object: </strong>{{ versioning.object | json }}\n            </p>\n            <hr />\n          </div>\n          <div *ngIf=\"accountVersioning?.length === 0\">\n            <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoVersionsMessage' | transloco\">\n            </pw-no-data>\n          </div>\n        </ng-template>\n      </li>\n      <li [ngbNavItem]=\"4\">\n        <a ngbNavLink>Files</a>\n        <ng-template ngbNavContent>\n          <pw-smart-crm-company-files [accountId]=\"accountId\"></pw-smart-crm-company-files>\n        </ng-template>\n      </li>\n    </ul>\n    <div [ngbNavOutlet]=\"nav\"></div>\n  </div>\n</div>\n<ng-template #content\n  let-modal>\n  <div class=\"modal-header\">\n    <h3 class=\"modal-title mb-0 p-0\">{{ 'Upload File' | transloco }}</h3>\n    <button type=\"button\"\n      class=\"btn-close float-end\"\n      aria-label=\"Close\"\n      (click)=\"modal.dismiss()\">\n\n    </button>\n  </div>\n  <div class=\"modal-body\">\n    <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n    <div class=\"row p-2\">\n      <div class=\"col-12\">\n        <div class=\"upload-box\">\n          <div class=\"upload-box-content\">\n            <div class=\"drop-container\"\n              ngFileDrop\n              [options]=\"options\"\n              (uploadOutput)=\"onUploadOutput($event)\"\n              [uploadInput]=\"uploadInput\">\n              <p>\n                Drag files here or\n                <label class=\"upload-button\">\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_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.user-info .label{color:#777;font-size:14px;text-transform:capitalize}.user-info .user-value{border:0;border-bottom:1px solid rgb(119,119,119)}.user-info .user-value:focus{box-shadow:none}.user-info .user-value.is-invalid{border-color:#ff586b}.control-btns{display:none}.comment-field{border:0;border-bottom:1px solid rgb(242,242,242);color:#1769e1;display:none;font-size:15px;min-height:100px;padding:2px 5px!important}.comment-field:focus{border:1px solid rgb(23,105,225)!important;border-bottom:0;box-shadow:none}p{max-width:85%;white-space:pre-wrap}.auto-complete{display:none;margin-top:10px}.show-controls .comment-field,.show-controls .auto-complete,.show-controls .control-btns{display:block}.show-controls p,.show-controls .edit-btn,.show-controls .action-owner{display:none}select{appearance:none}textarea{resize:none}.clear-both{clear:both}.isDisabled input[type=text],.isDisabled 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}.timeline-container{height:700px;overflow-y:scroll}.action-btn.active{color:#fff!important;background-color:var(--first)}.form-action-buttons{margin-bottom:14px;margin-top:15px}\n"] }]
+            args: [{ selector: 'pw-smart-crm-company-info', 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 href=\"javascript:void(0)\"\n          (click)=\"back()\"\n          class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n        Account Info\n      </h2>\n    </div>\n    <a class=\"btn btn-sm btn-outline-primary float-end mb-3\"\n      data-cy=\"add-opportunities\"\n      (click)=\"navigateToAddOpportunities()\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n    </a>\n  </div>\n  <div class=\"col-12 col-md-4\">\n    <div class=\"user-info p-3 card pb-0 h-auto\">\n      <div class=\"mb-2 text-center\">\n        <a class=\"profile-image\">\n          <img alt=\"Profile Image\"\n            width=\"100\"\n            height=\"100\"\n            [src]=\"getAccountLogo(data?.company_url)\"\n            class=\"img-fluid company-logo\"\n            onerror=\"this.onerror=null;this.src='assets/img/icons/company.png';\" />\n        </a>\n      </div>\n      <div class=\"mb-4 d-flex justify-content-between align-items-center\">\n        <h4 class=\"d-inline-block\">\n          About <span *ngIf=\"data?.id\">{{ data.name }}</span>\n        </h4>\n        <a href=\"javascript:void(0);\"\n          *ngIf=\"isFormEdit\"\n          class=\"btn btn-sm btn-outline-primary float-end\"\n          (click)=\"isFormEdit = !isFormEdit; this.getAllSubscriptionMembers()\">{{ 'Button.Edit' | transloco }}</a>\n      </div>\n      <form [formGroup]=\"aboutControls\"\n        [class.isDisabled]=\"isFormEdit\">\n        <div class=\"mb-3\">\n          <label class=\"label mb-0\">{{ 'Crm.AccountMessage.Name' | transloco }}</label>\n          <input type=\"text\"\n            class=\"form-control rounded-0 ps-1 user-value\"\n            formControlName=\"name\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['name'].errors }\" />\n        </div>\n        <div class=\"mb-3\">\n          <label class=\"label mb-0\">{{\n                        'Crm.AccountMessage.Location' | transloco\n                    }}</label>\n          <input ngx-gp-autocomplete\n            class=\"form-control rounded-0 ps-1 user-value\"\n            #places=\"ngx-places\"\n            formControlName=\"location\"\n            (onAddressChange)=\"handleAddressChange($event)\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['location'].errors }\" />\n        </div>\n        <div class=\"mb-3\"\n          *ngIf=\"countries$ | async as countries\">\n          <label>{{ 'Crm.AccountMessage.Country' | transloco\n                        }}<span class=\"text-danger\">*</span>\n          </label>\n          <select class=\"form-select\"\n            formControlName=\"country\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['country'].errors }\">\n            <option *ngFor=\"let country of countries\"\n              [value]=\"country.code\">\n              {{ country.name }}\n            </option>\n          </select>\n        </div>\n        <div class=\"mb-3 ui-fluid skills-modal\">\n          <label class=\"label mb-2\">{{ 'Crm.AccountMessage.Owner' | transloco }}</label>\n          <p class=\"form-control d-block pb-2 ps-1 user-value\"\n            *ngIf=\"isFormEdit && data?.owner_id\">\n            {{ data?.owner?.first_name }} {{ data?.owner?.last_name }}\n          </p>\n          <p-autoComplete *ngIf=\"!isFormEdit || !data?.owner_id\"\n            [suggestions]=\"filteredOwner\"\n            formControlName=\"owner_id\"\n            dataKey=\"id\"\n            field=\"first_name\"\n            [dropdown]=\"true\"\n            (completeMethod)=\"search($event)\"\n            styleClass=\"w-100\"\n            placeholder=\"Search owner\"\n            [multiple]=\"false\">\n          </p-autoComplete>\n        </div>\n        <div class=\"mb-3\">\n          <label class=\"label mb-0\">{{\n                        'Crm.AccountMessage.CompanyUrl' | transloco\n                    }}</label>\n          <a [href]=\"data?.company_url\"\n            target=\"blank\"\n            class=\"form-control d-block pb-2 ps-1 user-value\"\n            *ngIf=\"isFormEdit && data?.company_url\">{{ data?.company_url }}</a>\n          <input *ngIf=\"!isFormEdit || !data?.company_url\"\n            type=\"text\"\n            class=\"form-control rounded-0 ps-1 user-value\"\n            formControlName=\"company_url\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['company_url'].errors }\" />\n        </div>\n        <div class=\"mb-3\"\n          *ngIf=\"data?.tel\">\n          <label class=\"label mb-0\">{{ 'Crm.AccountMessage.Tel' | transloco }}</label>\n          <input type=\"text\"\n            class=\"form-control rounded-0 ps-1 user-value\"\n            formControlName=\"tel\" />\n        </div>\n        <div class=\"mb-3\"\n          *ngIf=\"organizationTypes$ | async as types\">\n          <label>{{ 'Organization.OrganizationType' | transloco }}</label>\n          <div class=\"mb-3\">\n            <select formControlName=\"organization_type_id\"\n              class=\"form-control form-select\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['organization_type_id'].errors }\">\n              <option *ngFor=\"let option of types['organization_types']\"\n                [value]=\"option.id\">\n                {{ option.name }}\n              </option>\n            </select>\n          </div>\n        </div>\n        <div class=\"mb-3\"\n          *ngIf=\"organizationIndustries$ | async as industries\">\n          <label>{{ 'Organization.OrganizationIndustry' | transloco }}</label>\n          <select formControlName=\"organization_industry_id\"\n            class=\"form-control form-select\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['organization_industry_id'].errors }\">\n            <option *ngFor=\"let option of industries['organization_industries']\"\n              [value]=\"option.id\">\n              {{ option.name }}\n            </option>\n          </select>\n        </div>\n        <div class=\"mb-3\"\n          *ngIf=\"organizationSizes$ | async as sizes\">\n          <label>{{ 'Crm.AccountMessage.Size' | transloco }}</label>\n          <select formControlName=\"organization_size_id\"\n            class=\"form-control form-select\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['organization_size_id'].errors }\">\n            <option *ngFor=\"let option of sizes['organization_sizes']\"\n              [value]=\"option.id\">\n              {{ option.name }}\n            </option>\n          </select>\n        </div>\n        <div class=\"mb-3\">\n          <label>{{ 'Crm.AccountMessage.Status' | transloco }}</label>\n          <select formControlName=\"status\"\n            class=\"form-control form-select\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['status'].errors }\">\n            <option *ngFor=\"let option of status\"\n              [value]=\"option\">{{ option }}</option>\n          </select>\n        </div>\n        <div class=\"mb-3\">\n          <label>{{ 'Crm.AccountMessage.Priority' | transloco }}</label>\n          <select formControlName=\"priority\"\n            class=\"form-control form-select\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['priority'].errors }\">\n            <option *ngFor=\"let option of priority\"\n              [value]=\"option\">\n              {{ option }}\n            </option>\n          </select>\n        </div>\n        <div class=\"mb-3\">\n          <label>{{ 'Crm.AccountMessage.Source' | transloco }}</label>\n          <select formControlName=\"crm_source_id\"\n            class=\"form-control form-select\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['crm_source_id'].errors }\">\n            <option *ngFor=\"let option of source\"\n              [value]=\"option.id\">\n              {{ option.name }}\n            </option>\n          </select>\n        </div>\n        <div class=\"mb-3\">\n          <pw-input-container [label]=\"'Crm.AccountMessage.Description' | transloco\"\n            name=\"description\">\n            <textarea rows=\"5\"\n              type=\"text\"\n              class=\"form-control\"\n              formControlName=\"description\"\n              id=\"description\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors }\"></textarea>\n          </pw-input-container>\n        </div>\n        <div *ngIf=\"!isFormEdit\"\n          class=\"text-end form-action-buttons\">\n          <input type=\"button\"\n            class=\"btn btn-outline-primary\"\n            (click)=\"isFormEdit = !isFormEdit; getAccountDetails()\"\n            value=\"Cancel\" />\n          <input type=\"button\"\n            class=\"btn btn-primary ms-3\"\n            value=\"Submit\"\n            (click)=\"updateAccountInfo()\" />\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)=\"onSave()\">\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 && actionControls.get('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=\"yyyy-mm-dd\"\n                      formControlName=\"when\"\n                      ngbDatepicker\n                      #d=\"ngbDatepicker\"\n                      (click)=\"d.toggle()\" />\n                  </div>\n                </div>\n                <div class=\"ui-fluid skills-modal col-sm-4 ps-0\">\n                  <p-autoComplete [suggestions]=\"filteredContact\"\n                    formControlName=\"crm_contact_id\"\n                    dataKey=\"id\"\n                    field=\"displayName\"\n                    [dropdown]=\"true\"\n                    (completeMethod)=\"searchContact($event)\"\n                    (onSelect)=\"selectContact($event)\"\n                    (onBlur)=\"OnContactBlur()\"\n                    styleClass=\"w-100\"\n                    placeholder=\"Search contact\"\n                    [multiple]=\"false\"\n                    (onDropdownClick)=\"onDropdownClick()\">\n                  </p-autoComplete>\n                </div>\n                <div class=\"col-sm-4 pe-0 completed-toggle\">\n                  <div class=\"mb-3\">\n                    <ui-switch 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              <a class=\"btn btn-outline-primary me-0 me-sm-2\"\n                (click)=\"openModal(content)\">{{ 'Upload file' | transloco }}</a>\n              <input type=\"submit\"\n                [disabled]=\"buttonDisable\"\n                class=\"btn btn-primary mt-2 mb-2\"\n                value=\"Submit Note\" />\n            </div>\n            <div *ngIf=\"buttonDisable\"\n              class=\"no-actions pt-4\">\n              <pw-no-data [withImage]=\"true\" [message]=\"\n                                    'Crm.AccountMessage.NoActionsInAccountInfoMessage' | transloco\n                                \">\n              </pw-no-data>\n            </div>\n          </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=\"!accountComments?.length && isLoaded\"\n            class=\"no-actions pt-2\">\n            <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoActionsMessage' | transloco\">\n            </pw-no-data>\n          </div>\n          <div *ngIf=\"accountComments?.length\">\n            <div id=\"timeline\"\n              class=\"pt-3 clear-both timeline-center timeline-wrapper timeline-container\"\n              infiniteScroll\n              [infiniteScrollDistance]=\"2\"\n              [infiniteScrollThrottle]=\"50\"\n              [infiniteScrollContainer]=\"selector\"\n              [fromRoot]=\"true\"\n              (scrolled)=\"onScrollTimeline()\">\n              <ul class=\"timeline\">\n                <li class=\"timeline-line\"></li>\n              </ul>\n              <ul class=\"timeline\">\n                <li class=\"timeline-line\"></li>\n                <li class=\"timeline-item\"\n                  [ngClass]=\"{ 'mt-5': odd || last }\"\n                  *ngFor=\"\n                                        let item of accountComments;\n                                        index as i;\n                                        let odd = odd;\n                                        let even = even;\n                                        let last = last;\n                                        let first = first\n                                    \">\n                  <div class=\"timeline-badge\">\n                    <span class=\"bg-red bg-lighten-1\">\n                      <span class=\"timeline-year\">\n                        <span class=\"d-block date-year\">{{\n                                                    item.when | date: 'medium' | slice: 0:3\n                                                }}</span>\n                        <span>{{ item.year }}</span></span>\n                    </span>\n                  </div>\n                  <div class=\"timeline-card shadow card pb-0 rounded border-grey border-lighten-2 position-static\">\n                    <div class=\"card-header py-4\">\n                      <div class=\"mb-0 clearfix\">\n                        <textarea type=\"text\"\n                          name=\"comment\"\n                          class=\"comment-field form-control p-0\"\n                          [(ngModel)]=\"item.comment\">{{ item.comment }}</textarea>\n                        <div class=\"auto-complete mb-3 ui-fluid skills-modal\">\n                          <p-autoComplete [(ngModel)]=\"item.crm_contact\"\n                            [suggestions]=\"filteredContactComment\"\n                            dataKey=\" id \"\n                            field=\"first_name\"\n                            dropdown=\" true \"\n                            (completeMethod)=\"\n                                                            searchContactInComment($event)\n                                                        \"\n                            (onSelect)=\"selectCommentContact($event)\"\n                            (onBlur)=\"OnContactBlur()\"\n                            styleClass=\" w-100 \"\n                            placeholder=\" Search contact \"\n                            [multiple]=\"false\"\n                            (onDropdownClick)=\"onDropdownClick()\">\n                          </p-autoComplete>\n                        </div>\n                        <p class=\"float-start mb-0\"\n                          *ngIf=\"\n                                                        !showFullComment || item.id !== commentId\n                                                    \">\n                          {{ item.comment | slice: 0:170\n                                                    }}<a *ngIf=\"item.comment.length > 170\"\n                            class=\"text-secondary\"\n                            (click)=\"\n                                                            showFullComment = true;\n                                                            commentId = item.id\n                                                        \">...show more\n                          </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 &&\n                                                            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, item)\"\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=\"yyyy-mm-dd\"\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                      <a class=\"text-secondary action-owner\"\n                        *ngIf=\"item.crm_contact\"\n                        [routerLink]=\"[\n                                                    '/' + subscription?.slug + routers.contactInfo,\n                                                    item.crm_contact.id\n                                                ]\">{{ item.crm_contact.first_name }}\n                        {{ item.crm_contact.last_name || '' }}</a>\n                      <p>\n                        By\n                        {{\n                                                    item.owner.first_name +\n                                                        ' ' +\n                                                        item.owner.last_name\n                                                }}\n                      </p>\n                      <span class=\"badge bg-primary\">{{\n                                                item?.crm_action?.name\n                                            }}</span>\n                      <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                        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\n                                                    class=\"fa fa-tasks completed\"\n                                                    aria-hidden=\"true\"\n                                                ></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                        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                        href=\"javascript:void(0);\"\n                        (click)=\"\n                                                    setAsCompletedOrUncompleted(\n                                                        item.id,\n                                                        item,\n                                                        item.completed\n                                                    )\n                                                \"\n                        class=\"ms-2\">\n                        <i\n                                                    class=\"far fa-window-close\"\n                                                    aria-hidden=\"true\"\n                                                ></i>\n                      </a>\n                      <div class=\"control-btns mt-3 text-end form-action-buttons\">\n                        <button type=\"button\"\n                          class=\"btn btn-sm btn-outline-default me-2\"\n                          (click)=\"showEditControls(undefined, '')\">\n                          {{ 'Button.Cancel' | transloco }}\n                        </button>\n                        <button class=\"btn btn-sm btn-primary\"\n                          type=\"button\"\n                          (click)=\"updateComment(item)\">\n                          {{ 'Button.Submit' | transloco }}\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </div>\n        </ng-template>\n      </li>\n      <li [ngbNavItem]=\"2\">\n        <a ngbNavLink>Contacts</a>\n        <ng-template ngbNavContent>\n          <div class=\"row\">\n            <div class=\"col-12 mb-3\">\n              <a class=\"btn btn-sm btn-outline-primary float-end\"\n                data-cy=\"add-contact\"\n                [routerLink]=\"[\n                                    '/' + subscription?.slug + routers.contactAdd,\n                                    accountId\n                                ]\">\n                <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n                {{ 'Crm.ContactMessage.AddContact' | transloco }}\n              </a>\n            </div>\n          </div>\n          <div class=\"primeng-datatable-container table-responsive\"\n            [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n            <p-table class=\"table\"\n              #dt\n              [value]=\"contacts\"\n              [paginator]=\"true\"\n              [rows]=\"PAGE_SIZE\"\n              [totalRecords]=\"totalRecords\"\n              [loading]=\"loading\"\n              [lazy]=\"true\"\n              (onLazyLoad)=\"onLazyLoad($event)\"\n              [customSort]=\"true\">\n              <ng-template pTemplate=\"caption\">\n                <div class=\"text-end\">\n                  <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n                  <input type=\"text\"\n                    [(ngModel)]=\"searchText\"\n                    pInputText\n                    size=\"50\"\n                    placeholder=\"Search contact...\"\n                    (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n                    class=\"mw-90\" />\n                </div>\n              </ng-template>\n              <ng-template pTemplate=\"header\">\n                <tr>\n                  <th scope=\"true\"\n                    pSortableColumn=\"first_name\">\n                    {{ 'Label.Name' | transloco }}\n                    <p-sortIcon field=\"first_name\"></p-sortIcon>\n                  </th>\n                  <th scope=\"true\"\n                    pSortableColumn=\"owner_id\">\n                    {{ 'Crm.ContactMessage.ContactOwner' | transloco }}\n                    <p-sortIcon field=\"owner_id\"></p-sortIcon>\n                  </th>\n                  <th scope=\"true\"\n                    pSortableColumn=\"headline\">\n                    {{ 'Crm.ContactMessage.Headline' | transloco }}\n                    <p-sortIcon field=\"headline\"></p-sortIcon>\n                  </th>\n                  <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n                </tr>\n              </ng-template>\n              <ng-template pTemplate=\"body\"\n                let-contact>\n                <tr>\n                  <td data-head=\"Name\"\n                    class=\"contactname\">\n                    <a [routerLink]=\"[\n                                                '/' + subscription?.slug + routers.contactInfo,\n                                                contact.id\n                                            ]\">{{\n                                                contact.first_name + ' ' + contact.last_name\n                                                    | textTruncate: 20\n                                            }}</a>\n                  </td>\n                  <td data-head=\"OwnerName\">\n                    {{ contact.owner | ifNameNullShowEmail }}\n                  </td>\n                  <td data-head=\"Headline\"\n                    class=\"headline-content\">\n                    {{ contact?.headline | textTruncate: 20 }}\n                  </td>\n                  <td data-head=\"Action\">\n                    <ul class=\"list-unstyled list-inline\">\n                      <li ngbTooltip=\"Show\"\n                        class=\"me-2 me-sm-3\"\n                        [routerLink]=\"[\n                                                    '/' + subscription?.slug + routers.contactInfo,\n                                                    contact.id\n                                                ]\">\n                        <i\n                                                    class=\"fa fa-eye see-icon\"\n                                                    aria-hidden=\"true\"\n                                                ></i>\n                      </li>\n                      <li *ngIf=\"\n                                                    hasAccess ||\n                                                    contact.owner_id === userId ||\n                                                    contact.crm_account.owner_id === userId\n                                                \"\n                        ngbTooltip=\"Add opportunity\"\n                        class=\"me-2 me-sm-3\"\n                        [routerLink]=\"[\n                                                    '/' +\n                                                        subscription?.slug +\n                                                        routers.opportunityAdd\n                                                ]\"\n                        [queryParams]=\"{ contact_id: contact.id }\">\n                        <i\n                                                    class=\"fa fa-plus-circle add-icon\"\n                                                    aria-hidden=\"true\"\n                                                ></i>\n                      </li>\n                      <li *ngIf=\"\n                                                    hasAccess ||\n                                                    contact.owner_id === userId ||\n                                                    contact.crm_account.owner_id === userId\n                                                \"\n                        ngbTooltip=\"Edit\"\n                        class=\"me-2 me-sm-3\"\n                        [routerLink]=\"[\n                                                    '/' +\n                                                        subscription?.slug +\n                                                        routers.contactDetails,\n                                                    contact.id\n                                                ]\">\n                        <i\n                                                    class=\"fa fa-edit edit-icon\"\n                                                    aria-hidden=\"true\"\n                                                ></i>\n                      </li>\n                      <li *ngIf=\"\n                                                    hasAccess ||\n                                                    contact.owner_id === userId ||\n                                                    contact.crm_account.owner_id === userId\n                                                \"\n                        ngbTooltip=\"Delete\"\n                        class=\"me-2 me-sm-3\">\n                        <i\n                                                    class=\"fa fa-trash delete-icon\"\n                                                    (click)=\"onDeleteContact(contact.id)\"\n                                                    aria-hidden=\"true\"\n                                                ></i>\n                      </li>\n                    </ul>\n                  </td>\n                </tr>\n              </ng-template>\n            </p-table>\n            <div *ngIf=\"totalRecords === 0 && totalRecordsUnFiltered !== 0\">\n              <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n            </div>\n            <span class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{ totalRecords }}</span>\n          </div>\n          <div *ngIf=\"totalRecordsUnFiltered === 0\">\n            <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.ContactsAdminMessage' | transloco\">\n            </pw-no-data>\n          </div>\n        </ng-template>\n      </li>\n      <li [ngbNavItem]=\"3\">\n        <a ngbNavLink>Versioning</a>\n        <ng-template ngbNavContent>\n          <div *ngFor=\"let versioning of accountVersioning\">\n            <p>\n              <strong>Event: </strong>{{ versioning.event }} |\n              <strong>Author: </strong><a *ngIf=\"versioning?.author\"\n                [routerLink]=\"['/members', versioning?.author?.slug]\">{{ versioning?.author | ifNameNullShowEmail }}</a>\n              | <strong>Created at: </strong>{{ versioning.created_at | dateFormat: 'datetime' }}<br />\n              <strong>Object: </strong>{{ versioning.object | json }}\n            </p>\n            <hr />\n          </div>\n          <div *ngIf=\"accountVersioning?.length === 0\">\n            <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoVersionsMessage' | transloco\">\n            </pw-no-data>\n          </div>\n        </ng-template>\n      </li>\n      <li [ngbNavItem]=\"4\">\n        <a ngbNavLink>Files</a>\n        <ng-template ngbNavContent>\n          <pw-smart-crm-company-files [accountId]=\"accountId\"></pw-smart-crm-company-files>\n        </ng-template>\n      </li>\n    </ul>\n    <div [ngbNavOutlet]=\"nav\"></div>\n  </div>\n</div>\n<ng-template #content\n  let-modal>\n  <div class=\"modal-header\">\n    <h3 class=\"modal-title mb-0 p-0\">{{ 'Upload File' | transloco }}</h3>\n    <button type=\"button\"\n      class=\"btn-close float-end\"\n      aria-label=\"Close\"\n      (click)=\"modal.dismiss()\">\n\n    </button>\n  </div>\n  <div class=\"modal-body\">\n    <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n    <div class=\"row p-2\">\n      <div class=\"col-12\">\n        <div class=\"upload-box\">\n          <div class=\"upload-box-content\">\n            <div class=\"drop-container\"\n              ngFileDrop\n              [options]=\"options\"\n              (uploadOutput)=\"onUploadOutput($event)\"\n              [uploadInput]=\"uploadInput\">\n              <p>\n                Drag files here or\n                <label class=\"upload-button\">\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_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.user-info .label{color:#777;font-size:14px;text-transform:capitalize}.user-info .user-value{border:0;border-bottom:1px solid rgb(119,119,119)}.user-info .user-value:focus{box-shadow:none}.user-info .user-value.is-invalid{border-color:#ff586b}.control-btns{display:none}.comment-field{border:0;border-bottom:1px solid rgb(242,242,242);color:#1769e1;display:none;font-size:15px;min-height:100px;padding:2px 5px!important}.comment-field:focus{border:1px solid rgb(23,105,225)!important;border-bottom:0;box-shadow:none}p{max-width:85%;white-space:pre-wrap}.auto-complete{display:none;margin-top:10px}.show-controls .comment-field,.show-controls .auto-complete,.show-controls .control-btns{display:block}.show-controls p,.show-controls .edit-btn,.show-controls .action-owner{display:none}select{appearance:none}textarea{resize:none}.clear-both{clear:both}.isDisabled input[type=text],.isDisabled 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}.timeline-container{height:700px;overflow-y:scroll}.action-btn.active{color:#fff!important;background-color:var(--first)}.form-action-buttons{margin-bottom:14px;margin-top:15px}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1.CrmService }, { type: i2.SubscriptionService }, { type: i2.GeoService }, { type: i2.CommonService }, { type: i2$2.NgbModal }, { type: i2.AuthService }, { type: i0.ChangeDetectorRef }, { type: i2.LogoCacheService }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -1459,19 +1459,19 @@ class SmartCrmCompaniesComponent extends AppBaseComponent {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmCompaniesComponent, deps: [{ token: i1.CrmService }, { token: i2.CommonService }, { token: i2.LogoCacheService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: SmartCrmCompaniesComponent, selector: "pw-smart-crm-companies", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 mb-3\">\n    <h2>Accounts</h2>\n    <a class=\"btn btn-sm btn-outline-primary float-end\" data-cy=\"add-contact\"\n      [routerLink]=\"['/' + subscription?.slug + routers.addAccount]\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Crm.AccountMessage.AddAccount' | transloco }} </a>\n  </div>\n</div>\n<div class=\"w-100 text-center mt-3\" *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container table-responsive\" [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #dt [value]=\"data.accounts\" [paginator]=\"data.object_count !== 0\" [lazy]=\"true\" [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\" [loading]=\"loading\" [filterDelay]=\"1000\" (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n    <ng-template pTemplate=\"caption\">\n      <div class=\"row m-0\">\n        <div class=\"col-sm-4\">\n          <p-multiSelect placeholder=\"Select Industry\" [options]=\"searchOptions\" [(ngModel)]=\"filterByIndustries\"\n            (onChange)=\"onSearchOptionChange($event, 'industry')\" [filter]=\"false\" [showHeader]=\"true\"\n            [showToggleAll]=\"true\" appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"col-sm-4\">\n          <p-multiSelect placeholder=\"Select Size\" [options]=\"organizationSizes\" [(ngModel)]=\"filterBySizeId\"\n            (onChange)=\"onSearchOptionChange($event, 'size')\" [filter]=\"false\" [showHeader]=\"true\"\n            [showToggleAll]=\"true\" appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"col-sm-4\">\n          <p-multiSelect placeholder=\"Select Status\" [options]=\"status\" [(ngModel)]=\"filterByStatus\"\n            (onChange)=\"onSearchOptionChange($event, 'status')\" [filter]=\"false\" [showHeader]=\"true\"\n            [showToggleAll]=\"true\" appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"col-sm-4\">\n          <p-multiSelect placeholder=\"Select Priority\" [options]=\"priority\" [(ngModel)]=\"filterByPriority\"\n            (onChange)=\"onSearchOptionChange($event, 'priority')\" [filter]=\"false\" [showHeader]=\"true\"\n            [showToggleAll]=\"true\" appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"col-sm-4\">\n          <p-multiSelect placeholder=\"Select Source\" [options]=\"source\" [(ngModel)]=\"filterBySource\"\n            (onChange)=\"onSearchOptionChange($event, 'source')\" [filter]=\"false\" [showHeader]=\"true\"\n            [showToggleAll]=\"true\" appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"col-sm-4 mb-2\">\n          <input ngx-gp-autocomplete class=\"form-control location\" #places=\"ngx-places\" [(ngModel)]=\"searchLocationText\"\n            placeholder=\"Search location...\" (keyup)=\"locationSearch($event)\"\n            (onAddressChange)=\"handleAddressChange($event)\" />\n        </div>\n      </div>\n      <div class=\"search-filter\">\n        <a class=\"mt-3 ms-3 text-start text-primary\" (click)=\"clearFilters()\">Clear all filters</a>\n        <div class=\"text-end mt-0 mt-sm-3\">\n          <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n          <input type=\"text\" [(ngModel)]=\"searchText\" pInputText size=\"50\" placeholder=\"Search accounts...\"\n            (input)=\"dt.filterGlobal($event.target.value, 'contains')\" class=\"mw-90\" />\n        </div>\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\" pSortableColumn=\"name\"> {{ 'Crm.AccountMessage.Name' | transloco }} <p-sortIcon field=\"name\">\n          </p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"location\"> {{ 'Crm.AccountMessage.Location' | transloco }} <p-sortIcon\n            field=\"location\"></p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"owner_id\"> {{ 'Crm.AccountMessage.Owner' | transloco }} <p-sortIcon\n            field=\"owner_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"organization_size_id\"> {{ 'Crm.AccountMessage.Size' | transloco }} <p-sortIcon\n            field=\"organization_size_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"expected_mrr\"> {{ 'Crm.AccountMessage.MRR' | transloco }} <p-sortIcon field=\"expected_mrr\">\n        </p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"signed_up_at\"> {{ 'Crm.AccountMessage.SignUp' | transloco }} <p-sortIcon field=\"signed_up_at\">\n        </p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"sessions_last_quarter\"> {{ 'Crm.AccountMessage.Quarter' | transloco }} <p-sortIcon field=\"sessions_last_quarter\">\n        </p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"sessions_last_month\"> {{ 'Crm.AccountMessage.Month' | transloco }} <p-sortIcon field=\"sessions_last_month\">\n        </p-sortIcon>\n        </th>\n        <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\" let-account>\n      <tr>\n        <td data-head=\"Name\" class=\"name-column\">\n          <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, account.id]\" class=\"name-link\">\n            <img alt=\"company image\" [src]=\"getAccountLogo(account.company_url)\" class=\"img-fluid company-logo me-2\"\n                 onerror=\"this.onerror=null;this.src='assets/img/icons/company.png';\" />\n            <span class=\"account-name\">{{ account.name }}</span>\n            <i [ngClass]=\"getUserAccountInfo(account).iconClass\" [ngbTooltip]=\"getUserAccountInfo(account).message\"\n               class=\"info-icon\"></i>\n          </a>\n        </td>\n        <td data-head=\"Location\">{{ account.location }}</td>\n        <td data-head=\"Owner\">\n          <a [routerLink]=\"['/members', account?.owner?.slug]\"> {{ account.owner | ifNameNullShowEmail }}</a>\n        </td>\n        <td data-head=\"Size\">{{ account?.organisation_size?.name !== 'Not available' ? account?.organisation_size?.name : '' }}\n</td>\n        <td data-head=\"MRR\">{{ account?.expected_mrr !== null && account?.expected_mrr !== 0 ? formatMRR(account?.expected_mrr) : '' }}\n</td>\n        <td data-head=\"Signed Up\">{{ account.signed_up_at | date: 'dd/MMM/yyyy' }}</td>\n        <td data-head=\"Quarter\">{{ account.sessions_last_quarter }}</td>\n        <td data-head=\"Month\">{{ account.sessions_last_month }}</td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline\">\n            <li ngbTooltip=\"See contacts\" class=\"me-2 me-sm-3 see-icon\"\n              [routerLink]=\"['/' + subscription?.slug + routers.contacts, account.id]\">\n              <i class=\"fa fa-eye\" aria-hidden=\"true\"></i>\n            </li>\n            <ng-container *ngIf=\"hasAccess || account.owner_id === userId\">\n              <li ngbTooltip=\"Edit\" class=\"me-2 me-sm-3\" [routerLink]=\"[\n                                    '/' + subscription?.slug + routers.accounts,\n                                    account.id\n                                ]\">\n                <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n              </li>\n              <li ngbTooltip=\"Delete\" class=\"me-2 me-sm-3\">\n                <i class=\"fa fa-trash delete-icon\" (click)=\"onDelete(account.id, subscription.id)\"\n                  aria-hidden=\"true\"></i>\n              </li>\n            </ng-container>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n<div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n</div>\n  <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoAccounMessage' | transloco\"> </pw-no-data>\n</div>\n<ng-container *rbacAllow=\"'Pages.Beta'\">\n  <div class=\"row mt-5\" *ngIf=\"data.unfiltered_count !== 0 && isLoaded\">\n    <!-- Drill Down -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Drill Down</h5>\n      <div class=\"primeng-datatable-container table-responsive\" *ngIf=\"accountInsight?.length\">\n        <p-table class=\"table\" #dt [value]=\"accountInsight\" [paginator]=\"accountInsight?.length !== 0\" [rows]=\"PAGE_SIZE\"\n          [totalRecords]=\"accountInsight.length\" [lazy]=\"true\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Title' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Value' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Reason' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\" let-insight>\n            <tr>\n              <td data-head=\"Title\">{{ insight.title }}</td>\n              <td data-head=\"Value\">{{ insight.value }}</td>\n              <td data-head=\"Reason\">{{ insight.reason }}</td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\" *ngIf=\"accountInsight?.length !== 0\">{{ 'Label.Total' | transloco }}: {{ accountInsight.length }}</span>\n      </div>\n      <div *ngIf=\"accountInsight?.length === 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoInsighMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n    <!-- Geography -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Geography</h5>\n      <div>\n        <ng-template [ngIf]=\"accountGeography\">\n          <plotly-plot [data]=\"accountGeography?.data\" [layout]=\"accountGeography?.layout\">\n          </plotly-plot>\n        </ng-template>\n      </div>\n      <div *ngIf=\"!accountGeography\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoInsighMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n    <!-- Last Activities -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Last Activities</h5>\n      <div class=\"primeng-datatable-container table-responsive\" *ngIf=\"accountActivities?.length\">\n        <p-table class=\"table\" #dt [value]=\"accountActivities\" [paginator]=\"accountInsight?.length !== 0\" [rows]=\"PAGE_SIZE\"\n          [totalRecords]=\"accountActivities.length\" [lazy]=\"true\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Owner' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Account' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Contact' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Action' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Comment' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\" let-activities>\n            <tr>\n              <td data-head=\"Owner\"> {{ activities.owner?.first_name }} {{ activities.owner?.last_name }} </td>\n              <td data-head=\"Account\">{{ activities.crm_account?.name }}</td>\n              <td data-head=\"Contact\"> {{ activities.crm_contact?.first_name }} {{ activities.crm_contact?.last_name }}\n              </td>\n              <td data-head=\"Action\">{{ activities.crm_action?.name }}</td>\n              <td data-head=\"Comment\">{{ activities.comment }}</td>\n            </tr>\n          </ng-template>\n        </p-table>\n      <span class=\"total-records-count\" *ngIf=\"accountInsight?.length !== 0\">{{ 'Label.Total' | transloco }}: {{ accountActivities.length }}</span>\n      </div>\n      <div *ngIf=\"accountActivities?.length === 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoInsighMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n    <!-- Last Invoices -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Last Invoices</h5>\n      <div class=\"primeng-datatable-container table-responsive\" *ngIf=\"accountLastInvoices?.length\">\n        <p-table class=\"table\" #dt [value]=\"accountLastInvoices\" [paginator]=\"accountLastInvoices?.length !== 0\" [rows]=\"PAGE_SIZE\"\n          [totalRecords]=\"accountLastInvoices.length\" [lazy]=\"true\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Owner' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Account' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Contact' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.File' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\" let-invoice>\n            <tr>\n              <td data-head=\"Owner\"> {{ invoice.owner?.first_name }} {{ invoice.owner?.last_name }} </td>\n              <td data-head=\"Organization\"> {{ invoice.subcription?.organization }} </td>\n              <td data-head=\"Contact\">{{ invoice.subcription?.contact_name }}</td>\n              <td data-head=\"File\">\n                <a target=\"blank\" href=\"{{ invoice.file }}\">{{ invoice.file.split('/')[invoice.file.split('/').length -\n                  1] }}</a>\n              </td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\" *ngIf=\"accountLastInvoices?.length !== 0\">{{ 'Label.Total' | transloco }}: {{ accountLastInvoices.length }}</span>\n      </div>\n      <div *ngIf=\"accountLastInvoices?.length === 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoInsighMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n  </div>\n</ng-container>", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.location{background-color:#fff}.company-logo{height:20px;width:20px}::ng-deep .ui-multiselect{display:inline-block}::ng-deep body .ui-multiselect .ui-multiselect-label{font-weight:700}.name-column{text-align:left}.account-name{margin-right:5px}.info-icon{vertical-align:middle;margin-left:5px}.account-link-icon{color:gray}.money-icon{color:green;font-size:.85em;background-color:#90ee90;border-radius:50%;padding:5px;width:18.5px;box-shadow:0 0 10px #00800080}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]" }, { kind: "directive", type: i5.LazyImgDirective, selector: "img" }, { kind: "directive", type: i5.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i7$1.PlotlyComponent, selector: "plotly-plot", inputs: ["data", "layout", "config", "frames", "style", "theme", "divId", "revision", "className", "debug", "useResizeHandler", "updateOnLayoutChange", "updateOnDataChange", "updateOnlyWithRevision"], outputs: ["initialized", "update", "purge", "error", "afterExport", "afterPlot", "animated", "animatingFrame", "animationInterrupted", "autoSize", "beforeExport", "beforeHover", "buttonClicked", "click", "plotlyClick", "clickAnnotation", "deselect", "doubleClick", "framework", "hover", "legendClick", "legendDoubleClick", "react", "relayout", "relayouting", "restyle", "redraw", "selected", "selecting", "sliderChange", "sliderEnd", "sliderStart", "sunburstclick", "transitioning", "transitionInterrupted", "unhover", "treemapclick", "webglcontextlost"] }, { kind: "directive", type: i9.NgxGpAutocompleteDirective, selector: "[ngx-gp-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i6.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i8.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i11.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "pipe", type: i14.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmCompaniesComponent, deps: [{ token: i1.CrmService }, { token: i2.CommonService }, { token: i2.LogoCacheService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmCompaniesComponent, selector: "pw-smart-crm-companies", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 mb-3\">\n    <h2>Accounts</h2>\n    <a class=\"btn btn-sm btn-outline-primary float-end\" data-cy=\"add-contact\"\n      [routerLink]=\"['/' + subscription?.slug + routers.addAccount]\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Crm.AccountMessage.AddAccount' | transloco }} </a>\n  </div>\n</div>\n<div class=\"w-100 text-center mt-3\" *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container table-responsive\" [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #dt [value]=\"data.accounts\" [paginator]=\"data.object_count !== 0\" [lazy]=\"true\" [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\" [loading]=\"loading\" [filterDelay]=\"1000\" (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n    <ng-template pTemplate=\"caption\">\n      <div class=\"row m-0\">\n        <div class=\"col-sm-4\">\n          <p-multiSelect placeholder=\"Select Industry\" [options]=\"searchOptions\" [(ngModel)]=\"filterByIndustries\"\n            (onChange)=\"onSearchOptionChange($event, 'industry')\" [filter]=\"false\" [showHeader]=\"true\"\n            [showToggleAll]=\"true\" appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"col-sm-4\">\n          <p-multiSelect placeholder=\"Select Size\" [options]=\"organizationSizes\" [(ngModel)]=\"filterBySizeId\"\n            (onChange)=\"onSearchOptionChange($event, 'size')\" [filter]=\"false\" [showHeader]=\"true\"\n            [showToggleAll]=\"true\" appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"col-sm-4\">\n          <p-multiSelect placeholder=\"Select Status\" [options]=\"status\" [(ngModel)]=\"filterByStatus\"\n            (onChange)=\"onSearchOptionChange($event, 'status')\" [filter]=\"false\" [showHeader]=\"true\"\n            [showToggleAll]=\"true\" appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"col-sm-4\">\n          <p-multiSelect placeholder=\"Select Priority\" [options]=\"priority\" [(ngModel)]=\"filterByPriority\"\n            (onChange)=\"onSearchOptionChange($event, 'priority')\" [filter]=\"false\" [showHeader]=\"true\"\n            [showToggleAll]=\"true\" appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"col-sm-4\">\n          <p-multiSelect placeholder=\"Select Source\" [options]=\"source\" [(ngModel)]=\"filterBySource\"\n            (onChange)=\"onSearchOptionChange($event, 'source')\" [filter]=\"false\" [showHeader]=\"true\"\n            [showToggleAll]=\"true\" appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"col-sm-4 mb-2\">\n          <input ngx-gp-autocomplete class=\"form-control location\" #places=\"ngx-places\" [(ngModel)]=\"searchLocationText\"\n            placeholder=\"Search location...\" (keyup)=\"locationSearch($event)\"\n            (onAddressChange)=\"handleAddressChange($event)\" />\n        </div>\n      </div>\n      <div class=\"search-filter\">\n        <a class=\"mt-3 ms-3 text-start text-primary\" (click)=\"clearFilters()\">Clear all filters</a>\n        <div class=\"text-end mt-0 mt-sm-3\">\n          <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n          <input type=\"text\" [(ngModel)]=\"searchText\" pInputText size=\"50\" placeholder=\"Search accounts...\"\n            (input)=\"dt.filterGlobal($event.target.value, 'contains')\" class=\"mw-90\" />\n        </div>\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\" pSortableColumn=\"name\"> {{ 'Crm.AccountMessage.Name' | transloco }} <p-sortIcon field=\"name\">\n          </p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"location\"> {{ 'Crm.AccountMessage.Location' | transloco }} <p-sortIcon\n            field=\"location\"></p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"owner_id\"> {{ 'Crm.AccountMessage.Owner' | transloco }} <p-sortIcon\n            field=\"owner_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"organization_size_id\"> {{ 'Crm.AccountMessage.Size' | transloco }} <p-sortIcon\n            field=\"organization_size_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"expected_mrr\"> {{ 'Crm.AccountMessage.MRR' | transloco }} <p-sortIcon field=\"expected_mrr\">\n        </p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"signed_up_at\"> {{ 'Crm.AccountMessage.SignUp' | transloco }} <p-sortIcon field=\"signed_up_at\">\n        </p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"sessions_last_quarter\"> {{ 'Crm.AccountMessage.Quarter' | transloco }} <p-sortIcon field=\"sessions_last_quarter\">\n        </p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"sessions_last_month\"> {{ 'Crm.AccountMessage.Month' | transloco }} <p-sortIcon field=\"sessions_last_month\">\n        </p-sortIcon>\n        </th>\n        <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\" let-account>\n      <tr>\n        <td data-head=\"Name\" class=\"name-column\">\n          <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, account.id]\" class=\"name-link\">\n            <img alt=\"company image\" [src]=\"getAccountLogo(account.company_url)\" class=\"img-fluid company-logo me-2\"\n                 onerror=\"this.onerror=null;this.src='assets/img/icons/company.png';\" />\n            <span class=\"account-name\">{{ account.name }}</span>\n            <i [ngClass]=\"getUserAccountInfo(account).iconClass\" [ngbTooltip]=\"getUserAccountInfo(account).message\"\n               class=\"info-icon\"></i>\n          </a>\n        </td>\n        <td data-head=\"Location\">{{ account.location }}</td>\n        <td data-head=\"Owner\">\n          <a [routerLink]=\"['/members', account?.owner?.slug]\"> {{ account.owner | ifNameNullShowEmail }}</a>\n        </td>\n        <td data-head=\"Size\">{{ account?.organisation_size?.name !== 'Not available' ? account?.organisation_size?.name : '' }}\n</td>\n        <td data-head=\"MRR\">{{ account?.expected_mrr !== null && account?.expected_mrr !== 0 ? formatMRR(account?.expected_mrr) : '' }}\n</td>\n        <td data-head=\"Signed Up\">{{ account.signed_up_at | date: 'dd/MMM/yyyy' }}</td>\n        <td data-head=\"Quarter\">{{ account.sessions_last_quarter }}</td>\n        <td data-head=\"Month\">{{ account.sessions_last_month }}</td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline\">\n            <li ngbTooltip=\"See contacts\" class=\"me-2 me-sm-3 see-icon\"\n              [routerLink]=\"['/' + subscription?.slug + routers.contacts, account.id]\">\n              <i class=\"fa fa-eye\" aria-hidden=\"true\"></i>\n            </li>\n            <ng-container *ngIf=\"hasAccess || account.owner_id === userId\">\n              <li ngbTooltip=\"Edit\" class=\"me-2 me-sm-3\" [routerLink]=\"[\n                                    '/' + subscription?.slug + routers.accounts,\n                                    account.id\n                                ]\">\n                <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n              </li>\n              <li ngbTooltip=\"Delete\" class=\"me-2 me-sm-3\">\n                <i class=\"fa fa-trash delete-icon\" (click)=\"onDelete(account.id, subscription.id)\"\n                  aria-hidden=\"true\"></i>\n              </li>\n            </ng-container>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n<div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n</div>\n  <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoAccounMessage' | transloco\"> </pw-no-data>\n</div>\n<ng-container *rbacAllow=\"'Pages.Beta'\">\n  <div class=\"row mt-5\" *ngIf=\"data.unfiltered_count !== 0 && isLoaded\">\n    <!-- Drill Down -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Drill Down</h5>\n      <div class=\"primeng-datatable-container table-responsive\" *ngIf=\"accountInsight?.length\">\n        <p-table class=\"table\" #dt [value]=\"accountInsight\" [paginator]=\"accountInsight?.length !== 0\" [rows]=\"PAGE_SIZE\"\n          [totalRecords]=\"accountInsight.length\" [lazy]=\"true\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Title' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Value' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Reason' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\" let-insight>\n            <tr>\n              <td data-head=\"Title\">{{ insight.title }}</td>\n              <td data-head=\"Value\">{{ insight.value }}</td>\n              <td data-head=\"Reason\">{{ insight.reason }}</td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\" *ngIf=\"accountInsight?.length !== 0\">{{ 'Label.Total' | transloco }}: {{ accountInsight.length }}</span>\n      </div>\n      <div *ngIf=\"accountInsight?.length === 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n    <!-- Geography -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Geography</h5>\n      <div>\n        <ng-template [ngIf]=\"accountGeography\">\n          <plotly-plot [data]=\"accountGeography?.data\" [layout]=\"accountGeography?.layout\">\n          </plotly-plot>\n        </ng-template>\n      </div>\n      <div *ngIf=\"!accountGeography\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n    <!-- Last Activities -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Last Activities</h5>\n      <div class=\"primeng-datatable-container table-responsive\" *ngIf=\"accountActivities?.length\">\n        <p-table class=\"table\" #dt [value]=\"accountActivities\" [paginator]=\"accountInsight?.length !== 0\" [rows]=\"PAGE_SIZE\"\n          [totalRecords]=\"accountActivities.length\" [lazy]=\"true\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Owner' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Account' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Contact' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Action' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Comment' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\" let-activities>\n            <tr>\n              <td data-head=\"Owner\"> {{ activities.owner?.first_name }} {{ activities.owner?.last_name }} </td>\n              <td data-head=\"Account\">{{ activities.crm_account?.name }}</td>\n              <td data-head=\"Contact\"> {{ activities.crm_contact?.first_name }} {{ activities.crm_contact?.last_name }}\n              </td>\n              <td data-head=\"Action\">{{ activities.crm_action?.name }}</td>\n              <td data-head=\"Comment\">{{ activities.comment }}</td>\n            </tr>\n          </ng-template>\n        </p-table>\n      <span class=\"total-records-count\" *ngIf=\"accountInsight?.length !== 0\">{{ 'Label.Total' | transloco }}: {{ accountActivities.length }}</span>\n      </div>\n      <div *ngIf=\"accountActivities?.length === 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n    <!-- Last Invoices -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Last Invoices</h5>\n      <div class=\"primeng-datatable-container table-responsive\" *ngIf=\"accountLastInvoices?.length\">\n        <p-table class=\"table\" #dt [value]=\"accountLastInvoices\" [paginator]=\"accountLastInvoices?.length !== 0\" [rows]=\"PAGE_SIZE\"\n          [totalRecords]=\"accountLastInvoices.length\" [lazy]=\"true\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Owner' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Account' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Contact' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.File' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\" let-invoice>\n            <tr>\n              <td data-head=\"Owner\"> {{ invoice.owner?.first_name }} {{ invoice.owner?.last_name }} </td>\n              <td data-head=\"Organization\"> {{ invoice.subscription?.organization }} </td>\n              <td data-head=\"Contact\">{{ invoice.subscription?.contact_name }}</td>\n              <td data-head=\"File\">\n                <a target=\"blank\" href=\"{{ invoice.file }}\">{{ invoice.file.split('/')[invoice.file.split('/').length -\n                  1] }}</a>\n              </td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\" *ngIf=\"accountLastInvoices?.length !== 0\">{{ 'Label.Total' | transloco }}: {{ accountLastInvoices.length }}</span>\n      </div>\n      <div *ngIf=\"accountLastInvoices?.length === 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.location{background-color:#fff}.company-logo{height:20px;width:20px}::ng-deep .ui-multiselect{display:inline-block}::ng-deep body .ui-multiselect .ui-multiselect-label{font-weight:700}.name-column{text-align:left}.account-name{margin-right:5px}.info-icon{vertical-align:middle;margin-left:5px}.account-link-icon{color:gray}.money-icon{color:green;font-size:.85em;background-color:#90ee90;border-radius:50%;padding:5px;width:18.5px;box-shadow:0 0 10px #00800080}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i5.LazyImgDirective, selector: "img" }, { kind: "directive", type: i5.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i7$1.PlotlyComponent, selector: "plotly-plot", inputs: ["data", "layout", "config", "frames", "style", "theme", "divId", "revision", "className", "debug", "useResizeHandler", "updateOnLayoutChange", "updateOnDataChange", "updateOnlyWithRevision"], outputs: ["initialized", "update", "purge", "error", "afterExport", "afterPlot", "animated", "animatingFrame", "animationInterrupted", "autoSize", "beforeExport", "beforeHover", "buttonClicked", "click", "plotlyClick", "clickAnnotation", "deselect", "doubleClick", "framework", "hover", "legendClick", "legendDoubleClick", "react", "relayout", "relayouting", "restyle", "redraw", "selected", "selecting", "sliderChange", "sliderEnd", "sliderStart", "sunburstclick", "transitioning", "transitionInterrupted", "unhover", "treemapclick", "webglcontextlost"] }, { kind: "directive", type: i9.NgxGpAutocompleteDirective, selector: "[ngx-gp-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i6.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i8.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i11.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "pipe", type: i14.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmCompaniesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmCompaniesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-smart-crm-companies', template: "<div class=\"row\">\n  <div class=\"col-12 mb-3\">\n    <h2>Accounts</h2>\n    <a class=\"btn btn-sm btn-outline-primary float-end\" data-cy=\"add-contact\"\n      [routerLink]=\"['/' + subscription?.slug + routers.addAccount]\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Crm.AccountMessage.AddAccount' | transloco }} </a>\n  </div>\n</div>\n<div class=\"w-100 text-center mt-3\" *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container table-responsive\" [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #dt [value]=\"data.accounts\" [paginator]=\"data.object_count !== 0\" [lazy]=\"true\" [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\" [loading]=\"loading\" [filterDelay]=\"1000\" (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n    <ng-template pTemplate=\"caption\">\n      <div class=\"row m-0\">\n        <div class=\"col-sm-4\">\n          <p-multiSelect placeholder=\"Select Industry\" [options]=\"searchOptions\" [(ngModel)]=\"filterByIndustries\"\n            (onChange)=\"onSearchOptionChange($event, 'industry')\" [filter]=\"false\" [showHeader]=\"true\"\n            [showToggleAll]=\"true\" appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"col-sm-4\">\n          <p-multiSelect placeholder=\"Select Size\" [options]=\"organizationSizes\" [(ngModel)]=\"filterBySizeId\"\n            (onChange)=\"onSearchOptionChange($event, 'size')\" [filter]=\"false\" [showHeader]=\"true\"\n            [showToggleAll]=\"true\" appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"col-sm-4\">\n          <p-multiSelect placeholder=\"Select Status\" [options]=\"status\" [(ngModel)]=\"filterByStatus\"\n            (onChange)=\"onSearchOptionChange($event, 'status')\" [filter]=\"false\" [showHeader]=\"true\"\n            [showToggleAll]=\"true\" appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"col-sm-4\">\n          <p-multiSelect placeholder=\"Select Priority\" [options]=\"priority\" [(ngModel)]=\"filterByPriority\"\n            (onChange)=\"onSearchOptionChange($event, 'priority')\" [filter]=\"false\" [showHeader]=\"true\"\n            [showToggleAll]=\"true\" appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"col-sm-4\">\n          <p-multiSelect placeholder=\"Select Source\" [options]=\"source\" [(ngModel)]=\"filterBySource\"\n            (onChange)=\"onSearchOptionChange($event, 'source')\" [filter]=\"false\" [showHeader]=\"true\"\n            [showToggleAll]=\"true\" appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"col-sm-4 mb-2\">\n          <input ngx-gp-autocomplete class=\"form-control location\" #places=\"ngx-places\" [(ngModel)]=\"searchLocationText\"\n            placeholder=\"Search location...\" (keyup)=\"locationSearch($event)\"\n            (onAddressChange)=\"handleAddressChange($event)\" />\n        </div>\n      </div>\n      <div class=\"search-filter\">\n        <a class=\"mt-3 ms-3 text-start text-primary\" (click)=\"clearFilters()\">Clear all filters</a>\n        <div class=\"text-end mt-0 mt-sm-3\">\n          <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n          <input type=\"text\" [(ngModel)]=\"searchText\" pInputText size=\"50\" placeholder=\"Search accounts...\"\n            (input)=\"dt.filterGlobal($event.target.value, 'contains')\" class=\"mw-90\" />\n        </div>\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\" pSortableColumn=\"name\"> {{ 'Crm.AccountMessage.Name' | transloco }} <p-sortIcon field=\"name\">\n          </p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"location\"> {{ 'Crm.AccountMessage.Location' | transloco }} <p-sortIcon\n            field=\"location\"></p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"owner_id\"> {{ 'Crm.AccountMessage.Owner' | transloco }} <p-sortIcon\n            field=\"owner_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"organization_size_id\"> {{ 'Crm.AccountMessage.Size' | transloco }} <p-sortIcon\n            field=\"organization_size_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"expected_mrr\"> {{ 'Crm.AccountMessage.MRR' | transloco }} <p-sortIcon field=\"expected_mrr\">\n        </p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"signed_up_at\"> {{ 'Crm.AccountMessage.SignUp' | transloco }} <p-sortIcon field=\"signed_up_at\">\n        </p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"sessions_last_quarter\"> {{ 'Crm.AccountMessage.Quarter' | transloco }} <p-sortIcon field=\"sessions_last_quarter\">\n        </p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"sessions_last_month\"> {{ 'Crm.AccountMessage.Month' | transloco }} <p-sortIcon field=\"sessions_last_month\">\n        </p-sortIcon>\n        </th>\n        <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\" let-account>\n      <tr>\n        <td data-head=\"Name\" class=\"name-column\">\n          <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, account.id]\" class=\"name-link\">\n            <img alt=\"company image\" [src]=\"getAccountLogo(account.company_url)\" class=\"img-fluid company-logo me-2\"\n                 onerror=\"this.onerror=null;this.src='assets/img/icons/company.png';\" />\n            <span class=\"account-name\">{{ account.name }}</span>\n            <i [ngClass]=\"getUserAccountInfo(account).iconClass\" [ngbTooltip]=\"getUserAccountInfo(account).message\"\n               class=\"info-icon\"></i>\n          </a>\n        </td>\n        <td data-head=\"Location\">{{ account.location }}</td>\n        <td data-head=\"Owner\">\n          <a [routerLink]=\"['/members', account?.owner?.slug]\"> {{ account.owner | ifNameNullShowEmail }}</a>\n        </td>\n        <td data-head=\"Size\">{{ account?.organisation_size?.name !== 'Not available' ? account?.organisation_size?.name : '' }}\n</td>\n        <td data-head=\"MRR\">{{ account?.expected_mrr !== null && account?.expected_mrr !== 0 ? formatMRR(account?.expected_mrr) : '' }}\n</td>\n        <td data-head=\"Signed Up\">{{ account.signed_up_at | date: 'dd/MMM/yyyy' }}</td>\n        <td data-head=\"Quarter\">{{ account.sessions_last_quarter }}</td>\n        <td data-head=\"Month\">{{ account.sessions_last_month }}</td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline\">\n            <li ngbTooltip=\"See contacts\" class=\"me-2 me-sm-3 see-icon\"\n              [routerLink]=\"['/' + subscription?.slug + routers.contacts, account.id]\">\n              <i class=\"fa fa-eye\" aria-hidden=\"true\"></i>\n            </li>\n            <ng-container *ngIf=\"hasAccess || account.owner_id === userId\">\n              <li ngbTooltip=\"Edit\" class=\"me-2 me-sm-3\" [routerLink]=\"[\n                                    '/' + subscription?.slug + routers.accounts,\n                                    account.id\n                                ]\">\n                <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n              </li>\n              <li ngbTooltip=\"Delete\" class=\"me-2 me-sm-3\">\n                <i class=\"fa fa-trash delete-icon\" (click)=\"onDelete(account.id, subscription.id)\"\n                  aria-hidden=\"true\"></i>\n              </li>\n            </ng-container>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n<div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n</div>\n  <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoAccounMessage' | transloco\"> </pw-no-data>\n</div>\n<ng-container *rbacAllow=\"'Pages.Beta'\">\n  <div class=\"row mt-5\" *ngIf=\"data.unfiltered_count !== 0 && isLoaded\">\n    <!-- Drill Down -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Drill Down</h5>\n      <div class=\"primeng-datatable-container table-responsive\" *ngIf=\"accountInsight?.length\">\n        <p-table class=\"table\" #dt [value]=\"accountInsight\" [paginator]=\"accountInsight?.length !== 0\" [rows]=\"PAGE_SIZE\"\n          [totalRecords]=\"accountInsight.length\" [lazy]=\"true\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Title' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Value' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Reason' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\" let-insight>\n            <tr>\n              <td data-head=\"Title\">{{ insight.title }}</td>\n              <td data-head=\"Value\">{{ insight.value }}</td>\n              <td data-head=\"Reason\">{{ insight.reason }}</td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\" *ngIf=\"accountInsight?.length !== 0\">{{ 'Label.Total' | transloco }}: {{ accountInsight.length }}</span>\n      </div>\n      <div *ngIf=\"accountInsight?.length === 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoInsighMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n    <!-- Geography -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Geography</h5>\n      <div>\n        <ng-template [ngIf]=\"accountGeography\">\n          <plotly-plot [data]=\"accountGeography?.data\" [layout]=\"accountGeography?.layout\">\n          </plotly-plot>\n        </ng-template>\n      </div>\n      <div *ngIf=\"!accountGeography\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoInsighMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n    <!-- Last Activities -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Last Activities</h5>\n      <div class=\"primeng-datatable-container table-responsive\" *ngIf=\"accountActivities?.length\">\n        <p-table class=\"table\" #dt [value]=\"accountActivities\" [paginator]=\"accountInsight?.length !== 0\" [rows]=\"PAGE_SIZE\"\n          [totalRecords]=\"accountActivities.length\" [lazy]=\"true\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Owner' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Account' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Contact' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Action' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Comment' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\" let-activities>\n            <tr>\n              <td data-head=\"Owner\"> {{ activities.owner?.first_name }} {{ activities.owner?.last_name }} </td>\n              <td data-head=\"Account\">{{ activities.crm_account?.name }}</td>\n              <td data-head=\"Contact\"> {{ activities.crm_contact?.first_name }} {{ activities.crm_contact?.last_name }}\n              </td>\n              <td data-head=\"Action\">{{ activities.crm_action?.name }}</td>\n              <td data-head=\"Comment\">{{ activities.comment }}</td>\n            </tr>\n          </ng-template>\n        </p-table>\n      <span class=\"total-records-count\" *ngIf=\"accountInsight?.length !== 0\">{{ 'Label.Total' | transloco }}: {{ accountActivities.length }}</span>\n      </div>\n      <div *ngIf=\"accountActivities?.length === 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoInsighMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n    <!-- Last Invoices -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Last Invoices</h5>\n      <div class=\"primeng-datatable-container table-responsive\" *ngIf=\"accountLastInvoices?.length\">\n        <p-table class=\"table\" #dt [value]=\"accountLastInvoices\" [paginator]=\"accountLastInvoices?.length !== 0\" [rows]=\"PAGE_SIZE\"\n          [totalRecords]=\"accountLastInvoices.length\" [lazy]=\"true\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Owner' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Account' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Contact' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.File' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\" let-invoice>\n            <tr>\n              <td data-head=\"Owner\"> {{ invoice.owner?.first_name }} {{ invoice.owner?.last_name }} </td>\n              <td data-head=\"Organization\"> {{ invoice.subcription?.organization }} </td>\n              <td data-head=\"Contact\">{{ invoice.subcription?.contact_name }}</td>\n              <td data-head=\"File\">\n                <a target=\"blank\" href=\"{{ invoice.file }}\">{{ invoice.file.split('/')[invoice.file.split('/').length -\n                  1] }}</a>\n              </td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\" *ngIf=\"accountLastInvoices?.length !== 0\">{{ 'Label.Total' | transloco }}: {{ accountLastInvoices.length }}</span>\n      </div>\n      <div *ngIf=\"accountLastInvoices?.length === 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoInsighMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n  </div>\n</ng-container>", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.location{background-color:#fff}.company-logo{height:20px;width:20px}::ng-deep .ui-multiselect{display:inline-block}::ng-deep body .ui-multiselect .ui-multiselect-label{font-weight:700}.name-column{text-align:left}.account-name{margin-right:5px}.info-icon{vertical-align:middle;margin-left:5px}.account-link-icon{color:gray}.money-icon{color:green;font-size:.85em;background-color:#90ee90;border-radius:50%;padding:5px;width:18.5px;box-shadow:0 0 10px #00800080}\n"] }]
+            args: [{ selector: 'pw-smart-crm-companies', template: "<div class=\"row\">\n  <div class=\"col-12 mb-3\">\n    <h2>Accounts</h2>\n    <a class=\"btn btn-sm btn-outline-primary float-end\" data-cy=\"add-contact\"\n      [routerLink]=\"['/' + subscription?.slug + routers.addAccount]\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Crm.AccountMessage.AddAccount' | transloco }} </a>\n  </div>\n</div>\n<div class=\"w-100 text-center mt-3\" *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container table-responsive\" [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #dt [value]=\"data.accounts\" [paginator]=\"data.object_count !== 0\" [lazy]=\"true\" [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\" [loading]=\"loading\" [filterDelay]=\"1000\" (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n    <ng-template pTemplate=\"caption\">\n      <div class=\"row m-0\">\n        <div class=\"col-sm-4\">\n          <p-multiSelect placeholder=\"Select Industry\" [options]=\"searchOptions\" [(ngModel)]=\"filterByIndustries\"\n            (onChange)=\"onSearchOptionChange($event, 'industry')\" [filter]=\"false\" [showHeader]=\"true\"\n            [showToggleAll]=\"true\" appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"col-sm-4\">\n          <p-multiSelect placeholder=\"Select Size\" [options]=\"organizationSizes\" [(ngModel)]=\"filterBySizeId\"\n            (onChange)=\"onSearchOptionChange($event, 'size')\" [filter]=\"false\" [showHeader]=\"true\"\n            [showToggleAll]=\"true\" appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"col-sm-4\">\n          <p-multiSelect placeholder=\"Select Status\" [options]=\"status\" [(ngModel)]=\"filterByStatus\"\n            (onChange)=\"onSearchOptionChange($event, 'status')\" [filter]=\"false\" [showHeader]=\"true\"\n            [showToggleAll]=\"true\" appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"col-sm-4\">\n          <p-multiSelect placeholder=\"Select Priority\" [options]=\"priority\" [(ngModel)]=\"filterByPriority\"\n            (onChange)=\"onSearchOptionChange($event, 'priority')\" [filter]=\"false\" [showHeader]=\"true\"\n            [showToggleAll]=\"true\" appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"col-sm-4\">\n          <p-multiSelect placeholder=\"Select Source\" [options]=\"source\" [(ngModel)]=\"filterBySource\"\n            (onChange)=\"onSearchOptionChange($event, 'source')\" [filter]=\"false\" [showHeader]=\"true\"\n            [showToggleAll]=\"true\" appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"col-sm-4 mb-2\">\n          <input ngx-gp-autocomplete class=\"form-control location\" #places=\"ngx-places\" [(ngModel)]=\"searchLocationText\"\n            placeholder=\"Search location...\" (keyup)=\"locationSearch($event)\"\n            (onAddressChange)=\"handleAddressChange($event)\" />\n        </div>\n      </div>\n      <div class=\"search-filter\">\n        <a class=\"mt-3 ms-3 text-start text-primary\" (click)=\"clearFilters()\">Clear all filters</a>\n        <div class=\"text-end mt-0 mt-sm-3\">\n          <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n          <input type=\"text\" [(ngModel)]=\"searchText\" pInputText size=\"50\" placeholder=\"Search accounts...\"\n            (input)=\"dt.filterGlobal($event.target.value, 'contains')\" class=\"mw-90\" />\n        </div>\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\" pSortableColumn=\"name\"> {{ 'Crm.AccountMessage.Name' | transloco }} <p-sortIcon field=\"name\">\n          </p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"location\"> {{ 'Crm.AccountMessage.Location' | transloco }} <p-sortIcon\n            field=\"location\"></p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"owner_id\"> {{ 'Crm.AccountMessage.Owner' | transloco }} <p-sortIcon\n            field=\"owner_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"organization_size_id\"> {{ 'Crm.AccountMessage.Size' | transloco }} <p-sortIcon\n            field=\"organization_size_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"expected_mrr\"> {{ 'Crm.AccountMessage.MRR' | transloco }} <p-sortIcon field=\"expected_mrr\">\n        </p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"signed_up_at\"> {{ 'Crm.AccountMessage.SignUp' | transloco }} <p-sortIcon field=\"signed_up_at\">\n        </p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"sessions_last_quarter\"> {{ 'Crm.AccountMessage.Quarter' | transloco }} <p-sortIcon field=\"sessions_last_quarter\">\n        </p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"sessions_last_month\"> {{ 'Crm.AccountMessage.Month' | transloco }} <p-sortIcon field=\"sessions_last_month\">\n        </p-sortIcon>\n        </th>\n        <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\" let-account>\n      <tr>\n        <td data-head=\"Name\" class=\"name-column\">\n          <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, account.id]\" class=\"name-link\">\n            <img alt=\"company image\" [src]=\"getAccountLogo(account.company_url)\" class=\"img-fluid company-logo me-2\"\n                 onerror=\"this.onerror=null;this.src='assets/img/icons/company.png';\" />\n            <span class=\"account-name\">{{ account.name }}</span>\n            <i [ngClass]=\"getUserAccountInfo(account).iconClass\" [ngbTooltip]=\"getUserAccountInfo(account).message\"\n               class=\"info-icon\"></i>\n          </a>\n        </td>\n        <td data-head=\"Location\">{{ account.location }}</td>\n        <td data-head=\"Owner\">\n          <a [routerLink]=\"['/members', account?.owner?.slug]\"> {{ account.owner | ifNameNullShowEmail }}</a>\n        </td>\n        <td data-head=\"Size\">{{ account?.organisation_size?.name !== 'Not available' ? account?.organisation_size?.name : '' }}\n</td>\n        <td data-head=\"MRR\">{{ account?.expected_mrr !== null && account?.expected_mrr !== 0 ? formatMRR(account?.expected_mrr) : '' }}\n</td>\n        <td data-head=\"Signed Up\">{{ account.signed_up_at | date: 'dd/MMM/yyyy' }}</td>\n        <td data-head=\"Quarter\">{{ account.sessions_last_quarter }}</td>\n        <td data-head=\"Month\">{{ account.sessions_last_month }}</td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline\">\n            <li ngbTooltip=\"See contacts\" class=\"me-2 me-sm-3 see-icon\"\n              [routerLink]=\"['/' + subscription?.slug + routers.contacts, account.id]\">\n              <i class=\"fa fa-eye\" aria-hidden=\"true\"></i>\n            </li>\n            <ng-container *ngIf=\"hasAccess || account.owner_id === userId\">\n              <li ngbTooltip=\"Edit\" class=\"me-2 me-sm-3\" [routerLink]=\"[\n                                    '/' + subscription?.slug + routers.accounts,\n                                    account.id\n                                ]\">\n                <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n              </li>\n              <li ngbTooltip=\"Delete\" class=\"me-2 me-sm-3\">\n                <i class=\"fa fa-trash delete-icon\" (click)=\"onDelete(account.id, subscription.id)\"\n                  aria-hidden=\"true\"></i>\n              </li>\n            </ng-container>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n<div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n</div>\n  <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoAccounMessage' | transloco\"> </pw-no-data>\n</div>\n<ng-container *rbacAllow=\"'Pages.Beta'\">\n  <div class=\"row mt-5\" *ngIf=\"data.unfiltered_count !== 0 && isLoaded\">\n    <!-- Drill Down -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Drill Down</h5>\n      <div class=\"primeng-datatable-container table-responsive\" *ngIf=\"accountInsight?.length\">\n        <p-table class=\"table\" #dt [value]=\"accountInsight\" [paginator]=\"accountInsight?.length !== 0\" [rows]=\"PAGE_SIZE\"\n          [totalRecords]=\"accountInsight.length\" [lazy]=\"true\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Title' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Value' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Reason' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\" let-insight>\n            <tr>\n              <td data-head=\"Title\">{{ insight.title }}</td>\n              <td data-head=\"Value\">{{ insight.value }}</td>\n              <td data-head=\"Reason\">{{ insight.reason }}</td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\" *ngIf=\"accountInsight?.length !== 0\">{{ 'Label.Total' | transloco }}: {{ accountInsight.length }}</span>\n      </div>\n      <div *ngIf=\"accountInsight?.length === 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n    <!-- Geography -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Geography</h5>\n      <div>\n        <ng-template [ngIf]=\"accountGeography\">\n          <plotly-plot [data]=\"accountGeography?.data\" [layout]=\"accountGeography?.layout\">\n          </plotly-plot>\n        </ng-template>\n      </div>\n      <div *ngIf=\"!accountGeography\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n    <!-- Last Activities -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Last Activities</h5>\n      <div class=\"primeng-datatable-container table-responsive\" *ngIf=\"accountActivities?.length\">\n        <p-table class=\"table\" #dt [value]=\"accountActivities\" [paginator]=\"accountInsight?.length !== 0\" [rows]=\"PAGE_SIZE\"\n          [totalRecords]=\"accountActivities.length\" [lazy]=\"true\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Owner' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Account' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Contact' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Action' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Comment' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\" let-activities>\n            <tr>\n              <td data-head=\"Owner\"> {{ activities.owner?.first_name }} {{ activities.owner?.last_name }} </td>\n              <td data-head=\"Account\">{{ activities.crm_account?.name }}</td>\n              <td data-head=\"Contact\"> {{ activities.crm_contact?.first_name }} {{ activities.crm_contact?.last_name }}\n              </td>\n              <td data-head=\"Action\">{{ activities.crm_action?.name }}</td>\n              <td data-head=\"Comment\">{{ activities.comment }}</td>\n            </tr>\n          </ng-template>\n        </p-table>\n      <span class=\"total-records-count\" *ngIf=\"accountInsight?.length !== 0\">{{ 'Label.Total' | transloco }}: {{ accountActivities.length }}</span>\n      </div>\n      <div *ngIf=\"accountActivities?.length === 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n    <!-- Last Invoices -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Last Invoices</h5>\n      <div class=\"primeng-datatable-container table-responsive\" *ngIf=\"accountLastInvoices?.length\">\n        <p-table class=\"table\" #dt [value]=\"accountLastInvoices\" [paginator]=\"accountLastInvoices?.length !== 0\" [rows]=\"PAGE_SIZE\"\n          [totalRecords]=\"accountLastInvoices.length\" [lazy]=\"true\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Owner' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Account' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Contact' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.File' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\" let-invoice>\n            <tr>\n              <td data-head=\"Owner\"> {{ invoice.owner?.first_name }} {{ invoice.owner?.last_name }} </td>\n              <td data-head=\"Organization\"> {{ invoice.subscription?.organization }} </td>\n              <td data-head=\"Contact\">{{ invoice.subscription?.contact_name }}</td>\n              <td data-head=\"File\">\n                <a target=\"blank\" href=\"{{ invoice.file }}\">{{ invoice.file.split('/')[invoice.file.split('/').length -\n                  1] }}</a>\n              </td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\" *ngIf=\"accountLastInvoices?.length !== 0\">{{ 'Label.Total' | transloco }}: {{ accountLastInvoices.length }}</span>\n      </div>\n      <div *ngIf=\"accountLastInvoices?.length === 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.location{background-color:#fff}.company-logo{height:20px;width:20px}::ng-deep .ui-multiselect{display:inline-block}::ng-deep body .ui-multiselect .ui-multiselect-label{font-weight:700}.name-column{text-align:left}.account-name{margin-right:5px}.info-icon{vertical-align:middle;margin-left:5px}.account-link-icon{color:gray}.money-icon{color:green;font-size:.85em;background-color:#90ee90;border-radius:50%;padding:5px;width:18.5px;box-shadow:0 0 10px #00800080}\n"] }]
         }], ctorParameters: () => [{ type: i1.CrmService }, { type: i2.CommonService }, { type: i2.LogoCacheService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }] });
 class SmartCrmCompetitionComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmCompetitionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: SmartCrmCompetitionComponent, selector: "pw-smart-crm-competition", ngImport: i0, template: "<pw-coming-soon message=\"Competition\"></pw-coming-soon>\n", dependencies: [{ kind: "component", type: i11.ComingSoonComponent, selector: "pw-coming-soon", inputs: ["message"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmCompetitionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmCompetitionComponent, selector: "pw-smart-crm-competition", ngImport: i0, template: "<pw-coming-soon message=\"Competition\"></pw-coming-soon>\n", dependencies: [{ kind: "component", type: i11.ComingSoonComponent, selector: "pw-coming-soon", inputs: ["message"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmCompetitionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmCompetitionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pw-smart-crm-competition', template: "<pw-coming-soon message=\"Competition\"></pw-coming-soon>\n" }]
         }] });
@@ -1542,12 +1542,12 @@ class SmartCrmSettingsDetailsComponent extends AppBaseComponent {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmSettingsDetailsComponent, deps: [{ token: i1.CrmService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: SmartCrmSettingsDetailsComponent, selector: "pw-smart-crm-settings-details", usesInheritance: true, ngImport: i0, template: "<div class=\"me-auto col-xs-6\">\n  <a href=\"javascript:void(0)\" (click)=\"back()\" class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\"\n      aria-hidden=\"true\"></i></a>\n  <h3 class=\"m-subheader__title m-subheader__title--separator\">\n    <span>Action: {{ data?.name ? data?.name : ('Label.AddNew' | transloco) }}</span>\n  </h3>\n</div>\n<div class=\"p-2 mt-3\">\n  <form [formGroup]=\"form\" (ngSubmit)=\"onSave()\">\n    <div class=\"row\">\n      <div class=\"col-12 col-md-3\">\n        <pw-input-container [label]=\"'Crm.Settings.Name' | transloco\" name=\"name\"\n          [errorMsg]=\"'Crm.Settings.NameFieldErrorMessage' | transloco\">\n          <input type=\"text\" class=\"form-control\" formControlName=\"name\" id=\"name\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['name'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-4 col-md-2\">\n         <label class=\"info-circle mb-2\">{{ 'Crm.Settings.TargetWeek' | transloco }} <span\n            class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.Settings.Tooltip.TargetWeek' | transloco }}</span>\n        </label>\n        <select formControlName=\"target_week\" class=\"form-control form-select\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['target_week'].errors }\">\n          <option *ngFor=\"let option of targetWeek\" [value]=\"option\">{{ option }}</option>\n        </select>\n        <div class=\"danger\" *ngIf=\"\n                        form.get('target_week').touched && form.get('target_week')?.errors?.required\n                    \">\n          <span> {{ 'Crm.Settings.TargetWeekErrorMessage' | transloco }} </span>\n        </div>\n      </div>\n      <div class=\"col-12 col-sm-4 col-md-2\">\n        <label class=\"info-circle mb-2\">{{ 'Crm.Settings.TargetWeekMin' | transloco }} <span\n            class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.Settings.Tooltip.TargetWeekMin' | transloco }}</span>\n        </label>\n        <select formControlName=\"target_week_min\" class=\"form-control form-select\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['target_week_min'].errors }\">\n          <option *ngFor=\"let option of targetWeekMin\" [value]=\"option\"> {{ option }} </option>\n        </select>\n        <div class=\"danger\" *ngIf=\"\n                        form.get('target_week_min').touched &&\n                        form.get('target_week_min')?.errors?.required\n                    \">\n          <span> {{ 'Crm.Settings.TargetWeekMinErrorMessage' | transloco }} </span>\n        </div>\n      </div>\n      <div class=\"col-12 col-sm-4 col-md-2\">\n        <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Crm.Settings.Tooltip.PreviousAction' | transloco\"\n          [label]=\"'Crm.Settings.PreviousAction' | transloco\" name=\"previous_action_id\"\n          *ngIf=\"actions$ | async as actions\">\n          <p-dropdown [options]=\"actions['crm_actions']\" formControlName=\"previous_action_id\" optionLabel=\"name\"\n            [showClear]=\"true\" placeholder=\"Select a PreviousAction\"></p-dropdown>\n        </pw-input-container>\n      </div>\n      <div class=\"col-md-2 col-lg-2 pe-0 mx-2\">\n        <div class=\"mb-3\">\n          <label class=\"info-circle mb-2\">{{ 'Crm.Settings.Visible' | transloco }} <span\n              class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.Settings.Tooltip.Visible' | transloco }}</span>\n          </label>\n          <ui-switch checked class=\"d-block\" (change)=\"onChange($event)\" name=\"visible\" formControlName=\"visible\">\n          </ui-switch>\n        </div>\n      </div>\n      <div class=\"col-12 text-end mt-3\">\n        <button type=\"button\" class=\"btn btn-outline-default me-2\" (click)=\"back()\"> {{ 'Button.Cancel' | transloco }}\n        </button>\n        <button type=\"submit\" class=\"btn btn-primary\"> {{ 'Button.Submit' | transloco }} </button>\n      </div>\n    </div>\n  </form>\n</div>", styles: [".vertical-bottom{vertical-align:text-bottom}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4$1.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i11.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText"] }, { kind: "component", type: i6$1.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "dropdownIcon", "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$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmSettingsDetailsComponent, deps: [{ token: i1.CrmService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmSettingsDetailsComponent, selector: "pw-smart-crm-settings-details", usesInheritance: true, ngImport: i0, template: "<div class=\"me-auto col-xs-6\">\n  <a href=\"javascript:void(0)\" (click)=\"back()\" class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\"\n      aria-hidden=\"true\"></i></a>\n  <h3 class=\"m-subheader__title m-subheader__title--separator\">\n    <span>Action: {{ data?.name ? data?.name : ('Label.AddNew' | transloco) }}</span>\n  </h3>\n</div>\n<div class=\"p-2 mt-3\">\n  <form [formGroup]=\"form\" (ngSubmit)=\"onSave()\">\n    <div class=\"row\">\n      <div class=\"col-12 col-md-3\">\n        <pw-input-container [label]=\"'Crm.Settings.Name' | transloco\" name=\"name\"\n          [errorMsg]=\"'Crm.Settings.NameFieldErrorMessage' | transloco\">\n          <input type=\"text\" class=\"form-control\" formControlName=\"name\" id=\"name\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['name'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-4 col-md-2\">\n         <label class=\"info-circle mb-2\">{{ 'Crm.Settings.TargetWeek' | transloco }} <span\n            class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.Settings.Tooltip.TargetWeek' | transloco }}</span>\n        </label>\n        <select formControlName=\"target_week\" class=\"form-control form-select\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['target_week'].errors }\">\n          <option *ngFor=\"let option of targetWeek\" [value]=\"option\">{{ option }}</option>\n        </select>\n        <div class=\"danger\" *ngIf=\"\n                        form.get('target_week').touched && form.get('target_week')?.errors?.required\n                    \">\n          <span> {{ 'Crm.Settings.TargetWeekErrorMessage' | transloco }} </span>\n        </div>\n      </div>\n      <div class=\"col-12 col-sm-4 col-md-2\">\n        <label class=\"info-circle mb-2\">{{ 'Crm.Settings.TargetWeekMin' | transloco }} <span\n            class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.Settings.Tooltip.TargetWeekMin' | transloco }}</span>\n        </label>\n        <select formControlName=\"target_week_min\" class=\"form-control form-select\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['target_week_min'].errors }\">\n          <option *ngFor=\"let option of targetWeekMin\" [value]=\"option\"> {{ option }} </option>\n        </select>\n        <div class=\"danger\" *ngIf=\"\n                        form.get('target_week_min').touched &&\n                        form.get('target_week_min')?.errors?.required\n                    \">\n          <span> {{ 'Crm.Settings.TargetWeekMinErrorMessage' | transloco }} </span>\n        </div>\n      </div>\n      <div class=\"col-12 col-sm-4 col-md-2\">\n        <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Crm.Settings.Tooltip.PreviousAction' | transloco\"\n          [label]=\"'Crm.Settings.PreviousAction' | transloco\" name=\"previous_action_id\"\n          *ngIf=\"actions$ | async as actions\">\n          <p-dropdown [options]=\"actions['crm_actions']\" formControlName=\"previous_action_id\" optionLabel=\"name\"\n            [showClear]=\"true\" placeholder=\"Select a PreviousAction\"></p-dropdown>\n        </pw-input-container>\n      </div>\n      <div class=\"col-md-2 col-lg-2 pe-0 mx-2\">\n        <div class=\"mb-3\">\n          <label class=\"info-circle mb-2\">{{ 'Crm.Settings.Visible' | transloco }} <span\n              class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.Settings.Tooltip.Visible' | transloco }}</span>\n          </label>\n          <ui-switch checked class=\"d-block\" (change)=\"onChange($event)\" name=\"visible\" formControlName=\"visible\">\n          </ui-switch>\n        </div>\n      </div>\n      <div class=\"col-12 text-end mt-3\">\n        <button type=\"button\" class=\"btn btn-outline-default me-2\" (click)=\"back()\"> {{ 'Button.Cancel' | transloco }}\n        </button>\n        <button type=\"submit\" class=\"btn btn-primary\"> {{ 'Button.Submit' | transloco }} </button>\n      </div>\n    </div>\n  </form>\n</div>\n", styles: [".vertical-bottom{vertical-align:text-bottom}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4$1.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i11.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText"] }, { kind: "component", type: i6$1.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$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmSettingsDetailsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmSettingsDetailsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-smart-crm-settings-details', template: "<div class=\"me-auto col-xs-6\">\n  <a href=\"javascript:void(0)\" (click)=\"back()\" class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\"\n      aria-hidden=\"true\"></i></a>\n  <h3 class=\"m-subheader__title m-subheader__title--separator\">\n    <span>Action: {{ data?.name ? data?.name : ('Label.AddNew' | transloco) }}</span>\n  </h3>\n</div>\n<div class=\"p-2 mt-3\">\n  <form [formGroup]=\"form\" (ngSubmit)=\"onSave()\">\n    <div class=\"row\">\n      <div class=\"col-12 col-md-3\">\n        <pw-input-container [label]=\"'Crm.Settings.Name' | transloco\" name=\"name\"\n          [errorMsg]=\"'Crm.Settings.NameFieldErrorMessage' | transloco\">\n          <input type=\"text\" class=\"form-control\" formControlName=\"name\" id=\"name\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['name'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-4 col-md-2\">\n         <label class=\"info-circle mb-2\">{{ 'Crm.Settings.TargetWeek' | transloco }} <span\n            class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.Settings.Tooltip.TargetWeek' | transloco }}</span>\n        </label>\n        <select formControlName=\"target_week\" class=\"form-control form-select\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['target_week'].errors }\">\n          <option *ngFor=\"let option of targetWeek\" [value]=\"option\">{{ option }}</option>\n        </select>\n        <div class=\"danger\" *ngIf=\"\n                        form.get('target_week').touched && form.get('target_week')?.errors?.required\n                    \">\n          <span> {{ 'Crm.Settings.TargetWeekErrorMessage' | transloco }} </span>\n        </div>\n      </div>\n      <div class=\"col-12 col-sm-4 col-md-2\">\n        <label class=\"info-circle mb-2\">{{ 'Crm.Settings.TargetWeekMin' | transloco }} <span\n            class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.Settings.Tooltip.TargetWeekMin' | transloco }}</span>\n        </label>\n        <select formControlName=\"target_week_min\" class=\"form-control form-select\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['target_week_min'].errors }\">\n          <option *ngFor=\"let option of targetWeekMin\" [value]=\"option\"> {{ option }} </option>\n        </select>\n        <div class=\"danger\" *ngIf=\"\n                        form.get('target_week_min').touched &&\n                        form.get('target_week_min')?.errors?.required\n                    \">\n          <span> {{ 'Crm.Settings.TargetWeekMinErrorMessage' | transloco }} </span>\n        </div>\n      </div>\n      <div class=\"col-12 col-sm-4 col-md-2\">\n        <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Crm.Settings.Tooltip.PreviousAction' | transloco\"\n          [label]=\"'Crm.Settings.PreviousAction' | transloco\" name=\"previous_action_id\"\n          *ngIf=\"actions$ | async as actions\">\n          <p-dropdown [options]=\"actions['crm_actions']\" formControlName=\"previous_action_id\" optionLabel=\"name\"\n            [showClear]=\"true\" placeholder=\"Select a PreviousAction\"></p-dropdown>\n        </pw-input-container>\n      </div>\n      <div class=\"col-md-2 col-lg-2 pe-0 mx-2\">\n        <div class=\"mb-3\">\n          <label class=\"info-circle mb-2\">{{ 'Crm.Settings.Visible' | transloco }} <span\n              class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.Settings.Tooltip.Visible' | transloco }}</span>\n          </label>\n          <ui-switch checked class=\"d-block\" (change)=\"onChange($event)\" name=\"visible\" formControlName=\"visible\">\n          </ui-switch>\n        </div>\n      </div>\n      <div class=\"col-12 text-end mt-3\">\n        <button type=\"button\" class=\"btn btn-outline-default me-2\" (click)=\"back()\"> {{ 'Button.Cancel' | transloco }}\n        </button>\n        <button type=\"submit\" class=\"btn btn-primary\"> {{ 'Button.Submit' | transloco }} </button>\n      </div>\n    </div>\n  </form>\n</div>", styles: [".vertical-bottom{vertical-align:text-bottom}\n"] }]
+            args: [{ selector: 'pw-smart-crm-settings-details', template: "<div class=\"me-auto col-xs-6\">\n  <a href=\"javascript:void(0)\" (click)=\"back()\" class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\"\n      aria-hidden=\"true\"></i></a>\n  <h3 class=\"m-subheader__title m-subheader__title--separator\">\n    <span>Action: {{ data?.name ? data?.name : ('Label.AddNew' | transloco) }}</span>\n  </h3>\n</div>\n<div class=\"p-2 mt-3\">\n  <form [formGroup]=\"form\" (ngSubmit)=\"onSave()\">\n    <div class=\"row\">\n      <div class=\"col-12 col-md-3\">\n        <pw-input-container [label]=\"'Crm.Settings.Name' | transloco\" name=\"name\"\n          [errorMsg]=\"'Crm.Settings.NameFieldErrorMessage' | transloco\">\n          <input type=\"text\" class=\"form-control\" formControlName=\"name\" id=\"name\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['name'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-4 col-md-2\">\n         <label class=\"info-circle mb-2\">{{ 'Crm.Settings.TargetWeek' | transloco }} <span\n            class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.Settings.Tooltip.TargetWeek' | transloco }}</span>\n        </label>\n        <select formControlName=\"target_week\" class=\"form-control form-select\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['target_week'].errors }\">\n          <option *ngFor=\"let option of targetWeek\" [value]=\"option\">{{ option }}</option>\n        </select>\n        <div class=\"danger\" *ngIf=\"\n                        form.get('target_week').touched && form.get('target_week')?.errors?.required\n                    \">\n          <span> {{ 'Crm.Settings.TargetWeekErrorMessage' | transloco }} </span>\n        </div>\n      </div>\n      <div class=\"col-12 col-sm-4 col-md-2\">\n        <label class=\"info-circle mb-2\">{{ 'Crm.Settings.TargetWeekMin' | transloco }} <span\n            class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.Settings.Tooltip.TargetWeekMin' | transloco }}</span>\n        </label>\n        <select formControlName=\"target_week_min\" class=\"form-control form-select\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['target_week_min'].errors }\">\n          <option *ngFor=\"let option of targetWeekMin\" [value]=\"option\"> {{ option }} </option>\n        </select>\n        <div class=\"danger\" *ngIf=\"\n                        form.get('target_week_min').touched &&\n                        form.get('target_week_min')?.errors?.required\n                    \">\n          <span> {{ 'Crm.Settings.TargetWeekMinErrorMessage' | transloco }} </span>\n        </div>\n      </div>\n      <div class=\"col-12 col-sm-4 col-md-2\">\n        <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Crm.Settings.Tooltip.PreviousAction' | transloco\"\n          [label]=\"'Crm.Settings.PreviousAction' | transloco\" name=\"previous_action_id\"\n          *ngIf=\"actions$ | async as actions\">\n          <p-dropdown [options]=\"actions['crm_actions']\" formControlName=\"previous_action_id\" optionLabel=\"name\"\n            [showClear]=\"true\" placeholder=\"Select a PreviousAction\"></p-dropdown>\n        </pw-input-container>\n      </div>\n      <div class=\"col-md-2 col-lg-2 pe-0 mx-2\">\n        <div class=\"mb-3\">\n          <label class=\"info-circle mb-2\">{{ 'Crm.Settings.Visible' | transloco }} <span\n              class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.Settings.Tooltip.Visible' | transloco }}</span>\n          </label>\n          <ui-switch checked class=\"d-block\" (change)=\"onChange($event)\" name=\"visible\" formControlName=\"visible\">\n          </ui-switch>\n        </div>\n      </div>\n      <div class=\"col-12 text-end mt-3\">\n        <button type=\"button\" class=\"btn btn-outline-default me-2\" (click)=\"back()\"> {{ 'Button.Cancel' | transloco }}\n        </button>\n        <button type=\"submit\" class=\"btn btn-primary\"> {{ 'Button.Submit' | transloco }} </button>\n      </div>\n    </div>\n  </form>\n</div>\n", styles: [".vertical-bottom{vertical-align:text-bottom}\n"] }]
         }], ctorParameters: () => [{ type: i1.CrmService }, { type: i0.Injector }] });
 class SmartCrmActionsComponent extends AppBaseComponent {
@@ -1637,10 +1637,10 @@ class SmartCrmActionsComponent extends AppBaseComponent {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmActionsComponent, deps: [{ token: i1.CrmService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: SmartCrmActionsComponent, selector: "pw-smart-crm-actions", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 mb-3\">\n    <p>\n      Please define the actions you want to associate with your contacts. For example you\n      could choose Phone Call, or Meeting, or Email Sent, etc.\n    </p>\n    <a *ngIf=\"data.object_count === 0 && data.unfiltered_count === 0 && isLoaded\"\n      class=\"btn btn-sm btn-outline-primary float-end build-default-action-button\"\n      (click)=\"buildDefaultActions()\"\n      data-cy=\"add-action\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.Settings.BuildDefaultAction' | transloco }}\n    </a>\n    <a *ngIf=\"hasAccess\"\n      class=\"btn btn-sm btn-outline-primary float-end\"\n      [routerLink]=\"['/' + subscription?.slug + routers.configurationDetails + 'add']\"\n      data-cy=\"add-action\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.Settings.AddAction' | transloco }}\n    </a>\n  </div>\n  <div class=\"w-100 text-center mt-3\"\n    *ngIf=\"!isLoaded\">\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n  <div class=\"col-12\">\n    <div class=\"primeng-datatable-container table-responsive\"\n    [class.hideTable]=\"data.unfiltered_count === 0\">\n      <p-table #dt\n        [value]=\"data.crm_actions\"\n        [paginator]=\"data.object_count!==0\"\n        [lazy]=\"true\"\n        [rows]=\"100\"\n        [totalRecords]=\"data.object_count\"\n        [loading]=\"loading\"\n        [filterDelay]=\"1000\"\n        (onLazyLoad)=\"onLazyLoad($event)\"\n        [customSort]=\"true\">\n        <ng-template pTemplate=\"caption\">\n          <div class=\"text-end\">\n            <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n            <input type=\"text\"\n              [(ngModel)]=\"searchText\"\n              pInputText\n              size=\"50\"\n              placeholder=\"Search action...\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n              class=\"mw-90\" />\n          </div>\n        </ng-template>\n          <ng-template pTemplate=\"header\" >\n            <tr>\n              <th scope=\"true\"\n                pSortableColumn=\"name\">\n                {{ 'Crm.Settings.Name' | transloco }}\n                <p-sortIcon field=\"name\"></p-sortIcon>\n              </th>\n              <th scope=\"true\"\n                pSortableColumn=\"target_week\">\n                {{ 'Crm.Settings.TargetWeek' | transloco }}\n                <p-sortIcon field=\"target_week\"></p-sortIcon>\n              </th>\n              <th scope=\"true\"\n                pSortableColumn=\"target_week_min\">\n                {{ 'Crm.Settings.TargetWeekMin' | transloco }}\n                <p-sortIcon field=\"target_week_min\"></p-sortIcon>\n              </th>\n              <th scope=\"true\"\n                pSortableColumn=\"visible\">\n                {{ 'Crm.Settings.Visible' | transloco }}\n                <p-sortIcon field=\"visible\"></p-sortIcon>\n              </th>\n              <th scope=\"true\"\n                *ngIf=\"hasAccess\">{{ 'Label.Actions' | transloco }}</th>\n            </tr>\n          </ng-template>\n        <ng-template pTemplate=\"body\"\n          let-action>\n          <tr>\n            <td data-head=\"Name\">{{ action.name }}</td>\n            <td data-head=\"TargetWeek\">{{ action.target_week }}</td>\n            <td data-head=\"TargetWeekMin\">{{ action.target_week_min }}</td>\n            <td data-head=\"Visible\">\n              <span [appDynamicBadge]=\"{\n                                    itemsArray: [true, false],\n                                    item: action?.visible\n                                }\"\n                color=\"success-danger\"\n                class=\"badge\">{{ !!action?.visible }}</span>\n            </td>\n            <td data-head=\"Action\"\n              *ngIf=\"hasAccess\">\n              <ul class=\"list-unstyled list-inline\">\n                <li ngbTooltip=\"Edit\"\n                  class=\"me-2 me-sm-3\"\n                  [routerLink]=\"[\n                                        '/' + subscription?.slug + routers.configurationDetails,\n                                        action.id\n                                    ]\">\n                  <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n                </li>\n                <li ngbTooltip=\"Delete\"\n                  class=\"me-2 me-sm-3\">\n                  <i\n                                        class=\"fa fa-trash delete-icon\"\n                                        (click)=\"onDelete(action.id)\"\n                                        aria-hidden=\"true\"\n                                    ></i>\n                </li>\n              </ul>\n            </td>\n          </tr>\n        </ng-template>\n      </p-table>\n      <div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n      </div>\n      <span class=\"total-records-count\" *ngIf=\"data.object_count!==0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n    </div>\n    <div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n      <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Settings.NoActionMessage' | transloco\"> </pw-no-data>\n    </div>\n  </div>\n</div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.build-default-action-button{margin-left:7px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]" }, { kind: "directive", type: i5.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i8.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i11.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmActionsComponent, deps: [{ token: i1.CrmService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmActionsComponent, selector: "pw-smart-crm-actions", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 mb-3\">\n    <p>\n      Please define the actions you want to associate with your contacts. For example you\n      could choose Phone Call, or Meeting, or Email Sent, etc.\n    </p>\n    <a *ngIf=\"data.object_count === 0 && data.unfiltered_count === 0 && isLoaded\"\n      class=\"btn btn-sm btn-outline-primary float-end build-default-action-button\"\n      (click)=\"buildDefaultActions()\"\n      data-cy=\"add-action\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.Settings.BuildDefaultAction' | transloco }}\n    </a>\n    <a *ngIf=\"hasAccess\"\n      class=\"btn btn-sm btn-outline-primary float-end\"\n      [routerLink]=\"['/' + subscription?.slug + routers.configurationDetails + 'add']\"\n      data-cy=\"add-action\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.Settings.AddAction' | transloco }}\n    </a>\n  </div>\n  <div class=\"w-100 text-center mt-3\"\n    *ngIf=\"!isLoaded\">\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n  <div class=\"col-12\">\n    <div class=\"primeng-datatable-container table-responsive\"\n    [class.hideTable]=\"data.unfiltered_count === 0\">\n      <p-table #dt\n        [value]=\"data.crm_actions\"\n        [paginator]=\"data.object_count!==0\"\n        [lazy]=\"true\"\n        [rows]=\"100\"\n        [totalRecords]=\"data.object_count\"\n        [loading]=\"loading\"\n        [filterDelay]=\"1000\"\n        (onLazyLoad)=\"onLazyLoad($event)\"\n        [customSort]=\"true\">\n        <ng-template pTemplate=\"caption\">\n          <div class=\"text-end\">\n            <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n            <input type=\"text\"\n              [(ngModel)]=\"searchText\"\n              pInputText\n              size=\"50\"\n              placeholder=\"Search action...\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n              class=\"mw-90\" />\n          </div>\n        </ng-template>\n          <ng-template pTemplate=\"header\" >\n            <tr>\n              <th scope=\"true\"\n                pSortableColumn=\"name\">\n                {{ 'Crm.Settings.Name' | transloco }}\n                <p-sortIcon field=\"name\"></p-sortIcon>\n              </th>\n              <th scope=\"true\"\n                pSortableColumn=\"target_week\">\n                {{ 'Crm.Settings.TargetWeek' | transloco }}\n                <p-sortIcon field=\"target_week\"></p-sortIcon>\n              </th>\n              <th scope=\"true\"\n                pSortableColumn=\"target_week_min\">\n                {{ 'Crm.Settings.TargetWeekMin' | transloco }}\n                <p-sortIcon field=\"target_week_min\"></p-sortIcon>\n              </th>\n              <th scope=\"true\"\n                pSortableColumn=\"visible\">\n                {{ 'Crm.Settings.Visible' | transloco }}\n                <p-sortIcon field=\"visible\"></p-sortIcon>\n              </th>\n              <th scope=\"true\"\n                *ngIf=\"hasAccess\">{{ 'Label.Actions' | transloco }}</th>\n            </tr>\n          </ng-template>\n        <ng-template pTemplate=\"body\"\n          let-action>\n          <tr>\n            <td data-head=\"Name\">{{ action.name }}</td>\n            <td data-head=\"TargetWeek\">{{ action.target_week }}</td>\n            <td data-head=\"TargetWeekMin\">{{ action.target_week_min }}</td>\n            <td data-head=\"Visible\">\n              <span [appDynamicBadge]=\"{\n                                    itemsArray: [true, false],\n                                    item: action?.visible\n                                }\"\n                color=\"success-danger\"\n                class=\"badge\">{{ !!action?.visible }}</span>\n            </td>\n            <td data-head=\"Action\"\n              *ngIf=\"hasAccess\">\n              <ul class=\"list-unstyled list-inline\">\n                <li ngbTooltip=\"Edit\"\n                  class=\"me-2 me-sm-3\"\n                  [routerLink]=\"[\n                                        '/' + subscription?.slug + routers.configurationDetails,\n                                        action.id\n                                    ]\">\n                  <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n                </li>\n                <li ngbTooltip=\"Delete\"\n                  class=\"me-2 me-sm-3\">\n                  <i\n                                        class=\"fa fa-trash delete-icon\"\n                                        (click)=\"onDelete(action.id)\"\n                                        aria-hidden=\"true\"\n                                    ></i>\n                </li>\n              </ul>\n            </td>\n          </tr>\n        </ng-template>\n      </p-table>\n      <div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n      </div>\n      <span class=\"total-records-count\" *ngIf=\"data.object_count!==0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n    </div>\n    <div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n      <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Settings.NoActionMessage' | transloco\"> </pw-no-data>\n    </div>\n  </div>\n</div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.build-default-action-button{margin-left:7px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i5.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i8.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i11.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmActionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmActionsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pw-smart-crm-actions', template: "<div class=\"row\">\n  <div class=\"col-12 mb-3\">\n    <p>\n      Please define the actions you want to associate with your contacts. For example you\n      could choose Phone Call, or Meeting, or Email Sent, etc.\n    </p>\n    <a *ngIf=\"data.object_count === 0 && data.unfiltered_count === 0 && isLoaded\"\n      class=\"btn btn-sm btn-outline-primary float-end build-default-action-button\"\n      (click)=\"buildDefaultActions()\"\n      data-cy=\"add-action\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.Settings.BuildDefaultAction' | transloco }}\n    </a>\n    <a *ngIf=\"hasAccess\"\n      class=\"btn btn-sm btn-outline-primary float-end\"\n      [routerLink]=\"['/' + subscription?.slug + routers.configurationDetails + 'add']\"\n      data-cy=\"add-action\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.Settings.AddAction' | transloco }}\n    </a>\n  </div>\n  <div class=\"w-100 text-center mt-3\"\n    *ngIf=\"!isLoaded\">\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n  <div class=\"col-12\">\n    <div class=\"primeng-datatable-container table-responsive\"\n    [class.hideTable]=\"data.unfiltered_count === 0\">\n      <p-table #dt\n        [value]=\"data.crm_actions\"\n        [paginator]=\"data.object_count!==0\"\n        [lazy]=\"true\"\n        [rows]=\"100\"\n        [totalRecords]=\"data.object_count\"\n        [loading]=\"loading\"\n        [filterDelay]=\"1000\"\n        (onLazyLoad)=\"onLazyLoad($event)\"\n        [customSort]=\"true\">\n        <ng-template pTemplate=\"caption\">\n          <div class=\"text-end\">\n            <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n            <input type=\"text\"\n              [(ngModel)]=\"searchText\"\n              pInputText\n              size=\"50\"\n              placeholder=\"Search action...\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n              class=\"mw-90\" />\n          </div>\n        </ng-template>\n          <ng-template pTemplate=\"header\" >\n            <tr>\n              <th scope=\"true\"\n                pSortableColumn=\"name\">\n                {{ 'Crm.Settings.Name' | transloco }}\n                <p-sortIcon field=\"name\"></p-sortIcon>\n              </th>\n              <th scope=\"true\"\n                pSortableColumn=\"target_week\">\n                {{ 'Crm.Settings.TargetWeek' | transloco }}\n                <p-sortIcon field=\"target_week\"></p-sortIcon>\n              </th>\n              <th scope=\"true\"\n                pSortableColumn=\"target_week_min\">\n                {{ 'Crm.Settings.TargetWeekMin' | transloco }}\n                <p-sortIcon field=\"target_week_min\"></p-sortIcon>\n              </th>\n              <th scope=\"true\"\n                pSortableColumn=\"visible\">\n                {{ 'Crm.Settings.Visible' | transloco }}\n                <p-sortIcon field=\"visible\"></p-sortIcon>\n              </th>\n              <th scope=\"true\"\n                *ngIf=\"hasAccess\">{{ 'Label.Actions' | transloco }}</th>\n            </tr>\n          </ng-template>\n        <ng-template pTemplate=\"body\"\n          let-action>\n          <tr>\n            <td data-head=\"Name\">{{ action.name }}</td>\n            <td data-head=\"TargetWeek\">{{ action.target_week }}</td>\n            <td data-head=\"TargetWeekMin\">{{ action.target_week_min }}</td>\n            <td data-head=\"Visible\">\n              <span [appDynamicBadge]=\"{\n                                    itemsArray: [true, false],\n                                    item: action?.visible\n                                }\"\n                color=\"success-danger\"\n                class=\"badge\">{{ !!action?.visible }}</span>\n            </td>\n            <td data-head=\"Action\"\n              *ngIf=\"hasAccess\">\n              <ul class=\"list-unstyled list-inline\">\n                <li ngbTooltip=\"Edit\"\n                  class=\"me-2 me-sm-3\"\n                  [routerLink]=\"[\n                                        '/' + subscription?.slug + routers.configurationDetails,\n                                        action.id\n                                    ]\">\n                  <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n                </li>\n                <li ngbTooltip=\"Delete\"\n                  class=\"me-2 me-sm-3\">\n                  <i\n                                        class=\"fa fa-trash delete-icon\"\n                                        (click)=\"onDelete(action.id)\"\n                                        aria-hidden=\"true\"\n                                    ></i>\n                </li>\n              </ul>\n            </td>\n          </tr>\n        </ng-template>\n      </p-table>\n      <div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n      </div>\n      <span class=\"total-records-count\" *ngIf=\"data.object_count!==0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n    </div>\n    <div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n      <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Settings.NoActionMessage' | transloco\"> </pw-no-data>\n    </div>\n  </div>\n</div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.build-default-action-button{margin-left:7px}\n"] }]
         }], ctorParameters: () => [{ type: i1.CrmService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }] });
@@ -1725,10 +1725,10 @@ class SmartCrmCompanySourceComponent extends AppBaseComponent {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmCompanySourceComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: SmartCrmCompanySourceComponent, selector: "pw-smart-crm-source", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 mb-3\">\n    <p>Please define the sources that you want to associate with your prospect accounts.</p>\n    <a class=\"btn btn-sm btn-outline-primary float-end build-action-button\"\n      *ngIf=\"data.object_count === 0 && data.unfiltered_count === 0 && isLoaded\"\n      data-cy=\"build-contact\"\n      (click)=\"buildAccountSource()\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.AccountSourceMessage.BuildAccountSource' | transloco }}\n    </a>\n    <a class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"add-contact\"\n      [routerLink]=\"['/' + subscription?.slug + routers.sourceDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.AccountSourceMessage.AddAccountSource' | transloco }}\n    </a>\n  </div>\n  <div class=\"w-100 text-center mt-3\"\n    *ngIf=\"!isLoaded\">\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n  <div class=\"col-12\">\n    <div class=\"primeng-datatable-container table-responsive\"\n      [class.hideTable]=\"data.unfiltered_count === 0\">\n      <p-table #dt\n        [value]=\"data.crm_sources\"\n        [paginator]=\"data.object_count !== 0\"\n        [lazy]=\"true\"\n        [rows]=\"PAGE_SIZE\"\n        [totalRecords]=\"data.object_count\"\n        [loading]=\"loading\"\n        [filterDelay]=\"1000\"\n        (onLazyLoad)=\"onLazyLoad($event)\"\n        [customSort]=\"true\">\n        <ng-template pTemplate=\"caption\">\n          <div class=\"text-end\">\n            <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n            <input type=\"text\"\n              [(ngModel)]=\"searchText\"\n              pInputText\n              size=\"50\"\n              placeholder=\"Search source...\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n              class=\"mw-90\" />\n          </div>\n        </ng-template>\n        <ng-template pTemplate=\"header\">\n          <tr>\n            <th scope=\"true\"\n              pSortableColumn=\"name\">\n              {{ 'Crm.AccountSourceMessage.Name' | transloco }}\n              <p-sortIcon field=\"name\"></p-sortIcon>\n            </th>\n            <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n          </tr>\n        </ng-template>\n        <ng-template pTemplate=\"body\"\n          let-source>\n          <tr>\n            <td data-head=\"Name\">{{ source.name }}</td>\n            <td data-head=\"Action\">\n              <ul class=\"list-unstyled list-inline\">\n                <ng-container *ngIf=\"hasAccess\">\n                  <li ngbTooltip=\"Edit\"\n                    class=\"me-2 me-sm-3\"\n                    [routerLink]=\"[\n                                            '/' + subscription?.slug + routers.sourceDetails,\n                                            source.id\n                                        ]\">\n                    <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n                  </li>\n                  <li ngbTooltip=\"Delete\"\n                    class=\"me-2 me-sm-3\">\n                    <i\n                                            class=\"fa fa-trash delete-icon\"\n                                            (click)=\"onDelete(source.id)\"\n                                            aria-hidden=\"true\"\n                                        ></i>\n                  </li>\n                </ng-container>\n              </ul>\n            </td>\n          </tr>\n        </ng-template>\n      </p-table>\n      <div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n      </div>\n      <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n    </div>\n  </div>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountSourceMessage.NoDataMessage' | transloco\"> </pw-no-data>\n</div>\n", styles: [".build-action-button{margin-left:7px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]" }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i8.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i11.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmCompanySourceComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmCompanySourceComponent, selector: "pw-smart-crm-source", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 mb-3\">\n    <p>Please define the sources that you want to associate with your prospect accounts.</p>\n    <a class=\"btn btn-sm btn-outline-primary float-end build-action-button\"\n      *ngIf=\"data.object_count === 0 && data.unfiltered_count === 0 && isLoaded\"\n      data-cy=\"build-contact\"\n      (click)=\"buildAccountSource()\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.AccountSourceMessage.BuildAccountSource' | transloco }}\n    </a>\n    <a class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"add-contact\"\n      [routerLink]=\"['/' + subscription?.slug + routers.sourceDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.AccountSourceMessage.AddAccountSource' | transloco }}\n    </a>\n  </div>\n  <div class=\"w-100 text-center mt-3\"\n    *ngIf=\"!isLoaded\">\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n  <div class=\"col-12\">\n    <div class=\"primeng-datatable-container table-responsive\"\n      [class.hideTable]=\"data.unfiltered_count === 0\">\n      <p-table #dt\n        [value]=\"data.crm_sources\"\n        [paginator]=\"data.object_count !== 0\"\n        [lazy]=\"true\"\n        [rows]=\"PAGE_SIZE\"\n        [totalRecords]=\"data.object_count\"\n        [loading]=\"loading\"\n        [filterDelay]=\"1000\"\n        (onLazyLoad)=\"onLazyLoad($event)\"\n        [customSort]=\"true\">\n        <ng-template pTemplate=\"caption\">\n          <div class=\"text-end\">\n            <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n            <input type=\"text\"\n              [(ngModel)]=\"searchText\"\n              pInputText\n              size=\"50\"\n              placeholder=\"Search source...\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n              class=\"mw-90\" />\n          </div>\n        </ng-template>\n        <ng-template pTemplate=\"header\">\n          <tr>\n            <th scope=\"true\"\n              pSortableColumn=\"name\">\n              {{ 'Crm.AccountSourceMessage.Name' | transloco }}\n              <p-sortIcon field=\"name\"></p-sortIcon>\n            </th>\n            <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n          </tr>\n        </ng-template>\n        <ng-template pTemplate=\"body\"\n          let-source>\n          <tr>\n            <td data-head=\"Name\">{{ source.name }}</td>\n            <td data-head=\"Action\">\n              <ul class=\"list-unstyled list-inline\">\n                <ng-container *ngIf=\"hasAccess\">\n                  <li ngbTooltip=\"Edit\"\n                    class=\"me-2 me-sm-3\"\n                    [routerLink]=\"[\n                                            '/' + subscription?.slug + routers.sourceDetails,\n                                            source.id\n                                        ]\">\n                    <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n                  </li>\n                  <li ngbTooltip=\"Delete\"\n                    class=\"me-2 me-sm-3\">\n                    <i\n                                            class=\"fa fa-trash delete-icon\"\n                                            (click)=\"onDelete(source.id)\"\n                                            aria-hidden=\"true\"\n                                        ></i>\n                  </li>\n                </ng-container>\n              </ul>\n            </td>\n          </tr>\n        </ng-template>\n      </p-table>\n      <div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n      </div>\n      <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n    </div>\n  </div>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountSourceMessage.NoDataMessage' | transloco\"> </pw-no-data>\n</div>\n", styles: [".build-action-button{margin-left:7px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i8.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i11.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmCompanySourceComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmCompanySourceComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pw-smart-crm-source', template: "<div class=\"row\">\n  <div class=\"col-12 mb-3\">\n    <p>Please define the sources that you want to associate with your prospect accounts.</p>\n    <a class=\"btn btn-sm btn-outline-primary float-end build-action-button\"\n      *ngIf=\"data.object_count === 0 && data.unfiltered_count === 0 && isLoaded\"\n      data-cy=\"build-contact\"\n      (click)=\"buildAccountSource()\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.AccountSourceMessage.BuildAccountSource' | transloco }}\n    </a>\n    <a class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"add-contact\"\n      [routerLink]=\"['/' + subscription?.slug + routers.sourceDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.AccountSourceMessage.AddAccountSource' | transloco }}\n    </a>\n  </div>\n  <div class=\"w-100 text-center mt-3\"\n    *ngIf=\"!isLoaded\">\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n  <div class=\"col-12\">\n    <div class=\"primeng-datatable-container table-responsive\"\n      [class.hideTable]=\"data.unfiltered_count === 0\">\n      <p-table #dt\n        [value]=\"data.crm_sources\"\n        [paginator]=\"data.object_count !== 0\"\n        [lazy]=\"true\"\n        [rows]=\"PAGE_SIZE\"\n        [totalRecords]=\"data.object_count\"\n        [loading]=\"loading\"\n        [filterDelay]=\"1000\"\n        (onLazyLoad)=\"onLazyLoad($event)\"\n        [customSort]=\"true\">\n        <ng-template pTemplate=\"caption\">\n          <div class=\"text-end\">\n            <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n            <input type=\"text\"\n              [(ngModel)]=\"searchText\"\n              pInputText\n              size=\"50\"\n              placeholder=\"Search source...\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n              class=\"mw-90\" />\n          </div>\n        </ng-template>\n        <ng-template pTemplate=\"header\">\n          <tr>\n            <th scope=\"true\"\n              pSortableColumn=\"name\">\n              {{ 'Crm.AccountSourceMessage.Name' | transloco }}\n              <p-sortIcon field=\"name\"></p-sortIcon>\n            </th>\n            <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n          </tr>\n        </ng-template>\n        <ng-template pTemplate=\"body\"\n          let-source>\n          <tr>\n            <td data-head=\"Name\">{{ source.name }}</td>\n            <td data-head=\"Action\">\n              <ul class=\"list-unstyled list-inline\">\n                <ng-container *ngIf=\"hasAccess\">\n                  <li ngbTooltip=\"Edit\"\n                    class=\"me-2 me-sm-3\"\n                    [routerLink]=\"[\n                                            '/' + subscription?.slug + routers.sourceDetails,\n                                            source.id\n                                        ]\">\n                    <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n                  </li>\n                  <li ngbTooltip=\"Delete\"\n                    class=\"me-2 me-sm-3\">\n                    <i\n                                            class=\"fa fa-trash delete-icon\"\n                                            (click)=\"onDelete(source.id)\"\n                                            aria-hidden=\"true\"\n                                        ></i>\n                  </li>\n                </ng-container>\n              </ul>\n            </td>\n          </tr>\n        </ng-template>\n      </p-table>\n      <div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n      </div>\n      <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n    </div>\n  </div>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountSourceMessage.NoDataMessage' | transloco\"> </pw-no-data>\n</div>\n", styles: [".build-action-button{margin-left:7px}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1.CrmService }, { type: i0.ChangeDetectorRef }] });
@@ -1830,10 +1830,10 @@ class SmartCrmWidgetsComponent extends AppBaseComponent {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmWidgetsComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: SmartCrmWidgetsComponent, selector: "pw-smart-crm-widgets", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 mb-3\">\n    <p>Please define the widgets you want to use.</p>\n    <a class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"add-contact\"\n      [routerLink]=\"['/' + subscription?.slug + routers.widgetsDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.Widgets.AddWidgets' | transloco }}\n    </a>\n  </div>\n  <div class=\"w-100 text-center mt-3\"\n    *ngIf=\"!isLoaded\">\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n  <div class=\"col-12\">\n    <div class=\"primeng-datatable-container table-responsive\"\n      [class.hideTable]=\"data.unfiltered_count === 0\">\n      <p-table #dt\n        [value]=\"data.crm_widget_relationships\"\n        [paginator]=\"data.object_count !== 0\"\n        [lazy]=\"true\"\n        [rows]=\"PAGE_SIZE\"\n        [totalRecords]=\"data.object_count\"\n        [loading]=\"loading\"\n        [filterDelay]=\"1000\"\n        (onLazyLoad)=\"onLazyLoad($event)\"\n        [customSort]=\"true\">\n        <ng-template pTemplate=\"caption\">\n          <div class=\"text-end\">\n            <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n            <input type=\"text\"\n              [(ngModel)]=\"searchText\"\n              pInputText\n              size=\"50\"\n              placeholder=\"Search source...\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n              class=\"mw-90\" />\n          </div>\n        </ng-template>\n        <ng-template pTemplate=\"header\">\n          <tr>\n            <th scope=\"true\"\n              pSortableColumn=\"crm_widget_id\">\n              {{ 'Crm.Widgets.CrmWidget' | transloco }}\n              <p-sortIcon field=\"crm_widget_id\"></p-sortIcon>\n            </th>\n            <th scope=\"true\"\n              pSortableColumn=\"position\">\n              {{ 'Crm.Widgets.Position' | transloco }}\n              <p-sortIcon field=\"position\"></p-sortIcon>\n            </th>\n            <th scope=\"true\"\n              pSortableColumn=\"visible\">\n              {{ 'Crm.Widgets.Visible' | transloco }}\n              <p-sortIcon field=\"visible\"></p-sortIcon>\n            </th>\n            <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n          </tr>\n        </ng-template>\n        <ng-template pTemplate=\"body\"\n          let-widget>\n          <tr>\n            <td data-head=\"Crm Widget\">{{ widget.crm_widget }}</td>\n            <td data-head=\"Position\">\n              <span class=\"badge\"\n                [appDynamicBadge]=\"{\n                                    itemsArray: positions,\n                                    item: widget?.position\n                                }\"\n                color=\"default\">{{ widget.position }}</span>\n            </td>\n            <td data-head=\"Visible\">\n              <span [appDynamicBadge]=\"{\n                                    itemsArray: [true, false],\n                                    item: widget?.visible\n                                }\"\n                color=\"success-danger\"\n                class=\"badge\">{{ !!widget?.visible }}</span>\n            </td>\n            <td data-head=\"Action\">\n              <ul class=\"list-unstyled list-inline\">\n                <ng-container *ngIf=\"hasAccess\">\n                  <li ngbTooltip=\"Edit\"\n                    class=\"me-2 me-sm-3\"\n                    [routerLink]=\"[\n                                            '/' + subscription?.slug + routers.widgetsDetails,\n                                            widget.id\n                                        ]\">\n                    <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n                  </li>\n                  <li ngbTooltip=\"Delete\"\n                    class=\"me-2 me-sm-3\">\n                    <i\n                                            class=\"fa fa-trash delete-icon\"\n                                            (click)=\"onDelete(widget.id)\"\n                                            aria-hidden=\"true\"\n                                        ></i>\n                  </li>\n                </ng-container>\n              </ul>\n            </td>\n          </tr>\n        </ng-template>\n      </p-table>\n      <div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n      </div>\n      <span class=\"total-records-count\"*ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n    </div>\n  </div>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Widgets.NoDataMessage' | transloco\"> </pw-no-data>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]" }, { kind: "directive", type: i5.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i8.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i11.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmWidgetsComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmWidgetsComponent, selector: "pw-smart-crm-widgets", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 mb-3\">\n    <p>Please define the widgets you want to use.</p>\n    <a class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"add-contact\"\n      [routerLink]=\"['/' + subscription?.slug + routers.widgetsDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.Widgets.AddWidgets' | transloco }}\n    </a>\n  </div>\n  <div class=\"w-100 text-center mt-3\"\n    *ngIf=\"!isLoaded\">\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n  <div class=\"col-12\">\n    <div class=\"primeng-datatable-container table-responsive\"\n      [class.hideTable]=\"data.unfiltered_count === 0\">\n      <p-table #dt\n        [value]=\"data.crm_widget_relationships\"\n        [paginator]=\"data.object_count !== 0\"\n        [lazy]=\"true\"\n        [rows]=\"PAGE_SIZE\"\n        [totalRecords]=\"data.object_count\"\n        [loading]=\"loading\"\n        [filterDelay]=\"1000\"\n        (onLazyLoad)=\"onLazyLoad($event)\"\n        [customSort]=\"true\">\n        <ng-template pTemplate=\"caption\">\n          <div class=\"text-end\">\n            <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n            <input type=\"text\"\n              [(ngModel)]=\"searchText\"\n              pInputText\n              size=\"50\"\n              placeholder=\"Search source...\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n              class=\"mw-90\" />\n          </div>\n        </ng-template>\n        <ng-template pTemplate=\"header\">\n          <tr>\n            <th scope=\"true\"\n              pSortableColumn=\"crm_widget_id\">\n              {{ 'Crm.Widgets.CrmWidget' | transloco }}\n              <p-sortIcon field=\"crm_widget_id\"></p-sortIcon>\n            </th>\n            <th scope=\"true\"\n              pSortableColumn=\"position\">\n              {{ 'Crm.Widgets.Position' | transloco }}\n              <p-sortIcon field=\"position\"></p-sortIcon>\n            </th>\n            <th scope=\"true\"\n              pSortableColumn=\"visible\">\n              {{ 'Crm.Widgets.Visible' | transloco }}\n              <p-sortIcon field=\"visible\"></p-sortIcon>\n            </th>\n            <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n          </tr>\n        </ng-template>\n        <ng-template pTemplate=\"body\"\n          let-widget>\n          <tr>\n            <td data-head=\"Crm Widget\">{{ widget.crm_widget }}</td>\n            <td data-head=\"Position\">\n              <span class=\"badge\"\n                [appDynamicBadge]=\"{\n                                    itemsArray: positions,\n                                    item: widget?.position\n                                }\"\n                color=\"default\">{{ widget.position }}</span>\n            </td>\n            <td data-head=\"Visible\">\n              <span [appDynamicBadge]=\"{\n                                    itemsArray: [true, false],\n                                    item: widget?.visible\n                                }\"\n                color=\"success-danger\"\n                class=\"badge\">{{ !!widget?.visible }}</span>\n            </td>\n            <td data-head=\"Action\">\n              <ul class=\"list-unstyled list-inline\">\n                <ng-container *ngIf=\"hasAccess\">\n                  <li ngbTooltip=\"Edit\"\n                    class=\"me-2 me-sm-3\"\n                    [routerLink]=\"[\n                                            '/' + subscription?.slug + routers.widgetsDetails,\n                                            widget.id\n                                        ]\">\n                    <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n                  </li>\n                  <li ngbTooltip=\"Delete\"\n                    class=\"me-2 me-sm-3\">\n                    <i\n                                            class=\"fa fa-trash delete-icon\"\n                                            (click)=\"onDelete(widget.id)\"\n                                            aria-hidden=\"true\"\n                                        ></i>\n                  </li>\n                </ng-container>\n              </ul>\n            </td>\n          </tr>\n        </ng-template>\n      </p-table>\n      <div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n      </div>\n      <span class=\"total-records-count\"*ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n    </div>\n  </div>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Widgets.NoDataMessage' | transloco\"> </pw-no-data>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i5.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i8.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i11.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmWidgetsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmWidgetsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pw-smart-crm-widgets', template: "<div class=\"row\">\n  <div class=\"col-12 mb-3\">\n    <p>Please define the widgets you want to use.</p>\n    <a class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"add-contact\"\n      [routerLink]=\"['/' + subscription?.slug + routers.widgetsDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.Widgets.AddWidgets' | transloco }}\n    </a>\n  </div>\n  <div class=\"w-100 text-center mt-3\"\n    *ngIf=\"!isLoaded\">\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n  <div class=\"col-12\">\n    <div class=\"primeng-datatable-container table-responsive\"\n      [class.hideTable]=\"data.unfiltered_count === 0\">\n      <p-table #dt\n        [value]=\"data.crm_widget_relationships\"\n        [paginator]=\"data.object_count !== 0\"\n        [lazy]=\"true\"\n        [rows]=\"PAGE_SIZE\"\n        [totalRecords]=\"data.object_count\"\n        [loading]=\"loading\"\n        [filterDelay]=\"1000\"\n        (onLazyLoad)=\"onLazyLoad($event)\"\n        [customSort]=\"true\">\n        <ng-template pTemplate=\"caption\">\n          <div class=\"text-end\">\n            <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n            <input type=\"text\"\n              [(ngModel)]=\"searchText\"\n              pInputText\n              size=\"50\"\n              placeholder=\"Search source...\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n              class=\"mw-90\" />\n          </div>\n        </ng-template>\n        <ng-template pTemplate=\"header\">\n          <tr>\n            <th scope=\"true\"\n              pSortableColumn=\"crm_widget_id\">\n              {{ 'Crm.Widgets.CrmWidget' | transloco }}\n              <p-sortIcon field=\"crm_widget_id\"></p-sortIcon>\n            </th>\n            <th scope=\"true\"\n              pSortableColumn=\"position\">\n              {{ 'Crm.Widgets.Position' | transloco }}\n              <p-sortIcon field=\"position\"></p-sortIcon>\n            </th>\n            <th scope=\"true\"\n              pSortableColumn=\"visible\">\n              {{ 'Crm.Widgets.Visible' | transloco }}\n              <p-sortIcon field=\"visible\"></p-sortIcon>\n            </th>\n            <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n          </tr>\n        </ng-template>\n        <ng-template pTemplate=\"body\"\n          let-widget>\n          <tr>\n            <td data-head=\"Crm Widget\">{{ widget.crm_widget }}</td>\n            <td data-head=\"Position\">\n              <span class=\"badge\"\n                [appDynamicBadge]=\"{\n                                    itemsArray: positions,\n                                    item: widget?.position\n                                }\"\n                color=\"default\">{{ widget.position }}</span>\n            </td>\n            <td data-head=\"Visible\">\n              <span [appDynamicBadge]=\"{\n                                    itemsArray: [true, false],\n                                    item: widget?.visible\n                                }\"\n                color=\"success-danger\"\n                class=\"badge\">{{ !!widget?.visible }}</span>\n            </td>\n            <td data-head=\"Action\">\n              <ul class=\"list-unstyled list-inline\">\n                <ng-container *ngIf=\"hasAccess\">\n                  <li ngbTooltip=\"Edit\"\n                    class=\"me-2 me-sm-3\"\n                    [routerLink]=\"[\n                                            '/' + subscription?.slug + routers.widgetsDetails,\n                                            widget.id\n                                        ]\">\n                    <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n                  </li>\n                  <li ngbTooltip=\"Delete\"\n                    class=\"me-2 me-sm-3\">\n                    <i\n                                            class=\"fa fa-trash delete-icon\"\n                                            (click)=\"onDelete(widget.id)\"\n                                            aria-hidden=\"true\"\n                                        ></i>\n                  </li>\n                </ng-container>\n              </ul>\n            </td>\n          </tr>\n        </ng-template>\n      </p-table>\n      <div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n      </div>\n      <span class=\"total-records-count\"*ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n    </div>\n  </div>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Widgets.NoDataMessage' | transloco\"> </pw-no-data>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1.CrmService }, { type: i0.ChangeDetectorRef }] });
@@ -1946,10 +1946,10 @@ class SmartCrmStagesComponent extends AppBaseComponent {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmStagesComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: SmartCrmStagesComponent, selector: "pw-smart-crm-stages", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12\">\n    <p>{{ 'Crm.StageMessages.StageTitle' | transloco }}</p>\n    <a *ngIf=\"data.object_count === 0 && data.unfiltered_count === 0 && isLoaded\"\n    class=\"btn btn-sm btn-outline-primary float-end build-default-stage-button\"\n    (click)=\"buildDefaultStages()\"\n    data-cy=\"add-contact\">\n    <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n    {{ 'Crm.StageMessages.BuildDefaultStage' | transloco }}\n    </a>\n    <a class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"add-contact\"\n      [routerLink]=\"['/' + subscription?.slug + routers.stageDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.StageMessages.AddStage' | transloco }}\n    </a>\n  </div>\n  <div class=\"w-100 text-center mt-3\">\n    <ng-template [ngIf]=\"!isLoaded\">\n      <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n    </ng-template>\n  </div>\n  <div class=\"col-12\">\n    <div class=\"primeng-datatable-container table-responsive\"\n      [class.hideTable]=\"data.unfiltered_count === 0\">\n      <p-table #dt\n        [value]=\"data.crm_opportunity_stages\"\n        [paginator]=\"data.object_count !== 0\"\n        [lazy]=\"true\"\n        [rows]=\"PAGE_SIZE\"\n        [totalRecords]=\"data.object_count\"\n        [loading]=\"loading\"\n        [filterDelay]=\"1000\"\n        (onLazyLoad)=\"onLazyLoad($event)\"\n        [customSort]=\"true\">\n        <ng-template pTemplate=\"caption\">\n          <div class=\"text-end\">\n            <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n            <input type=\"text\"\n              [(ngModel)]=\"searchText\"\n              pInputText\n              size=\"50\"\n              placeholder=\"Search stages...\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n              class=\"mw-90\" />\n          </div>\n        </ng-template>\n        <ng-template pTemplate=\"header\">\n          <tr>\n            <th scope=\"true\"\n              pSortableColumn=\"name\">\n              {{ 'Crm.StageMessages.Name' | transloco }}\n              <p-sortIcon field=\"name\"></p-sortIcon>\n            </th>\n            <th scope=\"true\"\n              pSortableColumn=\"previous_stage_id\">\n              {{ 'Crm.StageMessages.PreviousStage' | transloco }}\n              <p-sortIcon field=\"previous_stage_id\"></p-sortIcon>\n            </th>\n            <th scope=\"true\"\n              pSortableColumn=\"crm_opportunity_category_ids\">\n              {{ 'Crm.StageMessages.OpportunityCategory' | transloco }}\n              <p-sortIcon field=\"crm_opportunity_category_ids\"></p-sortIcon>\n            </th>\n            <th scope=\"true\"\n              pSortableColumn=\"visible\">\n              {{ 'Crm.StageMessages.Visible' | transloco }}\n              <p-sortIcon field=\"visible\"></p-sortIcon>\n            </th>\n            <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n          </tr>\n        </ng-template>\n        <ng-template pTemplate=\"body\"\n          let-stage>\n          <tr>\n            <td data-head=\"Name\">{{ stage?.name }}</td>\n            <td data-head=\"Previous Stage\">\n              <span class=\"badge\"\n                [appDynamicBadge]=\"{\n                                    itemsArray: stageNames,\n                                    item: stage?.crm_previous_stage?.name\n                                }\"\n                color=\"warning\">{{ stage?.crm_previous_stage?.name }}</span>\n            </td>\n            <td data-head=\"Opportunity Category\">\n              <span *ngFor=\"let category of stage?.crm_opportunity_categories\"\n                class=\"badge ms-1\"\n                [appDynamicBadge]=\"{ itemsArray: categories, item: category?.name }\"\n                color=\"blue-grey\">{{ category?.name }}</span>\n            </td>\n            <td data-head=\"Visible\">\n              <span [appDynamicBadge]=\"{\n                                    itemsArray: [true, false],\n                                    item: stage?.visible\n                                }\"\n                color=\"success-danger\"\n                class=\"badge\">{{ !!stage?.visible }}</span>\n            </td>\n            <td data-head=\"Action\">\n              <ul class=\"list-unstyled list-inline\">\n                <ng-container *ngIf=\"hasAccess\">\n                  <li ngbTooltip=\"Edit\"\n                    class=\"me-2 me-sm-3\"\n                    [routerLink]=\"[\n                                            '/' + subscription?.slug + routers.stageDetails,\n                                            stage.id\n                                        ]\">\n                    <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n                  </li>\n                  <li ngbTooltip=\"Delete\"\n                    class=\"me-2 me-sm-3\">\n                    <i\n                                            class=\"fa fa-trash delete-icon\"\n                                            (click)=\"onDelete(stage.id)\"\n                                            aria-hidden=\"true\"\n                                        ></i>\n                  </li>\n                </ng-container>\n              </ul>\n            </td>\n          </tr>\n        </ng-template>\n      </p-table>\n      <div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n      </div>\n      <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n    </div>\n  </div>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.StageMessages.NoStageMessage' | transloco\"> </pw-no-data>\n</div>\n", styles: [".build-default-stage-button{margin-left:7px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]" }, { kind: "directive", type: i5.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i8.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i11.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmStagesComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmStagesComponent, selector: "pw-smart-crm-stages", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12\">\n    <p>{{ 'Crm.StageMessages.StageTitle' | transloco }}</p>\n    <a *ngIf=\"data.object_count === 0 && data.unfiltered_count === 0 && isLoaded\"\n    class=\"btn btn-sm btn-outline-primary float-end build-default-stage-button\"\n    (click)=\"buildDefaultStages()\"\n    data-cy=\"add-contact\">\n    <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n    {{ 'Crm.StageMessages.BuildDefaultStage' | transloco }}\n    </a>\n    <a class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"add-contact\"\n      [routerLink]=\"['/' + subscription?.slug + routers.stageDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.StageMessages.AddStage' | transloco }}\n    </a>\n  </div>\n  <div class=\"w-100 text-center mt-3\">\n    <ng-template [ngIf]=\"!isLoaded\">\n      <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n    </ng-template>\n  </div>\n  <div class=\"col-12\">\n    <div class=\"primeng-datatable-container table-responsive\"\n      [class.hideTable]=\"data.unfiltered_count === 0\">\n      <p-table #dt\n        [value]=\"data.crm_opportunity_stages\"\n        [paginator]=\"data.object_count !== 0\"\n        [lazy]=\"true\"\n        [rows]=\"PAGE_SIZE\"\n        [totalRecords]=\"data.object_count\"\n        [loading]=\"loading\"\n        [filterDelay]=\"1000\"\n        (onLazyLoad)=\"onLazyLoad($event)\"\n        [customSort]=\"true\">\n        <ng-template pTemplate=\"caption\">\n          <div class=\"text-end\">\n            <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n            <input type=\"text\"\n              [(ngModel)]=\"searchText\"\n              pInputText\n              size=\"50\"\n              placeholder=\"Search stages...\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n              class=\"mw-90\" />\n          </div>\n        </ng-template>\n        <ng-template pTemplate=\"header\">\n          <tr>\n            <th scope=\"true\"\n              pSortableColumn=\"name\">\n              {{ 'Crm.StageMessages.Name' | transloco }}\n              <p-sortIcon field=\"name\"></p-sortIcon>\n            </th>\n            <th scope=\"true\"\n              pSortableColumn=\"previous_stage_id\">\n              {{ 'Crm.StageMessages.PreviousStage' | transloco }}\n              <p-sortIcon field=\"previous_stage_id\"></p-sortIcon>\n            </th>\n            <th scope=\"true\"\n              pSortableColumn=\"crm_opportunity_category_ids\">\n              {{ 'Crm.StageMessages.OpportunityCategory' | transloco }}\n              <p-sortIcon field=\"crm_opportunity_category_ids\"></p-sortIcon>\n            </th>\n            <th scope=\"true\"\n              pSortableColumn=\"visible\">\n              {{ 'Crm.StageMessages.Visible' | transloco }}\n              <p-sortIcon field=\"visible\"></p-sortIcon>\n            </th>\n            <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n          </tr>\n        </ng-template>\n        <ng-template pTemplate=\"body\"\n          let-stage>\n          <tr>\n            <td data-head=\"Name\">{{ stage?.name }}</td>\n            <td data-head=\"Previous Stage\">\n              <span class=\"badge\"\n                [appDynamicBadge]=\"{\n                                    itemsArray: stageNames,\n                                    item: stage?.crm_previous_stage?.name\n                                }\"\n                color=\"warning\">{{ stage?.crm_previous_stage?.name }}</span>\n            </td>\n            <td data-head=\"Opportunity Category\">\n              <span *ngFor=\"let category of stage?.crm_opportunity_categories\"\n                class=\"badge ms-1\"\n                [appDynamicBadge]=\"{ itemsArray: categories, item: category?.name }\"\n                color=\"blue-grey\">{{ category?.name }}</span>\n            </td>\n            <td data-head=\"Visible\">\n              <span [appDynamicBadge]=\"{\n                                    itemsArray: [true, false],\n                                    item: stage?.visible\n                                }\"\n                color=\"success-danger\"\n                class=\"badge\">{{ !!stage?.visible }}</span>\n            </td>\n            <td data-head=\"Action\">\n              <ul class=\"list-unstyled list-inline\">\n                <ng-container *ngIf=\"hasAccess\">\n                  <li ngbTooltip=\"Edit\"\n                    class=\"me-2 me-sm-3\"\n                    [routerLink]=\"[\n                                            '/' + subscription?.slug + routers.stageDetails,\n                                            stage.id\n                                        ]\">\n                    <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n                  </li>\n                  <li ngbTooltip=\"Delete\"\n                    class=\"me-2 me-sm-3\">\n                    <i\n                                            class=\"fa fa-trash delete-icon\"\n                                            (click)=\"onDelete(stage.id)\"\n                                            aria-hidden=\"true\"\n                                        ></i>\n                  </li>\n                </ng-container>\n              </ul>\n            </td>\n          </tr>\n        </ng-template>\n      </p-table>\n      <div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n      </div>\n      <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n    </div>\n  </div>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.StageMessages.NoStageMessage' | transloco\"> </pw-no-data>\n</div>\n", styles: [".build-default-stage-button{margin-left:7px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i5.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i8.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i11.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmStagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmStagesComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pw-smart-crm-stages', template: "<div class=\"row\">\n  <div class=\"col-12\">\n    <p>{{ 'Crm.StageMessages.StageTitle' | transloco }}</p>\n    <a *ngIf=\"data.object_count === 0 && data.unfiltered_count === 0 && isLoaded\"\n    class=\"btn btn-sm btn-outline-primary float-end build-default-stage-button\"\n    (click)=\"buildDefaultStages()\"\n    data-cy=\"add-contact\">\n    <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n    {{ 'Crm.StageMessages.BuildDefaultStage' | transloco }}\n    </a>\n    <a class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"add-contact\"\n      [routerLink]=\"['/' + subscription?.slug + routers.stageDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.StageMessages.AddStage' | transloco }}\n    </a>\n  </div>\n  <div class=\"w-100 text-center mt-3\">\n    <ng-template [ngIf]=\"!isLoaded\">\n      <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n    </ng-template>\n  </div>\n  <div class=\"col-12\">\n    <div class=\"primeng-datatable-container table-responsive\"\n      [class.hideTable]=\"data.unfiltered_count === 0\">\n      <p-table #dt\n        [value]=\"data.crm_opportunity_stages\"\n        [paginator]=\"data.object_count !== 0\"\n        [lazy]=\"true\"\n        [rows]=\"PAGE_SIZE\"\n        [totalRecords]=\"data.object_count\"\n        [loading]=\"loading\"\n        [filterDelay]=\"1000\"\n        (onLazyLoad)=\"onLazyLoad($event)\"\n        [customSort]=\"true\">\n        <ng-template pTemplate=\"caption\">\n          <div class=\"text-end\">\n            <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n            <input type=\"text\"\n              [(ngModel)]=\"searchText\"\n              pInputText\n              size=\"50\"\n              placeholder=\"Search stages...\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n              class=\"mw-90\" />\n          </div>\n        </ng-template>\n        <ng-template pTemplate=\"header\">\n          <tr>\n            <th scope=\"true\"\n              pSortableColumn=\"name\">\n              {{ 'Crm.StageMessages.Name' | transloco }}\n              <p-sortIcon field=\"name\"></p-sortIcon>\n            </th>\n            <th scope=\"true\"\n              pSortableColumn=\"previous_stage_id\">\n              {{ 'Crm.StageMessages.PreviousStage' | transloco }}\n              <p-sortIcon field=\"previous_stage_id\"></p-sortIcon>\n            </th>\n            <th scope=\"true\"\n              pSortableColumn=\"crm_opportunity_category_ids\">\n              {{ 'Crm.StageMessages.OpportunityCategory' | transloco }}\n              <p-sortIcon field=\"crm_opportunity_category_ids\"></p-sortIcon>\n            </th>\n            <th scope=\"true\"\n              pSortableColumn=\"visible\">\n              {{ 'Crm.StageMessages.Visible' | transloco }}\n              <p-sortIcon field=\"visible\"></p-sortIcon>\n            </th>\n            <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n          </tr>\n        </ng-template>\n        <ng-template pTemplate=\"body\"\n          let-stage>\n          <tr>\n            <td data-head=\"Name\">{{ stage?.name }}</td>\n            <td data-head=\"Previous Stage\">\n              <span class=\"badge\"\n                [appDynamicBadge]=\"{\n                                    itemsArray: stageNames,\n                                    item: stage?.crm_previous_stage?.name\n                                }\"\n                color=\"warning\">{{ stage?.crm_previous_stage?.name }}</span>\n            </td>\n            <td data-head=\"Opportunity Category\">\n              <span *ngFor=\"let category of stage?.crm_opportunity_categories\"\n                class=\"badge ms-1\"\n                [appDynamicBadge]=\"{ itemsArray: categories, item: category?.name }\"\n                color=\"blue-grey\">{{ category?.name }}</span>\n            </td>\n            <td data-head=\"Visible\">\n              <span [appDynamicBadge]=\"{\n                                    itemsArray: [true, false],\n                                    item: stage?.visible\n                                }\"\n                color=\"success-danger\"\n                class=\"badge\">{{ !!stage?.visible }}</span>\n            </td>\n            <td data-head=\"Action\">\n              <ul class=\"list-unstyled list-inline\">\n                <ng-container *ngIf=\"hasAccess\">\n                  <li ngbTooltip=\"Edit\"\n                    class=\"me-2 me-sm-3\"\n                    [routerLink]=\"[\n                                            '/' + subscription?.slug + routers.stageDetails,\n                                            stage.id\n                                        ]\">\n                    <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n                  </li>\n                  <li ngbTooltip=\"Delete\"\n                    class=\"me-2 me-sm-3\">\n                    <i\n                                            class=\"fa fa-trash delete-icon\"\n                                            (click)=\"onDelete(stage.id)\"\n                                            aria-hidden=\"true\"\n                                        ></i>\n                  </li>\n                </ng-container>\n              </ul>\n            </td>\n          </tr>\n        </ng-template>\n      </p-table>\n      <div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n      </div>\n      <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n    </div>\n  </div>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.StageMessages.NoStageMessage' | transloco\"> </pw-no-data>\n</div>\n", styles: [".build-default-stage-button{margin-left:7px}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1.CrmService }, { type: i0.ChangeDetectorRef }] });
@@ -2042,10 +2042,10 @@ class SmartCrmOpportunityCategoriesComponent extends AppBaseComponent {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmOpportunityCategoriesComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: SmartCrmOpportunityCategoriesComponent, selector: "pw-smart-crm-opportunity-categories", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12\">\n    <p>{{ 'Crm.CategoriesMessages.CategoriesTitle' | transloco }}</p>\n    <div class=\"col-12\" *ngIf=\"data.object_count === 0 && data.unfiltered_count === 0 && isLoaded\">\n      <a class=\"btn btn-sm btn-outline-primary float-end build-category-button\"\n        data-cy=\"add-category\"\n          (click)=\"buildCategories()\">\n        <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n        {{ 'Crm.CategoriesMessages.BuildCategory' | transloco }}\n      </a>\n    </div>\n    <div class=\"col-12\">\n        <a class=\"btn btn-sm btn-outline-primary float-end mr-2\"\n          data-cy=\"add-category\"\n          [routerLink]=\"['/' + subscription?.slug + routers.categoryDetails + 'add']\">\n          <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n          {{ 'Crm.CategoriesMessages.AddCategory' | transloco }}\n        </a>\n    </div>\n  </div>\n  <div class=\"w-100 text-center mt-3\"\n    *ngIf=\"!isLoaded\">\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n  <div class=\"col-12\">\n    <div class=\"primeng-datatable-container table-responsive\"\n      [class.hideTable]=\"data.unfiltered_count === 0\">\n      <p-table #dt\n        [value]=\"data.crm_opportunity_categories\"\n        [paginator]=\"data.object_count !== 0\"\n        [lazy]=\"true\"\n        [rows]=\"PAGE_SIZE\"\n        [totalRecords]=\"data.object_count\"\n        [loading]=\"loading\"\n        [filterDelay]=\"1000\"\n        (onLazyLoad)=\"onLazyLoad($event)\"\n        [customSort]=\"true\">\n        <ng-template pTemplate=\"caption\">\n          <div class=\"text-end\">\n            <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n            <input type=\"text\"\n              [(ngModel)]=\"searchText\"\n              pInputText\n              size=\"50\"\n              placeholder=\"Search stages...\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n              class=\"mw-90\" />\n          </div>\n        </ng-template>\n        <ng-template pTemplate=\"header\">\n          <tr>\n            <th scope=\"true\"\n              pSortableColumn=\"name\">\n              {{ 'Crm.CategoriesMessages.Name' | transloco }}\n              <p-sortIcon field=\"name\"></p-sortIcon>\n            </th>\n            <th scope=\"true\"\n              pSortableColumn=\"previous_category_id\">\n              {{ 'Crm.CategoriesMessages.PreviousCategory' | transloco }}\n              <p-sortIcon field=\"previous_category_id\"></p-sortIcon>\n            </th>\n            <th scope=\"true\"\n              pSortableColumn=\"is_visible\">\n              {{ 'Crm.CategoriesMessages.Visible' | transloco }}\n              <p-sortIcon field=\"is_visible\"></p-sortIcon>\n            </th>\n            <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n          </tr>\n        </ng-template>\n        <ng-template pTemplate=\"body\"\n          let-stage>\n          <tr>\n            <td data-head=\"Name\">{{ stage?.name }}</td>\n            <td data-head=\"Previous Stage\">\n              <span class=\"badge\"\n                [appDynamicBadge]=\"{\n                                    itemsArray: categoryNames,\n                                    item: stage?.previous_category?.name\n                                }\"\n                color=\"blue-grey\">{{ stage?.previous_category?.name }}</span>\n            </td>\n            <td data-head=\"Visible\">\n              <span [appDynamicBadge]=\"{\n                                    itemsArray: [true, false],\n                                    item: stage?.is_visible\n                                }\"\n                color=\"success-danger\"\n                class=\"badge\">{{ stage?.is_visible }}</span>\n            </td>\n            <td data-head=\"Action\">\n              <ul class=\"list-unstyled list-inline\">\n                <ng-container *ngIf=\"hasAccess\">\n                  <li ngbTooltip=\"Edit\"\n                    class=\"me-2 me-sm-3\"\n                    [routerLink]=\"[\n                                            '/' + subscription?.slug + routers.categoryDetails,\n                                            stage.id\n                                        ]\">\n                    <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n                  </li>\n                  <li ngbTooltip=\"Delete\"\n                    class=\"me-2 me-sm-3\">\n                    <i\n                                            class=\"fa fa-trash delete-icon\"\n                                            (click)=\"onDelete(stage.id)\"\n                                            aria-hidden=\"true\"\n                                        ></i>\n                  </li>\n                </ng-container>\n              </ul>\n            </td>\n          </tr>\n        </ng-template>\n      </p-table>\n      <div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n      </div>\n      <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n    </div>\n  </div>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CategoriesMessages.NoCategoriesMessage' | transloco\"> </pw-no-data>\n</div>\n", styles: [".build-category-button{margin-left:7px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]" }, { kind: "directive", type: i5.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i8.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i11.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmOpportunityCategoriesComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmOpportunityCategoriesComponent, selector: "pw-smart-crm-opportunity-categories", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12\">\n    <p>{{ 'Crm.CategoriesMessages.CategoriesTitle' | transloco }}</p>\n    <div class=\"col-12\" *ngIf=\"data.object_count === 0 && data.unfiltered_count === 0 && isLoaded\">\n      <a class=\"btn btn-sm btn-outline-primary float-end build-category-button\"\n        data-cy=\"add-category\"\n          (click)=\"buildCategories()\">\n        <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n        {{ 'Crm.CategoriesMessages.BuildCategory' | transloco }}\n      </a>\n    </div>\n    <div class=\"col-12\">\n        <a class=\"btn btn-sm btn-outline-primary float-end mr-2\"\n          data-cy=\"add-category\"\n          [routerLink]=\"['/' + subscription?.slug + routers.categoryDetails + 'add']\">\n          <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n          {{ 'Crm.CategoriesMessages.AddCategory' | transloco }}\n        </a>\n    </div>\n  </div>\n  <div class=\"w-100 text-center mt-3\"\n    *ngIf=\"!isLoaded\">\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n  <div class=\"col-12\">\n    <div class=\"primeng-datatable-container table-responsive\"\n      [class.hideTable]=\"data.unfiltered_count === 0\">\n      <p-table #dt\n        [value]=\"data.crm_opportunity_categories\"\n        [paginator]=\"data.object_count !== 0\"\n        [lazy]=\"true\"\n        [rows]=\"PAGE_SIZE\"\n        [totalRecords]=\"data.object_count\"\n        [loading]=\"loading\"\n        [filterDelay]=\"1000\"\n        (onLazyLoad)=\"onLazyLoad($event)\"\n        [customSort]=\"true\">\n        <ng-template pTemplate=\"caption\">\n          <div class=\"text-end\">\n            <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n            <input type=\"text\"\n              [(ngModel)]=\"searchText\"\n              pInputText\n              size=\"50\"\n              placeholder=\"Search stages...\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n              class=\"mw-90\" />\n          </div>\n        </ng-template>\n        <ng-template pTemplate=\"header\">\n          <tr>\n            <th scope=\"true\"\n              pSortableColumn=\"name\">\n              {{ 'Crm.CategoriesMessages.Name' | transloco }}\n              <p-sortIcon field=\"name\"></p-sortIcon>\n            </th>\n            <th scope=\"true\"\n              pSortableColumn=\"previous_category_id\">\n              {{ 'Crm.CategoriesMessages.PreviousCategory' | transloco }}\n              <p-sortIcon field=\"previous_category_id\"></p-sortIcon>\n            </th>\n            <th scope=\"true\"\n              pSortableColumn=\"is_visible\">\n              {{ 'Crm.CategoriesMessages.Visible' | transloco }}\n              <p-sortIcon field=\"is_visible\"></p-sortIcon>\n            </th>\n            <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n          </tr>\n        </ng-template>\n        <ng-template pTemplate=\"body\"\n          let-stage>\n          <tr>\n            <td data-head=\"Name\">{{ stage?.name }}</td>\n            <td data-head=\"Previous Stage\">\n              <span class=\"badge\"\n                [appDynamicBadge]=\"{\n                                    itemsArray: categoryNames,\n                                    item: stage?.previous_category?.name\n                                }\"\n                color=\"blue-grey\">{{ stage?.previous_category?.name }}</span>\n            </td>\n            <td data-head=\"Visible\">\n              <span [appDynamicBadge]=\"{\n                                    itemsArray: [true, false],\n                                    item: stage?.is_visible\n                                }\"\n                color=\"success-danger\"\n                class=\"badge\">{{ stage?.is_visible }}</span>\n            </td>\n            <td data-head=\"Action\">\n              <ul class=\"list-unstyled list-inline\">\n                <ng-container *ngIf=\"hasAccess\">\n                  <li ngbTooltip=\"Edit\"\n                    class=\"me-2 me-sm-3\"\n                    [routerLink]=\"[\n                                            '/' + subscription?.slug + routers.categoryDetails,\n                                            stage.id\n                                        ]\">\n                    <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n                  </li>\n                  <li ngbTooltip=\"Delete\"\n                    class=\"me-2 me-sm-3\">\n                    <i\n                                            class=\"fa fa-trash delete-icon\"\n                                            (click)=\"onDelete(stage.id)\"\n                                            aria-hidden=\"true\"\n                                        ></i>\n                  </li>\n                </ng-container>\n              </ul>\n            </td>\n          </tr>\n        </ng-template>\n      </p-table>\n      <div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n      </div>\n      <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n    </div>\n  </div>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CategoriesMessages.NoCategoriesMessage' | transloco\"> </pw-no-data>\n</div>\n", styles: [".build-category-button{margin-left:7px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i5.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i8.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i11.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmOpportunityCategoriesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmOpportunityCategoriesComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pw-smart-crm-opportunity-categories', template: "<div class=\"row\">\n  <div class=\"col-12\">\n    <p>{{ 'Crm.CategoriesMessages.CategoriesTitle' | transloco }}</p>\n    <div class=\"col-12\" *ngIf=\"data.object_count === 0 && data.unfiltered_count === 0 && isLoaded\">\n      <a class=\"btn btn-sm btn-outline-primary float-end build-category-button\"\n        data-cy=\"add-category\"\n          (click)=\"buildCategories()\">\n        <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n        {{ 'Crm.CategoriesMessages.BuildCategory' | transloco }}\n      </a>\n    </div>\n    <div class=\"col-12\">\n        <a class=\"btn btn-sm btn-outline-primary float-end mr-2\"\n          data-cy=\"add-category\"\n          [routerLink]=\"['/' + subscription?.slug + routers.categoryDetails + 'add']\">\n          <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n          {{ 'Crm.CategoriesMessages.AddCategory' | transloco }}\n        </a>\n    </div>\n  </div>\n  <div class=\"w-100 text-center mt-3\"\n    *ngIf=\"!isLoaded\">\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n  <div class=\"col-12\">\n    <div class=\"primeng-datatable-container table-responsive\"\n      [class.hideTable]=\"data.unfiltered_count === 0\">\n      <p-table #dt\n        [value]=\"data.crm_opportunity_categories\"\n        [paginator]=\"data.object_count !== 0\"\n        [lazy]=\"true\"\n        [rows]=\"PAGE_SIZE\"\n        [totalRecords]=\"data.object_count\"\n        [loading]=\"loading\"\n        [filterDelay]=\"1000\"\n        (onLazyLoad)=\"onLazyLoad($event)\"\n        [customSort]=\"true\">\n        <ng-template pTemplate=\"caption\">\n          <div class=\"text-end\">\n            <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n            <input type=\"text\"\n              [(ngModel)]=\"searchText\"\n              pInputText\n              size=\"50\"\n              placeholder=\"Search stages...\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n              class=\"mw-90\" />\n          </div>\n        </ng-template>\n        <ng-template pTemplate=\"header\">\n          <tr>\n            <th scope=\"true\"\n              pSortableColumn=\"name\">\n              {{ 'Crm.CategoriesMessages.Name' | transloco }}\n              <p-sortIcon field=\"name\"></p-sortIcon>\n            </th>\n            <th scope=\"true\"\n              pSortableColumn=\"previous_category_id\">\n              {{ 'Crm.CategoriesMessages.PreviousCategory' | transloco }}\n              <p-sortIcon field=\"previous_category_id\"></p-sortIcon>\n            </th>\n            <th scope=\"true\"\n              pSortableColumn=\"is_visible\">\n              {{ 'Crm.CategoriesMessages.Visible' | transloco }}\n              <p-sortIcon field=\"is_visible\"></p-sortIcon>\n            </th>\n            <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n          </tr>\n        </ng-template>\n        <ng-template pTemplate=\"body\"\n          let-stage>\n          <tr>\n            <td data-head=\"Name\">{{ stage?.name }}</td>\n            <td data-head=\"Previous Stage\">\n              <span class=\"badge\"\n                [appDynamicBadge]=\"{\n                                    itemsArray: categoryNames,\n                                    item: stage?.previous_category?.name\n                                }\"\n                color=\"blue-grey\">{{ stage?.previous_category?.name }}</span>\n            </td>\n            <td data-head=\"Visible\">\n              <span [appDynamicBadge]=\"{\n                                    itemsArray: [true, false],\n                                    item: stage?.is_visible\n                                }\"\n                color=\"success-danger\"\n                class=\"badge\">{{ stage?.is_visible }}</span>\n            </td>\n            <td data-head=\"Action\">\n              <ul class=\"list-unstyled list-inline\">\n                <ng-container *ngIf=\"hasAccess\">\n                  <li ngbTooltip=\"Edit\"\n                    class=\"me-2 me-sm-3\"\n                    [routerLink]=\"[\n                                            '/' + subscription?.slug + routers.categoryDetails,\n                                            stage.id\n                                        ]\">\n                    <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n                  </li>\n                  <li ngbTooltip=\"Delete\"\n                    class=\"me-2 me-sm-3\">\n                    <i\n                                            class=\"fa fa-trash delete-icon\"\n                                            (click)=\"onDelete(stage.id)\"\n                                            aria-hidden=\"true\"\n                                        ></i>\n                  </li>\n                </ng-container>\n              </ul>\n            </td>\n          </tr>\n        </ng-template>\n      </p-table>\n      <div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n      </div>\n      <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n    </div>\n  </div>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CategoriesMessages.NoCategoriesMessage' | transloco\"> </pw-no-data>\n</div>\n", styles: [".build-category-button{margin-left:7px}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1.CrmService }, { type: i0.ChangeDetectorRef }] });
@@ -2065,10 +2065,10 @@ class SmartCrmConfigurationComponent extends AppBaseComponent {
             this.router.navigate([`${subscription.slug}${ROUTERS.configurations}${event.nextId}`]);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmConfigurationComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: SmartCrmConfigurationComponent, selector: "pw-configuration", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 mb-0\">\n    <h2>CRM Configuration</h2>\n  </div>\n</div>\n<ul ngbNav\n  #nav=\"ngbNav\"\n  [(activeId)]=\"activeTab\"\n  (navChange)=\"onTabChange($event)\"\n  class=\"nav-tabs\">\n  <li [ngbNavItem]=\"'actions'\"\n    *rbacAllow=\"'SubscriptionAdmin'\">\n    <a ngbNavLink>Actions</a>\n    <ng-template ngbNavContent>\n      <pw-smart-crm-actions></pw-smart-crm-actions>\n    </ng-template>\n  </li>\n\n  <li [ngbNavItem]=\"'categories'\"\n    *rbacAllow=\"'SubscriptionAdmin'\">\n    <a ngbNavLink>Categories</a>\n    <ng-template ngbNavContent>\n      <pw-smart-crm-opportunity-categories></pw-smart-crm-opportunity-categories>\n    </ng-template>\n  </li>\n\n  <li [ngbNavItem]=\"'stage'\"\n    *rbacAllow=\"'SubscriptionAdmin'\">\n    <a ngbNavLink>Stages</a>\n    <ng-template ngbNavContent>\n      <pw-smart-crm-stages></pw-smart-crm-stages>\n    </ng-template>\n  </li>\n\n  <li [ngbNavItem]=\"'source'\"\n    *rbacAllow=\"'SubscriptionAdmin' && 'Pages.Beta'\">\n    <a ngbNavLink>Sources</a>\n    <ng-template ngbNavContent>\n      <pw-smart-crm-source></pw-smart-crm-source>\n    </ng-template>\n  </li>\n\n  <li [ngbNavItem]=\"'widget'\"\n    *rbacAllow=\"'SubscriptionAdmin' && 'SuperAdmin'\">\n    <a ngbNavLink>Widgets</a>\n    <ng-template ngbNavContent>\n      <pw-smart-crm-widgets></pw-smart-crm-widgets>\n    </ng-template>\n  </li>\n\n  <li [ngbNavItem]=\"'admin'\"\n    *rbacAllow=\"'SubscriptionAdmin' && 'SuperAdmin'\">\n    <a ngbNavLink>Admin</a>\n    <ng-template ngbNavContent>\n      <pw-coming-soon message=\"Admin\"></pw-coming-soon>\n    </ng-template>\n  </li>\n</ul>\n\n<div [ngbNavOutlet]=\"nav\"></div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}\n"], dependencies: [{ kind: "directive", type: i5.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i2$2.NgbNavContent, selector: "ng-template[ngbNavContent]" }, { kind: "directive", type: i2$2.NgbNav, selector: "[ngbNav]", inputs: ["activeId", "animation", "destroyOnHide", "orientation", "roles", "keyboard"], outputs: ["activeIdChange", "shown", "hidden", "navChange"], exportAs: ["ngbNav"] }, { kind: "directive", type: i2$2.NgbNavItem, selector: "[ngbNavItem]", inputs: ["destroyOnHide", "disabled", "domId", "ngbNavItem"], outputs: ["shown", "hidden"], exportAs: ["ngbNavItem"] }, { kind: "directive", type: i2$2.NgbNavItemRole, selector: "[ngbNavItem]:not(ng-container)" }, { kind: "directive", type: i2$2.NgbNavLink, selector: "a[ngbNavLink]" }, { kind: "directive", type: i2$2.NgbNavLinkBase, selector: "[ngbNavLink]" }, { kind: "component", type: i2$2.NgbNavOutlet, selector: "[ngbNavOutlet]", inputs: ["paneRole", "ngbNavOutlet"] }, { kind: "component", type: i11.ComingSoonComponent, selector: "pw-coming-soon", inputs: ["message"] }, { kind: "component", type: SmartCrmCompanySourceComponent, selector: "pw-smart-crm-source" }, { kind: "component", type: SmartCrmWidgetsComponent, selector: "pw-smart-crm-widgets" }, { kind: "component", type: SmartCrmActionsComponent, selector: "pw-smart-crm-actions" }, { kind: "component", type: SmartCrmStagesComponent, selector: "pw-smart-crm-stages" }, { kind: "component", type: SmartCrmOpportunityCategoriesComponent, selector: "pw-smart-crm-opportunity-categories" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmConfigurationComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmConfigurationComponent, selector: "pw-configuration", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 mb-0\">\n    <h2>CRM Configuration</h2>\n  </div>\n</div>\n<ul ngbNav\n  #nav=\"ngbNav\"\n  [(activeId)]=\"activeTab\"\n  (navChange)=\"onTabChange($event)\"\n  class=\"nav-tabs\">\n  <li [ngbNavItem]=\"'actions'\"\n    *rbacAllow=\"'SubscriptionAdmin'\">\n    <a ngbNavLink>Actions</a>\n    <ng-template ngbNavContent>\n      <pw-smart-crm-actions></pw-smart-crm-actions>\n    </ng-template>\n  </li>\n\n  <li [ngbNavItem]=\"'categories'\"\n    *rbacAllow=\"'SubscriptionAdmin'\">\n    <a ngbNavLink>Categories</a>\n    <ng-template ngbNavContent>\n      <pw-smart-crm-opportunity-categories></pw-smart-crm-opportunity-categories>\n    </ng-template>\n  </li>\n\n  <li [ngbNavItem]=\"'stage'\"\n    *rbacAllow=\"'SubscriptionAdmin'\">\n    <a ngbNavLink>Stages</a>\n    <ng-template ngbNavContent>\n      <pw-smart-crm-stages></pw-smart-crm-stages>\n    </ng-template>\n  </li>\n\n  <li [ngbNavItem]=\"'source'\"\n    *rbacAllow=\"'SubscriptionAdmin' && 'Pages.Beta'\">\n    <a ngbNavLink>Sources</a>\n    <ng-template ngbNavContent>\n      <pw-smart-crm-source></pw-smart-crm-source>\n    </ng-template>\n  </li>\n\n  <li [ngbNavItem]=\"'widget'\"\n    *rbacAllow=\"'SubscriptionAdmin' && 'SuperAdmin'\">\n    <a ngbNavLink>Widgets</a>\n    <ng-template ngbNavContent>\n      <pw-smart-crm-widgets></pw-smart-crm-widgets>\n    </ng-template>\n  </li>\n\n  <li [ngbNavItem]=\"'admin'\"\n    *rbacAllow=\"'SubscriptionAdmin' && 'SuperAdmin'\">\n    <a ngbNavLink>Admin</a>\n    <ng-template ngbNavContent>\n      <pw-coming-soon message=\"Admin\"></pw-coming-soon>\n    </ng-template>\n  </li>\n</ul>\n\n<div [ngbNavOutlet]=\"nav\"></div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}\n"], dependencies: [{ kind: "directive", type: i5.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i2$2.NgbNavContent, selector: "ng-template[ngbNavContent]" }, { kind: "directive", type: i2$2.NgbNav, selector: "[ngbNav]", inputs: ["activeId", "animation", "destroyOnHide", "orientation", "roles", "keyboard"], outputs: ["activeIdChange", "shown", "hidden", "navChange"], exportAs: ["ngbNav"] }, { kind: "directive", type: i2$2.NgbNavItem, selector: "[ngbNavItem]", inputs: ["destroyOnHide", "disabled", "domId", "ngbNavItem"], outputs: ["shown", "hidden"], exportAs: ["ngbNavItem"] }, { kind: "directive", type: i2$2.NgbNavItemRole, selector: "[ngbNavItem]:not(ng-container)" }, { kind: "directive", type: i2$2.NgbNavLink, selector: "a[ngbNavLink]" }, { kind: "directive", type: i2$2.NgbNavLinkBase, selector: "[ngbNavLink]" }, { kind: "component", type: i2$2.NgbNavOutlet, selector: "[ngbNavOutlet]", inputs: ["paneRole", "ngbNavOutlet"] }, { kind: "component", type: i11.ComingSoonComponent, selector: "pw-coming-soon", inputs: ["message"] }, { kind: "component", type: SmartCrmCompanySourceComponent, selector: "pw-smart-crm-source" }, { kind: "component", type: SmartCrmWidgetsComponent, selector: "pw-smart-crm-widgets" }, { kind: "component", type: SmartCrmActionsComponent, selector: "pw-smart-crm-actions" }, { kind: "component", type: SmartCrmStagesComponent, selector: "pw-smart-crm-stages" }, { kind: "component", type: SmartCrmOpportunityCategoriesComponent, selector: "pw-smart-crm-opportunity-categories" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmConfigurationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmConfigurationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pw-configuration', template: "<div class=\"row\">\n  <div class=\"col-12 mb-0\">\n    <h2>CRM Configuration</h2>\n  </div>\n</div>\n<ul ngbNav\n  #nav=\"ngbNav\"\n  [(activeId)]=\"activeTab\"\n  (navChange)=\"onTabChange($event)\"\n  class=\"nav-tabs\">\n  <li [ngbNavItem]=\"'actions'\"\n    *rbacAllow=\"'SubscriptionAdmin'\">\n    <a ngbNavLink>Actions</a>\n    <ng-template ngbNavContent>\n      <pw-smart-crm-actions></pw-smart-crm-actions>\n    </ng-template>\n  </li>\n\n  <li [ngbNavItem]=\"'categories'\"\n    *rbacAllow=\"'SubscriptionAdmin'\">\n    <a ngbNavLink>Categories</a>\n    <ng-template ngbNavContent>\n      <pw-smart-crm-opportunity-categories></pw-smart-crm-opportunity-categories>\n    </ng-template>\n  </li>\n\n  <li [ngbNavItem]=\"'stage'\"\n    *rbacAllow=\"'SubscriptionAdmin'\">\n    <a ngbNavLink>Stages</a>\n    <ng-template ngbNavContent>\n      <pw-smart-crm-stages></pw-smart-crm-stages>\n    </ng-template>\n  </li>\n\n  <li [ngbNavItem]=\"'source'\"\n    *rbacAllow=\"'SubscriptionAdmin' && 'Pages.Beta'\">\n    <a ngbNavLink>Sources</a>\n    <ng-template ngbNavContent>\n      <pw-smart-crm-source></pw-smart-crm-source>\n    </ng-template>\n  </li>\n\n  <li [ngbNavItem]=\"'widget'\"\n    *rbacAllow=\"'SubscriptionAdmin' && 'SuperAdmin'\">\n    <a ngbNavLink>Widgets</a>\n    <ng-template ngbNavContent>\n      <pw-smart-crm-widgets></pw-smart-crm-widgets>\n    </ng-template>\n  </li>\n\n  <li [ngbNavItem]=\"'admin'\"\n    *rbacAllow=\"'SubscriptionAdmin' && 'SuperAdmin'\">\n    <a ngbNavLink>Admin</a>\n    <ng-template ngbNavContent>\n      <pw-coming-soon message=\"Admin\"></pw-coming-soon>\n    </ng-template>\n  </li>\n</ul>\n\n<div [ngbNavOutlet]=\"nav\"></div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }] });
@@ -2123,8 +2123,8 @@ class SmartCrmOpportunityCategoriesDetailsComponent extends AppBaseComponent {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmOpportunityCategoriesDetailsComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: SmartCrmOpportunityCategoriesDetailsComponent, selector: "pw-smart-crm-opportunity-categories-details", usesInheritance: true, ngImport: i0, template: "<div class=\"col-12 d-flex ps-0\">\n  <a href=\"javascript:void(0)\"\n    (click)=\"back()\"\n    class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n  <div class=\"me-auto col-xs-6\">\n    <h3 class=\"m-subheader__title m-subheader__title--separator\">\n      <span>{{ 'Crm.CategoriesMessages.Category' | transloco }}:\n        {{ data?.name || ('Label.AddNew' | transloco) }}</span>\n    </h3>\n  </div>\n</div>\n<div class=\"container-fluid pw-tab\">\n  <div class=\"p-2 mt-3\">\n    <form [formGroup]=\"form\"\n      (ngSubmit)=\"onSave()\">\n      <div class=\"row mb-3\">\n        <div class=\"col-12 col-sm-4\">\n          <pw-input-container [label]=\"'Crm.CategoriesMessages.Name' | transloco\"\n            name=\"name\"\n            [errorMsg]=\"'Crm.CategoriesMessages.NameRequired' | transloco\">\n            <input type=\"text\"\n              class=\"form-control\"\n              formControlName=\"name\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['name'].errors }\" />\n          </pw-input-container>\n        </div>\n        <div class=\"col-12 col-sm-4\">\n          <pw-input-container [showTooltip]=\"true\"\n            [tooltipText]=\"\n                            'Crm.CategoriesMessages.Tooltip.PreviousCategory' | transloco\n                        \"\n            [label]=\"'Crm.CategoriesMessages.PreviousCategory' | transloco\"\n            name=\"previous_category_id\"\n            [errorMsg]=\"'Crm.CategoriesMessages.PreviousCategoryRequired' | transloco\"\n            *ngIf=\"categories$ | async as categories\">\n            <select formControlName=\"previous_category_id\"\n              class=\"form-control form-select\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['previous_category_id'].errors }\">\n              <option value=\"\">select previous category</option>\n              <option *ngFor=\"let option of categories['crm_opportunity_categories']\"\n                [value]=\"option.id\">\n                {{ option.name }}\n              </option>\n            </select>\n          </pw-input-container>\n        </div>\n        <div class=\"col col-md-2\">\n          <div class=\"mb-3\">\n            <pw-input-container [showTooltip]=\"true\"\n              [tooltipText]=\"'Crm.CategoriesMessages.Tooltip.Visible' | transloco\"\n              [label]=\"'Crm.CategoriesMessages.Visible' | transloco\"\n              name=\"is_visible\">\n              <ui-switch class=\"d-block\"\n                formControlName=\"is_visible\"\n                name=\"is_visible\">\n              </ui-switch>\n            </pw-input-container>\n          </div>\n        </div>\n        <div class=\"col col-md-2\"\n          *rbacAllow=\"'SuperAdmin'\">\n          <div class=\"mb-3\">\n            <pw-input-container [showTooltip]=\"true\"\n              [label]=\"'Crm.CategoriesMessages.Default' | transloco\"\n              [tooltipText]=\"'Crm.CategoriesMessages.Tooltip.Default' | transloco\"\n              name=\"is_default\">\n              <ui-switch class=\"d-block\"\n                formControlName=\"is_default\"\n                name=\"is_default\">\n              </ui-switch>\n            </pw-input-container>\n          </div>\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            class=\"btn btn-primary\">\n            {{ 'Button.Submit' | transloco }}\n          </button>\n        </div>\n      </div>\n    </form>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4$1.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "directive", type: i5.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i11.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmOpportunityCategoriesDetailsComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmOpportunityCategoriesDetailsComponent, selector: "pw-smart-crm-opportunity-categories-details", usesInheritance: true, ngImport: i0, template: "<div class=\"col-12 d-flex ps-0\">\n  <a href=\"javascript:void(0)\"\n    (click)=\"back()\"\n    class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n  <div class=\"me-auto col-xs-6\">\n    <h3 class=\"m-subheader__title m-subheader__title--separator\">\n      <span>{{ 'Crm.CategoriesMessages.Category' | transloco }}:\n        {{ data?.name || ('Label.AddNew' | transloco) }}</span>\n    </h3>\n  </div>\n</div>\n<div class=\"container-fluid pw-tab\">\n  <div class=\"p-2 mt-3\">\n    <form [formGroup]=\"form\"\n      (ngSubmit)=\"onSave()\">\n      <div class=\"row mb-3\">\n        <div class=\"col-12 col-sm-4\">\n          <pw-input-container [label]=\"'Crm.CategoriesMessages.Name' | transloco\"\n            name=\"name\"\n            [errorMsg]=\"'Crm.CategoriesMessages.NameRequired' | transloco\">\n            <input type=\"text\"\n              class=\"form-control\"\n              formControlName=\"name\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['name'].errors }\" />\n          </pw-input-container>\n        </div>\n        <div class=\"col-12 col-sm-4\">\n          <pw-input-container [showTooltip]=\"true\"\n            [tooltipText]=\"\n                            'Crm.CategoriesMessages.Tooltip.PreviousCategory' | transloco\n                        \"\n            [label]=\"'Crm.CategoriesMessages.PreviousCategory' | transloco\"\n            name=\"previous_category_id\"\n            [errorMsg]=\"'Crm.CategoriesMessages.PreviousCategoryRequired' | transloco\"\n            *ngIf=\"categories$ | async as categories\">\n            <select formControlName=\"previous_category_id\"\n              class=\"form-control form-select\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['previous_category_id'].errors }\">\n              <option value=\"\">select previous category</option>\n              <option *ngFor=\"let option of categories['crm_opportunity_categories']\"\n                [value]=\"option.id\">\n                {{ option.name }}\n              </option>\n            </select>\n          </pw-input-container>\n        </div>\n        <div class=\"col col-md-2\">\n          <div class=\"mb-3\">\n            <pw-input-container [showTooltip]=\"true\"\n              [tooltipText]=\"'Crm.CategoriesMessages.Tooltip.Visible' | transloco\"\n              [label]=\"'Crm.CategoriesMessages.Visible' | transloco\"\n              name=\"is_visible\">\n              <ui-switch class=\"d-block\"\n                formControlName=\"is_visible\"\n                name=\"is_visible\">\n              </ui-switch>\n            </pw-input-container>\n          </div>\n        </div>\n        <div class=\"col col-md-2\"\n          *rbacAllow=\"'SuperAdmin'\">\n          <div class=\"mb-3\">\n            <pw-input-container [showTooltip]=\"true\"\n              [label]=\"'Crm.CategoriesMessages.Default' | transloco\"\n              [tooltipText]=\"'Crm.CategoriesMessages.Tooltip.Default' | transloco\"\n              name=\"is_default\">\n              <ui-switch class=\"d-block\"\n                formControlName=\"is_default\"\n                name=\"is_default\">\n              </ui-switch>\n            </pw-input-container>\n          </div>\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            class=\"btn btn-primary\">\n            {{ 'Button.Submit' | transloco }}\n          </button>\n        </div>\n      </div>\n    </form>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4$1.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "directive", type: i5.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i11.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
 }
 __decorate([
     ValidateForm('form'),
@@ -2132,7 +2132,7 @@ __decorate([
     __metadata("design:paramtypes", []),
     __metadata("design:returntype", void 0)
 ], SmartCrmOpportunityCategoriesDetailsComponent.prototype, "onSave", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmOpportunityCategoriesDetailsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmOpportunityCategoriesDetailsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pw-smart-crm-opportunity-categories-details', template: "<div class=\"col-12 d-flex ps-0\">\n  <a href=\"javascript:void(0)\"\n    (click)=\"back()\"\n    class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n  <div class=\"me-auto col-xs-6\">\n    <h3 class=\"m-subheader__title m-subheader__title--separator\">\n      <span>{{ 'Crm.CategoriesMessages.Category' | transloco }}:\n        {{ data?.name || ('Label.AddNew' | transloco) }}</span>\n    </h3>\n  </div>\n</div>\n<div class=\"container-fluid pw-tab\">\n  <div class=\"p-2 mt-3\">\n    <form [formGroup]=\"form\"\n      (ngSubmit)=\"onSave()\">\n      <div class=\"row mb-3\">\n        <div class=\"col-12 col-sm-4\">\n          <pw-input-container [label]=\"'Crm.CategoriesMessages.Name' | transloco\"\n            name=\"name\"\n            [errorMsg]=\"'Crm.CategoriesMessages.NameRequired' | transloco\">\n            <input type=\"text\"\n              class=\"form-control\"\n              formControlName=\"name\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['name'].errors }\" />\n          </pw-input-container>\n        </div>\n        <div class=\"col-12 col-sm-4\">\n          <pw-input-container [showTooltip]=\"true\"\n            [tooltipText]=\"\n                            'Crm.CategoriesMessages.Tooltip.PreviousCategory' | transloco\n                        \"\n            [label]=\"'Crm.CategoriesMessages.PreviousCategory' | transloco\"\n            name=\"previous_category_id\"\n            [errorMsg]=\"'Crm.CategoriesMessages.PreviousCategoryRequired' | transloco\"\n            *ngIf=\"categories$ | async as categories\">\n            <select formControlName=\"previous_category_id\"\n              class=\"form-control form-select\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['previous_category_id'].errors }\">\n              <option value=\"\">select previous category</option>\n              <option *ngFor=\"let option of categories['crm_opportunity_categories']\"\n                [value]=\"option.id\">\n                {{ option.name }}\n              </option>\n            </select>\n          </pw-input-container>\n        </div>\n        <div class=\"col col-md-2\">\n          <div class=\"mb-3\">\n            <pw-input-container [showTooltip]=\"true\"\n              [tooltipText]=\"'Crm.CategoriesMessages.Tooltip.Visible' | transloco\"\n              [label]=\"'Crm.CategoriesMessages.Visible' | transloco\"\n              name=\"is_visible\">\n              <ui-switch class=\"d-block\"\n                formControlName=\"is_visible\"\n                name=\"is_visible\">\n              </ui-switch>\n            </pw-input-container>\n          </div>\n        </div>\n        <div class=\"col col-md-2\"\n          *rbacAllow=\"'SuperAdmin'\">\n          <div class=\"mb-3\">\n            <pw-input-container [showTooltip]=\"true\"\n              [label]=\"'Crm.CategoriesMessages.Default' | transloco\"\n              [tooltipText]=\"'Crm.CategoriesMessages.Tooltip.Default' | transloco\"\n              name=\"is_default\">\n              <ui-switch class=\"d-block\"\n                formControlName=\"is_default\"\n                name=\"is_default\">\n              </ui-switch>\n            </pw-input-container>\n          </div>\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            class=\"btn btn-primary\">\n            {{ 'Button.Submit' | transloco }}\n          </button>\n        </div>\n      </div>\n    </form>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1.CrmService }], propDecorators: { onSave: [] } });
@@ -2187,10 +2187,10 @@ class SmartCrmSourceDetailsComponent extends AppBaseComponent {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmSourceDetailsComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: SmartCrmSourceDetailsComponent, selector: "pw-smart-crm-source-details", usesInheritance: true, ngImport: i0, template: "<div class=\"col-12 d-flex ps-0\">\n  <a href=\"javascript:void(0)\"\n    (click)=\"back()\"\n    class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n  <div class=\"me-auto col-xs-6\">\n    <h3 class=\"m-subheader__title m-subheader__title--separator\">\n      <span>{{ 'Crm.AccountSourceMessage.AccountSource' | transloco }}:\n        {{ data?.name ? data?.name : ('Label.AddNew' | transloco) }}</span>\n    </h3>\n  </div>\n</div>\n<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"p-2 mt-3\">\n    <form [formGroup]=\"sourceForm\"\n      (ngSubmit)=\"onSave()\">\n      <div class=\"row mb-3\">\n        <div class=\"col-12 col-sm-4\">\n          <pw-input-container [label]=\"'Crm.AccountSourceMessage.Name' | transloco\"\n            name=\"name\"\n            [errorMsg]=\"'name is required' | transloco\">\n            <input type=\"text\"\n              class=\"form-control\"\n              formControlName=\"name\"\n              id=\"name\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['name'].errors }\" />\n          </pw-input-container>\n        </div>\n        <div class=\"col-md-3 col-lg-2 pe-0 cancel-button\"\n          *rbacAllow=\"'SuperAdmin'\">\n          <div class=\"mb-3\">\n            <label class=\"d-sm-block vertical-bottom mb-2\">{{\n                            'Crm.AccountSourceMessage.IsDefault' | transloco\n                        }}</label>\n            <ui-switch class=\"ms-3 ms-sm-0\"\n              name=\"is_default\"\n              formControlName=\"is_default\">\n            </ui-switch>\n          </div>\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            class=\"btn btn-primary\">\n            {{ 'Button.Submit' | transloco }}\n          </button>\n        </div>\n      </div>\n    </form>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4$1.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "directive", type: i5.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i11.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText"] }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmSourceDetailsComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmSourceDetailsComponent, selector: "pw-smart-crm-source-details", usesInheritance: true, ngImport: i0, template: "<div class=\"col-12 d-flex ps-0\">\n  <a href=\"javascript:void(0)\"\n    (click)=\"back()\"\n    class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n  <div class=\"me-auto col-xs-6\">\n    <h3 class=\"m-subheader__title m-subheader__title--separator\">\n      <span>{{ 'Crm.AccountSourceMessage.AccountSource' | transloco }}:\n        {{ data?.name ? data?.name : ('Label.AddNew' | transloco) }}</span>\n    </h3>\n  </div>\n</div>\n<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"p-2 mt-3\">\n    <form [formGroup]=\"sourceForm\"\n      (ngSubmit)=\"onSave()\">\n      <div class=\"row mb-3\">\n        <div class=\"col-12 col-sm-4\">\n          <pw-input-container [label]=\"'Crm.AccountSourceMessage.Name' | transloco\"\n            name=\"name\"\n            [errorMsg]=\"'name is required' | transloco\">\n            <input type=\"text\"\n              class=\"form-control\"\n              formControlName=\"name\"\n              id=\"name\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['name'].errors }\" />\n          </pw-input-container>\n        </div>\n        <div class=\"col-md-3 col-lg-2 pe-0 cancel-button\"\n          *rbacAllow=\"'SuperAdmin'\">\n          <div class=\"mb-3\">\n            <label class=\"d-sm-block vertical-bottom mb-2\">{{\n                            'Crm.AccountSourceMessage.IsDefault' | transloco\n                        }}</label>\n            <ui-switch class=\"ms-3 ms-sm-0\"\n              name=\"is_default\"\n              formControlName=\"is_default\">\n            </ui-switch>\n          </div>\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            class=\"btn btn-primary\">\n            {{ 'Button.Submit' | transloco }}\n          </button>\n        </div>\n      </div>\n    </form>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4$1.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "directive", type: i5.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i11.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText"] }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmSourceDetailsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmSourceDetailsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pw-smart-crm-source-details', template: "<div class=\"col-12 d-flex ps-0\">\n  <a href=\"javascript:void(0)\"\n    (click)=\"back()\"\n    class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n  <div class=\"me-auto col-xs-6\">\n    <h3 class=\"m-subheader__title m-subheader__title--separator\">\n      <span>{{ 'Crm.AccountSourceMessage.AccountSource' | transloco }}:\n        {{ data?.name ? data?.name : ('Label.AddNew' | transloco) }}</span>\n    </h3>\n  </div>\n</div>\n<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"p-2 mt-3\">\n    <form [formGroup]=\"sourceForm\"\n      (ngSubmit)=\"onSave()\">\n      <div class=\"row mb-3\">\n        <div class=\"col-12 col-sm-4\">\n          <pw-input-container [label]=\"'Crm.AccountSourceMessage.Name' | transloco\"\n            name=\"name\"\n            [errorMsg]=\"'name is required' | transloco\">\n            <input type=\"text\"\n              class=\"form-control\"\n              formControlName=\"name\"\n              id=\"name\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['name'].errors }\" />\n          </pw-input-container>\n        </div>\n        <div class=\"col-md-3 col-lg-2 pe-0 cancel-button\"\n          *rbacAllow=\"'SuperAdmin'\">\n          <div class=\"mb-3\">\n            <label class=\"d-sm-block vertical-bottom mb-2\">{{\n                            'Crm.AccountSourceMessage.IsDefault' | transloco\n                        }}</label>\n            <ui-switch class=\"ms-3 ms-sm-0\"\n              name=\"is_default\"\n              formControlName=\"is_default\">\n            </ui-switch>\n          </div>\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            class=\"btn btn-primary\">\n            {{ 'Button.Submit' | transloco }}\n          </button>\n        </div>\n      </div>\n    </form>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1.CrmService }] });
@@ -2261,10 +2261,10 @@ class SmartCrmStageDetailsComponent extends AppBaseComponent {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmStageDetailsComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: SmartCrmStageDetailsComponent, selector: "pw-smart-crm-stage-details", usesInheritance: true, ngImport: i0, template: "<div class=\"col-12 d-flex ps-0\">\n  <a href=\"javascript:void(0)\"\n    (click)=\"back()\"\n    class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n  <div class=\"me-auto col-xs-6\">\n    <h3 class=\"m-subheader__title m-subheader__title--separator\">\n      <span>{{ 'Crm.StageMessages.Stage' | transloco }}:\n        {{ data?.name || ('Label.AddNew' | transloco) }}</span>\n    </h3>\n  </div>\n</div>\n<div class=\"container-fluid pw-tab\">\n  <div class=\"p-2 mt-3\">\n    <form [formGroup]=\"form\"\n      (ngSubmit)=\"onSave()\">\n      <div class=\"row mb-3\">\n        <div class=\"col-12 col-sm-4 col-md-3\">\n          <pw-input-container [label]=\"'Crm.StageMessages.Name' | transloco\"\n            name=\"name\"\n            [errorMsg]=\"'Crm.StageMessages.NameRequired' | transloco\">\n            <input type=\"text\"\n              class=\"form-control\"\n              formControlName=\"name\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['name'].errors }\" />\n          </pw-input-container>\n        </div>\n         <div class=\"col-12 col-sm-4 col-md-3\">\n            <pw-input-container [label]=\"'Crm.StageMessages.ColorCode' | transloco\"\n              [showTooltip]=\"true\"\n              [tooltipText]=\"'Crm.StageMessages.Tooltip.ColorCode' | transloco\"\n              name=\"color_code\">\n              <input type=\"color\"\n                class=\"form-control color-code-stage account-color-code\"\n                formControlName=\"color_code\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['color_code'].errors }\" />\n            </pw-input-container>\n        </div>\n        <div class=\"col-12 col-sm-4 col-md-3\">\n          <pw-input-container [showTooltip]=\"true\"\n            [tooltipText]=\"'Crm.StageMessages.Tooltip.PreviousStage' | transloco\"\n            [label]=\"'Crm.StageMessages.PreviousStage' | transloco\"\n            name=\"previous_stage_id\"\n            [errorMsg]=\"'Crm.StageMessages.PreviousStageRequired' | transloco\"\n            *ngIf=\"stages$ | async as stages\">\n            <select formControlName=\"previous_stage_id\"\n              class=\"form-control form-select\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['previous_stage_id'].errors }\">\n              <option value=\"\">select previous stage</option>\n              <option *ngFor=\"let option of stages['crm_opportunity_stages']\"\n                [value]=\"option.id\">\n                {{ option.name }}\n              </option>\n            </select>\n          </pw-input-container>\n        </div>\n        <div class=\"col-12 col-sm-4 col-md-3\" *ngIf=\"categories.length > 0\">\n          <pw-input-container [showTooltip]=\"true\"\n            [tooltipText]=\"'Crm.StageMessages.Tooltip.OpportunityCategory' | transloco\"\n            [label]=\"'Crm.StageMessages.OpportunityCategory' | transloco\"\n            name=\"crm_opportunity_category_ids\"\n            errorMsg=\"category is required\">\n            <p-multiSelect [options]=\"categories\"\n              formControlName=\"crm_opportunity_category_ids\"\n              appendTo=\"body\"></p-multiSelect>\n          </pw-input-container>\n        </div>\n        <div class=\"col-12 col-sm-2 col-md-1\">\n          <div class=\"mb-3\">\n            <label class=\"info-circle mb-2\">{{ 'Crm.StageMessages.Visible' | transloco\n                            }}<span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.StageMessages.Tooltip.Visible' | transloco\n                            }}</span></label><br />\n            <ui-switch formControlName=\"visible\"\n              name=\"visible\"></ui-switch>\n          </div>\n        </div>\n        <div class=\"col-12 col-sm-2 col-md-1\"\n          *rbacAllow=\"'SuperAdmin'\">\n          <div class=\"mb-3\">\n            <label class=\"info-circle mb-2\">{{ 'Crm.StageMessages.Default' | transloco\n                            }}<span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.StageMessages.Tooltip.Default' | transloco\n                            }}</span></label><br />\n            <ui-switch formControlName=\"is_default\"\n              name=\"is_default\"> </ui-switch>\n          </div>\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            class=\"btn btn-primary\">\n            {{ 'Button.Submit' | transloco }}\n          </button>\n        </div>\n      </div>\n    </form>\n  </div>\n</div>\n", styles: [".account-color-code{height:31.5px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4$1.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "directive", type: i5.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i11.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmStageDetailsComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmStageDetailsComponent, selector: "pw-smart-crm-stage-details", usesInheritance: true, ngImport: i0, template: "<div class=\"col-12 d-flex ps-0\">\n  <a href=\"javascript:void(0)\"\n    (click)=\"back()\"\n    class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n  <div class=\"me-auto col-xs-6\">\n    <h3 class=\"m-subheader__title m-subheader__title--separator\">\n      <span>{{ 'Crm.StageMessages.Stage' | transloco }}:\n        {{ data?.name || ('Label.AddNew' | transloco) }}</span>\n    </h3>\n  </div>\n</div>\n<div class=\"container-fluid pw-tab\">\n  <div class=\"p-2 mt-3\">\n    <form [formGroup]=\"form\"\n      (ngSubmit)=\"onSave()\">\n      <div class=\"row mb-3\">\n        <div class=\"col-12 col-sm-4 col-md-3\">\n          <pw-input-container [label]=\"'Crm.StageMessages.Name' | transloco\"\n            name=\"name\"\n            [errorMsg]=\"'Crm.StageMessages.NameRequired' | transloco\">\n            <input type=\"text\"\n              class=\"form-control\"\n              formControlName=\"name\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['name'].errors }\" />\n          </pw-input-container>\n        </div>\n         <div class=\"col-12 col-sm-4 col-md-3\">\n            <pw-input-container [label]=\"'Crm.StageMessages.ColorCode' | transloco\"\n              [showTooltip]=\"true\"\n              [tooltipText]=\"'Crm.StageMessages.Tooltip.ColorCode' | transloco\"\n              name=\"color_code\">\n              <input type=\"color\"\n                class=\"form-control color-code-stage account-color-code\"\n                formControlName=\"color_code\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['color_code'].errors }\" />\n            </pw-input-container>\n        </div>\n        <div class=\"col-12 col-sm-4 col-md-3\">\n          <pw-input-container [showTooltip]=\"true\"\n            [tooltipText]=\"'Crm.StageMessages.Tooltip.PreviousStage' | transloco\"\n            [label]=\"'Crm.StageMessages.PreviousStage' | transloco\"\n            name=\"previous_stage_id\"\n            [errorMsg]=\"'Crm.StageMessages.PreviousStageRequired' | transloco\"\n            *ngIf=\"stages$ | async as stages\">\n            <select formControlName=\"previous_stage_id\"\n              class=\"form-control form-select\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['previous_stage_id'].errors }\">\n              <option value=\"\">select previous stage</option>\n              <option *ngFor=\"let option of stages['crm_opportunity_stages']\"\n                [value]=\"option.id\">\n                {{ option.name }}\n              </option>\n            </select>\n          </pw-input-container>\n        </div>\n        <div class=\"col-12 col-sm-4 col-md-3\" *ngIf=\"categories.length > 0\">\n          <pw-input-container [showTooltip]=\"true\"\n            [tooltipText]=\"'Crm.StageMessages.Tooltip.OpportunityCategory' | transloco\"\n            [label]=\"'Crm.StageMessages.OpportunityCategory' | transloco\"\n            name=\"crm_opportunity_category_ids\"\n            errorMsg=\"category is required\">\n            <p-multiSelect [options]=\"categories\"\n              formControlName=\"crm_opportunity_category_ids\"\n              appendTo=\"body\"></p-multiSelect>\n          </pw-input-container>\n        </div>\n        <div class=\"col-12 col-sm-2 col-md-1\">\n          <div class=\"mb-3\">\n            <label class=\"info-circle mb-2\">{{ 'Crm.StageMessages.Visible' | transloco\n                            }}<span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.StageMessages.Tooltip.Visible' | transloco\n                            }}</span></label><br />\n            <ui-switch formControlName=\"visible\"\n              name=\"visible\"></ui-switch>\n          </div>\n        </div>\n        <div class=\"col-12 col-sm-2 col-md-1\"\n          *rbacAllow=\"'SuperAdmin'\">\n          <div class=\"mb-3\">\n            <label class=\"info-circle mb-2\">{{ 'Crm.StageMessages.Default' | transloco\n                            }}<span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.StageMessages.Tooltip.Default' | transloco\n                            }}</span></label><br />\n            <ui-switch formControlName=\"is_default\"\n              name=\"is_default\"> </ui-switch>\n          </div>\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            class=\"btn btn-primary\">\n            {{ 'Button.Submit' | transloco }}\n          </button>\n        </div>\n      </div>\n    </form>\n  </div>\n</div>\n", styles: [".account-color-code{height:31.5px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4$1.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "directive", type: i5.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i11.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmStageDetailsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmStageDetailsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pw-smart-crm-stage-details', template: "<div class=\"col-12 d-flex ps-0\">\n  <a href=\"javascript:void(0)\"\n    (click)=\"back()\"\n    class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n  <div class=\"me-auto col-xs-6\">\n    <h3 class=\"m-subheader__title m-subheader__title--separator\">\n      <span>{{ 'Crm.StageMessages.Stage' | transloco }}:\n        {{ data?.name || ('Label.AddNew' | transloco) }}</span>\n    </h3>\n  </div>\n</div>\n<div class=\"container-fluid pw-tab\">\n  <div class=\"p-2 mt-3\">\n    <form [formGroup]=\"form\"\n      (ngSubmit)=\"onSave()\">\n      <div class=\"row mb-3\">\n        <div class=\"col-12 col-sm-4 col-md-3\">\n          <pw-input-container [label]=\"'Crm.StageMessages.Name' | transloco\"\n            name=\"name\"\n            [errorMsg]=\"'Crm.StageMessages.NameRequired' | transloco\">\n            <input type=\"text\"\n              class=\"form-control\"\n              formControlName=\"name\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['name'].errors }\" />\n          </pw-input-container>\n        </div>\n         <div class=\"col-12 col-sm-4 col-md-3\">\n            <pw-input-container [label]=\"'Crm.StageMessages.ColorCode' | transloco\"\n              [showTooltip]=\"true\"\n              [tooltipText]=\"'Crm.StageMessages.Tooltip.ColorCode' | transloco\"\n              name=\"color_code\">\n              <input type=\"color\"\n                class=\"form-control color-code-stage account-color-code\"\n                formControlName=\"color_code\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['color_code'].errors }\" />\n            </pw-input-container>\n        </div>\n        <div class=\"col-12 col-sm-4 col-md-3\">\n          <pw-input-container [showTooltip]=\"true\"\n            [tooltipText]=\"'Crm.StageMessages.Tooltip.PreviousStage' | transloco\"\n            [label]=\"'Crm.StageMessages.PreviousStage' | transloco\"\n            name=\"previous_stage_id\"\n            [errorMsg]=\"'Crm.StageMessages.PreviousStageRequired' | transloco\"\n            *ngIf=\"stages$ | async as stages\">\n            <select formControlName=\"previous_stage_id\"\n              class=\"form-control form-select\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['previous_stage_id'].errors }\">\n              <option value=\"\">select previous stage</option>\n              <option *ngFor=\"let option of stages['crm_opportunity_stages']\"\n                [value]=\"option.id\">\n                {{ option.name }}\n              </option>\n            </select>\n          </pw-input-container>\n        </div>\n        <div class=\"col-12 col-sm-4 col-md-3\" *ngIf=\"categories.length > 0\">\n          <pw-input-container [showTooltip]=\"true\"\n            [tooltipText]=\"'Crm.StageMessages.Tooltip.OpportunityCategory' | transloco\"\n            [label]=\"'Crm.StageMessages.OpportunityCategory' | transloco\"\n            name=\"crm_opportunity_category_ids\"\n            errorMsg=\"category is required\">\n            <p-multiSelect [options]=\"categories\"\n              formControlName=\"crm_opportunity_category_ids\"\n              appendTo=\"body\"></p-multiSelect>\n          </pw-input-container>\n        </div>\n        <div class=\"col-12 col-sm-2 col-md-1\">\n          <div class=\"mb-3\">\n            <label class=\"info-circle mb-2\">{{ 'Crm.StageMessages.Visible' | transloco\n                            }}<span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.StageMessages.Tooltip.Visible' | transloco\n                            }}</span></label><br />\n            <ui-switch formControlName=\"visible\"\n              name=\"visible\"></ui-switch>\n          </div>\n        </div>\n        <div class=\"col-12 col-sm-2 col-md-1\"\n          *rbacAllow=\"'SuperAdmin'\">\n          <div class=\"mb-3\">\n            <label class=\"info-circle mb-2\">{{ 'Crm.StageMessages.Default' | transloco\n                            }}<span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.StageMessages.Tooltip.Default' | transloco\n                            }}</span></label><br />\n            <ui-switch formControlName=\"is_default\"\n              name=\"is_default\"> </ui-switch>\n          </div>\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            class=\"btn btn-primary\">\n            {{ 'Button.Submit' | transloco }}\n          </button>\n        </div>\n      </div>\n    </form>\n  </div>\n</div>\n", styles: [".account-color-code{height:31.5px}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1.CrmService }] });
@@ -2338,10 +2338,10 @@ class SmartCrmWidgetsDetailsComponent extends AppBaseComponent {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmWidgetsDetailsComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: SmartCrmWidgetsDetailsComponent, selector: "pw-smart-crm-widgets-details", usesInheritance: true, ngImport: i0, template: "<div class=\"col-12 d-flex ps-0\">\n  <a href=\"javascript:void(0)\"\n    (click)=\"back()\"\n    class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n  <div class=\"me-auto col-xs-6\">\n    <h3 class=\"m-subheader__title m-subheader__title--separator\">\n      <span>{{ 'Crm.Widgets.Widget' | transloco }}:\n        {{ data?.name ? data?.name : ('Label.AddNew' | transloco) }}</span>\n    </h3>\n  </div>\n</div>\n<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"p-2 mt-3\">\n    <form [formGroup]=\"form\"\n      (ngSubmit)=\"onSave()\">\n      <div class=\"row mb-3 widget-tooltip\">\n        <div class=\"col-12 col-sm-4\"\n          *ngIf=\"allWidgets$ | async as widgets\">\n            <label class=\"info-circle mb-2\">{{ 'Crm.Widgets.CrmWidget' | transloco }} <span\n              class=\"tooltiptext gradient-custom-branding\"> {{'Crm.Widgets.Tooltip.Name' | transloco\n              }} </span>\n          </label>\n          <pw-input-container\n          name=\"crm_widget_id\"\n            [errorMsg]=\"'Crm Widget is required' | transloco\">\n            <select formControlName=\"crm_widget_id\"\n              class=\"form-control form-select\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['crm_widget_id'].errors }\">\n              <option *ngFor=\"let option of widgets['crm_widgets']\"\n                [value]=\"option.id\">\n                {{ option.name }}\n              </option>\n            </select>\n          </pw-input-container>\n        </div>\n        <div class=\"col-12 col-sm-4\">\n          <label class=\"info-circle mb-2\">{{ 'Crm.Widgets.Position' | transloco }} <span\n              class=\"tooltiptext gradient-custom-branding\"> {{'Crm.Widgets.Tooltip.Position' | transloco\n              }} </span>\n          </label>\n          <pw-input-container\n            name=\"position\"\n            [errorMsg]=\"'Position is required' | transloco\"\n            *ngIf=\"positions$ | async as positions\">\n            <select formControlName=\"position\"\n              class=\"form-control form-select\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['position'].errors }\">\n              <option *ngFor=\"let option of positions\"\n                [value]=\"option\">\n                {{ option }}\n              </option>\n            </select>\n          </pw-input-container>\n        </div>\n        <div class=\"col-md-3 col-lg-2 pe-0 cancel-button\">\n          <div class=\"mb-3\">\n            <label class=\"d-sm-block vertical-bottom info-circle mb-2 visible-tooltip\">{{\n                            'Crm.Widgets.Visible' | transloco\n                }}<span\n                class=\"tooltiptext gradient-custom-branding\"> {{'Crm.Widgets.Tooltip.Visible'| transloco\n                }} </span></label>\n            <ui-switch class=\"ms-3 ms-sm-0\"\n              name=\"visible\"\n              formControlName=\"visible\">\n            </ui-switch>\n          </div>\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            class=\"btn btn-primary\">\n            {{ 'Button.Submit' | transloco }}\n          </button>\n        </div>\n      </div>\n    </form>\n  </div>\n</div>\n", styles: [".widget-tooltip{margin-top:23px}.visible-tooltip{width:51px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4$1.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i11.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmWidgetsDetailsComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmWidgetsDetailsComponent, selector: "pw-smart-crm-widgets-details", usesInheritance: true, ngImport: i0, template: "<div class=\"col-12 d-flex ps-0\">\n  <a href=\"javascript:void(0)\"\n    (click)=\"back()\"\n    class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n  <div class=\"me-auto col-xs-6\">\n    <h3 class=\"m-subheader__title m-subheader__title--separator\">\n      <span>{{ 'Crm.Widgets.Widget' | transloco }}:\n        {{ data?.name ? data?.name : ('Label.AddNew' | transloco) }}</span>\n    </h3>\n  </div>\n</div>\n<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"p-2 mt-3\">\n    <form [formGroup]=\"form\"\n      (ngSubmit)=\"onSave()\">\n      <div class=\"row mb-3 widget-tooltip\">\n        <div class=\"col-12 col-sm-4\"\n          *ngIf=\"allWidgets$ | async as widgets\">\n            <label class=\"info-circle mb-2\">{{ 'Crm.Widgets.CrmWidget' | transloco }} <span\n              class=\"tooltiptext gradient-custom-branding\"> {{'Crm.Widgets.Tooltip.Name' | transloco\n              }} </span>\n          </label>\n          <pw-input-container\n          name=\"crm_widget_id\"\n            [errorMsg]=\"'Crm Widget is required' | transloco\">\n            <select formControlName=\"crm_widget_id\"\n              class=\"form-control form-select\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['crm_widget_id'].errors }\">\n              <option *ngFor=\"let option of widgets['crm_widgets']\"\n                [value]=\"option.id\">\n                {{ option.name }}\n              </option>\n            </select>\n          </pw-input-container>\n        </div>\n        <div class=\"col-12 col-sm-4\">\n          <label class=\"info-circle mb-2\">{{ 'Crm.Widgets.Position' | transloco }} <span\n              class=\"tooltiptext gradient-custom-branding\"> {{'Crm.Widgets.Tooltip.Position' | transloco\n              }} </span>\n          </label>\n          <pw-input-container\n            name=\"position\"\n            [errorMsg]=\"'Position is required' | transloco\"\n            *ngIf=\"positions$ | async as positions\">\n            <select formControlName=\"position\"\n              class=\"form-control form-select\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['position'].errors }\">\n              <option *ngFor=\"let option of positions\"\n                [value]=\"option\">\n                {{ option }}\n              </option>\n            </select>\n          </pw-input-container>\n        </div>\n        <div class=\"col-md-3 col-lg-2 pe-0 cancel-button\">\n          <div class=\"mb-3\">\n            <label class=\"d-sm-block vertical-bottom info-circle mb-2 visible-tooltip\">{{\n                            'Crm.Widgets.Visible' | transloco\n                }}<span\n                class=\"tooltiptext gradient-custom-branding\"> {{'Crm.Widgets.Tooltip.Visible'| transloco\n                }} </span></label>\n            <ui-switch class=\"ms-3 ms-sm-0\"\n              name=\"visible\"\n              formControlName=\"visible\">\n            </ui-switch>\n          </div>\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            class=\"btn btn-primary\">\n            {{ 'Button.Submit' | transloco }}\n          </button>\n        </div>\n      </div>\n    </form>\n  </div>\n</div>\n", styles: [".widget-tooltip{margin-top:23px}.visible-tooltip{width:51px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4$1.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i11.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmWidgetsDetailsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmWidgetsDetailsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pw-smart-crm-widgets-details', template: "<div class=\"col-12 d-flex ps-0\">\n  <a href=\"javascript:void(0)\"\n    (click)=\"back()\"\n    class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n  <div class=\"me-auto col-xs-6\">\n    <h3 class=\"m-subheader__title m-subheader__title--separator\">\n      <span>{{ 'Crm.Widgets.Widget' | transloco }}:\n        {{ data?.name ? data?.name : ('Label.AddNew' | transloco) }}</span>\n    </h3>\n  </div>\n</div>\n<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"p-2 mt-3\">\n    <form [formGroup]=\"form\"\n      (ngSubmit)=\"onSave()\">\n      <div class=\"row mb-3 widget-tooltip\">\n        <div class=\"col-12 col-sm-4\"\n          *ngIf=\"allWidgets$ | async as widgets\">\n            <label class=\"info-circle mb-2\">{{ 'Crm.Widgets.CrmWidget' | transloco }} <span\n              class=\"tooltiptext gradient-custom-branding\"> {{'Crm.Widgets.Tooltip.Name' | transloco\n              }} </span>\n          </label>\n          <pw-input-container\n          name=\"crm_widget_id\"\n            [errorMsg]=\"'Crm Widget is required' | transloco\">\n            <select formControlName=\"crm_widget_id\"\n              class=\"form-control form-select\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['crm_widget_id'].errors }\">\n              <option *ngFor=\"let option of widgets['crm_widgets']\"\n                [value]=\"option.id\">\n                {{ option.name }}\n              </option>\n            </select>\n          </pw-input-container>\n        </div>\n        <div class=\"col-12 col-sm-4\">\n          <label class=\"info-circle mb-2\">{{ 'Crm.Widgets.Position' | transloco }} <span\n              class=\"tooltiptext gradient-custom-branding\"> {{'Crm.Widgets.Tooltip.Position' | transloco\n              }} </span>\n          </label>\n          <pw-input-container\n            name=\"position\"\n            [errorMsg]=\"'Position is required' | transloco\"\n            *ngIf=\"positions$ | async as positions\">\n            <select formControlName=\"position\"\n              class=\"form-control form-select\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['position'].errors }\">\n              <option *ngFor=\"let option of positions\"\n                [value]=\"option\">\n                {{ option }}\n              </option>\n            </select>\n          </pw-input-container>\n        </div>\n        <div class=\"col-md-3 col-lg-2 pe-0 cancel-button\">\n          <div class=\"mb-3\">\n            <label class=\"d-sm-block vertical-bottom info-circle mb-2 visible-tooltip\">{{\n                            'Crm.Widgets.Visible' | transloco\n                }}<span\n                class=\"tooltiptext gradient-custom-branding\"> {{'Crm.Widgets.Tooltip.Visible'| transloco\n                }} </span></label>\n            <ui-switch class=\"ms-3 ms-sm-0\"\n              name=\"visible\"\n              formControlName=\"visible\">\n            </ui-switch>\n          </div>\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            class=\"btn btn-primary\">\n            {{ 'Button.Submit' | transloco }}\n          </button>\n        </div>\n      </div>\n    </form>\n  </div>\n</div>\n", styles: [".widget-tooltip{margin-top:23px}.visible-tooltip{width:51px}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1.CrmService }] });
@@ -2459,8 +2459,8 @@ class SmartCrmContactDetailsComponent extends AppBaseComponent {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmContactDetailsComponent, deps: [{ token: i2.CommonService }, { token: i1.CrmService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: SmartCrmContactDetailsComponent, selector: "pw-smart-crm-contact-details", usesInheritance: true, ngImport: i0, template: "<div class=\"me-auto col-xs-6\">\n  <a href=\"javascript:void(0)\"\n    (click)=\"back()\"\n    class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n  <h3 class=\"m-subheader__title m-subheader__title--separator\">\n    <span>{{ 'Crm.ContactMessage.Contact' | transloco }}:\n      {{\n                data?.first_name\n                    ? data?.first_name + ' ' + data.last_name\n                    : ('Label.AddNew' | transloco)\n            }}</span>\n  </h3>\n</div>\n<div class=\"p-2 mt-3\">\n  <form [formGroup]=\"form\"\n    (ngSubmit)=\"onSave()\">\n    <div class=\"row\">\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.FirstName' | transloco\"\n          name=\"first_name\"\n          [errorMsg]=\"'Crm.ContactMessage.FirstNameErrorMessage' | transloco\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"first_name\"\n            id=\"first_name\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['first_name'].errors }\" />\n        </pw-input-container>\n      </div>\n\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.LastName' | transloco\"\n          name=\"last_name\"\n          [errorMsg]=\"'Crm.ContactMessage.LastNameErrorMessage' | transloco\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"last_name\"\n            id=\"last_name\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['last_name'].errors }\" />\n        </pw-input-container>\n      </div>\n\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.Headline' | transloco\"\n          name=\"headline\"\n          [errorMsg]=\"'Crm.ContactMessage.HeadlineErrorMessage' | transloco\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"headline\"\n            id=\"headline\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['headline'].errors }\" />\n        </pw-input-container>\n      </div>\n\n      <div class=\"col-12 col-sm-4 col-lg-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.Tel' | transloco\"\n          name=\"tel\"\n          [errorMsg]=\"'Crm.ContactMessage.TelErrorMessage' | transloco\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"tel\"\n            id=\"tel\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['tel'].errors }\" />\n        </pw-input-container>\n      </div>\n\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.Email' | transloco\"\n          name=\"email\"\n          errorMsg=\"{{\n                        f['email']?.errors?.required ? 'Please enter email' : 'Please Enter valid email'\n                    }}\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"email\"\n            id=\"email\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['email'].errors }\" />\n        </pw-input-container>\n      </div>\n\n      <div class=\"col-12 col-sm-4\">\n        <div class=\"mb-3\">\n          <pw-input-container [label]=\"'Crm.ContactMessage.EmailVerified' | transloco\"\n            class=\"nowrap\"\n            name=\"email_verified\">\n            <ui-switch formControlName=\"email_verified\"\n              name=\"email_verified\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['email_verified'].errors }\">\n            </ui-switch>\n          </pw-input-container>\n        </div>\n      </div>\n\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.LinkedInUrl' | transloco\"\n          name=\"linkedin_url\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"linkedin_url\"\n            id=\"linkedin_url\" />\n        </pw-input-container>\n      </div>\n\n      <div class=\"ui-fluid skills-modal col-sm-4\">\n        <label class=\"mb-2\">{{ 'Crm.ContactMessage.Account' | transloco\n                    }}<span class=\"text-danger\">*</span></label>\n        <p-autoComplete [suggestions]=\"filteredAccounts\"\n          formControlName=\"crm_account_id\"\n          dataKey=\"id\"\n          field=\"name\"\n          [dropdown]=\"true\"\n          (completeMethod)=\"search($event)\"\n          styleClass=\"w-100\"\n          placeholder=\"Search accounts\"\n          [multiple]=\"false\"\n          autocomplete=\"off\">\n        </p-autoComplete>\n      </div>\n\n      <div class=\"col-12 col-sm-4 col-lg-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.Department' | transloco\"\n          name=\"department_id\"\n          *ngIf=\"departments$ | async as departments\">\n          <select class=\"form-select\"\n            formControlName=\"department_id\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['department_id'].errors }\">\n            <option *ngFor=\"let option of departments['organization_departments']\"\n              [value]=\"option.id\">\n              {{ option.name }}\n            </option>\n          </select>\n        </pw-input-container>\n      </div>\n\n      <div class=\"col-12 col-sm-4 col-lg-4\">\n        <label>{{ 'Crm.ContactMessage.Potential' | transloco }}</label>\n        <select formControlName=\"potential\"\n          class=\"form-control form-select\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['potential'].errors }\">\n          <option *ngFor=\"let option of potentials\"\n            [value]=\"option\">{{ option }}</option>\n        </select>\n      </div>\n\n      <div class=\"col-12 col-sm-4 col-lg-4\">\n        <label>{{ 'Crm.ContactMessage.Labels' | transloco }} </label>\n        <p-multiSelect [options]=\"labels\"\n          formControlName=\"labels\"\n          appendTo=\"body\"></p-multiSelect>\n      </div>\n\n      <div class=\"col-12 col-sm-4 col-lg-4\"\n        *ngIf=\"crmSources$ | async as source\">\n        <label>{{ 'Crm.ContactMessage.Source' | transloco }}</label>\n        <select formControlName=\"crm_source_id\"\n          class=\"form-control form-select\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['crm_source_id'].errors }\">\n          <option value=\"\">select crm source</option>\n          <option *ngFor=\"let option of source['crm_sources']\"\n            [value]=\"option.id\">\n            {{ option.name }}\n          </option>\n        </select>\n      </div>\n\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.DateOfBirth' | transloco\"\n          name=\"dob\">\n          <div class=\"input-group\">\n            <input class=\"form-control\"\n              placeholder=\"yyyy-mm-dd\"\n              formControlName=\"dob\"\n              ngbDatepicker\n              #d=\"ngbDatepicker\" />\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        </pw-input-container>\n      </div>\n\n      <div class=\"col-12 text-end mt-3\">\n        <button type=\"button\"\n          class=\"btn btn-outline-default me-2\"\n          (click)=\"back()\">\n          {{ 'Button.Cancel' | transloco }}\n        </button>\n        <button type=\"submit\"\n          class=\"btn btn-primary\"\n          [disabled]=\"form.invalid\">\n          {{ 'Button.Submit' | transloco }}\n        </button>\n      </div>\n    </div>\n  </form>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4$1.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "component", type: i6.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "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.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"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: i11.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmContactDetailsComponent, deps: [{ token: i2.CommonService }, { token: i1.CrmService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmContactDetailsComponent, selector: "pw-smart-crm-contact-details", usesInheritance: true, ngImport: i0, template: "<div class=\"me-auto col-xs-6\">\n  <a href=\"javascript:void(0)\"\n    (click)=\"back()\"\n    class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n  <h3 class=\"m-subheader__title m-subheader__title--separator\">\n    <span>{{ 'Crm.ContactMessage.Contact' | transloco }}:\n      {{\n                data?.first_name\n                    ? data?.first_name + ' ' + data.last_name\n                    : ('Label.AddNew' | transloco)\n            }}</span>\n  </h3>\n</div>\n<div class=\"p-2 mt-3\">\n  <form [formGroup]=\"form\"\n    (ngSubmit)=\"onSave()\">\n    <div class=\"row\">\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.FirstName' | transloco\"\n          name=\"first_name\"\n          [errorMsg]=\"'Crm.ContactMessage.FirstNameErrorMessage' | transloco\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"first_name\"\n            id=\"first_name\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['first_name'].errors }\" />\n        </pw-input-container>\n      </div>\n\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.LastName' | transloco\"\n          name=\"last_name\"\n          [errorMsg]=\"'Crm.ContactMessage.LastNameErrorMessage' | transloco\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"last_name\"\n            id=\"last_name\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['last_name'].errors }\" />\n        </pw-input-container>\n      </div>\n\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.Headline' | transloco\"\n          name=\"headline\"\n          [errorMsg]=\"'Crm.ContactMessage.HeadlineErrorMessage' | transloco\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"headline\"\n            id=\"headline\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['headline'].errors }\" />\n        </pw-input-container>\n      </div>\n\n      <div class=\"col-12 col-sm-4 col-lg-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.Tel' | transloco\"\n          name=\"tel\"\n          [errorMsg]=\"'Crm.ContactMessage.TelErrorMessage' | transloco\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"tel\"\n            id=\"tel\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['tel'].errors }\" />\n        </pw-input-container>\n      </div>\n\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.Email' | transloco\"\n          name=\"email\"\n          errorMsg=\"{{\n                        f['email']?.errors?.required ? 'Please enter email' : 'Please Enter valid email'\n                    }}\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"email\"\n            id=\"email\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['email'].errors }\" />\n        </pw-input-container>\n      </div>\n\n      <div class=\"col-12 col-sm-4\">\n        <div class=\"mb-3\">\n          <pw-input-container [label]=\"'Crm.ContactMessage.EmailVerified' | transloco\"\n            class=\"nowrap\"\n            name=\"email_verified\">\n            <ui-switch formControlName=\"email_verified\"\n              name=\"email_verified\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['email_verified'].errors }\">\n            </ui-switch>\n          </pw-input-container>\n        </div>\n      </div>\n\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.LinkedInUrl' | transloco\"\n          name=\"linkedin_url\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"linkedin_url\"\n            id=\"linkedin_url\" />\n        </pw-input-container>\n      </div>\n\n      <div class=\"ui-fluid skills-modal col-sm-4\">\n        <label class=\"mb-2\">{{ 'Crm.ContactMessage.Account' | transloco\n                    }}<span class=\"text-danger\">*</span></label>\n        <p-autoComplete [suggestions]=\"filteredAccounts\"\n          formControlName=\"crm_account_id\"\n          dataKey=\"id\"\n          field=\"name\"\n          [dropdown]=\"true\"\n          (completeMethod)=\"search($event)\"\n          styleClass=\"w-100\"\n          placeholder=\"Search accounts\"\n          [multiple]=\"false\"\n          autocomplete=\"off\">\n        </p-autoComplete>\n      </div>\n\n      <div class=\"col-12 col-sm-4 col-lg-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.Department' | transloco\"\n          name=\"department_id\"\n          *ngIf=\"departments$ | async as departments\">\n          <select class=\"form-select\"\n            formControlName=\"department_id\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['department_id'].errors }\">\n            <option *ngFor=\"let option of departments['organization_departments']\"\n              [value]=\"option.id\">\n              {{ option.name }}\n            </option>\n          </select>\n        </pw-input-container>\n      </div>\n\n      <div class=\"col-12 col-sm-4 col-lg-4\">\n        <label>{{ 'Crm.ContactMessage.Potential' | transloco }}</label>\n        <select formControlName=\"potential\"\n          class=\"form-control form-select\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['potential'].errors }\">\n          <option *ngFor=\"let option of potentials\"\n            [value]=\"option\">{{ option }}</option>\n        </select>\n      </div>\n\n      <div class=\"col-12 col-sm-4 col-lg-4\">\n        <label>{{ 'Crm.ContactMessage.Labels' | transloco }} </label>\n        <p-multiSelect [options]=\"labels\"\n          formControlName=\"labels\"\n          appendTo=\"body\"></p-multiSelect>\n      </div>\n\n      <div class=\"col-12 col-sm-4 col-lg-4\"\n        *ngIf=\"crmSources$ | async as source\">\n        <label>{{ 'Crm.ContactMessage.Source' | transloco }}</label>\n        <select formControlName=\"crm_source_id\"\n          class=\"form-control form-select\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['crm_source_id'].errors }\">\n          <option value=\"\">select crm source</option>\n          <option *ngFor=\"let option of source['crm_sources']\"\n            [value]=\"option.id\">\n            {{ option.name }}\n          </option>\n        </select>\n      </div>\n\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.DateOfBirth' | transloco\"\n          name=\"dob\">\n          <div class=\"input-group\">\n            <input class=\"form-control\"\n              placeholder=\"yyyy-mm-dd\"\n              formControlName=\"dob\"\n              ngbDatepicker\n              #d=\"ngbDatepicker\" />\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        </pw-input-container>\n      </div>\n\n      <div class=\"col-12 text-end mt-3\">\n        <button type=\"button\"\n          class=\"btn btn-outline-default me-2\"\n          (click)=\"back()\">\n          {{ 'Button.Cancel' | transloco }}\n        </button>\n        <button type=\"submit\"\n          class=\"btn btn-primary\"\n          [disabled]=\"form.invalid\">\n          {{ 'Button.Submit' | transloco }}\n        </button>\n      </div>\n    </div>\n  </form>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4$1.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "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.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.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 __decorate([
     ValidateForm('form'),
@@ -2468,7 +2468,7 @@ __decorate([
     __metadata("design:paramtypes", []),
     __metadata("design:returntype", void 0)
 ], SmartCrmContactDetailsComponent.prototype, "onSave", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmContactDetailsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmContactDetailsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pw-smart-crm-contact-details', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"me-auto col-xs-6\">\n  <a href=\"javascript:void(0)\"\n    (click)=\"back()\"\n    class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n  <h3 class=\"m-subheader__title m-subheader__title--separator\">\n    <span>{{ 'Crm.ContactMessage.Contact' | transloco }}:\n      {{\n                data?.first_name\n                    ? data?.first_name + ' ' + data.last_name\n                    : ('Label.AddNew' | transloco)\n            }}</span>\n  </h3>\n</div>\n<div class=\"p-2 mt-3\">\n  <form [formGroup]=\"form\"\n    (ngSubmit)=\"onSave()\">\n    <div class=\"row\">\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.FirstName' | transloco\"\n          name=\"first_name\"\n          [errorMsg]=\"'Crm.ContactMessage.FirstNameErrorMessage' | transloco\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"first_name\"\n            id=\"first_name\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['first_name'].errors }\" />\n        </pw-input-container>\n      </div>\n\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.LastName' | transloco\"\n          name=\"last_name\"\n          [errorMsg]=\"'Crm.ContactMessage.LastNameErrorMessage' | transloco\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"last_name\"\n            id=\"last_name\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['last_name'].errors }\" />\n        </pw-input-container>\n      </div>\n\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.Headline' | transloco\"\n          name=\"headline\"\n          [errorMsg]=\"'Crm.ContactMessage.HeadlineErrorMessage' | transloco\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"headline\"\n            id=\"headline\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['headline'].errors }\" />\n        </pw-input-container>\n      </div>\n\n      <div class=\"col-12 col-sm-4 col-lg-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.Tel' | transloco\"\n          name=\"tel\"\n          [errorMsg]=\"'Crm.ContactMessage.TelErrorMessage' | transloco\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"tel\"\n            id=\"tel\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['tel'].errors }\" />\n        </pw-input-container>\n      </div>\n\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.Email' | transloco\"\n          name=\"email\"\n          errorMsg=\"{{\n                        f['email']?.errors?.required ? 'Please enter email' : 'Please Enter valid email'\n                    }}\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"email\"\n            id=\"email\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['email'].errors }\" />\n        </pw-input-container>\n      </div>\n\n      <div class=\"col-12 col-sm-4\">\n        <div class=\"mb-3\">\n          <pw-input-container [label]=\"'Crm.ContactMessage.EmailVerified' | transloco\"\n            class=\"nowrap\"\n            name=\"email_verified\">\n            <ui-switch formControlName=\"email_verified\"\n              name=\"email_verified\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['email_verified'].errors }\">\n            </ui-switch>\n          </pw-input-container>\n        </div>\n      </div>\n\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.LinkedInUrl' | transloco\"\n          name=\"linkedin_url\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"linkedin_url\"\n            id=\"linkedin_url\" />\n        </pw-input-container>\n      </div>\n\n      <div class=\"ui-fluid skills-modal col-sm-4\">\n        <label class=\"mb-2\">{{ 'Crm.ContactMessage.Account' | transloco\n                    }}<span class=\"text-danger\">*</span></label>\n        <p-autoComplete [suggestions]=\"filteredAccounts\"\n          formControlName=\"crm_account_id\"\n          dataKey=\"id\"\n          field=\"name\"\n          [dropdown]=\"true\"\n          (completeMethod)=\"search($event)\"\n          styleClass=\"w-100\"\n          placeholder=\"Search accounts\"\n          [multiple]=\"false\"\n          autocomplete=\"off\">\n        </p-autoComplete>\n      </div>\n\n      <div class=\"col-12 col-sm-4 col-lg-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.Department' | transloco\"\n          name=\"department_id\"\n          *ngIf=\"departments$ | async as departments\">\n          <select class=\"form-select\"\n            formControlName=\"department_id\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['department_id'].errors }\">\n            <option *ngFor=\"let option of departments['organization_departments']\"\n              [value]=\"option.id\">\n              {{ option.name }}\n            </option>\n          </select>\n        </pw-input-container>\n      </div>\n\n      <div class=\"col-12 col-sm-4 col-lg-4\">\n        <label>{{ 'Crm.ContactMessage.Potential' | transloco }}</label>\n        <select formControlName=\"potential\"\n          class=\"form-control form-select\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['potential'].errors }\">\n          <option *ngFor=\"let option of potentials\"\n            [value]=\"option\">{{ option }}</option>\n        </select>\n      </div>\n\n      <div class=\"col-12 col-sm-4 col-lg-4\">\n        <label>{{ 'Crm.ContactMessage.Labels' | transloco }} </label>\n        <p-multiSelect [options]=\"labels\"\n          formControlName=\"labels\"\n          appendTo=\"body\"></p-multiSelect>\n      </div>\n\n      <div class=\"col-12 col-sm-4 col-lg-4\"\n        *ngIf=\"crmSources$ | async as source\">\n        <label>{{ 'Crm.ContactMessage.Source' | transloco }}</label>\n        <select formControlName=\"crm_source_id\"\n          class=\"form-control form-select\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['crm_source_id'].errors }\">\n          <option value=\"\">select crm source</option>\n          <option *ngFor=\"let option of source['crm_sources']\"\n            [value]=\"option.id\">\n            {{ option.name }}\n          </option>\n        </select>\n      </div>\n\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.DateOfBirth' | transloco\"\n          name=\"dob\">\n          <div class=\"input-group\">\n            <input class=\"form-control\"\n              placeholder=\"yyyy-mm-dd\"\n              formControlName=\"dob\"\n              ngbDatepicker\n              #d=\"ngbDatepicker\" />\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        </pw-input-container>\n      </div>\n\n      <div class=\"col-12 text-end mt-3\">\n        <button type=\"button\"\n          class=\"btn btn-outline-default me-2\"\n          (click)=\"back()\">\n          {{ 'Button.Cancel' | transloco }}\n        </button>\n        <button type=\"submit\"\n          class=\"btn btn-primary\"\n          [disabled]=\"form.invalid\">\n          {{ 'Button.Submit' | transloco }}\n        </button>\n      </div>\n    </div>\n  </form>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i2.CommonService }, { type: i1.CrmService }, { type: i0.Injector }], propDecorators: { onSave: [] } });
@@ -2893,10 +2893,10 @@ class SmartCrmContactInfoComponent extends AppBaseComponent {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmContactInfoComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }, { token: i2$2.NgbCalendar }, { token: i2$2.NgbModal }, { token: i2.AuthService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: SmartCrmContactInfoComponent, selector: "pw-smart-crm-contact-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 href=\"javascript:void(0)\"\n          (click)=\"back()\"\n          class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n        Contact Info\n      </h2>\n    </div>\n    <a class=\"btn btn-sm btn-outline-primary float-end mb-3\"\n      data-cy=\"add-opportunities\"\n      (click)=\"navigateToOpportunities()\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n    </a>\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 | ifNameNullShowEmail }}</span>\n        </h4>\n        <a href=\"javascript:void(0);\"\n          *ngIf=\"isFormEdit\"\n          class=\"btn btn-sm btn-outline-primary float-end\"\n          (click)=\"isFormEdit = !isFormEdit\">Edit</a>\n      </div>\n      <form [formGroup]=\"aboutControls\"\n        [class.isDisabled]=\"isFormEdit\">\n        <div class=\"mb-3\">\n          <label class=\"label mb-0\">{{\n                        'Crm.ContactMessage.FirstName' | transloco\n                    }}</label>\n          <input type=\"text\"\n            class=\"form-control rounded-0 ps-1 user-value\"\n            formControlName=\"first_name\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['first_name'].errors }\" />\n        </div>\n        <div class=\"mb-3\">\n          <label class=\"label mb-0\">{{\n                        'Crm.ContactMessage.LastName' | transloco\n                    }}</label>\n          <input type=\"text\"\n            class=\"form-control rounded-0 ps-1 user-value\"\n            formControlName=\"last_name\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['last_name'].errors }\" />\n        </div>\n        <div class=\"mb-3 ui-fluid skills-modal\">\n          <label class=\"label mb-2\">{{ 'Crm.ContactMessage.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            [class.is-invalid]=\"\n                            (f['crm_account_id'].touched || submitted) && f['crm_account_id'].errors\n                        \"\n            *ngIf=\"isFormEdit\"\n            [class.disableFormControl]=\"!data?.crm_account_id\">{{ f['crm_account_id'].value?.name }}</a>\n          <p-autoComplete *ngIf=\"!isFormEdit\"\n            [suggestions]=\"filteredAccounts\"\n            formControlName=\"crm_account_id\"\n            dataKey=\"id\"\n            field=\"name\"\n            [dropdown]=\"true\"\n            (completeMethod)=\"search($event)\"\n            styleClass=\"w-100\"\n            [inputStyleClass]=\"\n                            (f['crm_account_id'].touched || submitted) && f['crm_account_id'].errors\n                                ? 'invalid-field'\n                                : ''\n                        \"\n            placeholder=\"Search accounts\"\n            [multiple]=\"false\">\n          </p-autoComplete>\n          <span *ngIf=\"(f['crm_account_id'].touched || submitted) && f['crm_account_id'].errors\"\n            class=\"text-danger\">account is required</span>\n        </div>\n        <div class=\"mb-3\">\n          <label class=\"label mb-0\">{{ 'Crm.ContactMessage.Email' | transloco }}</label>\n          <a href=\"mailTo:{{ data.email }}\"\n            class=\"form-control d-block pb-2 ps-1 user-value\"\n            *ngIf=\"isFormEdit && data.email\">{{ data.email }}</a>\n          <input type=\"text\"\n            *ngIf=\"!isFormEdit || !data.email\"\n            class=\"form-control rounded-0 ps-1 user-value\"\n            formControlName=\"email\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['email'].errors }\" />\n        </div>\n        <div class=\"mb-3\">\n          <label class=\"label mb-0\">{{\n                        'Crm.ContactMessage.LinkedInUrl' | transloco\n                    }}</label>\n          <a [href]=\"data.linkedin_url\"\n            target=\"blank\"\n            class=\"form-control d-block pb-2 ps-1 user-value\"\n            *ngIf=\"isFormEdit && data.linkedin_url\">{{ data.linkedin_url }}</a>\n          <input *ngIf=\"!isFormEdit || !data.linkedin_url\"\n            type=\"text\"\n            class=\"form-control rounded-0 ps-1 user-value\"\n            formControlName=\"linkedin_url\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['linkedin_url'].errors }\" />\n        </div>\n        <div class=\"mb-3\">\n          <label class=\"label mb-0\">{{\n                        'Crm.ContactMessage.Headline' | transloco\n                    }}</label>\n          <input type=\"text\"\n            class=\"form-control rounded-0 ps-1 user-value\"\n            formControlName=\"headline\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['headline'].errors }\" />\n        </div>\n        <div class=\"mb-3\"\n          *ngIf=\"data.tel\">\n          <label class=\"label mb-0\">{{ 'Crm.ContactMessage.Tel' | transloco }}</label>\n          <input type=\"text\"\n            class=\"form-control rounded-0 ps-1 user-value\"\n            formControlName=\"tel\" />\n        </div>\n        <div class=\"mb-3\">\n          <label class=\"label mb-0\">{{\n                        'Crm.ContactMessage.Potential' | transloco\n                    }}</label>\n          <select formControlName=\"potential\"\n            class=\"form-control form-select\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['potential'].errors }\">\n            <option *ngFor=\"let option of potentials\"\n              [value]=\"option\">\n              {{ option }}\n            </option>\n          </select>\n        </div>\n        <div class=\"mb-3\">\n          <label class=\"label mb-0\">{{ 'Crm.ContactMessage.Labels' | transloco }} </label>\n          <p-multiSelect [options]=\"labels\"\n            [class.disableFormControl]=\"isFormEdit\"\n            formControlName=\"labels\"\n            appendTo=\"body\"></p-multiSelect>\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; getUserInfo()\"\n            value=\"Cancel\" />\n          <input type=\"button\"\n            class=\"btn btn-primary ms-3\"\n            value=\"Submit\"\n            (click)=\"updateContactInfo()\" />\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)=\"onSave()\">\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=\"yyyy-mm-dd\"\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              <input type=\"submit\"\n                [disabled]=\"buttonDisable\"\n                class=\"btn btn-primary mt-2 mb-2 float-end\"\n                value=\"Submit Note\" />\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.ContactMessage.NoActionsInContactInfoMessage' | transloco\n                                \">\n                <span><a [routerLink]=\"[\n                                            '/' +\n                                                subscription?.slug +\n                                                routers.configurations +\n                                                'actions'\n                                        ]\">Take me to the actions configuration section.</a></span>\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=\"!contactComments?.length && isLoaded\"\n            class=\"no-actions pt-3\">\n            <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoActionsMessage' | transloco\">\n            </pw-no-data>\n          </div>\n          <div *ngIf=\"contactComments.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 contactComments;\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></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                      <!-- <a>{{item.comment}}</a> -->\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=\"yyyy-mm-dd\"\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                      {{ item.owner.first_name + ' ' + item.owner.last_name }}\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                      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                      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                      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 contactVersioning\">\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 | dateFormat: 'datetime' }}<br />\n              <strong>Object: </strong>{{ version.object | json }}\n            </p>\n            <hr />\n          </div>\n          <div *ngIf=\"contactVersioning?.length === 0\">\n            <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.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          </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_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.user-info .label{color:#777;font-size:14px;text-transform:capitalize}.user-info .user-value{border:0;border-bottom:1px solid rgb(119,119,119)}.user-info .user-value:focus{box-shadow:none}.user-info .user-value.is-invalid{border-color:#ff586b}.control-btns{display:none}.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}::ng-deep body .invalid-field{border:1px solid rgb(255,88,107)!important}.form-action-buttons{margin-bottom:14px;margin-top:15px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "directive", type: i5.LazyImgDirective, selector: "img" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "directive", type: i2$2.NgbNavContent, selector: "ng-template[ngbNavContent]" }, { kind: "directive", type: i2$2.NgbNav, selector: "[ngbNav]", inputs: ["activeId", "animation", "destroyOnHide", "orientation", "roles", "keyboard"], outputs: ["activeIdChange", "shown", "hidden", "navChange"], exportAs: ["ngbNav"] }, { kind: "directive", type: i2$2.NgbNavItem, selector: "[ngbNavItem]", inputs: ["destroyOnHide", "disabled", "domId", "ngbNavItem"], outputs: ["shown", "hidden"], exportAs: ["ngbNavItem"] }, { kind: "directive", type: i2$2.NgbNavItemRole, selector: "[ngbNavItem]:not(ng-container)" }, { kind: "directive", type: i2$2.NgbNavLink, selector: "a[ngbNavLink]" }, { kind: "directive", type: i2$2.NgbNavLinkBase, selector: "[ngbNavLink]" }, { kind: "component", type: i2$2.NgbNavOutlet, selector: "[ngbNavOutlet]", inputs: ["paneRole", "ngbNavOutlet"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i6.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "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: i9$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i7.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"], 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$1.NgFileDropDirective, selector: "[ngFileDrop]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "directive", type: i12$1.NgFileSelectDirective, selector: "[ngFileSelect]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "component", type: SmartCrmCompanyFilesComponent, selector: "pw-smart-crm-company-files", inputs: ["accountId", "contactId", "opportunityId"] }, { kind: "pipe", type: i2$1.JsonPipe, name: "json" }, { kind: "pipe", type: i2$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "pipe", type: i14.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i14.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmContactInfoComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }, { token: i2$2.NgbCalendar }, { token: i2$2.NgbModal }, { token: i2.AuthService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmContactInfoComponent, selector: "pw-smart-crm-contact-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 href=\"javascript:void(0)\"\n          (click)=\"back()\"\n          class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n        Contact Info\n      </h2>\n    </div>\n    <a class=\"btn btn-sm btn-outline-primary float-end mb-3\"\n      data-cy=\"add-opportunities\"\n      (click)=\"navigateToOpportunities()\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n    </a>\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 | ifNameNullShowEmail }}</span>\n        </h4>\n        <a href=\"javascript:void(0);\"\n          *ngIf=\"isFormEdit\"\n          class=\"btn btn-sm btn-outline-primary float-end\"\n          (click)=\"isFormEdit = !isFormEdit\">Edit</a>\n      </div>\n      <form [formGroup]=\"aboutControls\"\n        [class.isDisabled]=\"isFormEdit\">\n        <div class=\"mb-3\">\n          <label class=\"label mb-0\">{{\n                        'Crm.ContactMessage.FirstName' | transloco\n                    }}</label>\n          <input type=\"text\"\n            class=\"form-control rounded-0 ps-1 user-value\"\n            formControlName=\"first_name\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['first_name'].errors }\" />\n        </div>\n        <div class=\"mb-3\">\n          <label class=\"label mb-0\">{{\n                        'Crm.ContactMessage.LastName' | transloco\n                    }}</label>\n          <input type=\"text\"\n            class=\"form-control rounded-0 ps-1 user-value\"\n            formControlName=\"last_name\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['last_name'].errors }\" />\n        </div>\n        <div class=\"mb-3 ui-fluid skills-modal\">\n          <label class=\"label mb-2\">{{ 'Crm.ContactMessage.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            [class.is-invalid]=\"\n                            (f['crm_account_id'].touched || submitted) && f['crm_account_id'].errors\n                        \"\n            *ngIf=\"isFormEdit\"\n            [class.disableFormControl]=\"!data?.crm_account_id\">{{ f['crm_account_id'].value?.name }}</a>\n          <p-autoComplete *ngIf=\"!isFormEdit\"\n            [suggestions]=\"filteredAccounts\"\n            formControlName=\"crm_account_id\"\n            dataKey=\"id\"\n            field=\"name\"\n            [dropdown]=\"true\"\n            (completeMethod)=\"search($event)\"\n            styleClass=\"w-100\"\n            [inputStyleClass]=\"\n                            (f['crm_account_id'].touched || submitted) && f['crm_account_id'].errors\n                                ? 'invalid-field'\n                                : ''\n                        \"\n            placeholder=\"Search accounts\"\n            [multiple]=\"false\">\n          </p-autoComplete>\n          <span *ngIf=\"(f['crm_account_id'].touched || submitted) && f['crm_account_id'].errors\"\n            class=\"text-danger\">account is required</span>\n        </div>\n        <div class=\"mb-3\">\n          <label class=\"label mb-0\">{{ 'Crm.ContactMessage.Email' | transloco }}</label>\n          <a href=\"mailTo:{{ data.email }}\"\n            class=\"form-control d-block pb-2 ps-1 user-value\"\n            *ngIf=\"isFormEdit && data.email\">{{ data.email }}</a>\n          <input type=\"text\"\n            *ngIf=\"!isFormEdit || !data.email\"\n            class=\"form-control rounded-0 ps-1 user-value\"\n            formControlName=\"email\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['email'].errors }\" />\n        </div>\n        <div class=\"mb-3\">\n          <label class=\"label mb-0\">{{\n                        'Crm.ContactMessage.LinkedInUrl' | transloco\n                    }}</label>\n          <a [href]=\"data.linkedin_url\"\n            target=\"blank\"\n            class=\"form-control d-block pb-2 ps-1 user-value\"\n            *ngIf=\"isFormEdit && data.linkedin_url\">{{ data.linkedin_url }}</a>\n          <input *ngIf=\"!isFormEdit || !data.linkedin_url\"\n            type=\"text\"\n            class=\"form-control rounded-0 ps-1 user-value\"\n            formControlName=\"linkedin_url\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['linkedin_url'].errors }\" />\n        </div>\n        <div class=\"mb-3\">\n          <label class=\"label mb-0\">{{\n                        'Crm.ContactMessage.Headline' | transloco\n                    }}</label>\n          <input type=\"text\"\n            class=\"form-control rounded-0 ps-1 user-value\"\n            formControlName=\"headline\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['headline'].errors }\" />\n        </div>\n        <div class=\"mb-3\"\n          *ngIf=\"data.tel\">\n          <label class=\"label mb-0\">{{ 'Crm.ContactMessage.Tel' | transloco }}</label>\n          <input type=\"text\"\n            class=\"form-control rounded-0 ps-1 user-value\"\n            formControlName=\"tel\" />\n        </div>\n        <div class=\"mb-3\">\n          <label class=\"label mb-0\">{{\n                        'Crm.ContactMessage.Potential' | transloco\n                    }}</label>\n          <select formControlName=\"potential\"\n            class=\"form-control form-select\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['potential'].errors }\">\n            <option *ngFor=\"let option of potentials\"\n              [value]=\"option\">\n              {{ option }}\n            </option>\n          </select>\n        </div>\n        <div class=\"mb-3\">\n          <label class=\"label mb-0\">{{ 'Crm.ContactMessage.Labels' | transloco }} </label>\n          <p-multiSelect [options]=\"labels\"\n            [class.disableFormControl]=\"isFormEdit\"\n            formControlName=\"labels\"\n            appendTo=\"body\"></p-multiSelect>\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; getUserInfo()\"\n            value=\"Cancel\" />\n          <input type=\"button\"\n            class=\"btn btn-primary ms-3\"\n            value=\"Submit\"\n            (click)=\"updateContactInfo()\" />\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)=\"onSave()\">\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=\"yyyy-mm-dd\"\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              <input type=\"submit\"\n                [disabled]=\"buttonDisable\"\n                class=\"btn btn-primary mt-2 mb-2 float-end\"\n                value=\"Submit Note\" />\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.ContactMessage.NoActionsInContactInfoMessage' | transloco\n                                \">\n                <span><a [routerLink]=\"[\n                                            '/' +\n                                                subscription?.slug +\n                                                routers.configurations +\n                                                'actions'\n                                        ]\">Take me to the actions configuration section.</a></span>\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=\"!contactComments?.length && isLoaded\"\n            class=\"no-actions pt-3\">\n            <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoActionsMessage' | transloco\">\n            </pw-no-data>\n          </div>\n          <div *ngIf=\"contactComments.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 contactComments;\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></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                      <!-- <a>{{item.comment}}</a> -->\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=\"yyyy-mm-dd\"\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                      {{ item.owner.first_name + ' ' + item.owner.last_name }}\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                      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                      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                      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 contactVersioning\">\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 | dateFormat: 'datetime' }}<br />\n              <strong>Object: </strong>{{ version.object | json }}\n            </p>\n            <hr />\n          </div>\n          <div *ngIf=\"contactVersioning?.length === 0\">\n            <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.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          </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_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.user-info .label{color:#777;font-size:14px;text-transform:capitalize}.user-info .user-value{border:0;border-bottom:1px solid rgb(119,119,119)}.user-info .user-value:focus{box-shadow:none}.user-info .user-value.is-invalid{border-color:#ff586b}.control-btns{display:none}.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}::ng-deep body .invalid-field{border:1px solid rgb(255,88,107)!important}.form-action-buttons{margin-bottom:14px;margin-top:15px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "directive", type: i5.LazyImgDirective, selector: "img" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "directive", type: i2$2.NgbNavContent, selector: "ng-template[ngbNavContent]" }, { kind: "directive", type: i2$2.NgbNav, selector: "[ngbNav]", inputs: ["activeId", "animation", "destroyOnHide", "orientation", "roles", "keyboard"], outputs: ["activeIdChange", "shown", "hidden", "navChange"], exportAs: ["ngbNav"] }, { kind: "directive", type: i2$2.NgbNavItem, selector: "[ngbNavItem]", inputs: ["destroyOnHide", "disabled", "domId", "ngbNavItem"], outputs: ["shown", "hidden"], exportAs: ["ngbNavItem"] }, { kind: "directive", type: i2$2.NgbNavItemRole, selector: "[ngbNavItem]:not(ng-container)" }, { kind: "directive", type: i2$2.NgbNavLink, selector: "a[ngbNavLink]" }, { kind: "directive", type: i2$2.NgbNavLinkBase, selector: "[ngbNavLink]" }, { kind: "component", type: i2$2.NgbNavOutlet, selector: "[ngbNavOutlet]", inputs: ["paneRole", "ngbNavOutlet"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: 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: i9$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i7.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$1.NgFileDropDirective, selector: "[ngFileDrop]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "directive", type: i12$1.NgFileSelectDirective, selector: "[ngFileSelect]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "component", type: SmartCrmCompanyFilesComponent, selector: "pw-smart-crm-company-files", inputs: ["accountId", "contactId", "opportunityId"] }, { kind: "pipe", type: i2$1.JsonPipe, name: "json" }, { kind: "pipe", type: i2$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "pipe", type: i14.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i14.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmContactInfoComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmContactInfoComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pw-smart-crm-contact-info', 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 href=\"javascript:void(0)\"\n          (click)=\"back()\"\n          class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n        Contact Info\n      </h2>\n    </div>\n    <a class=\"btn btn-sm btn-outline-primary float-end mb-3\"\n      data-cy=\"add-opportunities\"\n      (click)=\"navigateToOpportunities()\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n    </a>\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 | ifNameNullShowEmail }}</span>\n        </h4>\n        <a href=\"javascript:void(0);\"\n          *ngIf=\"isFormEdit\"\n          class=\"btn btn-sm btn-outline-primary float-end\"\n          (click)=\"isFormEdit = !isFormEdit\">Edit</a>\n      </div>\n      <form [formGroup]=\"aboutControls\"\n        [class.isDisabled]=\"isFormEdit\">\n        <div class=\"mb-3\">\n          <label class=\"label mb-0\">{{\n                        'Crm.ContactMessage.FirstName' | transloco\n                    }}</label>\n          <input type=\"text\"\n            class=\"form-control rounded-0 ps-1 user-value\"\n            formControlName=\"first_name\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['first_name'].errors }\" />\n        </div>\n        <div class=\"mb-3\">\n          <label class=\"label mb-0\">{{\n                        'Crm.ContactMessage.LastName' | transloco\n                    }}</label>\n          <input type=\"text\"\n            class=\"form-control rounded-0 ps-1 user-value\"\n            formControlName=\"last_name\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['last_name'].errors }\" />\n        </div>\n        <div class=\"mb-3 ui-fluid skills-modal\">\n          <label class=\"label mb-2\">{{ 'Crm.ContactMessage.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            [class.is-invalid]=\"\n                            (f['crm_account_id'].touched || submitted) && f['crm_account_id'].errors\n                        \"\n            *ngIf=\"isFormEdit\"\n            [class.disableFormControl]=\"!data?.crm_account_id\">{{ f['crm_account_id'].value?.name }}</a>\n          <p-autoComplete *ngIf=\"!isFormEdit\"\n            [suggestions]=\"filteredAccounts\"\n            formControlName=\"crm_account_id\"\n            dataKey=\"id\"\n            field=\"name\"\n            [dropdown]=\"true\"\n            (completeMethod)=\"search($event)\"\n            styleClass=\"w-100\"\n            [inputStyleClass]=\"\n                            (f['crm_account_id'].touched || submitted) && f['crm_account_id'].errors\n                                ? 'invalid-field'\n                                : ''\n                        \"\n            placeholder=\"Search accounts\"\n            [multiple]=\"false\">\n          </p-autoComplete>\n          <span *ngIf=\"(f['crm_account_id'].touched || submitted) && f['crm_account_id'].errors\"\n            class=\"text-danger\">account is required</span>\n        </div>\n        <div class=\"mb-3\">\n          <label class=\"label mb-0\">{{ 'Crm.ContactMessage.Email' | transloco }}</label>\n          <a href=\"mailTo:{{ data.email }}\"\n            class=\"form-control d-block pb-2 ps-1 user-value\"\n            *ngIf=\"isFormEdit && data.email\">{{ data.email }}</a>\n          <input type=\"text\"\n            *ngIf=\"!isFormEdit || !data.email\"\n            class=\"form-control rounded-0 ps-1 user-value\"\n            formControlName=\"email\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['email'].errors }\" />\n        </div>\n        <div class=\"mb-3\">\n          <label class=\"label mb-0\">{{\n                        'Crm.ContactMessage.LinkedInUrl' | transloco\n                    }}</label>\n          <a [href]=\"data.linkedin_url\"\n            target=\"blank\"\n            class=\"form-control d-block pb-2 ps-1 user-value\"\n            *ngIf=\"isFormEdit && data.linkedin_url\">{{ data.linkedin_url }}</a>\n          <input *ngIf=\"!isFormEdit || !data.linkedin_url\"\n            type=\"text\"\n            class=\"form-control rounded-0 ps-1 user-value\"\n            formControlName=\"linkedin_url\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['linkedin_url'].errors }\" />\n        </div>\n        <div class=\"mb-3\">\n          <label class=\"label mb-0\">{{\n                        'Crm.ContactMessage.Headline' | transloco\n                    }}</label>\n          <input type=\"text\"\n            class=\"form-control rounded-0 ps-1 user-value\"\n            formControlName=\"headline\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['headline'].errors }\" />\n        </div>\n        <div class=\"mb-3\"\n          *ngIf=\"data.tel\">\n          <label class=\"label mb-0\">{{ 'Crm.ContactMessage.Tel' | transloco }}</label>\n          <input type=\"text\"\n            class=\"form-control rounded-0 ps-1 user-value\"\n            formControlName=\"tel\" />\n        </div>\n        <div class=\"mb-3\">\n          <label class=\"label mb-0\">{{\n                        'Crm.ContactMessage.Potential' | transloco\n                    }}</label>\n          <select formControlName=\"potential\"\n            class=\"form-control form-select\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['potential'].errors }\">\n            <option *ngFor=\"let option of potentials\"\n              [value]=\"option\">\n              {{ option }}\n            </option>\n          </select>\n        </div>\n        <div class=\"mb-3\">\n          <label class=\"label mb-0\">{{ 'Crm.ContactMessage.Labels' | transloco }} </label>\n          <p-multiSelect [options]=\"labels\"\n            [class.disableFormControl]=\"isFormEdit\"\n            formControlName=\"labels\"\n            appendTo=\"body\"></p-multiSelect>\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; getUserInfo()\"\n            value=\"Cancel\" />\n          <input type=\"button\"\n            class=\"btn btn-primary ms-3\"\n            value=\"Submit\"\n            (click)=\"updateContactInfo()\" />\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)=\"onSave()\">\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=\"yyyy-mm-dd\"\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              <input type=\"submit\"\n                [disabled]=\"buttonDisable\"\n                class=\"btn btn-primary mt-2 mb-2 float-end\"\n                value=\"Submit Note\" />\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.ContactMessage.NoActionsInContactInfoMessage' | transloco\n                                \">\n                <span><a [routerLink]=\"[\n                                            '/' +\n                                                subscription?.slug +\n                                                routers.configurations +\n                                                'actions'\n                                        ]\">Take me to the actions configuration section.</a></span>\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=\"!contactComments?.length && isLoaded\"\n            class=\"no-actions pt-3\">\n            <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoActionsMessage' | transloco\">\n            </pw-no-data>\n          </div>\n          <div *ngIf=\"contactComments.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 contactComments;\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></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                      <!-- <a>{{item.comment}}</a> -->\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=\"yyyy-mm-dd\"\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                      {{ item.owner.first_name + ' ' + item.owner.last_name }}\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                      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                      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                      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 contactVersioning\">\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 | dateFormat: 'datetime' }}<br />\n              <strong>Object: </strong>{{ version.object | json }}\n            </p>\n            <hr />\n          </div>\n          <div *ngIf=\"contactVersioning?.length === 0\">\n            <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.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          </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_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.user-info .label{color:#777;font-size:14px;text-transform:capitalize}.user-info .user-value{border:0;border-bottom:1px solid rgb(119,119,119)}.user-info .user-value:focus{box-shadow:none}.user-info .user-value.is-invalid{border-color:#ff586b}.control-btns{display:none}.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}::ng-deep body .invalid-field{border:1px solid rgb(255,88,107)!important}.form-action-buttons{margin-bottom:14px;margin-top:15px}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1.CrmService }, { type: i2$2.NgbCalendar }, { type: i2$2.NgbModal }, { type: i2.AuthService }, { type: Document, decorators: [{
@@ -3152,19 +3152,19 @@ class SmartCrmContactComponent extends AppBaseComponent {
         });
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmContactComponent, deps: [{ token: i1.CrmService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: SmartCrmContactComponent, selector: "pw-crm-contacts", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 mb-3\">\n    <h2 *ngIf=\"!accountData?.name\">Contacts</h2>\n    <h3 *ngIf=\"accountData?.name\"\n      class=\"mb-2\">\n      {{ accountData.name }}\n      <span [routerLink]=\"[routers.accounts, accountData.id]\"><i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i></span>\n    </h3>\n    <h4 *ngIf=\"accountData?.location\"\n      class=\"mb-1\">Location: {{ accountData.location }}</h4>\n    <h4 *ngIf=\"accountData?.tel\">Tel: {{ accountData.tel }}</h4>\n    <h4 *ngIf=\"accountData?.company_url\">\n      URL:\n      <a href=\"{{ accountData.company_url }}\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\">\n        {{ accountData.company_url }}\n      </a>\n    </h4>\n    <a class=\"btn btn-sm btn-outline-primary float-end mb-3 ms-2\"\n      data-cy=\"add-opportunities\"\n      (click)=\"navigateToOpportunities()\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n    </a>\n    <a class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"add-contact\"\n      [routerLink]=\"['/' + subscription?.slug + routers.contactAdd, accountId]\"\n      *ngIf=\"accountData?.name\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.ContactMessage.AddContact' | transloco }}\n    </a>\n    <a class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"add-contact\"\n      [routerLink]=\"['/' + subscription?.slug + routers.contactAdd, accountId]\"\n      *ngIf=\"!accountData?.name\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.ContactMessage.AddContact' | transloco }}\n    </a>\n    <a class=\"btn btn-sm btn-outline-primary me-3 float-end\"\n      data-cy=\"list-contact\"\n      [routerLink]=\"['/' + subscription?.slug + routers.contacts]\"\n      *ngIf=\"accountData?.name\">\n      <i class=\"fa fa-plus-list\" aria-hidden=\"true\"></i>\n      {{ 'Crm.ContactMessage.ShowAllContacts' | transloco }}\n    </a>\n  </div>\n</div>\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container table-responsive\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table class=\"table\"\n    #dt\n    [value]=\"data.contacts\"\n    [paginator]=\"data.object_count !== 0\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    [lazy]=\"true\"\n    [filterDelay]=\"1000\"\n    stateStorage=\"local\"\n    stateKey=\"smart-crm-contacts\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n    <ng-template pTemplate=\"caption\">\n      <div class=\"row\">\n        <div class=\"col-sm-3 col-6 mb-2 mb-sm-0\">\n            <select class=\"form-select\" (change)=\"filterByPotential($event)\">\n                <option value=\"\">Select Priority</option>\n                <option *ngFor=\"let option of potential\" [selected]=\"filterByPotentials === option\" [value]=\"option\">\n                    {{ option }}\n                </option>\n            </select>\n        </div>\n        <div class=\"col-sm-3 col-6\">\n            <p-multiSelect [(ngModel)]=\"selectedLabels\" placeholder=\"Select Label\" [options]=\"labels\" [filter]=\"false\"\n                [showHeader]=\"true\" [showToggleAll]=\"true\" (onChange)=\"onLabelChange($event)\" appendTo=\"body\">\n            </p-multiSelect>\n        </div>\n        <!-- multiple select account drop down -->\n        <div class=\"col-sm-3 col-6\">\n            <p-multiSelect [(ngModel)]=\"selectedAccount\" placeholder=\"Select Account\" [options]=\"accountDropDown\" [filter]=\"false\"\n                [showHeader]=\"true\" [showToggleAll]=\"true\" optionLabel=\"name\" (onChange)=\"onSelectAccount()\" appendTo=\"body\">\n            </p-multiSelect>\n        </div>\n        <div class=\"col-sm-3 col-md-4 col-lg-3\">\n         <div class=\"d-flex\">\n          <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n          <input type=\"text\" [(ngModel)]=\"searchText\" pInputText placeholder=\"Search contact...\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\" class=\"form-control\" />\n         </div>\n      </div>\n\n    </div>\n\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"first_name\">\n          {{ 'Crm.ContactMessage.Name' | transloco }}\n          <p-sortIcon field=\"first_name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"owner_id\">\n          {{ 'Crm.ContactMessage.ContactOwner' | transloco }}\n          <p-sortIcon field=\"owner_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"crm_account_id\">\n          {{ 'Crm.ContactMessage.AccountOwner' | transloco }}\n          <p-sortIcon field=\"crm_account_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"labels\">\n          {{ 'Crm.ContactMessage.Labels' | transloco }}\n          <p-sortIcon field=\"labels\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"potential\">\n          {{ 'Crm.ContactMessage.Potential' | transloco }}\n          <p-sortIcon field=\"potential\"></p-sortIcon>\n        </th>\n        <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-contact>\n      <tr>\n        <td data-head=\"Name\"\n        class=\"contactname\">\n          <a ngbTooltip=\"{{contact.headline ? contact.headline : 'No headline for this contact'}}\"\n              [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, contact.id]\">{{ (contact?.first_name || '') + ' ' + (contact?.last_name || '') | textTruncate: 20 }}\n          </a>\n        </td>\n        <td data-head=\"OwnerName\">{{ contact.owner | ifNameNullShowEmail }}</td>\n        <td data-head=\"Account Name\">\n          <a [routerLink]=\"[\n                            '/' + subscription?.slug + routers.accountInfo,\n                            contact.crm_account.id\n                        ]\" ngbTooltip=\"{{contact?.crm_account.name}}\">{{ contact?.crm_account.name | textTruncate: 20 }}</a>\n        </td>\n        <td data-head=\"Labels\">\n          <span class=\"badge bg-info m-1\"\n            *ngFor=\"let item of contact.labels\">{{\n                        item\n                    }}</span>\n        </td>\n        <td data-head=\"Potential\">\n          <span [appDynamicBadge]=\"{ itemsArray: potential, item: contact.potential }\"\n            color=\"warning\"\n            class=\"badge\">{{ contact.potential }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline\">\n            <li ngbTooltip=\"Show\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"[\n                                '/' + subscription?.slug + '/crm/contacts/info',\n                                contact.id\n                            ]\">\n              <i class=\"fa fa-eye see-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li *ngIf=\"\n                                hasAccess ||\n                                contact.owner_id === userId ||\n                                contact.crm_account.owner_id === userId\n                            \"\n              ngbTooltip=\"Add opportunity\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"['/' + subscription?.slug + routers.opportunityAdd]\"\n              [queryParams]=\"{ contact_id: contact.id }\">\n              <i class=\"fa fa-plus-circle add-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <!-- <ng-container *ngIf=\"contact\"> -->\n            <li *ngIf=\"\n                                hasAccess ||\n                                contact.owner_id === userId ||\n                                contact.crm_account.owner_id === userId\n                            \"\n              ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"[\n                                '/' + subscription?.slug + routers.contactDetails,\n                                contact.id\n                            ]\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li *ngIf=\"\n                                hasAccess ||\n                                contact.owner_id === userId ||\n                                contact.crm_account.owner_id === userId\n                            \"\n              ngbTooltip=\"Delete\"\n              class=\"me-2 me-sm-3\">\n              <i\n                                class=\"fa fa-trash delete-icon\"\n                                (click)=\"onDelete(contact.id)\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </li>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  <div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n</div>\n  <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.ContactsAdminMessage' | transloco\"> </pw-no-data>\n</div>\n\n<ng-container *rbacAllow=\"'Pages.Beta'\">\n  <div class=\"row mt-5\"\n    *ngIf=\"data.unfiltered_count !== 0 && isLoaded\">\n    <!-- Drill Down -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Drill Down</h5>\n      <div class=\"primeng-datatable-container table-responsive\"\n        *ngIf=\"contactInsight?.length\">\n        <p-table class=\"table\"\n          #dt\n          [value]=\"contactInsight\"\n          [paginator]=\"contactInsight?.length !== 0\"\n          [rows]=\"PAGE_SIZE\"\n\n          [totalRecords]=\"contactInsight.length\"\n          [lazy]=\"true\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.ContactMessage.Title' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.ContactMessage.Value' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.ContactMessage.Reason' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\"\n            let-insight>\n            <tr>\n              <td data-head=\"Title\">\n                {{ insight.title }}\n              </td>\n              <td data-head=\"Value\">\n                {{ insight.value }}\n              </td>\n              <td data-head=\"Reason\">\n                {{ insight.reason }}\n              </td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\" *ngIf=\"contactInsight?.length !== 0\">Total: {{ contactInsight.length }}</span>\n      </div>\n      <div *ngIf=\"contactInsight?.length === 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsighMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n    <!-- Geography -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Geography</h5>\n      <div>\n        <ng-template [ngIf]=\"contactGeography\">\n          <plotly-plot [data]=\"contactGeography?.data\"\n            [layout]=\"contactGeography?.layout\">\n          </plotly-plot>\n        </ng-template>\n      </div>\n      <div *ngIf=\"!contactGeography\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsighMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.table tr{vertical-align:baseline}@media (min-width: 640px){.list-inline{width:150px}}@media (min-width: 640px) and (max-width: 768px){.primeng-datatable-container tr td{width:350px}}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]" }, { kind: "directive", type: i5.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color"] }, { kind: "directive", type: i5.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i7$1.PlotlyComponent, selector: "plotly-plot", inputs: ["data", "layout", "config", "frames", "style", "theme", "divId", "revision", "className", "debug", "useResizeHandler", "updateOnLayoutChange", "updateOnDataChange", "updateOnlyWithRevision"], outputs: ["initialized", "update", "purge", "error", "afterExport", "afterPlot", "animated", "animatingFrame", "animationInterrupted", "autoSize", "beforeExport", "beforeHover", "buttonClicked", "click", "plotlyClick", "clickAnnotation", "deselect", "doubleClick", "framework", "hover", "legendClick", "legendDoubleClick", "react", "relayout", "relayouting", "restyle", "redraw", "selected", "selecting", "sliderChange", "sliderEnd", "sliderStart", "sunburstclick", "transitioning", "transitionInterrupted", "unhover", "treemapclick", "webglcontextlost"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i6.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i8.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i11.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i14.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i14.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmContactComponent, deps: [{ token: i1.CrmService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmContactComponent, selector: "pw-crm-contacts", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 mb-3\">\n    <h2 *ngIf=\"!accountData?.name\">Contacts</h2>\n    <h3 *ngIf=\"accountData?.name\"\n      class=\"mb-2\">\n      {{ accountData.name }}\n      <span [routerLink]=\"[routers.accounts, accountData.id]\"><i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i></span>\n    </h3>\n    <h4 *ngIf=\"accountData?.location\"\n      class=\"mb-1\">Location: {{ accountData.location }}</h4>\n    <h4 *ngIf=\"accountData?.tel\">Tel: {{ accountData.tel }}</h4>\n    <h4 *ngIf=\"accountData?.company_url\">\n      URL:\n      <a href=\"{{ accountData.company_url }}\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\">\n        {{ accountData.company_url }}\n      </a>\n    </h4>\n    <a class=\"btn btn-sm btn-outline-primary float-end mb-3 ms-2\"\n      data-cy=\"add-opportunities\"\n      (click)=\"navigateToOpportunities()\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n    </a>\n    <a class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"add-contact\"\n      [routerLink]=\"['/' + subscription?.slug + routers.contactAdd, accountId]\"\n      *ngIf=\"accountData?.name\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.ContactMessage.AddContact' | transloco }}\n    </a>\n    <a class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"add-contact\"\n      [routerLink]=\"['/' + subscription?.slug + routers.contactAdd, accountId]\"\n      *ngIf=\"!accountData?.name\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.ContactMessage.AddContact' | transloco }}\n    </a>\n    <a class=\"btn btn-sm btn-outline-primary me-3 float-end\"\n      data-cy=\"list-contact\"\n      [routerLink]=\"['/' + subscription?.slug + routers.contacts]\"\n      *ngIf=\"accountData?.name\">\n      <i class=\"fa fa-plus-list\" aria-hidden=\"true\"></i>\n      {{ 'Crm.ContactMessage.ShowAllContacts' | transloco }}\n    </a>\n  </div>\n</div>\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container table-responsive\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table class=\"table\"\n    #dt\n    [value]=\"data.contacts\"\n    [paginator]=\"data.object_count !== 0\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    [lazy]=\"true\"\n    [filterDelay]=\"1000\"\n    stateStorage=\"local\"\n    stateKey=\"smart-crm-contacts\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n    <ng-template pTemplate=\"caption\">\n      <div class=\"row\">\n        <div class=\"col-sm-3 col-6 mb-2 mb-sm-0\">\n            <select class=\"form-select\" (change)=\"filterByPotential($event)\">\n                <option value=\"\">Select Priority</option>\n                <option *ngFor=\"let option of potential\" [selected]=\"filterByPotentials === option\" [value]=\"option\">\n                    {{ option }}\n                </option>\n            </select>\n        </div>\n        <div class=\"col-sm-3 col-6\">\n            <p-multiSelect [(ngModel)]=\"selectedLabels\" placeholder=\"Select Label\" [options]=\"labels\" [filter]=\"false\"\n                [showHeader]=\"true\" [showToggleAll]=\"true\" (onChange)=\"onLabelChange($event)\" appendTo=\"body\">\n            </p-multiSelect>\n        </div>\n        <!-- multiple select account drop down -->\n        <div class=\"col-sm-3 col-6\">\n            <p-multiSelect [(ngModel)]=\"selectedAccount\" placeholder=\"Select Account\" [options]=\"accountDropDown\" [filter]=\"false\"\n                [showHeader]=\"true\" [showToggleAll]=\"true\" optionLabel=\"name\" (onChange)=\"onSelectAccount()\" appendTo=\"body\">\n            </p-multiSelect>\n        </div>\n        <div class=\"col-sm-3 col-md-4 col-lg-3\">\n         <div class=\"d-flex\">\n          <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n          <input type=\"text\" [(ngModel)]=\"searchText\" pInputText placeholder=\"Search contact...\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\" class=\"form-control\" />\n         </div>\n      </div>\n\n    </div>\n\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"first_name\">\n          {{ 'Crm.ContactMessage.Name' | transloco }}\n          <p-sortIcon field=\"first_name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"owner_id\">\n          {{ 'Crm.ContactMessage.ContactOwner' | transloco }}\n          <p-sortIcon field=\"owner_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"crm_account_id\">\n          {{ 'Crm.ContactMessage.AccountOwner' | transloco }}\n          <p-sortIcon field=\"crm_account_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"labels\">\n          {{ 'Crm.ContactMessage.Labels' | transloco }}\n          <p-sortIcon field=\"labels\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"potential\">\n          {{ 'Crm.ContactMessage.Potential' | transloco }}\n          <p-sortIcon field=\"potential\"></p-sortIcon>\n        </th>\n        <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-contact>\n      <tr>\n        <td data-head=\"Name\"\n        class=\"contactname\">\n          <a ngbTooltip=\"{{contact.headline ? contact.headline : 'No headline for this contact'}}\"\n              [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, contact.id]\">{{ (contact?.first_name || '') + ' ' + (contact?.last_name || '') | textTruncate: 20 }}\n          </a>\n        </td>\n        <td data-head=\"OwnerName\">{{ contact.owner | ifNameNullShowEmail }}</td>\n        <td data-head=\"Account Name\">\n          <a [routerLink]=\"[\n                            '/' + subscription?.slug + routers.accountInfo,\n                            contact.crm_account.id\n                        ]\" ngbTooltip=\"{{contact?.crm_account.name}}\">{{ contact?.crm_account.name | textTruncate: 20 }}</a>\n        </td>\n        <td data-head=\"Labels\">\n          <span class=\"badge bg-info m-1\"\n            *ngFor=\"let item of contact.labels\">{{\n                        item\n                    }}</span>\n        </td>\n        <td data-head=\"Potential\">\n          <span [appDynamicBadge]=\"{ itemsArray: potential, item: contact.potential }\"\n            color=\"warning\"\n            class=\"badge\">{{ contact.potential }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline\">\n            <li ngbTooltip=\"Show\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"[\n                                '/' + subscription?.slug + '/crm/contacts/info',\n                                contact.id\n                            ]\">\n              <i class=\"fa fa-eye see-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li *ngIf=\"\n                                hasAccess ||\n                                contact.owner_id === userId ||\n                                contact.crm_account.owner_id === userId\n                            \"\n              ngbTooltip=\"Add opportunity\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"['/' + subscription?.slug + routers.opportunityAdd]\"\n              [queryParams]=\"{ contact_id: contact.id }\">\n              <i class=\"fa fa-plus-circle add-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <!-- <ng-container *ngIf=\"contact\"> -->\n            <li *ngIf=\"\n                                hasAccess ||\n                                contact.owner_id === userId ||\n                                contact.crm_account.owner_id === userId\n                            \"\n              ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"[\n                                '/' + subscription?.slug + routers.contactDetails,\n                                contact.id\n                            ]\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li *ngIf=\"\n                                hasAccess ||\n                                contact.owner_id === userId ||\n                                contact.crm_account.owner_id === userId\n                            \"\n              ngbTooltip=\"Delete\"\n              class=\"me-2 me-sm-3\">\n              <i\n                                class=\"fa fa-trash delete-icon\"\n                                (click)=\"onDelete(contact.id)\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </li>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  <div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n</div>\n  <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.ContactsAdminMessage' | transloco\"> </pw-no-data>\n</div>\n\n<ng-container *rbacAllow=\"'Pages.Beta'\">\n  <div class=\"row mt-5\"\n    *ngIf=\"data.unfiltered_count !== 0 && isLoaded\">\n    <!-- Drill Down -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Drill Down</h5>\n      <div class=\"primeng-datatable-container table-responsive\"\n        *ngIf=\"contactInsight?.length\">\n        <p-table class=\"table\"\n          #dt\n          [value]=\"contactInsight\"\n          [paginator]=\"contactInsight?.length !== 0\"\n          [rows]=\"PAGE_SIZE\"\n\n          [totalRecords]=\"contactInsight.length\"\n          [lazy]=\"true\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.ContactMessage.Title' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.ContactMessage.Value' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.ContactMessage.Reason' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\"\n            let-insight>\n            <tr>\n              <td data-head=\"Title\">\n                {{ insight.title }}\n              </td>\n              <td data-head=\"Value\">\n                {{ insight.value }}\n              </td>\n              <td data-head=\"Reason\">\n                {{ insight.reason }}\n              </td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\" *ngIf=\"contactInsight?.length !== 0\">Total: {{ contactInsight.length }}</span>\n      </div>\n      <div *ngIf=\"contactInsight?.length === 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n    <!-- Geography -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Geography</h5>\n      <div>\n        <ng-template [ngIf]=\"contactGeography\">\n          <plotly-plot [data]=\"contactGeography?.data\"\n            [layout]=\"contactGeography?.layout\">\n          </plotly-plot>\n        </ng-template>\n      </div>\n      <div *ngIf=\"!contactGeography\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.table tr{vertical-align:baseline}@media (min-width: 640px){.list-inline{width:150px}}@media (min-width: 640px) and (max-width: 768px){.primeng-datatable-container tr td{width:350px}}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i5.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color"] }, { kind: "directive", type: i5.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i7$1.PlotlyComponent, selector: "plotly-plot", inputs: ["data", "layout", "config", "frames", "style", "theme", "divId", "revision", "className", "debug", "useResizeHandler", "updateOnLayoutChange", "updateOnDataChange", "updateOnlyWithRevision"], outputs: ["initialized", "update", "purge", "error", "afterExport", "afterPlot", "animated", "animatingFrame", "animationInterrupted", "autoSize", "beforeExport", "beforeHover", "buttonClicked", "click", "plotlyClick", "clickAnnotation", "deselect", "doubleClick", "framework", "hover", "legendClick", "legendDoubleClick", "react", "relayout", "relayouting", "restyle", "redraw", "selected", "selecting", "sliderChange", "sliderEnd", "sliderStart", "sunburstclick", "transitioning", "transitionInterrupted", "unhover", "treemapclick", "webglcontextlost"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i6.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i8.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i11.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i14.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i14.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmContactComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmContactComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-crm-contacts', template: "<div class=\"row\">\n  <div class=\"col-12 mb-3\">\n    <h2 *ngIf=\"!accountData?.name\">Contacts</h2>\n    <h3 *ngIf=\"accountData?.name\"\n      class=\"mb-2\">\n      {{ accountData.name }}\n      <span [routerLink]=\"[routers.accounts, accountData.id]\"><i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i></span>\n    </h3>\n    <h4 *ngIf=\"accountData?.location\"\n      class=\"mb-1\">Location: {{ accountData.location }}</h4>\n    <h4 *ngIf=\"accountData?.tel\">Tel: {{ accountData.tel }}</h4>\n    <h4 *ngIf=\"accountData?.company_url\">\n      URL:\n      <a href=\"{{ accountData.company_url }}\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\">\n        {{ accountData.company_url }}\n      </a>\n    </h4>\n    <a class=\"btn btn-sm btn-outline-primary float-end mb-3 ms-2\"\n      data-cy=\"add-opportunities\"\n      (click)=\"navigateToOpportunities()\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n    </a>\n    <a class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"add-contact\"\n      [routerLink]=\"['/' + subscription?.slug + routers.contactAdd, accountId]\"\n      *ngIf=\"accountData?.name\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.ContactMessage.AddContact' | transloco }}\n    </a>\n    <a class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"add-contact\"\n      [routerLink]=\"['/' + subscription?.slug + routers.contactAdd, accountId]\"\n      *ngIf=\"!accountData?.name\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.ContactMessage.AddContact' | transloco }}\n    </a>\n    <a class=\"btn btn-sm btn-outline-primary me-3 float-end\"\n      data-cy=\"list-contact\"\n      [routerLink]=\"['/' + subscription?.slug + routers.contacts]\"\n      *ngIf=\"accountData?.name\">\n      <i class=\"fa fa-plus-list\" aria-hidden=\"true\"></i>\n      {{ 'Crm.ContactMessage.ShowAllContacts' | transloco }}\n    </a>\n  </div>\n</div>\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container table-responsive\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table class=\"table\"\n    #dt\n    [value]=\"data.contacts\"\n    [paginator]=\"data.object_count !== 0\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    [lazy]=\"true\"\n    [filterDelay]=\"1000\"\n    stateStorage=\"local\"\n    stateKey=\"smart-crm-contacts\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n    <ng-template pTemplate=\"caption\">\n      <div class=\"row\">\n        <div class=\"col-sm-3 col-6 mb-2 mb-sm-0\">\n            <select class=\"form-select\" (change)=\"filterByPotential($event)\">\n                <option value=\"\">Select Priority</option>\n                <option *ngFor=\"let option of potential\" [selected]=\"filterByPotentials === option\" [value]=\"option\">\n                    {{ option }}\n                </option>\n            </select>\n        </div>\n        <div class=\"col-sm-3 col-6\">\n            <p-multiSelect [(ngModel)]=\"selectedLabels\" placeholder=\"Select Label\" [options]=\"labels\" [filter]=\"false\"\n                [showHeader]=\"true\" [showToggleAll]=\"true\" (onChange)=\"onLabelChange($event)\" appendTo=\"body\">\n            </p-multiSelect>\n        </div>\n        <!-- multiple select account drop down -->\n        <div class=\"col-sm-3 col-6\">\n            <p-multiSelect [(ngModel)]=\"selectedAccount\" placeholder=\"Select Account\" [options]=\"accountDropDown\" [filter]=\"false\"\n                [showHeader]=\"true\" [showToggleAll]=\"true\" optionLabel=\"name\" (onChange)=\"onSelectAccount()\" appendTo=\"body\">\n            </p-multiSelect>\n        </div>\n        <div class=\"col-sm-3 col-md-4 col-lg-3\">\n         <div class=\"d-flex\">\n          <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n          <input type=\"text\" [(ngModel)]=\"searchText\" pInputText placeholder=\"Search contact...\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\" class=\"form-control\" />\n         </div>\n      </div>\n\n    </div>\n\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"first_name\">\n          {{ 'Crm.ContactMessage.Name' | transloco }}\n          <p-sortIcon field=\"first_name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"owner_id\">\n          {{ 'Crm.ContactMessage.ContactOwner' | transloco }}\n          <p-sortIcon field=\"owner_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"crm_account_id\">\n          {{ 'Crm.ContactMessage.AccountOwner' | transloco }}\n          <p-sortIcon field=\"crm_account_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"labels\">\n          {{ 'Crm.ContactMessage.Labels' | transloco }}\n          <p-sortIcon field=\"labels\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"potential\">\n          {{ 'Crm.ContactMessage.Potential' | transloco }}\n          <p-sortIcon field=\"potential\"></p-sortIcon>\n        </th>\n        <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-contact>\n      <tr>\n        <td data-head=\"Name\"\n        class=\"contactname\">\n          <a ngbTooltip=\"{{contact.headline ? contact.headline : 'No headline for this contact'}}\"\n              [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, contact.id]\">{{ (contact?.first_name || '') + ' ' + (contact?.last_name || '') | textTruncate: 20 }}\n          </a>\n        </td>\n        <td data-head=\"OwnerName\">{{ contact.owner | ifNameNullShowEmail }}</td>\n        <td data-head=\"Account Name\">\n          <a [routerLink]=\"[\n                            '/' + subscription?.slug + routers.accountInfo,\n                            contact.crm_account.id\n                        ]\" ngbTooltip=\"{{contact?.crm_account.name}}\">{{ contact?.crm_account.name | textTruncate: 20 }}</a>\n        </td>\n        <td data-head=\"Labels\">\n          <span class=\"badge bg-info m-1\"\n            *ngFor=\"let item of contact.labels\">{{\n                        item\n                    }}</span>\n        </td>\n        <td data-head=\"Potential\">\n          <span [appDynamicBadge]=\"{ itemsArray: potential, item: contact.potential }\"\n            color=\"warning\"\n            class=\"badge\">{{ contact.potential }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline\">\n            <li ngbTooltip=\"Show\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"[\n                                '/' + subscription?.slug + '/crm/contacts/info',\n                                contact.id\n                            ]\">\n              <i class=\"fa fa-eye see-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li *ngIf=\"\n                                hasAccess ||\n                                contact.owner_id === userId ||\n                                contact.crm_account.owner_id === userId\n                            \"\n              ngbTooltip=\"Add opportunity\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"['/' + subscription?.slug + routers.opportunityAdd]\"\n              [queryParams]=\"{ contact_id: contact.id }\">\n              <i class=\"fa fa-plus-circle add-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <!-- <ng-container *ngIf=\"contact\"> -->\n            <li *ngIf=\"\n                                hasAccess ||\n                                contact.owner_id === userId ||\n                                contact.crm_account.owner_id === userId\n                            \"\n              ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"[\n                                '/' + subscription?.slug + routers.contactDetails,\n                                contact.id\n                            ]\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li *ngIf=\"\n                                hasAccess ||\n                                contact.owner_id === userId ||\n                                contact.crm_account.owner_id === userId\n                            \"\n              ngbTooltip=\"Delete\"\n              class=\"me-2 me-sm-3\">\n              <i\n                                class=\"fa fa-trash delete-icon\"\n                                (click)=\"onDelete(contact.id)\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </li>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  <div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n</div>\n  <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.ContactsAdminMessage' | transloco\"> </pw-no-data>\n</div>\n\n<ng-container *rbacAllow=\"'Pages.Beta'\">\n  <div class=\"row mt-5\"\n    *ngIf=\"data.unfiltered_count !== 0 && isLoaded\">\n    <!-- Drill Down -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Drill Down</h5>\n      <div class=\"primeng-datatable-container table-responsive\"\n        *ngIf=\"contactInsight?.length\">\n        <p-table class=\"table\"\n          #dt\n          [value]=\"contactInsight\"\n          [paginator]=\"contactInsight?.length !== 0\"\n          [rows]=\"PAGE_SIZE\"\n\n          [totalRecords]=\"contactInsight.length\"\n          [lazy]=\"true\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.ContactMessage.Title' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.ContactMessage.Value' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.ContactMessage.Reason' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\"\n            let-insight>\n            <tr>\n              <td data-head=\"Title\">\n                {{ insight.title }}\n              </td>\n              <td data-head=\"Value\">\n                {{ insight.value }}\n              </td>\n              <td data-head=\"Reason\">\n                {{ insight.reason }}\n              </td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\" *ngIf=\"contactInsight?.length !== 0\">Total: {{ contactInsight.length }}</span>\n      </div>\n      <div *ngIf=\"contactInsight?.length === 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsighMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n    <!-- Geography -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Geography</h5>\n      <div>\n        <ng-template [ngIf]=\"contactGeography\">\n          <plotly-plot [data]=\"contactGeography?.data\"\n            [layout]=\"contactGeography?.layout\">\n          </plotly-plot>\n        </ng-template>\n      </div>\n      <div *ngIf=\"!contactGeography\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsighMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.table tr{vertical-align:baseline}@media (min-width: 640px){.list-inline{width:150px}}@media (min-width: 640px) and (max-width: 768px){.primeng-datatable-container tr td{width:350px}}\n"] }]
+            args: [{ selector: 'pw-crm-contacts', template: "<div class=\"row\">\n  <div class=\"col-12 mb-3\">\n    <h2 *ngIf=\"!accountData?.name\">Contacts</h2>\n    <h3 *ngIf=\"accountData?.name\"\n      class=\"mb-2\">\n      {{ accountData.name }}\n      <span [routerLink]=\"[routers.accounts, accountData.id]\"><i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i></span>\n    </h3>\n    <h4 *ngIf=\"accountData?.location\"\n      class=\"mb-1\">Location: {{ accountData.location }}</h4>\n    <h4 *ngIf=\"accountData?.tel\">Tel: {{ accountData.tel }}</h4>\n    <h4 *ngIf=\"accountData?.company_url\">\n      URL:\n      <a href=\"{{ accountData.company_url }}\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\">\n        {{ accountData.company_url }}\n      </a>\n    </h4>\n    <a class=\"btn btn-sm btn-outline-primary float-end mb-3 ms-2\"\n      data-cy=\"add-opportunities\"\n      (click)=\"navigateToOpportunities()\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n    </a>\n    <a class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"add-contact\"\n      [routerLink]=\"['/' + subscription?.slug + routers.contactAdd, accountId]\"\n      *ngIf=\"accountData?.name\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.ContactMessage.AddContact' | transloco }}\n    </a>\n    <a class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"add-contact\"\n      [routerLink]=\"['/' + subscription?.slug + routers.contactAdd, accountId]\"\n      *ngIf=\"!accountData?.name\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.ContactMessage.AddContact' | transloco }}\n    </a>\n    <a class=\"btn btn-sm btn-outline-primary me-3 float-end\"\n      data-cy=\"list-contact\"\n      [routerLink]=\"['/' + subscription?.slug + routers.contacts]\"\n      *ngIf=\"accountData?.name\">\n      <i class=\"fa fa-plus-list\" aria-hidden=\"true\"></i>\n      {{ 'Crm.ContactMessage.ShowAllContacts' | transloco }}\n    </a>\n  </div>\n</div>\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container table-responsive\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table class=\"table\"\n    #dt\n    [value]=\"data.contacts\"\n    [paginator]=\"data.object_count !== 0\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    [lazy]=\"true\"\n    [filterDelay]=\"1000\"\n    stateStorage=\"local\"\n    stateKey=\"smart-crm-contacts\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n    <ng-template pTemplate=\"caption\">\n      <div class=\"row\">\n        <div class=\"col-sm-3 col-6 mb-2 mb-sm-0\">\n            <select class=\"form-select\" (change)=\"filterByPotential($event)\">\n                <option value=\"\">Select Priority</option>\n                <option *ngFor=\"let option of potential\" [selected]=\"filterByPotentials === option\" [value]=\"option\">\n                    {{ option }}\n                </option>\n            </select>\n        </div>\n        <div class=\"col-sm-3 col-6\">\n            <p-multiSelect [(ngModel)]=\"selectedLabels\" placeholder=\"Select Label\" [options]=\"labels\" [filter]=\"false\"\n                [showHeader]=\"true\" [showToggleAll]=\"true\" (onChange)=\"onLabelChange($event)\" appendTo=\"body\">\n            </p-multiSelect>\n        </div>\n        <!-- multiple select account drop down -->\n        <div class=\"col-sm-3 col-6\">\n            <p-multiSelect [(ngModel)]=\"selectedAccount\" placeholder=\"Select Account\" [options]=\"accountDropDown\" [filter]=\"false\"\n                [showHeader]=\"true\" [showToggleAll]=\"true\" optionLabel=\"name\" (onChange)=\"onSelectAccount()\" appendTo=\"body\">\n            </p-multiSelect>\n        </div>\n        <div class=\"col-sm-3 col-md-4 col-lg-3\">\n         <div class=\"d-flex\">\n          <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n          <input type=\"text\" [(ngModel)]=\"searchText\" pInputText placeholder=\"Search contact...\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\" class=\"form-control\" />\n         </div>\n      </div>\n\n    </div>\n\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"first_name\">\n          {{ 'Crm.ContactMessage.Name' | transloco }}\n          <p-sortIcon field=\"first_name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"owner_id\">\n          {{ 'Crm.ContactMessage.ContactOwner' | transloco }}\n          <p-sortIcon field=\"owner_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"crm_account_id\">\n          {{ 'Crm.ContactMessage.AccountOwner' | transloco }}\n          <p-sortIcon field=\"crm_account_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"labels\">\n          {{ 'Crm.ContactMessage.Labels' | transloco }}\n          <p-sortIcon field=\"labels\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"potential\">\n          {{ 'Crm.ContactMessage.Potential' | transloco }}\n          <p-sortIcon field=\"potential\"></p-sortIcon>\n        </th>\n        <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-contact>\n      <tr>\n        <td data-head=\"Name\"\n        class=\"contactname\">\n          <a ngbTooltip=\"{{contact.headline ? contact.headline : 'No headline for this contact'}}\"\n              [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, contact.id]\">{{ (contact?.first_name || '') + ' ' + (contact?.last_name || '') | textTruncate: 20 }}\n          </a>\n        </td>\n        <td data-head=\"OwnerName\">{{ contact.owner | ifNameNullShowEmail }}</td>\n        <td data-head=\"Account Name\">\n          <a [routerLink]=\"[\n                            '/' + subscription?.slug + routers.accountInfo,\n                            contact.crm_account.id\n                        ]\" ngbTooltip=\"{{contact?.crm_account.name}}\">{{ contact?.crm_account.name | textTruncate: 20 }}</a>\n        </td>\n        <td data-head=\"Labels\">\n          <span class=\"badge bg-info m-1\"\n            *ngFor=\"let item of contact.labels\">{{\n                        item\n                    }}</span>\n        </td>\n        <td data-head=\"Potential\">\n          <span [appDynamicBadge]=\"{ itemsArray: potential, item: contact.potential }\"\n            color=\"warning\"\n            class=\"badge\">{{ contact.potential }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline\">\n            <li ngbTooltip=\"Show\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"[\n                                '/' + subscription?.slug + '/crm/contacts/info',\n                                contact.id\n                            ]\">\n              <i class=\"fa fa-eye see-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li *ngIf=\"\n                                hasAccess ||\n                                contact.owner_id === userId ||\n                                contact.crm_account.owner_id === userId\n                            \"\n              ngbTooltip=\"Add opportunity\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"['/' + subscription?.slug + routers.opportunityAdd]\"\n              [queryParams]=\"{ contact_id: contact.id }\">\n              <i class=\"fa fa-plus-circle add-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <!-- <ng-container *ngIf=\"contact\"> -->\n            <li *ngIf=\"\n                                hasAccess ||\n                                contact.owner_id === userId ||\n                                contact.crm_account.owner_id === userId\n                            \"\n              ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"[\n                                '/' + subscription?.slug + routers.contactDetails,\n                                contact.id\n                            ]\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li *ngIf=\"\n                                hasAccess ||\n                                contact.owner_id === userId ||\n                                contact.crm_account.owner_id === userId\n                            \"\n              ngbTooltip=\"Delete\"\n              class=\"me-2 me-sm-3\">\n              <i\n                                class=\"fa fa-trash delete-icon\"\n                                (click)=\"onDelete(contact.id)\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </li>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  <div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n</div>\n  <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.ContactsAdminMessage' | transloco\"> </pw-no-data>\n</div>\n\n<ng-container *rbacAllow=\"'Pages.Beta'\">\n  <div class=\"row mt-5\"\n    *ngIf=\"data.unfiltered_count !== 0 && isLoaded\">\n    <!-- Drill Down -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Drill Down</h5>\n      <div class=\"primeng-datatable-container table-responsive\"\n        *ngIf=\"contactInsight?.length\">\n        <p-table class=\"table\"\n          #dt\n          [value]=\"contactInsight\"\n          [paginator]=\"contactInsight?.length !== 0\"\n          [rows]=\"PAGE_SIZE\"\n\n          [totalRecords]=\"contactInsight.length\"\n          [lazy]=\"true\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.ContactMessage.Title' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.ContactMessage.Value' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.ContactMessage.Reason' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\"\n            let-insight>\n            <tr>\n              <td data-head=\"Title\">\n                {{ insight.title }}\n              </td>\n              <td data-head=\"Value\">\n                {{ insight.value }}\n              </td>\n              <td data-head=\"Reason\">\n                {{ insight.reason }}\n              </td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\" *ngIf=\"contactInsight?.length !== 0\">Total: {{ contactInsight.length }}</span>\n      </div>\n      <div *ngIf=\"contactInsight?.length === 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n    <!-- Geography -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Geography</h5>\n      <div>\n        <ng-template [ngIf]=\"contactGeography\">\n          <plotly-plot [data]=\"contactGeography?.data\"\n            [layout]=\"contactGeography?.layout\">\n          </plotly-plot>\n        </ng-template>\n      </div>\n      <div *ngIf=\"!contactGeography\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.table tr{vertical-align:baseline}@media (min-width: 640px){.list-inline{width:150px}}@media (min-width: 640px) and (max-width: 768px){.primeng-datatable-container tr td{width:350px}}\n"] }]
         }], ctorParameters: () => [{ type: i1.CrmService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }] });
 class SmartCrmCustomerSuccessComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmCustomerSuccessComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: SmartCrmCustomerSuccessComponent, selector: "pw-smart-crm-customer-success", ngImport: i0, template: "<pw-coming-soon message=\"Customer Success\"></pw-coming-soon>\n", dependencies: [{ kind: "component", type: i11.ComingSoonComponent, selector: "pw-coming-soon", inputs: ["message"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmCustomerSuccessComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmCustomerSuccessComponent, selector: "pw-smart-crm-customer-success", ngImport: i0, template: "<pw-coming-soon message=\"Customer Success\"></pw-coming-soon>\n", dependencies: [{ kind: "component", type: i11.ComingSoonComponent, selector: "pw-coming-soon", inputs: ["message"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmCustomerSuccessComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmCustomerSuccessComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pw-smart-crm-customer-success', template: "<pw-coming-soon message=\"Customer Success\"></pw-coming-soon>\n" }]
         }] });
@@ -3205,19 +3205,19 @@ class SmartCrmOverviewComponent extends AppBaseComponent {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmOverviewComponent, deps: [{ token: i1.CrmService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: SmartCrmOverviewComponent, selector: "pw-smart-crm-overview", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 mb-3\">\n    <div *ngIf=\"hasAccess\">\n      <div class=\"row\">\n        <div class=\"w-100 text-center mt-3\"\n          *ngIf=\"!isLoaded\">\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </div>\n        <!-- Activities          -->\n        <div class=\"col-12 col-lg-8 my-3 px-2\">\n          <ng-template [ngIf]=\"graph\">\n            <plotly-plot [data]=\"graph?.data\"\n              [layout]=\"graph?.layout\"></plotly-plot>\n          </ng-template>\n        </div>\n        <!-- Opportunities funnel    -->\n        <div class=\"col-12 col-lg-4 my-3 px-2\"\n          *rbacAllow=\"'Pages.Beta'\">\n          <ng-template [ngIf]=\"graph\">\n            <plotly-plot [data]=\"graph?.data\"\n              [layout]=\"graph?.layout\"></plotly-plot>\n          </ng-template>\n        </div>\n        <div class=\"col-12 col-lg-4 my-3 px-2\"\n          *rbacAllow=\"'Pages.Beta'\">\n          <ng-template [ngIf]=\"graph\">\n            <plotly-plot [data]=\"graph?.data\"\n              [layout]=\"graph?.layout\"></plotly-plot>\n          </ng-template>\n        </div>\n        <!-- Opportunities timeline          -->\n        <div class=\"col-12 col-lg-8 my-3 px-2\"\n          *rbacAllow=\"'Pages.Beta'\">\n          <ng-template [ngIf]=\"graph\">\n            <plotly-plot [data]=\"graph?.data\"\n              [layout]=\"graph?.layout\"></plotly-plot>\n          </ng-template>\n        </div>\n      </div>\n    </div>\n    <div *ngIf=\"!hasAccess && isLoaded\"\n      class=\"w-100\">\n      <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Insight.NoDataMessage' | transloco\"> </pw-no-data>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "component", type: i7$1.PlotlyComponent, selector: "plotly-plot", inputs: ["data", "layout", "config", "frames", "style", "theme", "divId", "revision", "className", "debug", "useResizeHandler", "updateOnLayoutChange", "updateOnDataChange", "updateOnlyWithRevision"], outputs: ["initialized", "update", "purge", "error", "afterExport", "afterPlot", "animated", "animatingFrame", "animationInterrupted", "autoSize", "beforeExport", "beforeHover", "buttonClicked", "click", "plotlyClick", "clickAnnotation", "deselect", "doubleClick", "framework", "hover", "legendClick", "legendDoubleClick", "react", "relayout", "relayouting", "restyle", "redraw", "selected", "selecting", "sliderChange", "sliderEnd", "sliderStart", "sunburstclick", "transitioning", "transitionInterrupted", "unhover", "treemapclick", "webglcontextlost"] }, { kind: "component", type: i9$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i11.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmOverviewComponent, 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: SmartCrmOverviewComponent, selector: "pw-smart-crm-overview", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 mb-3\">\n    <div *ngIf=\"hasAccess\">\n      <div class=\"row\">\n        <div class=\"w-100 text-center mt-3\"\n          *ngIf=\"!isLoaded\">\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </div>\n        <!-- Activities          -->\n        <div class=\"col-12 col-lg-8 my-3 px-2\">\n          <ng-template [ngIf]=\"graph\">\n            <plotly-plot [data]=\"graph?.data\"\n              [layout]=\"graph?.layout\"></plotly-plot>\n          </ng-template>\n        </div>\n        <!-- Opportunities funnel    -->\n        <div class=\"col-12 col-lg-4 my-3 px-2\"\n          *rbacAllow=\"'Pages.Beta'\">\n          <ng-template [ngIf]=\"graph\">\n            <plotly-plot [data]=\"graph?.data\"\n              [layout]=\"graph?.layout\"></plotly-plot>\n          </ng-template>\n        </div>\n        <div class=\"col-12 col-lg-4 my-3 px-2\"\n          *rbacAllow=\"'Pages.Beta'\">\n          <ng-template [ngIf]=\"graph\">\n            <plotly-plot [data]=\"graph?.data\"\n              [layout]=\"graph?.layout\"></plotly-plot>\n          </ng-template>\n        </div>\n        <!-- Opportunities timeline          -->\n        <div class=\"col-12 col-lg-8 my-3 px-2\"\n          *rbacAllow=\"'Pages.Beta'\">\n          <ng-template [ngIf]=\"graph\">\n            <plotly-plot [data]=\"graph?.data\"\n              [layout]=\"graph?.layout\"></plotly-plot>\n          </ng-template>\n        </div>\n      </div>\n    </div>\n    <div *ngIf=\"!hasAccess && isLoaded\"\n      class=\"w-100\">\n      <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Insight.NoDataMessage' | transloco\"> </pw-no-data>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "component", type: i7$1.PlotlyComponent, selector: "plotly-plot", inputs: ["data", "layout", "config", "frames", "style", "theme", "divId", "revision", "className", "debug", "useResizeHandler", "updateOnLayoutChange", "updateOnDataChange", "updateOnlyWithRevision"], outputs: ["initialized", "update", "purge", "error", "afterExport", "afterPlot", "animated", "animatingFrame", "animationInterrupted", "autoSize", "beforeExport", "beforeHover", "buttonClicked", "click", "plotlyClick", "clickAnnotation", "deselect", "doubleClick", "framework", "hover", "legendClick", "legendDoubleClick", "react", "relayout", "relayouting", "restyle", "redraw", "selected", "selecting", "sliderChange", "sliderEnd", "sliderStart", "sunburstclick", "transitioning", "transitionInterrupted", "unhover", "treemapclick", "webglcontextlost"] }, { kind: "component", type: i9$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i11.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmOverviewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmOverviewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pw-smart-crm-overview', template: "<div class=\"row\">\n  <div class=\"col-12 mb-3\">\n    <div *ngIf=\"hasAccess\">\n      <div class=\"row\">\n        <div class=\"w-100 text-center mt-3\"\n          *ngIf=\"!isLoaded\">\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </div>\n        <!-- Activities          -->\n        <div class=\"col-12 col-lg-8 my-3 px-2\">\n          <ng-template [ngIf]=\"graph\">\n            <plotly-plot [data]=\"graph?.data\"\n              [layout]=\"graph?.layout\"></plotly-plot>\n          </ng-template>\n        </div>\n        <!-- Opportunities funnel    -->\n        <div class=\"col-12 col-lg-4 my-3 px-2\"\n          *rbacAllow=\"'Pages.Beta'\">\n          <ng-template [ngIf]=\"graph\">\n            <plotly-plot [data]=\"graph?.data\"\n              [layout]=\"graph?.layout\"></plotly-plot>\n          </ng-template>\n        </div>\n        <div class=\"col-12 col-lg-4 my-3 px-2\"\n          *rbacAllow=\"'Pages.Beta'\">\n          <ng-template [ngIf]=\"graph\">\n            <plotly-plot [data]=\"graph?.data\"\n              [layout]=\"graph?.layout\"></plotly-plot>\n          </ng-template>\n        </div>\n        <!-- Opportunities timeline          -->\n        <div class=\"col-12 col-lg-8 my-3 px-2\"\n          *rbacAllow=\"'Pages.Beta'\">\n          <ng-template [ngIf]=\"graph\">\n            <plotly-plot [data]=\"graph?.data\"\n              [layout]=\"graph?.layout\"></plotly-plot>\n          </ng-template>\n        </div>\n      </div>\n    </div>\n    <div *ngIf=\"!hasAccess && isLoaded\"\n      class=\"w-100\">\n      <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Insight.NoDataMessage' | transloco\"> </pw-no-data>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.CrmService }, { type: i0.Injector }] });
 class SmartCrmInsightComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmInsightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: SmartCrmInsightComponent, selector: "pw-smart-crm-insight", ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 mb-0\">\n    <h2>Insight</h2>\n    <p>\n      You'll find below some insights for your CRM. <br />\n      Please note that the graphs are refreshed every few hours.\n    </p>\n    <ul ngbNav\n      #nav=\"ngbNav\"\n      class=\"nav-tabs\">\n      <li [ngbNavItem]=\"1\">\n        <a ngbNavLink>Overview</a>\n        <ng-template ngbNavContent>\n          <pw-smart-crm-overview></pw-smart-crm-overview>\n        </ng-template>\n      </li>\n      <li [ngbNavItem]=\"2\">\n        <a ngbNavLink>Analysis</a>\n        <ng-template ngbNavContent>\n          <pw-coming-soon message=\"Analysis\"></pw-coming-soon>\n        </ng-template>\n      </li>\n    </ul>\n\n    <div [ngbNavOutlet]=\"nav\"></div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2$2.NgbNavContent, selector: "ng-template[ngbNavContent]" }, { kind: "directive", type: i2$2.NgbNav, selector: "[ngbNav]", inputs: ["activeId", "animation", "destroyOnHide", "orientation", "roles", "keyboard"], outputs: ["activeIdChange", "shown", "hidden", "navChange"], exportAs: ["ngbNav"] }, { kind: "directive", type: i2$2.NgbNavItem, selector: "[ngbNavItem]", inputs: ["destroyOnHide", "disabled", "domId", "ngbNavItem"], outputs: ["shown", "hidden"], exportAs: ["ngbNavItem"] }, { kind: "directive", type: i2$2.NgbNavItemRole, selector: "[ngbNavItem]:not(ng-container)" }, { kind: "directive", type: i2$2.NgbNavLink, selector: "a[ngbNavLink]" }, { kind: "directive", type: i2$2.NgbNavLinkBase, selector: "[ngbNavLink]" }, { kind: "component", type: i2$2.NgbNavOutlet, selector: "[ngbNavOutlet]", inputs: ["paneRole", "ngbNavOutlet"] }, { kind: "component", type: i11.ComingSoonComponent, selector: "pw-coming-soon", inputs: ["message"] }, { kind: "component", type: SmartCrmOverviewComponent, selector: "pw-smart-crm-overview" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmInsightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmInsightComponent, selector: "pw-smart-crm-insight", ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 mb-0\">\n    <h2>Insight</h2>\n    <p>\n      You'll find below some insights for your CRM. <br />\n      Please note that the graphs are refreshed every few hours.\n    </p>\n    <ul ngbNav\n      #nav=\"ngbNav\"\n      class=\"nav-tabs\">\n      <li [ngbNavItem]=\"1\">\n        <a ngbNavLink>Overview</a>\n        <ng-template ngbNavContent>\n          <pw-smart-crm-overview></pw-smart-crm-overview>\n        </ng-template>\n      </li>\n      <li [ngbNavItem]=\"2\">\n        <a ngbNavLink>Analysis</a>\n        <ng-template ngbNavContent>\n          <pw-coming-soon message=\"Analysis\"></pw-coming-soon>\n        </ng-template>\n      </li>\n    </ul>\n\n    <div [ngbNavOutlet]=\"nav\"></div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2$2.NgbNavContent, selector: "ng-template[ngbNavContent]" }, { kind: "directive", type: i2$2.NgbNav, selector: "[ngbNav]", inputs: ["activeId", "animation", "destroyOnHide", "orientation", "roles", "keyboard"], outputs: ["activeIdChange", "shown", "hidden", "navChange"], exportAs: ["ngbNav"] }, { kind: "directive", type: i2$2.NgbNavItem, selector: "[ngbNavItem]", inputs: ["destroyOnHide", "disabled", "domId", "ngbNavItem"], outputs: ["shown", "hidden"], exportAs: ["ngbNavItem"] }, { kind: "directive", type: i2$2.NgbNavItemRole, selector: "[ngbNavItem]:not(ng-container)" }, { kind: "directive", type: i2$2.NgbNavLink, selector: "a[ngbNavLink]" }, { kind: "directive", type: i2$2.NgbNavLinkBase, selector: "[ngbNavLink]" }, { kind: "component", type: i2$2.NgbNavOutlet, selector: "[ngbNavOutlet]", inputs: ["paneRole", "ngbNavOutlet"] }, { kind: "component", type: i11.ComingSoonComponent, selector: "pw-coming-soon", inputs: ["message"] }, { kind: "component", type: SmartCrmOverviewComponent, selector: "pw-smart-crm-overview" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmInsightComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmInsightComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pw-smart-crm-insight', template: "<div class=\"row\">\n  <div class=\"col-12 mb-0\">\n    <h2>Insight</h2>\n    <p>\n      You'll find below some insights for your CRM. <br />\n      Please note that the graphs are refreshed every few hours.\n    </p>\n    <ul ngbNav\n      #nav=\"ngbNav\"\n      class=\"nav-tabs\">\n      <li [ngbNavItem]=\"1\">\n        <a ngbNavLink>Overview</a>\n        <ng-template ngbNavContent>\n          <pw-smart-crm-overview></pw-smart-crm-overview>\n        </ng-template>\n      </li>\n      <li [ngbNavItem]=\"2\">\n        <a ngbNavLink>Analysis</a>\n        <ng-template ngbNavContent>\n          <pw-coming-soon message=\"Analysis\"></pw-coming-soon>\n        </ng-template>\n      </li>\n    </ul>\n\n    <div [ngbNavOutlet]=\"nav\"></div>\n  </div>\n</div>\n" }]
         }] });
@@ -3357,10 +3357,10 @@ class SmartCrmLeadsDetailsComponent extends AppBaseComponent {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmLeadsDetailsComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: SmartCrmLeadsDetailsComponent, selector: "pw-smart-crm-leads-details", usesInheritance: true, ngImport: i0, template: "<div class=\"me-auto col-xs-6\">\n  <a href=\"javascript:void(0)\" (click)=\"back()\" class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\"\n      aria-hidden=\"true\"></i></a>\n  <h3 class=\"m-subheader__title m-subheader__title--separator\">\n    <span>{{ 'Crm.LeadCrmLeads.' | transloco }}: {{ data?.first_name || data?.last_name ? data?.first_name ||\n      data?.last_name : ('Label.AddNew' | transloco) }}</span>\n  </h3>\n</div>\n<div class=\"p-2 mt-3\">\n  <form [formGroup]=\"form\" (ngSubmit)=\"onSave()\">\n    <div class=\"row\">\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.FirstName' | transloco\" name=\"first_name\"\n          [errorMsg]=\"'Crm.ContactMessage.FirstNameErrorMessage' | transloco\">\n          <input type=\"text\" class=\"form-control\" formControlName=\"first_name\" id=\"first_name\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['first_name'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.LastName' | transloco\" name=\"last_name\"\n          [errorMsg]=\"'Crm.ContactMessage.LastNameErrorMessage' | transloco\">\n          <input type=\"text\" class=\"form-control\" formControlName=\"last_name\" id=\"last_name\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['last_name'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.Headline' | transloco\" name=\"headline\"\n          [errorMsg]=\"'Crm.ContactMessage.HeadlineErrorMessage' | transloco\">\n          <input type=\"text\" class=\"form-control\" formControlName=\"headline\" id=\"headline\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['headline'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-4 col-lg-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.Tel' | transloco\" name=\"tel\"\n          [errorMsg]=\"'Crm.ContactMessage.TelErrorMessage' | transloco\">\n          <input type=\"text\" class=\"form-control\" formControlName=\"tel\" id=\"tel\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['tel'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-4\">\n        <div class=\"mb-3\">\n          <label>{{ 'Crm.ContactMessage.Email' | transloco }} <span class=\"text-danger\">*</span>\n            <span *ngIf=\"data && data.email_verified\" class=\"text-success fw-bold\">Verified</span>\n          </label>\n          <input type=\"text\" class=\"form-control\" formControlName=\"email\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['email'].errors }\" />\n          <pw-field-error-display [displayError]=\"(submitted || f['email'].touched) && f['email'].errors\" [errorMsg]=\"\n                            f['email']?.errors?.required\n                                ? 'Please enter email'\n                                : 'Please Enter valid email'\n                        \">\n          </pw-field-error-display>\n        </div>\n      </div>\n      <div class=\"col-12 col-sm-4\">\n        <div class=\"mb-3\">\n          <!-- <pw-input-container [label]=\"'Crm.ContactMessage.EmailVerfied' | transloco\" class=\"nowrap\"\n            <pw-input-containername=\"email_verified\"> -->\n          <label class=\"info-circle mb-2\">{{ 'Crm.ContactMessage.EmailVerified' | transloco }} <span\n              class=\"tooltiptext gradient-custom-branding\"> {{'Crm.ContactMessage.Tooltip.EmailVerified'| transloco\n              }} </span>\n          </label>\n          <pw-input-container class=\"nowrap\" name=\"email_verified\">\n            <ui-switch formControlName=\"email_verified\" name=\"email_verified\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['email_verified'].errors }\">\n            </ui-switch>\n          </pw-input-container>\n          <!-- </pw-input-container> -->\n        </div>\n      </div>\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.LinkedInUrl' | transloco\" name=\"linkedin_url\">\n          <input type=\"text\" class=\"form-control\" formControlName=\"linkedin_url\" id=\"linkedin_url\" />\n        </pw-input-container>\n      </div>\n      <div class=\"ui-fluid skills-modal col-sm-4\">\n        <label class=\"info-circle mb-2\">{{ 'Crm.ContactMessage.Account' | transloco }} <span\n            class=\"tooltiptext gradient-custom-branding\">After assigning a company the contact will be visible in the\n            Contacts tabs</span></label>\n        <p-autoComplete [suggestions]=\"filteredAccounts\" formControlName=\"crm_account_id\" dataKey=\"id\"\n          autocomplete=\"off\" field=\"name\" [dropdown]=\"true\" (completeMethod)=\"search($event)\" styleClass=\"w-100\"\n          [inputStyle]=\"\n                        submitted && f['crm_account_id'].errors\n                            ? { border: '1px solid #ff586b' }\n                            : { border: '1px solid gray' }\n                    \" placeholder=\"Search accounts\" [multiple]=\"false\">\n        </p-autoComplete>\n      </div>\n      <div class=\"col-12 col-sm-4\">\n        <label class=\"info-circle mb-2\">{{ 'Crm.CrmLeads.Source' | transloco }} <span class=\"text-danger\">*</span><span\n            class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.CrmLeads.Tooltip.Source' | transloco }}</span>\n        </label>\n        <pw-input-container name=\"crm_source_id\" errorMsg=\"source is required\" *ngIf=\"source$ | async as source\">\n          <select class=\"form-select\" formControlName=\"crm_source_id\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['crm_source_id'].errors }\">\n            <option *ngFor=\"let option of source['crm_sources']\" [value]=\"option.id\"> {{ option.name }} </option>\n          </select>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.DateOfBirth' | transloco\" name=\"dob\">\n          <div class=\"input-group\">\n            <input class=\"form-control\" placeholder=\"yyyy-mm-dd\" formControlName=\"dob\" ngbDatepicker\n              #d=\"ngbDatepicker\" />\n            <div class=\"input-group-append\">\n              <button class=\"btn btn-primary\" (click)=\"d.toggle()\" 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      <div class=\"col-12 col-sm-4\">\n        <label class=\"info-circle mb-2\">{{ 'Crm.ContactMessage.Potential' | transloco }} <span\n            class=\"tooltiptext gradient-custom-branding\"> {{ 'Crm.ContactMessage.Tooltip.Potential' | transloco\n            }}</span>\n        </label>\n        <select formControlName=\"potential\" class=\"form-control form-select\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['potential'].errors }\">\n          <option *ngFor=\"let option of potentials\" [value]=\"option\">{{ option }}</option>\n        </select>\n      </div>\n      <div class=\"col-12 col-sm-4\">\n        <label class=\"info-circle mb-2\">{{ 'Crm.ContactMessage.Labels' | transloco }} <span\n            class=\"tooltiptext gradient-custom-branding\"> {{ 'Crm.ContactMessage.Tooltip.Labels' | transloco }}\n          </span>\n        </label>\n        <p-multiSelect [options]=\"labels\" formControlName=\"labels\" appendTo=\"body\"></p-multiSelect>\n      </div>\n      <div class=\"col-12 text-end mt-3\">\n        <button type=\"button\" class=\"btn btn-outline-default me-2\" (click)=\"back()\"> {{ 'Button.Cancel' | transloco }}\n        </button>\n        <button type=\"submit\" class=\"btn btn-primary\" [disabled]=\"form.invalid\"> {{ 'Button.Submit' | transloco }}\n        </button>\n      </div>\n    </div>\n  </form>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4$1.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "component", type: i6.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "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.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"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: i11.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText"] }, { kind: "component", type: i11.FieldErrorDisplayComponent, selector: "pw-field-error-display", inputs: ["errorMsg", "displayError"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmLeadsDetailsComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmLeadsDetailsComponent, selector: "pw-smart-crm-leads-details", usesInheritance: true, ngImport: i0, template: "<div class=\"me-auto col-xs-6\">\n  <a href=\"javascript:void(0)\" (click)=\"back()\" class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\"\n      aria-hidden=\"true\"></i></a>\n  <h3 class=\"m-subheader__title m-subheader__title--separator\">\n    <span>{{ 'Crm.LeadCrmLeads.' | transloco }}: {{ data?.first_name || data?.last_name ? data?.first_name ||\n      data?.last_name : ('Label.AddNew' | transloco) }}</span>\n  </h3>\n</div>\n<div class=\"p-2 mt-3\">\n  <form [formGroup]=\"form\" (ngSubmit)=\"onSave()\">\n    <div class=\"row\">\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.FirstName' | transloco\" name=\"first_name\"\n          [errorMsg]=\"'Crm.ContactMessage.FirstNameErrorMessage' | transloco\">\n          <input type=\"text\" class=\"form-control\" formControlName=\"first_name\" id=\"first_name\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['first_name'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.LastName' | transloco\" name=\"last_name\"\n          [errorMsg]=\"'Crm.ContactMessage.LastNameErrorMessage' | transloco\">\n          <input type=\"text\" class=\"form-control\" formControlName=\"last_name\" id=\"last_name\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['last_name'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.Headline' | transloco\" name=\"headline\"\n          [errorMsg]=\"'Crm.ContactMessage.HeadlineErrorMessage' | transloco\">\n          <input type=\"text\" class=\"form-control\" formControlName=\"headline\" id=\"headline\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['headline'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-4 col-lg-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.Tel' | transloco\" name=\"tel\"\n          [errorMsg]=\"'Crm.ContactMessage.TelErrorMessage' | transloco\">\n          <input type=\"text\" class=\"form-control\" formControlName=\"tel\" id=\"tel\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['tel'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-4\">\n        <div class=\"mb-3\">\n          <label>{{ 'Crm.ContactMessage.Email' | transloco }} <span class=\"text-danger\">*</span>\n            <span *ngIf=\"data && data.email_verified\" class=\"text-success fw-bold\">Verified</span>\n          </label>\n          <input type=\"text\" class=\"form-control\" formControlName=\"email\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['email'].errors }\" />\n          <pw-field-error-display [displayError]=\"(submitted || f['email'].touched) && f['email'].errors\" [errorMsg]=\"\n                            f['email']?.errors?.required\n                                ? 'Please enter email'\n                                : 'Please Enter valid email'\n                        \">\n          </pw-field-error-display>\n        </div>\n      </div>\n      <div class=\"col-12 col-sm-4\">\n        <div class=\"mb-3\">\n          <!-- <pw-input-container [label]=\"'Crm.ContactMessage.EmailVerfied' | transloco\" class=\"nowrap\"\n            <pw-input-containername=\"email_verified\"> -->\n          <label class=\"info-circle mb-2\">{{ 'Crm.ContactMessage.EmailVerified' | transloco }} <span\n              class=\"tooltiptext gradient-custom-branding\"> {{'Crm.ContactMessage.Tooltip.EmailVerified'| transloco\n              }} </span>\n          </label>\n          <pw-input-container class=\"nowrap\" name=\"email_verified\">\n            <ui-switch formControlName=\"email_verified\" name=\"email_verified\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['email_verified'].errors }\">\n            </ui-switch>\n          </pw-input-container>\n          <!-- </pw-input-container> -->\n        </div>\n      </div>\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.LinkedInUrl' | transloco\" name=\"linkedin_url\">\n          <input type=\"text\" class=\"form-control\" formControlName=\"linkedin_url\" id=\"linkedin_url\" />\n        </pw-input-container>\n      </div>\n      <div class=\"ui-fluid skills-modal col-sm-4\">\n        <label class=\"info-circle mb-2\">{{ 'Crm.ContactMessage.Account' | transloco }} <span\n            class=\"tooltiptext gradient-custom-branding\">After assigning a company the contact will be visible in the\n            Contacts tabs</span></label>\n        <p-autoComplete [suggestions]=\"filteredAccounts\" formControlName=\"crm_account_id\" dataKey=\"id\"\n          autocomplete=\"off\" field=\"name\" [dropdown]=\"true\" (completeMethod)=\"search($event)\" styleClass=\"w-100\"\n          [inputStyle]=\"\n                        submitted && f['crm_account_id'].errors\n                            ? { border: '1px solid #ff586b' }\n                            : { border: '1px solid gray' }\n                    \" placeholder=\"Search accounts\" [multiple]=\"false\">\n        </p-autoComplete>\n      </div>\n      <div class=\"col-12 col-sm-4\">\n        <label class=\"info-circle mb-2\">{{ 'Crm.CrmLeads.Source' | transloco }} <span class=\"text-danger\">*</span><span\n            class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.CrmLeads.Tooltip.Source' | transloco }}</span>\n        </label>\n        <pw-input-container name=\"crm_source_id\" errorMsg=\"source is required\" *ngIf=\"source$ | async as source\">\n          <select class=\"form-select\" formControlName=\"crm_source_id\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['crm_source_id'].errors }\">\n            <option *ngFor=\"let option of source['crm_sources']\" [value]=\"option.id\"> {{ option.name }} </option>\n          </select>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.DateOfBirth' | transloco\" name=\"dob\">\n          <div class=\"input-group\">\n            <input class=\"form-control\" placeholder=\"yyyy-mm-dd\" formControlName=\"dob\" ngbDatepicker\n              #d=\"ngbDatepicker\" />\n            <div class=\"input-group-append\">\n              <button class=\"btn btn-primary\" (click)=\"d.toggle()\" 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      <div class=\"col-12 col-sm-4\">\n        <label class=\"info-circle mb-2\">{{ 'Crm.ContactMessage.Potential' | transloco }} <span\n            class=\"tooltiptext gradient-custom-branding\"> {{ 'Crm.ContactMessage.Tooltip.Potential' | transloco\n            }}</span>\n        </label>\n        <select formControlName=\"potential\" class=\"form-control form-select\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['potential'].errors }\">\n          <option *ngFor=\"let option of potentials\" [value]=\"option\">{{ option }}</option>\n        </select>\n      </div>\n      <div class=\"col-12 col-sm-4\">\n        <label class=\"info-circle mb-2\">{{ 'Crm.ContactMessage.Labels' | transloco }} <span\n            class=\"tooltiptext gradient-custom-branding\"> {{ 'Crm.ContactMessage.Tooltip.Labels' | transloco }}\n          </span>\n        </label>\n        <p-multiSelect [options]=\"labels\" formControlName=\"labels\" appendTo=\"body\"></p-multiSelect>\n      </div>\n      <div class=\"col-12 text-end mt-3\">\n        <button type=\"button\" class=\"btn btn-outline-default me-2\" (click)=\"back()\"> {{ 'Button.Cancel' | transloco }}\n        </button>\n        <button type=\"submit\" class=\"btn btn-primary\" [disabled]=\"form.invalid\"> {{ 'Button.Submit' | transloco }}\n        </button>\n      </div>\n    </div>\n  </form>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4$1.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "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.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.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText"] }, { kind: "component", type: i11.FieldErrorDisplayComponent, selector: "pw-field-error-display", inputs: ["errorMsg", "displayError"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmLeadsDetailsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmLeadsDetailsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pw-smart-crm-leads-details', template: "<div class=\"me-auto col-xs-6\">\n  <a href=\"javascript:void(0)\" (click)=\"back()\" class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\"\n      aria-hidden=\"true\"></i></a>\n  <h3 class=\"m-subheader__title m-subheader__title--separator\">\n    <span>{{ 'Crm.LeadCrmLeads.' | transloco }}: {{ data?.first_name || data?.last_name ? data?.first_name ||\n      data?.last_name : ('Label.AddNew' | transloco) }}</span>\n  </h3>\n</div>\n<div class=\"p-2 mt-3\">\n  <form [formGroup]=\"form\" (ngSubmit)=\"onSave()\">\n    <div class=\"row\">\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.FirstName' | transloco\" name=\"first_name\"\n          [errorMsg]=\"'Crm.ContactMessage.FirstNameErrorMessage' | transloco\">\n          <input type=\"text\" class=\"form-control\" formControlName=\"first_name\" id=\"first_name\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['first_name'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.LastName' | transloco\" name=\"last_name\"\n          [errorMsg]=\"'Crm.ContactMessage.LastNameErrorMessage' | transloco\">\n          <input type=\"text\" class=\"form-control\" formControlName=\"last_name\" id=\"last_name\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['last_name'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.Headline' | transloco\" name=\"headline\"\n          [errorMsg]=\"'Crm.ContactMessage.HeadlineErrorMessage' | transloco\">\n          <input type=\"text\" class=\"form-control\" formControlName=\"headline\" id=\"headline\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['headline'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-4 col-lg-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.Tel' | transloco\" name=\"tel\"\n          [errorMsg]=\"'Crm.ContactMessage.TelErrorMessage' | transloco\">\n          <input type=\"text\" class=\"form-control\" formControlName=\"tel\" id=\"tel\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['tel'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-4\">\n        <div class=\"mb-3\">\n          <label>{{ 'Crm.ContactMessage.Email' | transloco }} <span class=\"text-danger\">*</span>\n            <span *ngIf=\"data && data.email_verified\" class=\"text-success fw-bold\">Verified</span>\n          </label>\n          <input type=\"text\" class=\"form-control\" formControlName=\"email\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['email'].errors }\" />\n          <pw-field-error-display [displayError]=\"(submitted || f['email'].touched) && f['email'].errors\" [errorMsg]=\"\n                            f['email']?.errors?.required\n                                ? 'Please enter email'\n                                : 'Please Enter valid email'\n                        \">\n          </pw-field-error-display>\n        </div>\n      </div>\n      <div class=\"col-12 col-sm-4\">\n        <div class=\"mb-3\">\n          <!-- <pw-input-container [label]=\"'Crm.ContactMessage.EmailVerfied' | transloco\" class=\"nowrap\"\n            <pw-input-containername=\"email_verified\"> -->\n          <label class=\"info-circle mb-2\">{{ 'Crm.ContactMessage.EmailVerified' | transloco }} <span\n              class=\"tooltiptext gradient-custom-branding\"> {{'Crm.ContactMessage.Tooltip.EmailVerified'| transloco\n              }} </span>\n          </label>\n          <pw-input-container class=\"nowrap\" name=\"email_verified\">\n            <ui-switch formControlName=\"email_verified\" name=\"email_verified\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['email_verified'].errors }\">\n            </ui-switch>\n          </pw-input-container>\n          <!-- </pw-input-container> -->\n        </div>\n      </div>\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.LinkedInUrl' | transloco\" name=\"linkedin_url\">\n          <input type=\"text\" class=\"form-control\" formControlName=\"linkedin_url\" id=\"linkedin_url\" />\n        </pw-input-container>\n      </div>\n      <div class=\"ui-fluid skills-modal col-sm-4\">\n        <label class=\"info-circle mb-2\">{{ 'Crm.ContactMessage.Account' | transloco }} <span\n            class=\"tooltiptext gradient-custom-branding\">After assigning a company the contact will be visible in the\n            Contacts tabs</span></label>\n        <p-autoComplete [suggestions]=\"filteredAccounts\" formControlName=\"crm_account_id\" dataKey=\"id\"\n          autocomplete=\"off\" field=\"name\" [dropdown]=\"true\" (completeMethod)=\"search($event)\" styleClass=\"w-100\"\n          [inputStyle]=\"\n                        submitted && f['crm_account_id'].errors\n                            ? { border: '1px solid #ff586b' }\n                            : { border: '1px solid gray' }\n                    \" placeholder=\"Search accounts\" [multiple]=\"false\">\n        </p-autoComplete>\n      </div>\n      <div class=\"col-12 col-sm-4\">\n        <label class=\"info-circle mb-2\">{{ 'Crm.CrmLeads.Source' | transloco }} <span class=\"text-danger\">*</span><span\n            class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.CrmLeads.Tooltip.Source' | transloco }}</span>\n        </label>\n        <pw-input-container name=\"crm_source_id\" errorMsg=\"source is required\" *ngIf=\"source$ | async as source\">\n          <select class=\"form-select\" formControlName=\"crm_source_id\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['crm_source_id'].errors }\">\n            <option *ngFor=\"let option of source['crm_sources']\" [value]=\"option.id\"> {{ option.name }} </option>\n          </select>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.DateOfBirth' | transloco\" name=\"dob\">\n          <div class=\"input-group\">\n            <input class=\"form-control\" placeholder=\"yyyy-mm-dd\" formControlName=\"dob\" ngbDatepicker\n              #d=\"ngbDatepicker\" />\n            <div class=\"input-group-append\">\n              <button class=\"btn btn-primary\" (click)=\"d.toggle()\" 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      <div class=\"col-12 col-sm-4\">\n        <label class=\"info-circle mb-2\">{{ 'Crm.ContactMessage.Potential' | transloco }} <span\n            class=\"tooltiptext gradient-custom-branding\"> {{ 'Crm.ContactMessage.Tooltip.Potential' | transloco\n            }}</span>\n        </label>\n        <select formControlName=\"potential\" class=\"form-control form-select\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['potential'].errors }\">\n          <option *ngFor=\"let option of potentials\" [value]=\"option\">{{ option }}</option>\n        </select>\n      </div>\n      <div class=\"col-12 col-sm-4\">\n        <label class=\"info-circle mb-2\">{{ 'Crm.ContactMessage.Labels' | transloco }} <span\n            class=\"tooltiptext gradient-custom-branding\"> {{ 'Crm.ContactMessage.Tooltip.Labels' | transloco }}\n          </span>\n        </label>\n        <p-multiSelect [options]=\"labels\" formControlName=\"labels\" appendTo=\"body\"></p-multiSelect>\n      </div>\n      <div class=\"col-12 text-end mt-3\">\n        <button type=\"button\" class=\"btn btn-outline-default me-2\" (click)=\"back()\"> {{ 'Button.Cancel' | transloco }}\n        </button>\n        <button type=\"submit\" class=\"btn btn-primary\" [disabled]=\"form.invalid\"> {{ 'Button.Submit' | transloco }}\n        </button>\n      </div>\n    </div>\n  </form>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1.CrmService }] });
@@ -3470,10 +3470,10 @@ class SmartCrmLeadsComponent extends AppBaseComponent {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmLeadsComponent, deps: [{ token: i1.CrmService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: SmartCrmLeadsComponent, selector: "pw-smart-crm-leads", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 mb-3\">\n    <h2>Leads</h2>\n    <p>\n      In this section you'll find a list of prospects we found for you - based on your domain\n      of activity - and we think you should reach out to.\n    </p>\n    <a class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"add-leads\"\n      [routerLink]=\"['/' + subscription?.slug + routers.leadsDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.CrmLeads.AddLead' | transloco }}\n    </a>\n  </div>\n</div>\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n\n<div class=\"primeng-datatable-container table-responsive\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #dt\n    [value]=\"data.crm_leads\"\n    [paginator]=\"data.object_count !== 0\"\n    [lazy]=\"true\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    filterDelay=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n    <ng-template pTemplate=\"caption\">\n      <div class=\"d-flex\">\n        <div class=\"col-sm-3\">\n          <p-multiSelect placeholder=\"Select Source\"\n            [options]=\"crmSources\"\n            [filter]=\"false\"\n            (onChange)=\"onSourceChange($event)\"\n            [showHeader]=\"true\"\n            [showToggleAll]=\"true\"\n            appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"text-end ms-auto\">\n          <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n          <input type=\"text\"\n            [(ngModel)]=\"searchText\"\n            pInputText\n            size=\"50\"\n            placeholder=\"Search leads...\"\n            (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n            class=\"mw-90\" />\n        </div>\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"first_name\">\n          {{ 'Crm.ContactMessage.Name' | transloco }}\n          <p-sortIcon field=\"first_name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"email\">\n          {{ 'Crm.CrmLeads.Email' | transloco }}\n          <p-sortIcon field=\"email\"></p-sortIcon>\n        </th>\n        <th scope=\"true\">\n          {{ 'Crm.CrmLeads.EmailVerified' | transloco }}\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"created_at\">\n          {{ 'Crm.CrmLeads.CreatedAt' | transloco }}\n          <p-sortIcon field=\"created_at\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"crm_source_id\">\n          {{ 'Crm.CrmLeads.Source' | transloco }}\n          <p-sortIcon field=\"crm_source_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-lead>\n      <tr>\n        <td data-head=\"Name\"\n          class=\"contactname\">\n          <a [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, lead?.id]\">\n            {{\n                            lead?.first_name === null || lead.last_name === null\n                                ? 'N/A'\n                                : (lead?.first_name + ' ' + lead.last_name | textTruncate: 20)\n                        }}\n          </a>\n        </td>\n        <td data-head=\"Email\">\n          <a href=\"mailto:{{ lead?.email }}\">{{ lead?.email }}</a>\n          <span *ngIf=\"lead?.enquiry\"\n            class=\"ms-2\"\n            [pTooltip]=\"lead?.enquiry\"\n            tooltipPosition=\"top\">\n            <i class=\"fas fa-info-circle\"></i>\n          </span>\n        </td>\n        <td data-head=\"Email Verified\">\n          <span [appDynamicBadge]=\"{\n                            itemsArray: [true, false],\n                            item: lead?.email_verified\n                        }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ lead?.email_verified ? 'true' : 'false' }}</span>\n          <span class=\"ms-2 cursor-pointer\"\n            [pTooltip]=\"'Crm.CrmLeads.Tooltip.NewsLetterUnsubscribed' | transloco\"\n            tooltipPosition=\"top\"\n            *ngIf=\"!lead?.newsletter_subscribed\"><i class=\"fas fa-exclamation-triangle text-danger\"></i></span>\n        </td>\n        <td data-head=\"Created At\">\n          {{ lead?.created_at | dateFormat }}\n        </td>\n        <td>\n          <span class=\"badge\"\n            [appDynamicBadge]=\"{ itemsArray: allSource, item: lead?.crm_source?.name }\"\n            color=\"default\">{{ lead?.crm_source?.name }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline\">\n            <li ngbTooltip=\"Show\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"[\n                                '/' + subscription?.slug + routers.contactInfo,\n                                lead?.id\n                            ]\">\n              <i class=\"fa fa-eye see-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li *ngIf=\"\n                                hasAccess ||\n                                lead?.owner_id === userId ||\n                                lead?.crm_account?.owner_id === userId\n                            \"\n              ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"[\n                                '/' + subscription?.slug + routers.leadsDetails,\n                                lead?.id\n                            ]\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li *ngIf=\"\n                                hasAccess ||\n                                lead?.owner_id === userId ||\n                                lead?.crm_account?.owner_id === userId\n                            \"\n              ngbTooltip=\"Delete\"\n              class=\"me-2 me-sm-3\">\n              <i\n                                class=\"fa fa-trash delete-icon\"\n                                (click)=\"onDelete(lead.id)\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </li>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n<div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n</div>\n  <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CrmLeads.NoCrmLeadMessage' | transloco\"> </pw-no-data>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]" }, { kind: "directive", type: i5.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i6.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i8.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i10$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i9$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i11.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i14.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i14.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmLeadsComponent, deps: [{ token: i1.CrmService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmLeadsComponent, selector: "pw-smart-crm-leads", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 mb-3\">\n    <h2>Leads</h2>\n    <p>\n      In this section you'll find a list of prospects we found for you - based on your domain\n      of activity - and we think you should reach out to.\n    </p>\n    <a class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"add-leads\"\n      [routerLink]=\"['/' + subscription?.slug + routers.leadsDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.CrmLeads.AddLead' | transloco }}\n    </a>\n  </div>\n</div>\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n\n<div class=\"primeng-datatable-container table-responsive\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #dt\n    [value]=\"data.crm_leads\"\n    [paginator]=\"data.object_count !== 0\"\n    [lazy]=\"true\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    filterDelay=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n    <ng-template pTemplate=\"caption\">\n      <div class=\"d-flex\">\n        <div class=\"col-sm-3\">\n          <p-multiSelect placeholder=\"Select Source\"\n            [options]=\"crmSources\"\n            [filter]=\"false\"\n            (onChange)=\"onSourceChange($event)\"\n            [showHeader]=\"true\"\n            [showToggleAll]=\"true\"\n            appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"text-end ms-auto\">\n          <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n          <input type=\"text\"\n            [(ngModel)]=\"searchText\"\n            pInputText\n            size=\"50\"\n            placeholder=\"Search leads...\"\n            (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n            class=\"mw-90\" />\n        </div>\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"first_name\">\n          {{ 'Crm.ContactMessage.Name' | transloco }}\n          <p-sortIcon field=\"first_name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"email\">\n          {{ 'Crm.CrmLeads.Email' | transloco }}\n          <p-sortIcon field=\"email\"></p-sortIcon>\n        </th>\n        <th scope=\"true\">\n          {{ 'Crm.CrmLeads.EmailVerified' | transloco }}\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"created_at\">\n          {{ 'Crm.CrmLeads.CreatedAt' | transloco }}\n          <p-sortIcon field=\"created_at\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"crm_source_id\">\n          {{ 'Crm.CrmLeads.Source' | transloco }}\n          <p-sortIcon field=\"crm_source_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-lead>\n      <tr>\n        <td data-head=\"Name\"\n          class=\"contactname\">\n          <a [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, lead?.id]\">\n            {{\n                            lead?.first_name === null || lead.last_name === null\n                                ? 'N/A'\n                                : (lead?.first_name + ' ' + lead.last_name | textTruncate: 20)\n                        }}\n          </a>\n        </td>\n        <td data-head=\"Email\">\n          <a href=\"mailto:{{ lead?.email }}\">{{ lead?.email }}</a>\n          <span *ngIf=\"lead?.enquiry\"\n            class=\"ms-2\"\n            [pTooltip]=\"lead?.enquiry\"\n            tooltipPosition=\"top\">\n            <i class=\"fas fa-info-circle\"></i>\n          </span>\n        </td>\n        <td data-head=\"Email Verified\">\n          <span [appDynamicBadge]=\"{\n                            itemsArray: [true, false],\n                            item: lead?.email_verified\n                        }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ lead?.email_verified ? 'true' : 'false' }}</span>\n          <span class=\"ms-2 cursor-pointer\"\n            [pTooltip]=\"'Crm.CrmLeads.Tooltip.NewsLetterUnsubscribed' | transloco\"\n            tooltipPosition=\"top\"\n            *ngIf=\"!lead?.newsletter_subscribed\"><i class=\"fas fa-exclamation-triangle text-danger\"></i></span>\n        </td>\n        <td data-head=\"Created At\">\n          {{ lead?.created_at | dateFormat }}\n        </td>\n        <td>\n          <span class=\"badge\"\n            [appDynamicBadge]=\"{ itemsArray: allSource, item: lead?.crm_source?.name }\"\n            color=\"default\">{{ lead?.crm_source?.name }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline\">\n            <li ngbTooltip=\"Show\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"[\n                                '/' + subscription?.slug + routers.contactInfo,\n                                lead?.id\n                            ]\">\n              <i class=\"fa fa-eye see-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li *ngIf=\"\n                                hasAccess ||\n                                lead?.owner_id === userId ||\n                                lead?.crm_account?.owner_id === userId\n                            \"\n              ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"[\n                                '/' + subscription?.slug + routers.leadsDetails,\n                                lead?.id\n                            ]\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li *ngIf=\"\n                                hasAccess ||\n                                lead?.owner_id === userId ||\n                                lead?.crm_account?.owner_id === userId\n                            \"\n              ngbTooltip=\"Delete\"\n              class=\"me-2 me-sm-3\">\n              <i\n                                class=\"fa fa-trash delete-icon\"\n                                (click)=\"onDelete(lead.id)\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </li>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n<div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n</div>\n  <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CrmLeads.NoCrmLeadMessage' | transloco\"> </pw-no-data>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i5.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i6.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i8.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i10$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i9$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i11.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i14.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i14.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmLeadsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmLeadsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pw-smart-crm-leads', template: "<div class=\"row\">\n  <div class=\"col-12 mb-3\">\n    <h2>Leads</h2>\n    <p>\n      In this section you'll find a list of prospects we found for you - based on your domain\n      of activity - and we think you should reach out to.\n    </p>\n    <a class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"add-leads\"\n      [routerLink]=\"['/' + subscription?.slug + routers.leadsDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.CrmLeads.AddLead' | transloco }}\n    </a>\n  </div>\n</div>\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n\n<div class=\"primeng-datatable-container table-responsive\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #dt\n    [value]=\"data.crm_leads\"\n    [paginator]=\"data.object_count !== 0\"\n    [lazy]=\"true\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    filterDelay=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n    <ng-template pTemplate=\"caption\">\n      <div class=\"d-flex\">\n        <div class=\"col-sm-3\">\n          <p-multiSelect placeholder=\"Select Source\"\n            [options]=\"crmSources\"\n            [filter]=\"false\"\n            (onChange)=\"onSourceChange($event)\"\n            [showHeader]=\"true\"\n            [showToggleAll]=\"true\"\n            appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"text-end ms-auto\">\n          <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n          <input type=\"text\"\n            [(ngModel)]=\"searchText\"\n            pInputText\n            size=\"50\"\n            placeholder=\"Search leads...\"\n            (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n            class=\"mw-90\" />\n        </div>\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"first_name\">\n          {{ 'Crm.ContactMessage.Name' | transloco }}\n          <p-sortIcon field=\"first_name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"email\">\n          {{ 'Crm.CrmLeads.Email' | transloco }}\n          <p-sortIcon field=\"email\"></p-sortIcon>\n        </th>\n        <th scope=\"true\">\n          {{ 'Crm.CrmLeads.EmailVerified' | transloco }}\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"created_at\">\n          {{ 'Crm.CrmLeads.CreatedAt' | transloco }}\n          <p-sortIcon field=\"created_at\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"crm_source_id\">\n          {{ 'Crm.CrmLeads.Source' | transloco }}\n          <p-sortIcon field=\"crm_source_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-lead>\n      <tr>\n        <td data-head=\"Name\"\n          class=\"contactname\">\n          <a [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, lead?.id]\">\n            {{\n                            lead?.first_name === null || lead.last_name === null\n                                ? 'N/A'\n                                : (lead?.first_name + ' ' + lead.last_name | textTruncate: 20)\n                        }}\n          </a>\n        </td>\n        <td data-head=\"Email\">\n          <a href=\"mailto:{{ lead?.email }}\">{{ lead?.email }}</a>\n          <span *ngIf=\"lead?.enquiry\"\n            class=\"ms-2\"\n            [pTooltip]=\"lead?.enquiry\"\n            tooltipPosition=\"top\">\n            <i class=\"fas fa-info-circle\"></i>\n          </span>\n        </td>\n        <td data-head=\"Email Verified\">\n          <span [appDynamicBadge]=\"{\n                            itemsArray: [true, false],\n                            item: lead?.email_verified\n                        }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ lead?.email_verified ? 'true' : 'false' }}</span>\n          <span class=\"ms-2 cursor-pointer\"\n            [pTooltip]=\"'Crm.CrmLeads.Tooltip.NewsLetterUnsubscribed' | transloco\"\n            tooltipPosition=\"top\"\n            *ngIf=\"!lead?.newsletter_subscribed\"><i class=\"fas fa-exclamation-triangle text-danger\"></i></span>\n        </td>\n        <td data-head=\"Created At\">\n          {{ lead?.created_at | dateFormat }}\n        </td>\n        <td>\n          <span class=\"badge\"\n            [appDynamicBadge]=\"{ itemsArray: allSource, item: lead?.crm_source?.name }\"\n            color=\"default\">{{ lead?.crm_source?.name }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline\">\n            <li ngbTooltip=\"Show\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"[\n                                '/' + subscription?.slug + routers.contactInfo,\n                                lead?.id\n                            ]\">\n              <i class=\"fa fa-eye see-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li *ngIf=\"\n                                hasAccess ||\n                                lead?.owner_id === userId ||\n                                lead?.crm_account?.owner_id === userId\n                            \"\n              ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"[\n                                '/' + subscription?.slug + routers.leadsDetails,\n                                lead?.id\n                            ]\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li *ngIf=\"\n                                hasAccess ||\n                                lead?.owner_id === userId ||\n                                lead?.crm_account?.owner_id === userId\n                            \"\n              ngbTooltip=\"Delete\"\n              class=\"me-2 me-sm-3\">\n              <i\n                                class=\"fa fa-trash delete-icon\"\n                                (click)=\"onDelete(lead.id)\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </li>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n<div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n</div>\n  <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CrmLeads.NoCrmLeadMessage' | transloco\"> </pw-no-data>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.CrmService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }] });
@@ -3531,10 +3531,10 @@ class SmartCrmMarketingUsersListComponent extends AppBaseComponent {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmMarketingUsersListComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: SmartCrmMarketingUsersListComponent, selector: "pw-smart-crm-marketing-users-list", usesInheritance: true, ngImport: i0, template: "<div class=\"me-auto col-xs-6\">\n  <p>This is a summary of the contacts that received your marketing email.</p>\n</div>\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container mt-3 table-responsive\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #dt\n    [value]=\"data.newsletter_contacts\"\n    [paginator]=\"data.object_count !== 0\"\n    [lazy]=\"true\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    filterDelay=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n    <ng-template pTemplate=\"caption\">\n      <div class=\"text-end\">\n        <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n        <input type=\"text\"\n          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search contact...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"first_name\">\n          {{ 'Crm.MarketingInsight.Name' | transloco }}\n          <p-sortIcon field=\"first_name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"email\">\n          {{ 'Crm.MarketingInsight.Email' | transloco }}\n          <p-sortIcon field=\"email\"></p-sortIcon>\n        </th>\n        <th scope=\"true\">\n          {{ 'Crm.MarketingInsight.SentAt' | transloco }}\n        </th>\n        <th scope=\"true\">\n          {{ 'Crm.MarketingInsight.LastOpened' | transloco }}\n        </th>\n        <th scope=\"true\">\n          {{ 'Crm.MarketingInsight.OpenCount' | transloco }}\n        </th>\n        <th scope=\"true\">\n          {{ 'Crm.MarketingInsight.ClickedAt' | transloco }}\n        </th>\n        <th scope=\"true\">\n          {{ 'Crm.MarketingInsight.ClickedCount' | transloco }}\n        </th>\n        <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-user>\n      <tr>\n        <td data-head=\"Name\">\n          <a [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, user.id]\">{{\n                        user | ifNameNullShowEmail\n                    }}</a>\n        </td>\n        <td data-head=\"Email\">\n          <a href=\"mailto:{{ user?.email }}\">{{ user?.email }}</a>\n        </td>\n        <td data-head=\"Sent At\">{{ user?.message_insight?.sent_at | dateFormat }}</td>\n        <td data-head=\"Last Opened\">{{ user?.message_insight?.opened_at }}</td>\n        <td data-head=\"Open Count\">{{ user?.message_insight?.open_count }}</td>\n        <td data-head=\"Clicked At\">{{ user?.message_insight?.clicked_at }}</td>\n        <td data-head=\"Clicked Count\">{{ user?.message_insight?.click_count }}</td>\n        <td data-head=\"Actions\"></td>\n      </tr>\n    </ng-template>\n  </p-table>\n<div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n</div>\n  <span class=\"total-records-count\"  *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.MarketingInsight.NoUserListMessage' | transloco\"> </pw-no-data>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]" }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i8.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i11.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i14.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i14.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmMarketingUsersListComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmMarketingUsersListComponent, selector: "pw-smart-crm-marketing-users-list", usesInheritance: true, ngImport: i0, template: "<div class=\"me-auto col-xs-6\">\n  <p>This is a summary of the contacts that received your marketing email.</p>\n</div>\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container mt-3 table-responsive\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #dt\n    [value]=\"data.newsletter_contacts\"\n    [paginator]=\"data.object_count !== 0\"\n    [lazy]=\"true\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    filterDelay=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n    <ng-template pTemplate=\"caption\">\n      <div class=\"text-end\">\n        <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n        <input type=\"text\"\n          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search contact...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"first_name\">\n          {{ 'Crm.MarketingInsight.Name' | transloco }}\n          <p-sortIcon field=\"first_name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"email\">\n          {{ 'Crm.MarketingInsight.Email' | transloco }}\n          <p-sortIcon field=\"email\"></p-sortIcon>\n        </th>\n        <th scope=\"true\">\n          {{ 'Crm.MarketingInsight.SentAt' | transloco }}\n        </th>\n        <th scope=\"true\">\n          {{ 'Crm.MarketingInsight.LastOpened' | transloco }}\n        </th>\n        <th scope=\"true\">\n          {{ 'Crm.MarketingInsight.OpenCount' | transloco }}\n        </th>\n        <th scope=\"true\">\n          {{ 'Crm.MarketingInsight.ClickedAt' | transloco }}\n        </th>\n        <th scope=\"true\">\n          {{ 'Crm.MarketingInsight.ClickedCount' | transloco }}\n        </th>\n        <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-user>\n      <tr>\n        <td data-head=\"Name\">\n          <a [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, user.id]\">{{\n                        user | ifNameNullShowEmail\n                    }}</a>\n        </td>\n        <td data-head=\"Email\">\n          <a href=\"mailto:{{ user?.email }}\">{{ user?.email }}</a>\n        </td>\n        <td data-head=\"Sent At\">{{ user?.message_insight?.sent_at | dateFormat }}</td>\n        <td data-head=\"Last Opened\">{{ user?.message_insight?.opened_at }}</td>\n        <td data-head=\"Open Count\">{{ user?.message_insight?.open_count }}</td>\n        <td data-head=\"Clicked At\">{{ user?.message_insight?.clicked_at }}</td>\n        <td data-head=\"Clicked Count\">{{ user?.message_insight?.click_count }}</td>\n        <td data-head=\"Actions\"></td>\n      </tr>\n    </ng-template>\n  </p-table>\n<div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n</div>\n  <span class=\"total-records-count\"  *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.MarketingInsight.NoUserListMessage' | transloco\"> </pw-no-data>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i8.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i11.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i14.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i14.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmMarketingUsersListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmMarketingUsersListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pw-smart-crm-marketing-users-list', template: "<div class=\"me-auto col-xs-6\">\n  <p>This is a summary of the contacts that received your marketing email.</p>\n</div>\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container mt-3 table-responsive\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #dt\n    [value]=\"data.newsletter_contacts\"\n    [paginator]=\"data.object_count !== 0\"\n    [lazy]=\"true\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    filterDelay=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n    <ng-template pTemplate=\"caption\">\n      <div class=\"text-end\">\n        <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n        <input type=\"text\"\n          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search contact...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"first_name\">\n          {{ 'Crm.MarketingInsight.Name' | transloco }}\n          <p-sortIcon field=\"first_name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"email\">\n          {{ 'Crm.MarketingInsight.Email' | transloco }}\n          <p-sortIcon field=\"email\"></p-sortIcon>\n        </th>\n        <th scope=\"true\">\n          {{ 'Crm.MarketingInsight.SentAt' | transloco }}\n        </th>\n        <th scope=\"true\">\n          {{ 'Crm.MarketingInsight.LastOpened' | transloco }}\n        </th>\n        <th scope=\"true\">\n          {{ 'Crm.MarketingInsight.OpenCount' | transloco }}\n        </th>\n        <th scope=\"true\">\n          {{ 'Crm.MarketingInsight.ClickedAt' | transloco }}\n        </th>\n        <th scope=\"true\">\n          {{ 'Crm.MarketingInsight.ClickedCount' | transloco }}\n        </th>\n        <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-user>\n      <tr>\n        <td data-head=\"Name\">\n          <a [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, user.id]\">{{\n                        user | ifNameNullShowEmail\n                    }}</a>\n        </td>\n        <td data-head=\"Email\">\n          <a href=\"mailto:{{ user?.email }}\">{{ user?.email }}</a>\n        </td>\n        <td data-head=\"Sent At\">{{ user?.message_insight?.sent_at | dateFormat }}</td>\n        <td data-head=\"Last Opened\">{{ user?.message_insight?.opened_at }}</td>\n        <td data-head=\"Open Count\">{{ user?.message_insight?.open_count }}</td>\n        <td data-head=\"Clicked At\">{{ user?.message_insight?.clicked_at }}</td>\n        <td data-head=\"Clicked Count\">{{ user?.message_insight?.click_count }}</td>\n        <td data-head=\"Actions\"></td>\n      </tr>\n    </ng-template>\n  </p-table>\n<div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n</div>\n  <span class=\"total-records-count\"  *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.MarketingInsight.NoUserListMessage' | transloco\"> </pw-no-data>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1.CrmService }, { type: i0.ChangeDetectorRef }] });
@@ -3761,8 +3761,8 @@ class SmartCrmCommunicationsDetailsComponent extends AppBaseComponent {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmCommunicationsDetailsComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }, { token: i2.CommonService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: SmartCrmCommunicationsDetailsComponent, selector: "pw-smart-crm-communications-details", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 d-flex\">\n    <a href=\"javascript:void(0)\"\n      (click)=\"back()\"\n      class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n    <h3 class=\"m-subheader__title m-subheader__title--separator\">\n      <span>{{ data?.id ? 'Edit' : 'Create new' }} marketing email</span>\n    </h3>\n  </div>\n</div>\n<ng-container>\n  <div class=\"container-fluid pw-tab\">\n    <div class=\"p-2 mt-3\">\n      <p class=\"my-3\">\n        You can insert the user name by adding the following syntax in the body or title:\n        {{ userNameSyntax }}\n      </p>\n      <form [formGroup]=\"form\"\n        (ngSubmit)=\"onSave()\">\n        <div class=\"row mb-3\">\n          <div class=\"col-12 col-md-12\">\n            <pw-input-container [label]=\"'Crm.CommunicationsMessage.Title' | transloco\"\n              name=\"title\"\n              [showTooltip]=\"true\"\n              [tooltipText]=\"'Crm.CommunicationsMessage.Tooltip.Title' | transloco\"\n              errorMsg=\"Please enter subject\">\n              <input type=\"text\"\n                class=\"form-control\"\n                formControlName=\"title\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\" />\n            </pw-input-container>\n          </div>\n\n          <div class=\"col-12 col-md-12\">\n            <pw-input-container [label]=\"'Crm.CommunicationsMessage.Body' | transloco\"\n              [showTooltip]=\"true\"\n              [tooltipText]=\"'Crm.CommunicationsMessage.Tooltip.Body' | transloco\"\n              name=\"body\"\n              errorMsg=\"Please enter body\">\n              <quill-editor [styles]=\"{ height: '220px' }\"\n                formControlName=\"body\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['body'].errors }\">\n              </quill-editor>\n            </pw-input-container>\n          </div>\n\n          <div class=\"col-12 col-md-2\">\n            <div class=\"mb-3\">\n              <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.SendAt' | transloco\n                                }}<span class=\"text-danger\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Crm.CommunicationsMessage.Tooltip.SendAt' | transloco\n                                }}</span></label>\n              <div class=\"input-group\">\n                <input class=\"form-control\"\n                  placeholder=\"yyyy-mm-dd\"\n                  formControlName=\"send_at\"\n                  ngbDatepicker\n                  #c=\"ngbDatepicker\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['send_at'].errors }\" />\n                <div class=\"input-group-append\">\n                  <button class=\"btn btn-primary\"\n                    (click)=\"c.toggle()\"\n                    type=\"button\">\n                    <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"col-12 col-md-2\">\n            <div class=\"mb-3\">\n              <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.SendUntil' | transloco\n                                }}<span class=\"text-danger\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Crm.CommunicationsMessage.Tooltip.SendUntil' | transloco\n                                }}</span></label>\n              <div class=\"input-group\">\n                <input class=\"form-control\"\n                  placeholder=\"yyyy-mm-dd\"\n                  formControlName=\"send_until\"\n                  ngbDatepicker\n                  #d=\"ngbDatepicker\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['send_until'].errors }\" />\n                <div class=\"input-group-append\">\n                  <button class=\"btn btn-primary\"\n                    (click)=\"d.toggle()\"\n                    type=\"button\">\n                    <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"col-12 col-md-3\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.PreviousNewsletter' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.PreviousNewsletter' | transloco\n                            }}</span></label>\n              <select class=\"form-select\"\n                formControlName=\"previous_newsletter_id\"\n                (change)=\"onNewsletterSelect($event)\"\n                [ngClass]=\"{\n                                    'is-invalid': submitted && f['previous_newsletter_id'].errors\n                                }\">\n                <option value=\"\">select previous newsletter</option>\n                <option *ngFor=\"let option of allCommunications\"\n                  [value]=\"option.id\">\n                  {{ option.title }}\n                </option>\n              </select>\n          </div>\n\n          <div class=\"col-12 col-sm-2\"\n            *ngIf=\"daysToNewsletterField\">\n            <pw-input-container [label]=\"\n                                'Crm.CommunicationsMessage.DaysToWaitFromPreviousNewsletter'\n                                    | transloco\n                            \"\n              [showTooltip]=\"true\"\n              [tooltipText]=\"\n                                'Crm.CommunicationsMessage.Tooltip.DaysToWaitFromPreviousNewsletter'\n                                    | transloco\n                            \"\n              name=\"days_to_wait_from_previous_newsletter\"\n              errorMsg=\"Please enter days to wait from previous newsletter\">\n              <input type=\"number\"\n                class=\"form-control\"\n                formControlName=\"days_to_wait_from_previous_newsletter\"\n                [ngClass]=\"{\n                                    'is-invalid':\n                                        submitted && f['days_to_wait_from_previous_newsletter'].errors\n                                }\" />\n            </pw-input-container>\n          </div>\n\n          <div class=\"col-12 col-md-1\">\n            <div class=\"mb-3\">\n              <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.ShouldDeliver' | transloco\n                                }}<span class=\"text-danger\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Crm.CommunicationsMessage.Tooltip.IsPushed' | transloco\n                                }}</span>\n              </label>\n              <ui-switch class=\"d-block\"\n                formControlName=\"is_pushed\"\n                (change)=\"onChange($event, 'is_pushed')\"\n                name=\"is_pushed\">\n              </ui-switch>\n            </div>\n          </div>\n\n          <div class=\"col-12 col-md-2\">\n            <div class=\"mb-3\">\n              <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.CanReply' | transloco\n                                }}<span class=\"text-danger\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Crm.CommunicationsMessage.Tooltip.CanReply' | transloco\n                                }}</span>\n              </label>\n              <ui-switch class=\"d-block\"\n                formControlName=\"can_reply\"\n                name=\"can_reply\">\n              </ui-switch>\n            </div>\n          </div>\n        </div>\n\n        <h3>Decide who will receive the email</h3>\n\n        <div class=\"row mb-3\">\n          <div class=\"col-12 col-md-4\">\n            <div class=\"mb-3\">\n              <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.Location' | transloco\n                                }}<span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Crm.CommunicationsMessage.Tooltip.Location' | transloco\n                                }}</span></label>\n              <input ngx-gp-autocomplete\n                class=\"form-control\"\n                #places=\"ngx-places\"\n                formControlName=\"location\"\n                (onAddressChange)=\"handleAddressChange($event)\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['location'].errors }\" />\n            </div>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.Products' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.Products' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"crmProduct\"\n              [showHeader]=\"true\"\n              [showToggleAll]=\"true\"\n              formControlName=\"product_ids\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.Features' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.Features' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"featureKeys\"\n              [showHeader]=\"true\"\n              [showToggleAll]=\"true\"\n              formControlName=\"feature_keys\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.ContactPotential' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.ContactPotential' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"potentials\"\n              formControlName=\"contact_potential\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.ContactLabel' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.ContactLabel' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"labels\"\n              formControlName=\"contact_label\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.ContactSource' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.ContactSource' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"contactSource\"\n              formControlName=\"contact_source\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.AccountPriority' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.AccountPriority' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"priority\"\n              formControlName=\"account_priority\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.AccountStatus' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.AccountStatus' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"status\"\n              formControlName=\"account_status\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.AccountSource' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.AccountSource' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"source\"\n              formControlName=\"account_source\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.AccountSize' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.AccountSize' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"organizationSizes\"\n              formControlName=\"account_size\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <!-- Only new contacts -->\n          <div class=\"col-md-3\">\n            <div class=\"mb-3\">\n              <label class=\"info-circle mb-2\">{{ 'Crm.CommunicationsMessage.OnlyNewContacts' | transloco\n                                }}<span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Crm.CommunicationsMessage.Tooltip.OnlyNewContacts' | transloco\n                                }}</span>\n              </label>\n              <ui-switch class=\"d-block\"\n                formControlName=\"only_new_contacts\"\n                name=\"only_new_contacts\"\n                [ngClass]=\"{\n                        'is-invalid': submitted && f['only_new_contacts'].errors\n                    }\">\n              </ui-switch>\n            </div>\n          </div>\n        </div>\n        <div class=\"row\">\n          <div class=\"col-12 text-end mt-3\">\n            <button type=\"button\"\n              class=\"btn btn-outline-default me-2\"\n              (click)=\"back()\">\n              {{ 'Button.Cancel' | transloco }}\n            </button>\n            <button type=\"submit\"\n              class=\"btn btn-primary\"\n              [disabled]=\"!form.valid\"\n            >\n              {{ 'Button.Submit' | transloco }}\n            </button>\n          </div>\n        </div>\n      </form>\n    </div>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4$1.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "directive", type: i9.NgxGpAutocompleteDirective, selector: "[ngx-gp-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "component", type: i6.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i11.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText"] }, { kind: "component", type: i10$2.QuillEditorComponent, selector: "quill-editor" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmCommunicationsDetailsComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }, { token: i2.CommonService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmCommunicationsDetailsComponent, selector: "pw-smart-crm-communications-details", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 d-flex\">\n    <a href=\"javascript:void(0)\"\n      (click)=\"back()\"\n      class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n    <h3 class=\"m-subheader__title m-subheader__title--separator\">\n      <span>{{ data?.id ? 'Edit' : 'Create new' }} marketing email</span>\n    </h3>\n  </div>\n</div>\n<ng-container>\n  <div class=\"container-fluid pw-tab\">\n    <div class=\"p-2 mt-3\">\n      <p class=\"my-3\">\n        You can insert the user name by adding the following syntax in the body or title:\n        {{ userNameSyntax }}\n      </p>\n      <form [formGroup]=\"form\"\n        (ngSubmit)=\"onSave()\">\n        <div class=\"row mb-3\">\n          <div class=\"col-12 col-md-12\">\n            <pw-input-container [label]=\"'Crm.CommunicationsMessage.Title' | transloco\"\n              name=\"title\"\n              [showTooltip]=\"true\"\n              [tooltipText]=\"'Crm.CommunicationsMessage.Tooltip.Title' | transloco\"\n              errorMsg=\"Please enter subject\">\n              <input type=\"text\"\n                class=\"form-control\"\n                formControlName=\"title\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\" />\n            </pw-input-container>\n          </div>\n\n          <div class=\"col-12 col-md-12\">\n            <pw-input-container [label]=\"'Crm.CommunicationsMessage.Body' | transloco\"\n              [showTooltip]=\"true\"\n              [tooltipText]=\"'Crm.CommunicationsMessage.Tooltip.Body' | transloco\"\n              name=\"body\"\n              errorMsg=\"Please enter body\">\n              <quill-editor [styles]=\"{ height: '220px' }\"\n                formControlName=\"body\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['body'].errors }\">\n              </quill-editor>\n            </pw-input-container>\n          </div>\n\n          <div class=\"col-12 col-md-2\">\n            <div class=\"mb-3\">\n              <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.SendAt' | transloco\n                                }}<span class=\"text-danger\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Crm.CommunicationsMessage.Tooltip.SendAt' | transloco\n                                }}</span></label>\n              <div class=\"input-group\">\n                <input class=\"form-control\"\n                  placeholder=\"yyyy-mm-dd\"\n                  formControlName=\"send_at\"\n                  ngbDatepicker\n                  #c=\"ngbDatepicker\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['send_at'].errors }\" />\n                <div class=\"input-group-append\">\n                  <button class=\"btn btn-primary\"\n                    (click)=\"c.toggle()\"\n                    type=\"button\">\n                    <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"col-12 col-md-2\">\n            <div class=\"mb-3\">\n              <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.SendUntil' | transloco\n                                }}<span class=\"text-danger\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Crm.CommunicationsMessage.Tooltip.SendUntil' | transloco\n                                }}</span></label>\n              <div class=\"input-group\">\n                <input class=\"form-control\"\n                  placeholder=\"yyyy-mm-dd\"\n                  formControlName=\"send_until\"\n                  ngbDatepicker\n                  #d=\"ngbDatepicker\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['send_until'].errors }\" />\n                <div class=\"input-group-append\">\n                  <button class=\"btn btn-primary\"\n                    (click)=\"d.toggle()\"\n                    type=\"button\">\n                    <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"col-12 col-md-3\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.PreviousNewsletter' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.PreviousNewsletter' | transloco\n                            }}</span></label>\n              <select class=\"form-select\"\n                formControlName=\"previous_newsletter_id\"\n                (change)=\"onNewsletterSelect($event)\"\n                [ngClass]=\"{\n                                    'is-invalid': submitted && f['previous_newsletter_id'].errors\n                                }\">\n                <option value=\"\">select previous newsletter</option>\n                <option *ngFor=\"let option of allCommunications\"\n                  [value]=\"option.id\">\n                  {{ option.title }}\n                </option>\n              </select>\n          </div>\n\n          <div class=\"col-12 col-sm-2\"\n            *ngIf=\"daysToNewsletterField\">\n            <pw-input-container [label]=\"\n                                'Crm.CommunicationsMessage.DaysToWaitFromPreviousNewsletter'\n                                    | transloco\n                            \"\n              [showTooltip]=\"true\"\n              [tooltipText]=\"\n                                'Crm.CommunicationsMessage.Tooltip.DaysToWaitFromPreviousNewsletter'\n                                    | transloco\n                            \"\n              name=\"days_to_wait_from_previous_newsletter\"\n              errorMsg=\"Please enter days to wait from previous newsletter\">\n              <input type=\"number\"\n                class=\"form-control\"\n                formControlName=\"days_to_wait_from_previous_newsletter\"\n                [ngClass]=\"{\n                                    'is-invalid':\n                                        submitted && f['days_to_wait_from_previous_newsletter'].errors\n                                }\" />\n            </pw-input-container>\n          </div>\n\n          <div class=\"col-12 col-md-1\">\n            <div class=\"mb-3\">\n              <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.ShouldDeliver' | transloco\n                                }}<span class=\"text-danger\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Crm.CommunicationsMessage.Tooltip.IsPushed' | transloco\n                                }}</span>\n              </label>\n              <ui-switch class=\"d-block\"\n                formControlName=\"is_pushed\"\n                (change)=\"onChange($event, 'is_pushed')\"\n                name=\"is_pushed\">\n              </ui-switch>\n            </div>\n          </div>\n\n          <div class=\"col-12 col-md-2\">\n            <div class=\"mb-3\">\n              <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.CanReply' | transloco\n                                }}<span class=\"text-danger\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Crm.CommunicationsMessage.Tooltip.CanReply' | transloco\n                                }}</span>\n              </label>\n              <ui-switch class=\"d-block\"\n                formControlName=\"can_reply\"\n                name=\"can_reply\">\n              </ui-switch>\n            </div>\n          </div>\n        </div>\n\n        <h3>Decide who will receive the email</h3>\n\n        <div class=\"row mb-3\">\n          <div class=\"col-12 col-md-4\">\n            <div class=\"mb-3\">\n              <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.Location' | transloco\n                                }}<span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Crm.CommunicationsMessage.Tooltip.Location' | transloco\n                                }}</span></label>\n              <input ngx-gp-autocomplete\n                class=\"form-control\"\n                #places=\"ngx-places\"\n                formControlName=\"location\"\n                (onAddressChange)=\"handleAddressChange($event)\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['location'].errors }\" />\n            </div>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.Products' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.Products' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"crmProduct\"\n              [showHeader]=\"true\"\n              [showToggleAll]=\"true\"\n              formControlName=\"product_ids\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.Features' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.Features' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"featureKeys\"\n              [showHeader]=\"true\"\n              [showToggleAll]=\"true\"\n              formControlName=\"feature_keys\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.ContactPotential' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.ContactPotential' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"potentials\"\n              formControlName=\"contact_potential\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.ContactLabel' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.ContactLabel' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"labels\"\n              formControlName=\"contact_label\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.ContactSource' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.ContactSource' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"contactSource\"\n              formControlName=\"contact_source\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.AccountPriority' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.AccountPriority' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"priority\"\n              formControlName=\"account_priority\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.AccountStatus' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.AccountStatus' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"status\"\n              formControlName=\"account_status\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.AccountSource' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.AccountSource' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"source\"\n              formControlName=\"account_source\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.AccountSize' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.AccountSize' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"organizationSizes\"\n              formControlName=\"account_size\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <!-- Only new contacts -->\n          <div class=\"col-md-3\">\n            <div class=\"mb-3\">\n              <label class=\"info-circle mb-2\">{{ 'Crm.CommunicationsMessage.OnlyNewContacts' | transloco\n                                }}<span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Crm.CommunicationsMessage.Tooltip.OnlyNewContacts' | transloco\n                                }}</span>\n              </label>\n              <ui-switch class=\"d-block\"\n                formControlName=\"only_new_contacts\"\n                name=\"only_new_contacts\"\n                [ngClass]=\"{\n                        'is-invalid': submitted && f['only_new_contacts'].errors\n                    }\">\n              </ui-switch>\n            </div>\n          </div>\n        </div>\n        <div class=\"row\">\n          <div class=\"col-12 text-end mt-3\">\n            <button type=\"button\"\n              class=\"btn btn-outline-default me-2\"\n              (click)=\"back()\">\n              {{ 'Button.Cancel' | transloco }}\n            </button>\n            <button type=\"submit\"\n              class=\"btn btn-primary\"\n              [disabled]=\"!form.valid\"\n            >\n              {{ 'Button.Submit' | transloco }}\n            </button>\n          </div>\n        </div>\n      </form>\n    </div>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4$1.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "directive", type: i9.NgxGpAutocompleteDirective, selector: "[ngx-gp-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "component", type: i6.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i11.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText"] }, { kind: "component", type: i10$2.QuillEditorComponent, selector: "quill-editor" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
 }
 __decorate([
     ValidateForm('form'),
@@ -3770,7 +3770,7 @@ __decorate([
     __metadata("design:paramtypes", []),
     __metadata("design:returntype", void 0)
 ], SmartCrmCommunicationsDetailsComponent.prototype, "onSave", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmCommunicationsDetailsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmCommunicationsDetailsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pw-smart-crm-communications-details', template: "<div class=\"row\">\n  <div class=\"col-12 d-flex\">\n    <a href=\"javascript:void(0)\"\n      (click)=\"back()\"\n      class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n    <h3 class=\"m-subheader__title m-subheader__title--separator\">\n      <span>{{ data?.id ? 'Edit' : 'Create new' }} marketing email</span>\n    </h3>\n  </div>\n</div>\n<ng-container>\n  <div class=\"container-fluid pw-tab\">\n    <div class=\"p-2 mt-3\">\n      <p class=\"my-3\">\n        You can insert the user name by adding the following syntax in the body or title:\n        {{ userNameSyntax }}\n      </p>\n      <form [formGroup]=\"form\"\n        (ngSubmit)=\"onSave()\">\n        <div class=\"row mb-3\">\n          <div class=\"col-12 col-md-12\">\n            <pw-input-container [label]=\"'Crm.CommunicationsMessage.Title' | transloco\"\n              name=\"title\"\n              [showTooltip]=\"true\"\n              [tooltipText]=\"'Crm.CommunicationsMessage.Tooltip.Title' | transloco\"\n              errorMsg=\"Please enter subject\">\n              <input type=\"text\"\n                class=\"form-control\"\n                formControlName=\"title\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\" />\n            </pw-input-container>\n          </div>\n\n          <div class=\"col-12 col-md-12\">\n            <pw-input-container [label]=\"'Crm.CommunicationsMessage.Body' | transloco\"\n              [showTooltip]=\"true\"\n              [tooltipText]=\"'Crm.CommunicationsMessage.Tooltip.Body' | transloco\"\n              name=\"body\"\n              errorMsg=\"Please enter body\">\n              <quill-editor [styles]=\"{ height: '220px' }\"\n                formControlName=\"body\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['body'].errors }\">\n              </quill-editor>\n            </pw-input-container>\n          </div>\n\n          <div class=\"col-12 col-md-2\">\n            <div class=\"mb-3\">\n              <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.SendAt' | transloco\n                                }}<span class=\"text-danger\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Crm.CommunicationsMessage.Tooltip.SendAt' | transloco\n                                }}</span></label>\n              <div class=\"input-group\">\n                <input class=\"form-control\"\n                  placeholder=\"yyyy-mm-dd\"\n                  formControlName=\"send_at\"\n                  ngbDatepicker\n                  #c=\"ngbDatepicker\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['send_at'].errors }\" />\n                <div class=\"input-group-append\">\n                  <button class=\"btn btn-primary\"\n                    (click)=\"c.toggle()\"\n                    type=\"button\">\n                    <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"col-12 col-md-2\">\n            <div class=\"mb-3\">\n              <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.SendUntil' | transloco\n                                }}<span class=\"text-danger\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Crm.CommunicationsMessage.Tooltip.SendUntil' | transloco\n                                }}</span></label>\n              <div class=\"input-group\">\n                <input class=\"form-control\"\n                  placeholder=\"yyyy-mm-dd\"\n                  formControlName=\"send_until\"\n                  ngbDatepicker\n                  #d=\"ngbDatepicker\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['send_until'].errors }\" />\n                <div class=\"input-group-append\">\n                  <button class=\"btn btn-primary\"\n                    (click)=\"d.toggle()\"\n                    type=\"button\">\n                    <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"col-12 col-md-3\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.PreviousNewsletter' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.PreviousNewsletter' | transloco\n                            }}</span></label>\n              <select class=\"form-select\"\n                formControlName=\"previous_newsletter_id\"\n                (change)=\"onNewsletterSelect($event)\"\n                [ngClass]=\"{\n                                    'is-invalid': submitted && f['previous_newsletter_id'].errors\n                                }\">\n                <option value=\"\">select previous newsletter</option>\n                <option *ngFor=\"let option of allCommunications\"\n                  [value]=\"option.id\">\n                  {{ option.title }}\n                </option>\n              </select>\n          </div>\n\n          <div class=\"col-12 col-sm-2\"\n            *ngIf=\"daysToNewsletterField\">\n            <pw-input-container [label]=\"\n                                'Crm.CommunicationsMessage.DaysToWaitFromPreviousNewsletter'\n                                    | transloco\n                            \"\n              [showTooltip]=\"true\"\n              [tooltipText]=\"\n                                'Crm.CommunicationsMessage.Tooltip.DaysToWaitFromPreviousNewsletter'\n                                    | transloco\n                            \"\n              name=\"days_to_wait_from_previous_newsletter\"\n              errorMsg=\"Please enter days to wait from previous newsletter\">\n              <input type=\"number\"\n                class=\"form-control\"\n                formControlName=\"days_to_wait_from_previous_newsletter\"\n                [ngClass]=\"{\n                                    'is-invalid':\n                                        submitted && f['days_to_wait_from_previous_newsletter'].errors\n                                }\" />\n            </pw-input-container>\n          </div>\n\n          <div class=\"col-12 col-md-1\">\n            <div class=\"mb-3\">\n              <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.ShouldDeliver' | transloco\n                                }}<span class=\"text-danger\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Crm.CommunicationsMessage.Tooltip.IsPushed' | transloco\n                                }}</span>\n              </label>\n              <ui-switch class=\"d-block\"\n                formControlName=\"is_pushed\"\n                (change)=\"onChange($event, 'is_pushed')\"\n                name=\"is_pushed\">\n              </ui-switch>\n            </div>\n          </div>\n\n          <div class=\"col-12 col-md-2\">\n            <div class=\"mb-3\">\n              <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.CanReply' | transloco\n                                }}<span class=\"text-danger\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Crm.CommunicationsMessage.Tooltip.CanReply' | transloco\n                                }}</span>\n              </label>\n              <ui-switch class=\"d-block\"\n                formControlName=\"can_reply\"\n                name=\"can_reply\">\n              </ui-switch>\n            </div>\n          </div>\n        </div>\n\n        <h3>Decide who will receive the email</h3>\n\n        <div class=\"row mb-3\">\n          <div class=\"col-12 col-md-4\">\n            <div class=\"mb-3\">\n              <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.Location' | transloco\n                                }}<span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Crm.CommunicationsMessage.Tooltip.Location' | transloco\n                                }}</span></label>\n              <input ngx-gp-autocomplete\n                class=\"form-control\"\n                #places=\"ngx-places\"\n                formControlName=\"location\"\n                (onAddressChange)=\"handleAddressChange($event)\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['location'].errors }\" />\n            </div>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.Products' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.Products' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"crmProduct\"\n              [showHeader]=\"true\"\n              [showToggleAll]=\"true\"\n              formControlName=\"product_ids\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.Features' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.Features' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"featureKeys\"\n              [showHeader]=\"true\"\n              [showToggleAll]=\"true\"\n              formControlName=\"feature_keys\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.ContactPotential' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.ContactPotential' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"potentials\"\n              formControlName=\"contact_potential\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.ContactLabel' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.ContactLabel' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"labels\"\n              formControlName=\"contact_label\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.ContactSource' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.ContactSource' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"contactSource\"\n              formControlName=\"contact_source\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.AccountPriority' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.AccountPriority' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"priority\"\n              formControlName=\"account_priority\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.AccountStatus' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.AccountStatus' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"status\"\n              formControlName=\"account_status\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.AccountSource' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.AccountSource' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"source\"\n              formControlName=\"account_source\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.AccountSize' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.AccountSize' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"organizationSizes\"\n              formControlName=\"account_size\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <!-- Only new contacts -->\n          <div class=\"col-md-3\">\n            <div class=\"mb-3\">\n              <label class=\"info-circle mb-2\">{{ 'Crm.CommunicationsMessage.OnlyNewContacts' | transloco\n                                }}<span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Crm.CommunicationsMessage.Tooltip.OnlyNewContacts' | transloco\n                                }}</span>\n              </label>\n              <ui-switch class=\"d-block\"\n                formControlName=\"only_new_contacts\"\n                name=\"only_new_contacts\"\n                [ngClass]=\"{\n                        'is-invalid': submitted && f['only_new_contacts'].errors\n                    }\">\n              </ui-switch>\n            </div>\n          </div>\n        </div>\n        <div class=\"row\">\n          <div class=\"col-12 text-end mt-3\">\n            <button type=\"button\"\n              class=\"btn btn-outline-default me-2\"\n              (click)=\"back()\">\n              {{ 'Button.Cancel' | transloco }}\n            </button>\n            <button type=\"submit\"\n              class=\"btn btn-primary\"\n              [disabled]=\"!form.valid\"\n            >\n              {{ 'Button.Submit' | transloco }}\n            </button>\n          </div>\n        </div>\n      </form>\n    </div>\n  </div>\n</ng-container>\n" }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1.CrmService }, { type: i2.CommonService }], propDecorators: { onSave: [] } });
@@ -3895,12 +3895,12 @@ class SmartCrmCommunicationsComponent extends AppBaseComponent {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmCommunicationsComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: SmartCrmCommunicationsComponent, selector: "pw-smart-crm-communications", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12\">\n    <h2>Email Marketing</h2>\n    <p>In this section you can create and manage your email marketing strategy.</p>\n  </div>\n  <div class=\"col-12 col-md-12 text-end\">\n    <button class=\"btn btn-sm btn-outline-primary\"\n      [routerLink]=\"['/' + subscription?.slug + routers.marketingDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Add New Email' }}\n    </button>\n  </div>\n</div>\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container mt-3 table-responsive\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #dt\n    [value]=\"data.crm_newsletters\"\n    [paginator]=\"data.object_count !== 0\"\n    [lazy]=\"true\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    filterDelay=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n    <ng-template pTemplate=\"caption\">\n      <div class=\"text-end\">\n        <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n        <input type=\"text\"\n          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search communication emails...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"title\">\n          {{ 'Crm.CommunicationsMessage.Title' | transloco }}\n          <p-sortIcon field=\"title\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"body\">\n          {{ 'Crm.CommunicationsMessage.Body' | transloco }}\n          <p-sortIcon field=\"body\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"location\">\n          {{ 'Crm.CommunicationsMessage.Location' | transloco }}\n          <p-sortIcon field=\"location'\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"send_until\">\n          {{ 'Crm.CommunicationsMessage.SendUntil' | transloco }}\n          <p-sortIcon field=\"send_until\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"is_pushed\">\n          {{ 'Crm.CommunicationsMessage.Pushed' | transloco }}\n          <p-sortIcon field=\"is_pushed\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"is_sent\">\n          {{ 'Crm.CommunicationsMessage.Sent' | transloco }}\n          <p-sortIcon field=\"is_sent\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          class=\"actions-column\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-item>\n      <tr class=\"table-row\">\n        <td data-head=\"Title\">\n          <a [routerLink]=\"['/' + subscription?.slug + routers.marketing, item.id]\">{{\n                        item.title\n                    }}</a>\n        </td>\n        <td data-head=\"Body\"\n          [innerHtml]=\"item.body | removeHtml | textTruncate: 200\"></td>\n        <td data-head=\"Location\">{{ item.location }}</td>\n        <td data-head=\"Send Until\">{{ item.send_until | dateFormat }}</td>\n        <td data-head=\"Pushed?\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.is_pushed }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ !!item?.is_pushed }}</span>\n        </td>\n        <td data-head=\"Sent?\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.is_sent }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ !!item?.is_sent }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline\">\n            <li ngbTooltip=\"Send test email\"\n              class=\"me-2 me-sm-3\">\n              <i\n                                class=\"fa fa-comment-alt cta1-icon\"\n                                (click)=\"sendTestEmail(item)\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </li>\n            <li ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\">\n              <i\n                                class=\"fa fa-edit edit-icon\"\n                                [routerLink]=\"[\n                                    '/' + subscription?.slug + routers.marketingDetails,\n                                    item.id\n                                ]\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </li>\n            <li ngbTooltip=\"Delete\"\n              class=\"me-2 me-sm-3\">\n              <i\n                                class=\"fa fa-trash delete-icon\"\n                                (click)=\"onDelete(item.id)\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </li>\n            <li ngbTooltip=\"Newsletter recipients\"\n              class=\"me-2 me-sm-3\">\n              <i\n                                class=\"fa fa-fw fa-list\"\n                                [routerLink]=\"[\n                                    '/' + subscription?.slug + routers.marketing,\n                                    item.id\n                                ]\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </li>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n<div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n</div>\n  <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CommunicationsMessage.NoCommunicationMessage' | transloco\">\n  </pw-no-data>\n</div>\n<ng-container *rbacAllow=\"'Pages.Beta'\">\n  <div class=\"row mt-5\"\n    *ngIf=\"isLoaded\">\n    <!-- Drill Down -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Drill Down</h5>\n      <div class=\"primeng-datatable-container table-responsive\"\n        *ngIf=\"communicationsInsight?.length\">\n        <p-table class=\"table\"\n          #dt\n          [value]=\"communicationsInsight\"\n          [paginator]=\"communicationsInsight.length !== 0\"\n          [rows]=\"PAGE_SIZE\"\n\n          [totalRecords]=\"communicationsInsight.length\"\n          [lazy]=\"true\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">\n                {{ 'Crm.CommunicationsMessage.Title' | transloco }}\n              </th>\n              <th scope=\"true\">\n                {{ 'Crm.CommunicationsMessage.Value' | transloco }}\n              </th>\n              <th scope=\"true\">\n                {{ 'Crm.CommunicationsMessage.Reason' | transloco }}\n              </th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\"\n            let-insight>\n            <tr>\n              <td data-head=\"Title\">{{ insight.title }}</td>\n              <td data-head=\"Value\">{{ insight.value }}</td>\n              <td data-head=\"Reason\">{{ insight.reason }}</td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\" *ngIf=\"communicationsInsight.length !== 0\">{{ 'Label.Total' | transloco }}: {{ communicationsInsight.length }}</span>\n      </div>\n      <div *ngIf=\"!communicationsInsight?.length\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CommunicationsMessage.NoInsighMessage' | 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\">Engagement</h5>\n      <div>\n        <ng-template [ngIf]=\"communicationEngagement\">\n          <plotly-plot [data]=\"communicationEngagement?.data\"\n            [layout]=\"communicationEngagement?.layout\">\n          </plotly-plot>\n        </ng-template>\n      </div>\n      <div *ngIf=\"!communicationEngagement\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CommunicationsMessage.NoInsighMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", styles: [".actions-column{min-width:170px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]" }, { kind: "directive", type: i5.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color"] }, { kind: "directive", type: i5.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i7$1.PlotlyComponent, selector: "plotly-plot", inputs: ["data", "layout", "config", "frames", "style", "theme", "divId", "revision", "className", "debug", "useResizeHandler", "updateOnLayoutChange", "updateOnDataChange", "updateOnlyWithRevision"], outputs: ["initialized", "update", "purge", "error", "afterExport", "afterPlot", "animated", "animatingFrame", "animationInterrupted", "autoSize", "beforeExport", "beforeHover", "buttonClicked", "click", "plotlyClick", "clickAnnotation", "deselect", "doubleClick", "framework", "hover", "legendClick", "legendDoubleClick", "react", "relayout", "relayouting", "restyle", "redraw", "selected", "selecting", "sliderChange", "sliderEnd", "sliderStart", "sunburstclick", "transitioning", "transitionInterrupted", "unhover", "treemapclick", "webglcontextlost"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i8.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i11.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i14.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i14.RemoveHtmlPipe, name: "removeHtml" }, { kind: "pipe", type: i14.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmCommunicationsComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmCommunicationsComponent, selector: "pw-smart-crm-communications", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12\">\n    <h2>Email Marketing</h2>\n    <p>In this section you can create and manage your email marketing strategy.</p>\n  </div>\n  <div class=\"col-12 col-md-12 text-end\">\n    <button class=\"btn btn-sm btn-outline-primary\"\n      [routerLink]=\"['/' + subscription?.slug + routers.marketingDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Add New Email' }}\n    </button>\n  </div>\n</div>\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container mt-3 table-responsive\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #dt\n    [value]=\"data.crm_newsletters\"\n    [paginator]=\"data.object_count !== 0\"\n    [lazy]=\"true\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    filterDelay=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n    <ng-template pTemplate=\"caption\">\n      <div class=\"text-end\">\n        <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n        <input type=\"text\"\n          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search communication emails...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"title\">\n          {{ 'Crm.CommunicationsMessage.Title' | transloco }}\n          <p-sortIcon field=\"title\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"body\">\n          {{ 'Crm.CommunicationsMessage.Body' | transloco }}\n          <p-sortIcon field=\"body\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"location\">\n          {{ 'Crm.CommunicationsMessage.Location' | transloco }}\n          <p-sortIcon field=\"location'\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"send_until\">\n          {{ 'Crm.CommunicationsMessage.SendUntil' | transloco }}\n          <p-sortIcon field=\"send_until\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"is_pushed\">\n          {{ 'Crm.CommunicationsMessage.Pushed' | transloco }}\n          <p-sortIcon field=\"is_pushed\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"is_sent\">\n          {{ 'Crm.CommunicationsMessage.Sent' | transloco }}\n          <p-sortIcon field=\"is_sent\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          class=\"actions-column\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-item>\n      <tr class=\"table-row\">\n        <td data-head=\"Title\">\n          <a [routerLink]=\"['/' + subscription?.slug + routers.marketing, item.id]\">{{\n                        item.title\n                    }}</a>\n        </td>\n        <td data-head=\"Body\"\n          [innerHtml]=\"item.body | removeHtml | textTruncate: 200\"></td>\n        <td data-head=\"Location\">{{ item.location }}</td>\n        <td data-head=\"Send Until\">{{ item.send_until | dateFormat }}</td>\n        <td data-head=\"Pushed?\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.is_pushed }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ !!item?.is_pushed }}</span>\n        </td>\n        <td data-head=\"Sent?\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.is_sent }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ !!item?.is_sent }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline\">\n            <li ngbTooltip=\"Send test email\"\n              class=\"me-2 me-sm-3\">\n              <i\n                                class=\"fa fa-comment-alt cta1-icon\"\n                                (click)=\"sendTestEmail(item)\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </li>\n            <li ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\">\n              <i\n                                class=\"fa fa-edit edit-icon\"\n                                [routerLink]=\"[\n                                    '/' + subscription?.slug + routers.marketingDetails,\n                                    item.id\n                                ]\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </li>\n            <li ngbTooltip=\"Delete\"\n              class=\"me-2 me-sm-3\">\n              <i\n                                class=\"fa fa-trash delete-icon\"\n                                (click)=\"onDelete(item.id)\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </li>\n            <li ngbTooltip=\"Newsletter recipients\"\n              class=\"me-2 me-sm-3\">\n              <i\n                                class=\"fa fa-fw fa-list\"\n                                [routerLink]=\"[\n                                    '/' + subscription?.slug + routers.marketing,\n                                    item.id\n                                ]\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </li>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n<div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n</div>\n  <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CommunicationsMessage.NoCommunicationMessage' | transloco\">\n  </pw-no-data>\n</div>\n<ng-container *rbacAllow=\"'Pages.Beta'\">\n  <div class=\"row mt-5\"\n    *ngIf=\"isLoaded\">\n    <!-- Drill Down -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Drill Down</h5>\n      <div class=\"primeng-datatable-container table-responsive\"\n        *ngIf=\"communicationsInsight?.length\">\n        <p-table class=\"table\"\n          #dt\n          [value]=\"communicationsInsight\"\n          [paginator]=\"communicationsInsight.length !== 0\"\n          [rows]=\"PAGE_SIZE\"\n\n          [totalRecords]=\"communicationsInsight.length\"\n          [lazy]=\"true\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">\n                {{ 'Crm.CommunicationsMessage.Title' | transloco }}\n              </th>\n              <th scope=\"true\">\n                {{ 'Crm.CommunicationsMessage.Value' | transloco }}\n              </th>\n              <th scope=\"true\">\n                {{ 'Crm.CommunicationsMessage.Reason' | transloco }}\n              </th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\"\n            let-insight>\n            <tr>\n              <td data-head=\"Title\">{{ insight.title }}</td>\n              <td data-head=\"Value\">{{ insight.value }}</td>\n              <td data-head=\"Reason\">{{ insight.reason }}</td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\" *ngIf=\"communicationsInsight.length !== 0\">{{ 'Label.Total' | transloco }}: {{ communicationsInsight.length }}</span>\n      </div>\n      <div *ngIf=\"!communicationsInsight?.length\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CommunicationsMessage.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\">Engagement</h5>\n      <div>\n        <ng-template [ngIf]=\"communicationEngagement\">\n          <plotly-plot [data]=\"communicationEngagement?.data\"\n            [layout]=\"communicationEngagement?.layout\">\n          </plotly-plot>\n        </ng-template>\n      </div>\n      <div *ngIf=\"!communicationEngagement\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CommunicationsMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", styles: [".actions-column{min-width:170px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i5.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color"] }, { kind: "directive", type: i5.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i7$1.PlotlyComponent, selector: "plotly-plot", inputs: ["data", "layout", "config", "frames", "style", "theme", "divId", "revision", "className", "debug", "useResizeHandler", "updateOnLayoutChange", "updateOnDataChange", "updateOnlyWithRevision"], outputs: ["initialized", "update", "purge", "error", "afterExport", "afterPlot", "animated", "animatingFrame", "animationInterrupted", "autoSize", "beforeExport", "beforeHover", "buttonClicked", "click", "plotlyClick", "clickAnnotation", "deselect", "doubleClick", "framework", "hover", "legendClick", "legendDoubleClick", "react", "relayout", "relayouting", "restyle", "redraw", "selected", "selecting", "sliderChange", "sliderEnd", "sliderStart", "sunburstclick", "transitioning", "transitionInterrupted", "unhover", "treemapclick", "webglcontextlost"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i8.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i11.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i14.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i14.RemoveHtmlPipe, name: "removeHtml" }, { kind: "pipe", type: i14.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmCommunicationsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmCommunicationsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-smart-crm-communications', template: "<div class=\"row\">\n  <div class=\"col-12\">\n    <h2>Email Marketing</h2>\n    <p>In this section you can create and manage your email marketing strategy.</p>\n  </div>\n  <div class=\"col-12 col-md-12 text-end\">\n    <button class=\"btn btn-sm btn-outline-primary\"\n      [routerLink]=\"['/' + subscription?.slug + routers.marketingDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Add New Email' }}\n    </button>\n  </div>\n</div>\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container mt-3 table-responsive\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #dt\n    [value]=\"data.crm_newsletters\"\n    [paginator]=\"data.object_count !== 0\"\n    [lazy]=\"true\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    filterDelay=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n    <ng-template pTemplate=\"caption\">\n      <div class=\"text-end\">\n        <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n        <input type=\"text\"\n          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search communication emails...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"title\">\n          {{ 'Crm.CommunicationsMessage.Title' | transloco }}\n          <p-sortIcon field=\"title\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"body\">\n          {{ 'Crm.CommunicationsMessage.Body' | transloco }}\n          <p-sortIcon field=\"body\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"location\">\n          {{ 'Crm.CommunicationsMessage.Location' | transloco }}\n          <p-sortIcon field=\"location'\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"send_until\">\n          {{ 'Crm.CommunicationsMessage.SendUntil' | transloco }}\n          <p-sortIcon field=\"send_until\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"is_pushed\">\n          {{ 'Crm.CommunicationsMessage.Pushed' | transloco }}\n          <p-sortIcon field=\"is_pushed\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"is_sent\">\n          {{ 'Crm.CommunicationsMessage.Sent' | transloco }}\n          <p-sortIcon field=\"is_sent\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          class=\"actions-column\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-item>\n      <tr class=\"table-row\">\n        <td data-head=\"Title\">\n          <a [routerLink]=\"['/' + subscription?.slug + routers.marketing, item.id]\">{{\n                        item.title\n                    }}</a>\n        </td>\n        <td data-head=\"Body\"\n          [innerHtml]=\"item.body | removeHtml | textTruncate: 200\"></td>\n        <td data-head=\"Location\">{{ item.location }}</td>\n        <td data-head=\"Send Until\">{{ item.send_until | dateFormat }}</td>\n        <td data-head=\"Pushed?\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.is_pushed }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ !!item?.is_pushed }}</span>\n        </td>\n        <td data-head=\"Sent?\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.is_sent }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ !!item?.is_sent }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline\">\n            <li ngbTooltip=\"Send test email\"\n              class=\"me-2 me-sm-3\">\n              <i\n                                class=\"fa fa-comment-alt cta1-icon\"\n                                (click)=\"sendTestEmail(item)\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </li>\n            <li ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\">\n              <i\n                                class=\"fa fa-edit edit-icon\"\n                                [routerLink]=\"[\n                                    '/' + subscription?.slug + routers.marketingDetails,\n                                    item.id\n                                ]\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </li>\n            <li ngbTooltip=\"Delete\"\n              class=\"me-2 me-sm-3\">\n              <i\n                                class=\"fa fa-trash delete-icon\"\n                                (click)=\"onDelete(item.id)\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </li>\n            <li ngbTooltip=\"Newsletter recipients\"\n              class=\"me-2 me-sm-3\">\n              <i\n                                class=\"fa fa-fw fa-list\"\n                                [routerLink]=\"[\n                                    '/' + subscription?.slug + routers.marketing,\n                                    item.id\n                                ]\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </li>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n<div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n</div>\n  <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CommunicationsMessage.NoCommunicationMessage' | transloco\">\n  </pw-no-data>\n</div>\n<ng-container *rbacAllow=\"'Pages.Beta'\">\n  <div class=\"row mt-5\"\n    *ngIf=\"isLoaded\">\n    <!-- Drill Down -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Drill Down</h5>\n      <div class=\"primeng-datatable-container table-responsive\"\n        *ngIf=\"communicationsInsight?.length\">\n        <p-table class=\"table\"\n          #dt\n          [value]=\"communicationsInsight\"\n          [paginator]=\"communicationsInsight.length !== 0\"\n          [rows]=\"PAGE_SIZE\"\n\n          [totalRecords]=\"communicationsInsight.length\"\n          [lazy]=\"true\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">\n                {{ 'Crm.CommunicationsMessage.Title' | transloco }}\n              </th>\n              <th scope=\"true\">\n                {{ 'Crm.CommunicationsMessage.Value' | transloco }}\n              </th>\n              <th scope=\"true\">\n                {{ 'Crm.CommunicationsMessage.Reason' | transloco }}\n              </th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\"\n            let-insight>\n            <tr>\n              <td data-head=\"Title\">{{ insight.title }}</td>\n              <td data-head=\"Value\">{{ insight.value }}</td>\n              <td data-head=\"Reason\">{{ insight.reason }}</td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\" *ngIf=\"communicationsInsight.length !== 0\">{{ 'Label.Total' | transloco }}: {{ communicationsInsight.length }}</span>\n      </div>\n      <div *ngIf=\"!communicationsInsight?.length\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CommunicationsMessage.NoInsighMessage' | 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\">Engagement</h5>\n      <div>\n        <ng-template [ngIf]=\"communicationEngagement\">\n          <plotly-plot [data]=\"communicationEngagement?.data\"\n            [layout]=\"communicationEngagement?.layout\">\n          </plotly-plot>\n        </ng-template>\n      </div>\n      <div *ngIf=\"!communicationEngagement\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CommunicationsMessage.NoInsighMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", styles: [".actions-column{min-width:170px}\n"] }]
+            args: [{ selector: 'pw-smart-crm-communications', template: "<div class=\"row\">\n  <div class=\"col-12\">\n    <h2>Email Marketing</h2>\n    <p>In this section you can create and manage your email marketing strategy.</p>\n  </div>\n  <div class=\"col-12 col-md-12 text-end\">\n    <button class=\"btn btn-sm btn-outline-primary\"\n      [routerLink]=\"['/' + subscription?.slug + routers.marketingDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Add New Email' }}\n    </button>\n  </div>\n</div>\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container mt-3 table-responsive\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #dt\n    [value]=\"data.crm_newsletters\"\n    [paginator]=\"data.object_count !== 0\"\n    [lazy]=\"true\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    filterDelay=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n    <ng-template pTemplate=\"caption\">\n      <div class=\"text-end\">\n        <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n        <input type=\"text\"\n          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search communication emails...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"title\">\n          {{ 'Crm.CommunicationsMessage.Title' | transloco }}\n          <p-sortIcon field=\"title\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"body\">\n          {{ 'Crm.CommunicationsMessage.Body' | transloco }}\n          <p-sortIcon field=\"body\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"location\">\n          {{ 'Crm.CommunicationsMessage.Location' | transloco }}\n          <p-sortIcon field=\"location'\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"send_until\">\n          {{ 'Crm.CommunicationsMessage.SendUntil' | transloco }}\n          <p-sortIcon field=\"send_until\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"is_pushed\">\n          {{ 'Crm.CommunicationsMessage.Pushed' | transloco }}\n          <p-sortIcon field=\"is_pushed\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"is_sent\">\n          {{ 'Crm.CommunicationsMessage.Sent' | transloco }}\n          <p-sortIcon field=\"is_sent\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          class=\"actions-column\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-item>\n      <tr class=\"table-row\">\n        <td data-head=\"Title\">\n          <a [routerLink]=\"['/' + subscription?.slug + routers.marketing, item.id]\">{{\n                        item.title\n                    }}</a>\n        </td>\n        <td data-head=\"Body\"\n          [innerHtml]=\"item.body | removeHtml | textTruncate: 200\"></td>\n        <td data-head=\"Location\">{{ item.location }}</td>\n        <td data-head=\"Send Until\">{{ item.send_until | dateFormat }}</td>\n        <td data-head=\"Pushed?\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.is_pushed }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ !!item?.is_pushed }}</span>\n        </td>\n        <td data-head=\"Sent?\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.is_sent }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ !!item?.is_sent }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline\">\n            <li ngbTooltip=\"Send test email\"\n              class=\"me-2 me-sm-3\">\n              <i\n                                class=\"fa fa-comment-alt cta1-icon\"\n                                (click)=\"sendTestEmail(item)\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </li>\n            <li ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\">\n              <i\n                                class=\"fa fa-edit edit-icon\"\n                                [routerLink]=\"[\n                                    '/' + subscription?.slug + routers.marketingDetails,\n                                    item.id\n                                ]\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </li>\n            <li ngbTooltip=\"Delete\"\n              class=\"me-2 me-sm-3\">\n              <i\n                                class=\"fa fa-trash delete-icon\"\n                                (click)=\"onDelete(item.id)\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </li>\n            <li ngbTooltip=\"Newsletter recipients\"\n              class=\"me-2 me-sm-3\">\n              <i\n                                class=\"fa fa-fw fa-list\"\n                                [routerLink]=\"[\n                                    '/' + subscription?.slug + routers.marketing,\n                                    item.id\n                                ]\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </li>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n<div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n</div>\n  <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CommunicationsMessage.NoCommunicationMessage' | transloco\">\n  </pw-no-data>\n</div>\n<ng-container *rbacAllow=\"'Pages.Beta'\">\n  <div class=\"row mt-5\"\n    *ngIf=\"isLoaded\">\n    <!-- Drill Down -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Drill Down</h5>\n      <div class=\"primeng-datatable-container table-responsive\"\n        *ngIf=\"communicationsInsight?.length\">\n        <p-table class=\"table\"\n          #dt\n          [value]=\"communicationsInsight\"\n          [paginator]=\"communicationsInsight.length !== 0\"\n          [rows]=\"PAGE_SIZE\"\n\n          [totalRecords]=\"communicationsInsight.length\"\n          [lazy]=\"true\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">\n                {{ 'Crm.CommunicationsMessage.Title' | transloco }}\n              </th>\n              <th scope=\"true\">\n                {{ 'Crm.CommunicationsMessage.Value' | transloco }}\n              </th>\n              <th scope=\"true\">\n                {{ 'Crm.CommunicationsMessage.Reason' | transloco }}\n              </th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\"\n            let-insight>\n            <tr>\n              <td data-head=\"Title\">{{ insight.title }}</td>\n              <td data-head=\"Value\">{{ insight.value }}</td>\n              <td data-head=\"Reason\">{{ insight.reason }}</td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\" *ngIf=\"communicationsInsight.length !== 0\">{{ 'Label.Total' | transloco }}: {{ communicationsInsight.length }}</span>\n      </div>\n      <div *ngIf=\"!communicationsInsight?.length\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CommunicationsMessage.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\">Engagement</h5>\n      <div>\n        <ng-template [ngIf]=\"communicationEngagement\">\n          <plotly-plot [data]=\"communicationEngagement?.data\"\n            [layout]=\"communicationEngagement?.layout\">\n          </plotly-plot>\n        </ng-template>\n      </div>\n      <div *ngIf=\"!communicationEngagement\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CommunicationsMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", styles: [".actions-column{min-width:170px}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1.CrmService }, { type: i0.ChangeDetectorRef }] });
 class SmartCrmCommunicationViewDetailsComponent extends AppBaseComponent {
@@ -3940,10 +3940,10 @@ class SmartCrmCommunicationViewDetailsComponent extends AppBaseComponent {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmCommunicationViewDetailsComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: SmartCrmCommunicationViewDetailsComponent, selector: "pw-smart-crm-communication-view-details", usesInheritance: true, ngImport: i0, template: "<div class=\"me-auto col-xs-6\">\n  <p>This is a summary of your marketing email.</p>\n</div>\n\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n\n<div class=\"container-fluid pw-tab overflow-hidden\"\n  *ngIf=\"communicationDetails\">\n  <div class=\"card pb-0\">\n    <div class=\"card-body p-4\">\n      <div class=\"row\"\n        *ngIf=\"communicationDetails\">\n        <div class=\"col-12 col-sm-2\">\n          <h4>{{ 'Crm.CommunicationsMessage.Subject' | transloco }}:</h4>\n        </div>\n        <div class=\"col-12 col-sm-10\">\n          <p>{{ communicationDetails?.title }}</p>\n        </div>\n        <div class=\"col-12 col-sm-2\">\n          <h4>{{ 'Crm.CommunicationsMessage.Body' | transloco }}:</h4>\n        </div>\n        <div class=\"col-12 col-sm-10\">\n          <p [innerHTML]=\"communicationDetails?.body\"></p>\n        </div>\n        <div class=\"col-12 col-sm-2\">\n          <h4>{{ 'Crm.CommunicationsMessage.Location' | transloco }}:</h4>\n        </div>\n        <div class=\"col-12 col-sm-10\">\n          <p [innerHTML]=\"communicationDetails?.location\"></p>\n        </div>\n        <div class=\"col-12 col-sm-2\">\n          <h4>{{ 'Crm.CommunicationsMessage.SendUntil' | transloco }}:</h4>\n        </div>\n        <div class=\"col-12 col-sm-10\">\n          <p>{{ communicationDetails?.send_until | dateFormat: 'datetime' }}</p>\n        </div>\n        <div class=\"col-12 col-sm-2\">\n          <h4>{{ 'Crm.CommunicationsMessage.SendAt' | transloco }}:</h4>\n        </div>\n        <div class=\"col-12 col-sm-10\">\n          <p>{{ communicationDetails?.send_at | dateFormat: 'datetime' }}</p>\n        </div>\n        <div class=\"col-12 col-sm-2\">\n          <h4>{{ 'Crm.CommunicationsMessage.Pushed' | transloco }}:</h4>\n        </div>\n        <div class=\"col-12 col-sm-10 d-flex\">\n          <p>\n            <span [appDynamicBadge]=\"{\n                                itemsArray: [true, false],\n                                item: communicationDetails?.is_pushed\n                            }\"\n              color=\"success-danger\"\n              class=\"badge\">{{ communicationDetails?.is_pushed ? 'Yes' : 'No' }}</span>\n          </p>\n        </div>\n        <div class=\"col-12 col-sm-2\">\n          <h4>Sent:</h4>\n        </div>\n        <div class=\"col-12 col-sm-10 d-flex\">\n          <p>\n            <span [appDynamicBadge]=\"{\n                                itemsArray: [true, false],\n                                item: communicationDetails?.is_sent\n                            }\"\n              color=\"success-danger\"\n              class=\"badge\">{{ communicationDetails?.is_sent ? 'Yes' : 'No' }}</span>\n          </p>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".col-12{min-height:45px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color"] }, { kind: "component", type: i9$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "pipe", type: i14.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmCommunicationViewDetailsComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmCommunicationViewDetailsComponent, selector: "pw-smart-crm-communication-view-details", usesInheritance: true, ngImport: i0, template: "<div class=\"me-auto col-xs-6\">\n  <p>This is a summary of your marketing email.</p>\n</div>\n\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n\n<div class=\"container-fluid pw-tab overflow-hidden\"\n  *ngIf=\"communicationDetails\">\n  <div class=\"card pb-0\">\n    <div class=\"card-body p-4\">\n      <div class=\"row\"\n        *ngIf=\"communicationDetails\">\n        <div class=\"col-12 col-sm-2\">\n          <h4>{{ 'Crm.CommunicationsMessage.Subject' | transloco }}:</h4>\n        </div>\n        <div class=\"col-12 col-sm-10\">\n          <p>{{ communicationDetails?.title }}</p>\n        </div>\n        <div class=\"col-12 col-sm-2\">\n          <h4>{{ 'Crm.CommunicationsMessage.Body' | transloco }}:</h4>\n        </div>\n        <div class=\"col-12 col-sm-10\">\n          <p [innerHTML]=\"communicationDetails?.body\"></p>\n        </div>\n        <div class=\"col-12 col-sm-2\">\n          <h4>{{ 'Crm.CommunicationsMessage.Location' | transloco }}:</h4>\n        </div>\n        <div class=\"col-12 col-sm-10\">\n          <p [innerHTML]=\"communicationDetails?.location\"></p>\n        </div>\n        <div class=\"col-12 col-sm-2\">\n          <h4>{{ 'Crm.CommunicationsMessage.SendUntil' | transloco }}:</h4>\n        </div>\n        <div class=\"col-12 col-sm-10\">\n          <p>{{ communicationDetails?.send_until | dateFormat: 'datetime' }}</p>\n        </div>\n        <div class=\"col-12 col-sm-2\">\n          <h4>{{ 'Crm.CommunicationsMessage.SendAt' | transloco }}:</h4>\n        </div>\n        <div class=\"col-12 col-sm-10\">\n          <p>{{ communicationDetails?.send_at | dateFormat: 'datetime' }}</p>\n        </div>\n        <div class=\"col-12 col-sm-2\">\n          <h4>{{ 'Crm.CommunicationsMessage.Pushed' | transloco }}:</h4>\n        </div>\n        <div class=\"col-12 col-sm-10 d-flex\">\n          <p>\n            <span [appDynamicBadge]=\"{\n                                itemsArray: [true, false],\n                                item: communicationDetails?.is_pushed\n                            }\"\n              color=\"success-danger\"\n              class=\"badge\">{{ communicationDetails?.is_pushed ? 'Yes' : 'No' }}</span>\n          </p>\n        </div>\n        <div class=\"col-12 col-sm-2\">\n          <h4>Sent:</h4>\n        </div>\n        <div class=\"col-12 col-sm-10 d-flex\">\n          <p>\n            <span [appDynamicBadge]=\"{\n                                itemsArray: [true, false],\n                                item: communicationDetails?.is_sent\n                            }\"\n              color=\"success-danger\"\n              class=\"badge\">{{ communicationDetails?.is_sent ? 'Yes' : 'No' }}</span>\n          </p>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".col-12{min-height:45px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color"] }, { kind: "component", type: i9$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "pipe", type: i14.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmCommunicationViewDetailsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmCommunicationViewDetailsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pw-smart-crm-communication-view-details', template: "<div class=\"me-auto col-xs-6\">\n  <p>This is a summary of your marketing email.</p>\n</div>\n\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n\n<div class=\"container-fluid pw-tab overflow-hidden\"\n  *ngIf=\"communicationDetails\">\n  <div class=\"card pb-0\">\n    <div class=\"card-body p-4\">\n      <div class=\"row\"\n        *ngIf=\"communicationDetails\">\n        <div class=\"col-12 col-sm-2\">\n          <h4>{{ 'Crm.CommunicationsMessage.Subject' | transloco }}:</h4>\n        </div>\n        <div class=\"col-12 col-sm-10\">\n          <p>{{ communicationDetails?.title }}</p>\n        </div>\n        <div class=\"col-12 col-sm-2\">\n          <h4>{{ 'Crm.CommunicationsMessage.Body' | transloco }}:</h4>\n        </div>\n        <div class=\"col-12 col-sm-10\">\n          <p [innerHTML]=\"communicationDetails?.body\"></p>\n        </div>\n        <div class=\"col-12 col-sm-2\">\n          <h4>{{ 'Crm.CommunicationsMessage.Location' | transloco }}:</h4>\n        </div>\n        <div class=\"col-12 col-sm-10\">\n          <p [innerHTML]=\"communicationDetails?.location\"></p>\n        </div>\n        <div class=\"col-12 col-sm-2\">\n          <h4>{{ 'Crm.CommunicationsMessage.SendUntil' | transloco }}:</h4>\n        </div>\n        <div class=\"col-12 col-sm-10\">\n          <p>{{ communicationDetails?.send_until | dateFormat: 'datetime' }}</p>\n        </div>\n        <div class=\"col-12 col-sm-2\">\n          <h4>{{ 'Crm.CommunicationsMessage.SendAt' | transloco }}:</h4>\n        </div>\n        <div class=\"col-12 col-sm-10\">\n          <p>{{ communicationDetails?.send_at | dateFormat: 'datetime' }}</p>\n        </div>\n        <div class=\"col-12 col-sm-2\">\n          <h4>{{ 'Crm.CommunicationsMessage.Pushed' | transloco }}:</h4>\n        </div>\n        <div class=\"col-12 col-sm-10 d-flex\">\n          <p>\n            <span [appDynamicBadge]=\"{\n                                itemsArray: [true, false],\n                                item: communicationDetails?.is_pushed\n                            }\"\n              color=\"success-danger\"\n              class=\"badge\">{{ communicationDetails?.is_pushed ? 'Yes' : 'No' }}</span>\n          </p>\n        </div>\n        <div class=\"col-12 col-sm-2\">\n          <h4>Sent:</h4>\n        </div>\n        <div class=\"col-12 col-sm-10 d-flex\">\n          <p>\n            <span [appDynamicBadge]=\"{\n                                itemsArray: [true, false],\n                                item: communicationDetails?.is_sent\n                            }\"\n              color=\"success-danger\"\n              class=\"badge\">{{ communicationDetails?.is_sent ? 'Yes' : 'No' }}</span>\n          </p>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".col-12{min-height:45px}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1.CrmService }] });
@@ -3952,10 +3952,10 @@ class SmartCrmMarketingViewComponent extends AppBaseComponent {
     constructor(injector) {
         super(injector);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmMarketingViewComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: SmartCrmMarketingViewComponent, selector: "pw-smart-crm-marketing-view", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 d-flex\">\n    <a href=\"javascript:void(0)\"\n      (click)=\"back()\"\n      class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n    <h2 class=\"mt-3\">Your Marketing Email at a Glance</h2>\n  </div>\n</div>\n\n<ul ngbNav\n  #nav=\"ngbNav\"\n  class=\"nav-tabs\">\n  <li [ngbNavItem]=\"1\">\n    <a ngbNavLink>View</a>\n    <ng-template ngbNavContent>\n      <pw-smart-crm-communication-view-details></pw-smart-crm-communication-view-details>\n    </ng-template>\n  </li>\n  <li [ngbNavItem]=\"2\">\n    <a ngbNavLink>Recipients</a>\n    <ng-template ngbNavContent>\n      <pw-smart-crm-marketing-users-list></pw-smart-crm-marketing-users-list>\n    </ng-template>\n  </li>\n</ul>\n\n<div [ngbNavOutlet]=\"nav\"></div>\n", dependencies: [{ kind: "directive", type: i2$2.NgbNavContent, selector: "ng-template[ngbNavContent]" }, { kind: "directive", type: i2$2.NgbNav, selector: "[ngbNav]", inputs: ["activeId", "animation", "destroyOnHide", "orientation", "roles", "keyboard"], outputs: ["activeIdChange", "shown", "hidden", "navChange"], exportAs: ["ngbNav"] }, { kind: "directive", type: i2$2.NgbNavItem, selector: "[ngbNavItem]", inputs: ["destroyOnHide", "disabled", "domId", "ngbNavItem"], outputs: ["shown", "hidden"], exportAs: ["ngbNavItem"] }, { kind: "directive", type: i2$2.NgbNavItemRole, selector: "[ngbNavItem]:not(ng-container)" }, { kind: "directive", type: i2$2.NgbNavLink, selector: "a[ngbNavLink]" }, { kind: "directive", type: i2$2.NgbNavLinkBase, selector: "[ngbNavLink]" }, { kind: "component", type: i2$2.NgbNavOutlet, selector: "[ngbNavOutlet]", inputs: ["paneRole", "ngbNavOutlet"] }, { kind: "component", type: SmartCrmCommunicationViewDetailsComponent, selector: "pw-smart-crm-communication-view-details" }, { kind: "component", type: SmartCrmMarketingUsersListComponent, selector: "pw-smart-crm-marketing-users-list" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmMarketingViewComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmMarketingViewComponent, selector: "pw-smart-crm-marketing-view", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 d-flex\">\n    <a href=\"javascript:void(0)\"\n      (click)=\"back()\"\n      class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n    <h2 class=\"mt-3\">Your Marketing Email at a Glance</h2>\n  </div>\n</div>\n\n<ul ngbNav\n  #nav=\"ngbNav\"\n  class=\"nav-tabs\">\n  <li [ngbNavItem]=\"1\">\n    <a ngbNavLink>View</a>\n    <ng-template ngbNavContent>\n      <pw-smart-crm-communication-view-details></pw-smart-crm-communication-view-details>\n    </ng-template>\n  </li>\n  <li [ngbNavItem]=\"2\">\n    <a ngbNavLink>Recipients</a>\n    <ng-template ngbNavContent>\n      <pw-smart-crm-marketing-users-list></pw-smart-crm-marketing-users-list>\n    </ng-template>\n  </li>\n</ul>\n\n<div [ngbNavOutlet]=\"nav\"></div>\n", dependencies: [{ kind: "directive", type: i2$2.NgbNavContent, selector: "ng-template[ngbNavContent]" }, { kind: "directive", type: i2$2.NgbNav, selector: "[ngbNav]", inputs: ["activeId", "animation", "destroyOnHide", "orientation", "roles", "keyboard"], outputs: ["activeIdChange", "shown", "hidden", "navChange"], exportAs: ["ngbNav"] }, { kind: "directive", type: i2$2.NgbNavItem, selector: "[ngbNavItem]", inputs: ["destroyOnHide", "disabled", "domId", "ngbNavItem"], outputs: ["shown", "hidden"], exportAs: ["ngbNavItem"] }, { kind: "directive", type: i2$2.NgbNavItemRole, selector: "[ngbNavItem]:not(ng-container)" }, { kind: "directive", type: i2$2.NgbNavLink, selector: "a[ngbNavLink]" }, { kind: "directive", type: i2$2.NgbNavLinkBase, selector: "[ngbNavLink]" }, { kind: "component", type: i2$2.NgbNavOutlet, selector: "[ngbNavOutlet]", inputs: ["paneRole", "ngbNavOutlet"] }, { kind: "component", type: SmartCrmCommunicationViewDetailsComponent, selector: "pw-smart-crm-communication-view-details" }, { kind: "component", type: SmartCrmMarketingUsersListComponent, selector: "pw-smart-crm-marketing-users-list" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmMarketingViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmMarketingViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pw-smart-crm-marketing-view', template: "<div class=\"row\">\n  <div class=\"col-12 d-flex\">\n    <a href=\"javascript:void(0)\"\n      (click)=\"back()\"\n      class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n    <h2 class=\"mt-3\">Your Marketing Email at a Glance</h2>\n  </div>\n</div>\n\n<ul ngbNav\n  #nav=\"ngbNav\"\n  class=\"nav-tabs\">\n  <li [ngbNavItem]=\"1\">\n    <a ngbNavLink>View</a>\n    <ng-template ngbNavContent>\n      <pw-smart-crm-communication-view-details></pw-smart-crm-communication-view-details>\n    </ng-template>\n  </li>\n  <li [ngbNavItem]=\"2\">\n    <a ngbNavLink>Recipients</a>\n    <ng-template ngbNavContent>\n      <pw-smart-crm-marketing-users-list></pw-smart-crm-marketing-users-list>\n    </ng-template>\n  </li>\n</ul>\n\n<div [ngbNavOutlet]=\"nav\"></div>\n" }]
         }], ctorParameters: () => [{ type: i0.Injector }] });
@@ -4151,10 +4151,10 @@ class SmartCrmBoardComponent extends AppBaseComponent {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", 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.6", type: SmartCrmBoardComponent, selector: "pw-smart-crm-board", usesInheritance: true, ngImport: i0, template: "<div class=\"w-100 text-center mt-3\">\n  <ng-template [ngIf]=\"!isLoaded\">\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </ng-template>\n</div>\n<div class=\"row mb-4\"\n  *ngIf=\"isLoaded\">\n  <div class=\"col-12 col-sm-4\">\n    <select class=\"form-select\"\n      (change)=\"onChangeCategory($event.target.value)\">\n      <option *ngFor=\"let option of categories\"\n        [value]=\"option.id\">{{ option.name }}</option>\n    </select>\n  </div>\n  <div class=\"col-12 col-sm-8 mt-2 mt-sm-0 mb-3\">\n    <a class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"add-opportunities\"\n      [routerLink]=\"['/' + subscription?.slug + routers.opportunityAdd]\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n    </a>\n  </div>\n</div>\n<div *ngIf=\"isLoaded\"\n  class=\"list-container d-flex\"\n  cdkDropList\n  [cdkDropListData]=\"opportunitiesGroup\"\n  (cdkDropListDropped)=\"dropGroup($event)\">\n  <div cdkDropListGroup\n    class=\"opportunities-container main-div crm-board-primary\"\n    [class.dynamic-columns-wrapper]=\"group.stage.collapsed\"\n    [style.--border-color]=\"group.stage.color_code\"\n    *ngFor=\"let group of opportunitiesGroup\"\n    cdkDrag\n    [cdkDragData]=\"group\">\n    <div class=\"opportunities-board-title d-flex align-items-center py-1\">\n      <span class=\"collapse-column-toggle\">\n        <i class=\"fas\"\n        [ngClass]=\"{\n          'fa-angle-right': !group.stage.collapsed,\n          'fa-angle-down': group.stage.collapsed\n        }\" (click)=\"toggleColumn($event, group)\" aria-hidden=\"true\"></i>\n      </span>\n      <p class=\"stage-name mb-0 py-2 ps-4\">\n        <span class=\"badge rounded-pill text-white px-3\" [style.--background-color]=\"group.stage.color_code\">{{ group.stage.name }}</span>\n      </p>\n      <span class=\"ms-auto me-4 add-opportunity-icon\">\n        <a class=\"text-secondary\"\n          [routerLink]=\"['/' + subscription?.slug + routers.opportunityAdd]\"\n          [queryParams]=\"{\n                        stage_id: group?.stage?.id,\n                        category: group.stage.crm_opportunity_category_ids\n                    }\"><i class=\"fa fa-plus-square\" aria-hidden=\"true\"></i></a>\n      </span>\n    </div>\n    <div cdkDropList\n      class=\"opportunities-list items-container\"\n      [id]=\"group.stage.name\"\n      [cdkDropListData]=\"group.opportunities\"\n      (cdkDropListDropped)=\"dropItem($event)\"\n      [cdkDropListConnectedTo]=\"getConnectedList()\">\n\n      <div class=\"opportunities-box mb-3\"\n        *ngFor=\"let item of group.opportunities\"\n        cdkDrag\n        [cdkDragData]=\"item\">\n        <span ngbTooltip=\"Edit\"\n          class=\"float-end edit-button\"\n          [routerLink]=\"['/' + subscription?.slug + routers.opportunities, item.id]\">\n          <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n        </span>\n        <p class=\"fw-bold mb-1\">{{ item.title }}</p>\n        <a class=\"mb-1\"\n          [routerLink]=\"[\n                        '/' + subscription?.slug + routers.accountInfo,\n                        item?.crm_account_id\n                    ]\">{{ item?.crm_account?.name }}</a>\n          <p class=\"mb-1\">\n            {{ (item?.one_time_amount / 100 | currency) }} One-time / {{ (item?.monthly_amount / 100 | currency) }} MRR\n          </p>\n        <a *ngIf=\"item?.owner[0]?.user_avatar\"\n          [routerLink]=\"['/members', item?.owner[0]?.slug]\"><img alt=\"member image\"\n            [src]=\"item?.owner[0]?.user_avatar[0]?.url\"\n            [width]=\"'30'\"\n            class=\"squared_logo float-end\"\n            [height]=\"'30'\"\n            onerror=\"this.onerror=null;this.src='assets/img/icons/male.png';\" /></a>\n        <p class=\"mb-1\">{{ item.starting_at | dateFormat }}</p>\n        <p class=\"mb-1 badge bg-warning\">{{ item?.crm_opportunity_stage?.name }}</p>\n      </div>\n    </div>\n    <div class=\"footer footer-list\">\n        <div class=\"footer-item\">\n          <span class=\"footer-label\">Total One-Time:</span>\n          <span class=\"footer-value\">{{ group.totals.oneTime / 100 | currency }}</span>\n        </div>\n        <div class=\"footer-item\">\n          <span class=\"footer-label\">Total MRR:</span>\n          <span class=\"footer-value\">{{ group.totals.mrr / 100 | currency }}</span>\n        </div>\n        <div class=\"footer-item\">\n          <span class=\"footer-label\">Total Count:</span>\n          <span class=\"footer-value\">{{ group.totals.count }}</span>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div *ngIf=\"!masterStages?.length && isLoaded\">\n  <pw-no-data [withImage]=\"false\" [message]=\"'Crm.OpportunitiesBoardMessages.NoStages' | transloco\">\n    <a #content [routerLink]=\"['/' + subscription?.slug + routers.configurations, 'categories']\">Take me to the configuration page.</a>\n  </pw-no-data>\n</div>\n\n<div *ngIf=\"totalCount === 0 && !masterStages.length && categories.length\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.OpportunitiesBoardMessages.NoDataMessage' | transloco\">\n  </pw-no-data>\n</div>\n\n<div *ngIf=\"!opportunitiesGroup.length && isLoaded && masterStages.length && categories.length\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.OpportunitiesBoardMessages.NoStageAssociated' | transloco\">\n    <a #content [routerLink]=\"['/' + subscription?.slug + routers.configurations, 'stage']\">Please add some in the configuration section.</a>\n  </pw-no-data>\n</div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.card{box-shadow:2px 3px gray;padding-bottom:0}.main-div{border:1px solid rgb(175,175,175);border-radius:5px;margin-right:10px}.opportunities-board-title{background-color:#fafafa}.opportunities-board-title h4{color:#fff}.edit-button{cursor:pointer}.items-container{height:500px;overflow-y:scroll}.list-container{overflow:auto;width:100%}.opportunities-container{display:inline-block;margin:0 13px 13px 0;max-width:80%;min-width:280px;vertical-align:top}.opportunities-list{background:#fff;border:solid 1px rgb(204,204,204);display:block;min-height:450px}.footer-list{background:#fff;border:solid 1px rgb(204,204,204);display:block;min-height:10px}.opportunities-box{align-items:center;background:#fff;border:solid 1px rgb(204,204,204);box-sizing:border-box;color:#000000de;cursor:move;display:block;flex-direction:row;font-size:14px;justify-content:space-between;margin:5px;padding:10px 20px}.cdk-drag-preview{border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;box-sizing:border-box}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.opportunities-list.cdk-drop-list-dragging .opportunities-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.footer-list.cdk-drop-list-dragging .opportunities-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.add-opportunity-icon{color:#fff;font-size:16px}.collapse-column-toggle{background:#e6dfdf;border-radius:2px;cursor:pointer;font-size:16px;margin-left:10px}.collapse-column-toggle i{padding:0 8px}.dynamic-columns-wrapper{min-width:50px;width:50px!important}.dynamic-columns-wrapper .opportunities-list,.dynamic-columns-wrapper .footer-list{display:none}.dynamic-columns-wrapper .opportunities-board-title{flex-direction:column;height:100%;min-height:450px}.dynamic-columns-wrapper .opportunities-board-title .collapse-column-toggle{margin-left:0}.dynamic-columns-wrapper .opportunities-board-title .stage-name{padding-left:0!important;writing-mode:vertical-lr}.dynamic-columns-wrapper .opportunities-board-title .stage-name .badge{padding:8px 4px!important}.dynamic-columns-wrapper .opportunities-board-title .add-opportunity-icon{margin:0 auto!important}.crm-board-success{border-top:3px solid rgb(69,210,146)}.crm-board-success .stage-name .badge{background-color:#45d292}.crm-board-info{border-top:3px solid rgb(28,188,216)}.crm-board-info .stage-name .badge{background-color:#1cbcd8}.crm-board-danger{border-top:3px solid rgb(255,88,107)}.crm-board-danger .stage-name .badge{background-color:#ff586b}.crm-board-warning{border-top:3px solid rgb(251,171,0)}.crm-board-warning .stage-name .badge{background-color:#fbab00}.footer{background-color:#f8f9fa;padding:10px;display:flex;justify-content:space-between;flex-direction:row;align-items:center;border-radius:8px}.footer-item{display:flex;flex-direction:column;align-items:center}.footer-label{font-weight:700;color:#6c757d}.footer-value{color:#212529;font-size:1.1em}.crm-board-primary{border-top:3px solid var(--border-color, var(--tabs_bg))}.crm-board-primary .stage-name .badge{background-color:var(--background-color, var(--tabs_bg))}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.LazyImgDirective, selector: "img" }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i9$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "directive", type: i8$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i8$1.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i8$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i11.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i2$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i14.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmBoardComponent, deps: [{ token: i1.CrmService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmBoardComponent, selector: "pw-smart-crm-board", usesInheritance: true, ngImport: i0, template: "<div class=\"w-100 text-center mt-3\">\n  <ng-template [ngIf]=\"!isLoaded\">\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </ng-template>\n</div>\n<div class=\"row mb-4\"\n  *ngIf=\"isLoaded\">\n  <div class=\"col-12 col-sm-4\">\n    <select class=\"form-select\"\n      (change)=\"onChangeCategory($event.target.value)\">\n      <option *ngFor=\"let option of categories\"\n        [value]=\"option.id\">{{ option.name }}</option>\n    </select>\n  </div>\n  <div class=\"col-12 col-sm-8 mt-2 mt-sm-0 mb-3\">\n    <a class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"add-opportunities\"\n      [routerLink]=\"['/' + subscription?.slug + routers.opportunityAdd]\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n    </a>\n  </div>\n</div>\n<div *ngIf=\"isLoaded\"\n  class=\"list-container d-flex\"\n  cdkDropList\n  [cdkDropListData]=\"opportunitiesGroup\"\n  (cdkDropListDropped)=\"dropGroup($event)\">\n  <div cdkDropListGroup\n    class=\"opportunities-container main-div crm-board-primary\"\n    [class.dynamic-columns-wrapper]=\"group.stage.collapsed\"\n    [style.--border-color]=\"group.stage.color_code\"\n    *ngFor=\"let group of opportunitiesGroup\"\n    cdkDrag\n    [cdkDragData]=\"group\">\n    <div class=\"opportunities-board-title d-flex align-items-center py-1\">\n      <span class=\"collapse-column-toggle\">\n        <i class=\"fas\"\n        [ngClass]=\"{\n          'fa-angle-right': !group.stage.collapsed,\n          'fa-angle-down': group.stage.collapsed\n        }\" (click)=\"toggleColumn($event, group)\" aria-hidden=\"true\"></i>\n      </span>\n      <p class=\"stage-name mb-0 py-2 ps-4\">\n        <span class=\"badge rounded-pill text-white px-3\" [style.--background-color]=\"group.stage.color_code\">{{ group.stage.name }}</span>\n      </p>\n      <span class=\"ms-auto me-4 add-opportunity-icon\">\n        <a class=\"text-secondary\"\n          [routerLink]=\"['/' + subscription?.slug + routers.opportunityAdd]\"\n          [queryParams]=\"{\n                        stage_id: group?.stage?.id,\n                        category: group.stage.crm_opportunity_category_ids\n                    }\"><i class=\"fa fa-plus-square\" aria-hidden=\"true\"></i></a>\n      </span>\n    </div>\n    <div cdkDropList\n      class=\"opportunities-list items-container\"\n      [id]=\"group.stage.name\"\n      [cdkDropListData]=\"group.opportunities\"\n      (cdkDropListDropped)=\"dropItem($event)\"\n      [cdkDropListConnectedTo]=\"getConnectedList()\">\n\n      <div class=\"opportunities-box mb-3\"\n        *ngFor=\"let item of group.opportunities\"\n        cdkDrag\n        [cdkDragData]=\"item\">\n        <span ngbTooltip=\"Edit\"\n          class=\"float-end edit-button\"\n          [routerLink]=\"['/' + subscription?.slug + routers.opportunities, item.id]\">\n          <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n        </span>\n        <p class=\"fw-bold mb-1\">{{ item.title }}</p>\n        <a class=\"mb-1\"\n          [routerLink]=\"[\n                        '/' + subscription?.slug + routers.accountInfo,\n                        item?.crm_account_id\n                    ]\">{{ item?.crm_account?.name }}</a>\n          <p class=\"mb-1\">\n            {{ (item?.one_time_amount / 100 | currency) }} One-time / {{ (item?.monthly_amount / 100 | currency) }} MRR\n          </p>\n        <a *ngIf=\"item?.owner[0]?.user_avatar\"\n          [routerLink]=\"['/members', item?.owner[0]?.slug]\"><img alt=\"member image\"\n            [src]=\"item?.owner[0]?.user_avatar[0]?.url\"\n            [width]=\"'30'\"\n            class=\"squared_logo float-end\"\n            [height]=\"'30'\"\n            onerror=\"this.onerror=null;this.src='assets/img/icons/male.png';\" /></a>\n        <p class=\"mb-1\">{{ item.starting_at | dateFormat }}</p>\n        <p class=\"mb-1 badge bg-warning\">{{ item?.crm_opportunity_stage?.name }}</p>\n      </div>\n    </div>\n    <div class=\"footer footer-list\">\n        <div class=\"footer-item\">\n          <span class=\"footer-label\">Total One-Time:</span>\n          <span class=\"footer-value\">{{ group.totals.oneTime / 100 | currency }}</span>\n        </div>\n        <div class=\"footer-item\">\n          <span class=\"footer-label\">Total MRR:</span>\n          <span class=\"footer-value\">{{ group.totals.mrr / 100 | currency }}</span>\n        </div>\n        <div class=\"footer-item\">\n          <span class=\"footer-label\">Total Count:</span>\n          <span class=\"footer-value\">{{ group.totals.count }}</span>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div *ngIf=\"!masterStages?.length && isLoaded\">\n  <pw-no-data [withImage]=\"false\" [message]=\"'Crm.OpportunitiesBoardMessages.NoStages' | transloco\">\n    <a #content [routerLink]=\"['/' + subscription?.slug + routers.configurations, 'categories']\">Take me to the configuration page.</a>\n  </pw-no-data>\n</div>\n\n<div *ngIf=\"totalCount === 0 && !masterStages.length && categories.length\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.OpportunitiesBoardMessages.NoDataMessage' | transloco\">\n  </pw-no-data>\n</div>\n\n<div *ngIf=\"!opportunitiesGroup.length && isLoaded && masterStages.length && categories.length\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.OpportunitiesBoardMessages.NoStageAssociated' | transloco\">\n    <a #content [routerLink]=\"['/' + subscription?.slug + routers.configurations, 'stage']\">Please add some in the configuration section.</a>\n  </pw-no-data>\n</div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.card{box-shadow:2px 3px gray;padding-bottom:0}.main-div{border:1px solid rgb(175,175,175);border-radius:5px;margin-right:10px}.opportunities-board-title{background-color:#fafafa}.opportunities-board-title h4{color:#fff}.edit-button{cursor:pointer}.items-container{height:500px;overflow-y:scroll}.list-container{overflow:auto;width:100%}.opportunities-container{display:inline-block;margin:0 13px 13px 0;max-width:80%;min-width:280px;vertical-align:top}.opportunities-list{background:#fff;border:solid 1px rgb(204,204,204);display:block;min-height:450px}.footer-list{background:#fff;border:solid 1px rgb(204,204,204);display:block;min-height:10px}.opportunities-box{align-items:center;background:#fff;border:solid 1px rgb(204,204,204);box-sizing:border-box;color:#000000de;cursor:move;display:block;flex-direction:row;font-size:14px;justify-content:space-between;margin:5px;padding:10px 20px}.cdk-drag-preview{border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;box-sizing:border-box}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.opportunities-list.cdk-drop-list-dragging .opportunities-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.footer-list.cdk-drop-list-dragging .opportunities-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.add-opportunity-icon{color:#fff;font-size:16px}.collapse-column-toggle{background:#e6dfdf;border-radius:2px;cursor:pointer;font-size:16px;margin-left:10px}.collapse-column-toggle i{padding:0 8px}.dynamic-columns-wrapper{min-width:50px;width:50px!important}.dynamic-columns-wrapper .opportunities-list,.dynamic-columns-wrapper .footer-list{display:none}.dynamic-columns-wrapper .opportunities-board-title{flex-direction:column;height:100%;min-height:450px}.dynamic-columns-wrapper .opportunities-board-title .collapse-column-toggle{margin-left:0}.dynamic-columns-wrapper .opportunities-board-title .stage-name{padding-left:0!important;writing-mode:vertical-lr}.dynamic-columns-wrapper .opportunities-board-title .stage-name .badge{padding:8px 4px!important}.dynamic-columns-wrapper .opportunities-board-title .add-opportunity-icon{margin:0 auto!important}.crm-board-success{border-top:3px solid rgb(69,210,146)}.crm-board-success .stage-name .badge{background-color:#45d292}.crm-board-info{border-top:3px solid rgb(28,188,216)}.crm-board-info .stage-name .badge{background-color:#1cbcd8}.crm-board-danger{border-top:3px solid rgb(255,88,107)}.crm-board-danger .stage-name .badge{background-color:#ff586b}.crm-board-warning{border-top:3px solid rgb(251,171,0)}.crm-board-warning .stage-name .badge{background-color:#fbab00}.footer{background-color:#f8f9fa;padding:10px;display:flex;justify-content:space-between;flex-direction:row;align-items:center;border-radius:8px}.footer-item{display:flex;flex-direction:column;align-items:center}.footer-label{font-weight:700;color:#6c757d}.footer-value{color:#212529;font-size:1.1em}.crm-board-primary{border-top:3px solid var(--border-color, var(--tabs_bg))}.crm-board-primary .stage-name .badge{background-color:var(--background-color, var(--tabs_bg))}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.LazyImgDirective, selector: "img" }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i9$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "directive", type: i8$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i8$1.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i8$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i11.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i2$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i14.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmBoardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmBoardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pw-smart-crm-board', template: "<div class=\"w-100 text-center mt-3\">\n  <ng-template [ngIf]=\"!isLoaded\">\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </ng-template>\n</div>\n<div class=\"row mb-4\"\n  *ngIf=\"isLoaded\">\n  <div class=\"col-12 col-sm-4\">\n    <select class=\"form-select\"\n      (change)=\"onChangeCategory($event.target.value)\">\n      <option *ngFor=\"let option of categories\"\n        [value]=\"option.id\">{{ option.name }}</option>\n    </select>\n  </div>\n  <div class=\"col-12 col-sm-8 mt-2 mt-sm-0 mb-3\">\n    <a class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"add-opportunities\"\n      [routerLink]=\"['/' + subscription?.slug + routers.opportunityAdd]\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n    </a>\n  </div>\n</div>\n<div *ngIf=\"isLoaded\"\n  class=\"list-container d-flex\"\n  cdkDropList\n  [cdkDropListData]=\"opportunitiesGroup\"\n  (cdkDropListDropped)=\"dropGroup($event)\">\n  <div cdkDropListGroup\n    class=\"opportunities-container main-div crm-board-primary\"\n    [class.dynamic-columns-wrapper]=\"group.stage.collapsed\"\n    [style.--border-color]=\"group.stage.color_code\"\n    *ngFor=\"let group of opportunitiesGroup\"\n    cdkDrag\n    [cdkDragData]=\"group\">\n    <div class=\"opportunities-board-title d-flex align-items-center py-1\">\n      <span class=\"collapse-column-toggle\">\n        <i class=\"fas\"\n        [ngClass]=\"{\n          'fa-angle-right': !group.stage.collapsed,\n          'fa-angle-down': group.stage.collapsed\n        }\" (click)=\"toggleColumn($event, group)\" aria-hidden=\"true\"></i>\n      </span>\n      <p class=\"stage-name mb-0 py-2 ps-4\">\n        <span class=\"badge rounded-pill text-white px-3\" [style.--background-color]=\"group.stage.color_code\">{{ group.stage.name }}</span>\n      </p>\n      <span class=\"ms-auto me-4 add-opportunity-icon\">\n        <a class=\"text-secondary\"\n          [routerLink]=\"['/' + subscription?.slug + routers.opportunityAdd]\"\n          [queryParams]=\"{\n                        stage_id: group?.stage?.id,\n                        category: group.stage.crm_opportunity_category_ids\n                    }\"><i class=\"fa fa-plus-square\" aria-hidden=\"true\"></i></a>\n      </span>\n    </div>\n    <div cdkDropList\n      class=\"opportunities-list items-container\"\n      [id]=\"group.stage.name\"\n      [cdkDropListData]=\"group.opportunities\"\n      (cdkDropListDropped)=\"dropItem($event)\"\n      [cdkDropListConnectedTo]=\"getConnectedList()\">\n\n      <div class=\"opportunities-box mb-3\"\n        *ngFor=\"let item of group.opportunities\"\n        cdkDrag\n        [cdkDragData]=\"item\">\n        <span ngbTooltip=\"Edit\"\n          class=\"float-end edit-button\"\n          [routerLink]=\"['/' + subscription?.slug + routers.opportunities, item.id]\">\n          <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n        </span>\n        <p class=\"fw-bold mb-1\">{{ item.title }}</p>\n        <a class=\"mb-1\"\n          [routerLink]=\"[\n                        '/' + subscription?.slug + routers.accountInfo,\n                        item?.crm_account_id\n                    ]\">{{ item?.crm_account?.name }}</a>\n          <p class=\"mb-1\">\n            {{ (item?.one_time_amount / 100 | currency) }} One-time / {{ (item?.monthly_amount / 100 | currency) }} MRR\n          </p>\n        <a *ngIf=\"item?.owner[0]?.user_avatar\"\n          [routerLink]=\"['/members', item?.owner[0]?.slug]\"><img alt=\"member image\"\n            [src]=\"item?.owner[0]?.user_avatar[0]?.url\"\n            [width]=\"'30'\"\n            class=\"squared_logo float-end\"\n            [height]=\"'30'\"\n            onerror=\"this.onerror=null;this.src='assets/img/icons/male.png';\" /></a>\n        <p class=\"mb-1\">{{ item.starting_at | dateFormat }}</p>\n        <p class=\"mb-1 badge bg-warning\">{{ item?.crm_opportunity_stage?.name }}</p>\n      </div>\n    </div>\n    <div class=\"footer footer-list\">\n        <div class=\"footer-item\">\n          <span class=\"footer-label\">Total One-Time:</span>\n          <span class=\"footer-value\">{{ group.totals.oneTime / 100 | currency }}</span>\n        </div>\n        <div class=\"footer-item\">\n          <span class=\"footer-label\">Total MRR:</span>\n          <span class=\"footer-value\">{{ group.totals.mrr / 100 | currency }}</span>\n        </div>\n        <div class=\"footer-item\">\n          <span class=\"footer-label\">Total Count:</span>\n          <span class=\"footer-value\">{{ group.totals.count }}</span>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div *ngIf=\"!masterStages?.length && isLoaded\">\n  <pw-no-data [withImage]=\"false\" [message]=\"'Crm.OpportunitiesBoardMessages.NoStages' | transloco\">\n    <a #content [routerLink]=\"['/' + subscription?.slug + routers.configurations, 'categories']\">Take me to the configuration page.</a>\n  </pw-no-data>\n</div>\n\n<div *ngIf=\"totalCount === 0 && !masterStages.length && categories.length\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.OpportunitiesBoardMessages.NoDataMessage' | transloco\">\n  </pw-no-data>\n</div>\n\n<div *ngIf=\"!opportunitiesGroup.length && isLoaded && masterStages.length && categories.length\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.OpportunitiesBoardMessages.NoStageAssociated' | transloco\">\n    <a #content [routerLink]=\"['/' + subscription?.slug + routers.configurations, 'stage']\">Please add some in the configuration section.</a>\n  </pw-no-data>\n</div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.card{box-shadow:2px 3px gray;padding-bottom:0}.main-div{border:1px solid rgb(175,175,175);border-radius:5px;margin-right:10px}.opportunities-board-title{background-color:#fafafa}.opportunities-board-title h4{color:#fff}.edit-button{cursor:pointer}.items-container{height:500px;overflow-y:scroll}.list-container{overflow:auto;width:100%}.opportunities-container{display:inline-block;margin:0 13px 13px 0;max-width:80%;min-width:280px;vertical-align:top}.opportunities-list{background:#fff;border:solid 1px rgb(204,204,204);display:block;min-height:450px}.footer-list{background:#fff;border:solid 1px rgb(204,204,204);display:block;min-height:10px}.opportunities-box{align-items:center;background:#fff;border:solid 1px rgb(204,204,204);box-sizing:border-box;color:#000000de;cursor:move;display:block;flex-direction:row;font-size:14px;justify-content:space-between;margin:5px;padding:10px 20px}.cdk-drag-preview{border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;box-sizing:border-box}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.opportunities-list.cdk-drop-list-dragging .opportunities-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.footer-list.cdk-drop-list-dragging .opportunities-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.add-opportunity-icon{color:#fff;font-size:16px}.collapse-column-toggle{background:#e6dfdf;border-radius:2px;cursor:pointer;font-size:16px;margin-left:10px}.collapse-column-toggle i{padding:0 8px}.dynamic-columns-wrapper{min-width:50px;width:50px!important}.dynamic-columns-wrapper .opportunities-list,.dynamic-columns-wrapper .footer-list{display:none}.dynamic-columns-wrapper .opportunities-board-title{flex-direction:column;height:100%;min-height:450px}.dynamic-columns-wrapper .opportunities-board-title .collapse-column-toggle{margin-left:0}.dynamic-columns-wrapper .opportunities-board-title .stage-name{padding-left:0!important;writing-mode:vertical-lr}.dynamic-columns-wrapper .opportunities-board-title .stage-name .badge{padding:8px 4px!important}.dynamic-columns-wrapper .opportunities-board-title .add-opportunity-icon{margin:0 auto!important}.crm-board-success{border-top:3px solid rgb(69,210,146)}.crm-board-success .stage-name .badge{background-color:#45d292}.crm-board-info{border-top:3px solid rgb(28,188,216)}.crm-board-info .stage-name .badge{background-color:#1cbcd8}.crm-board-danger{border-top:3px solid rgb(255,88,107)}.crm-board-danger .stage-name .badge{background-color:#ff586b}.crm-board-warning{border-top:3px solid rgb(251,171,0)}.crm-board-warning .stage-name .badge{background-color:#fbab00}.footer{background-color:#f8f9fa;padding:10px;display:flex;justify-content:space-between;flex-direction:row;align-items:center;border-radius:8px}.footer-item{display:flex;flex-direction:column;align-items:center}.footer-label{font-weight:700;color:#6c757d}.footer-value{color:#212529;font-size:1.1em}.crm-board-primary{border-top:3px solid var(--border-color, var(--tabs_bg))}.crm-board-primary .stage-name .badge{background-color:var(--background-color, var(--tabs_bg))}\n"] }]
         }], ctorParameters: () => [{ type: i1.CrmService }, { type: i0.Injector }] });
@@ -4446,10 +4446,10 @@ class SmartCrmOpportunitiesDetailsComponent extends AppBaseComponent {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmOpportunitiesDetailsComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: SmartCrmOpportunitiesDetailsComponent, selector: "pw-smart-crm-opportunities-details", usesInheritance: true, ngImport: i0, template: "<div class=\"me-auto col-xs-6\">\n  <a href=\"javascript:void(0)\"\n    (click)=\"back()\"\n    class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n  <h3 class=\"m-subheader__title m-subheader__title--separator\">\n    <span>{{ 'Crm.OpportunitiesMessage.CrmOpportunity' | transloco }}:\n      {{ data?.name ? data?.name : ('Label.AddNew' | transloco) }}</span>\n  </h3>\n</div>\n<div class=\"p-2 mt-3\">\n  <form [formGroup]=\"form\"\n    (ngSubmit)=\"onSave()\">\n    <div class=\"row\">\n      <div class=\"col-12 col-sm-8\">\n        <pw-input-container [label]=\"'Crm.OpportunitiesMessage.Title' | transloco\"\n          name=\"title\"\n          [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\">{{ 'Crm.OpportunitiesMessage.Account' | transloco\n                    }}<span class=\"text-danger\">*</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>{{ '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\">{{ 'Crm.OpportunitiesMessage.OneTimeAmount' | transloco\n                        }}<span class=\"text-danger\">*</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\">{{ 'Crm.OpportunitiesMessage.MonthlyAmount' | transloco\n                        }}<span class=\"text-danger\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n                            'Crm.OpportunitiesMessage.Tooltip.MonthlyAmount' | 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\">\n        <label class=\"info-circle\">{{ '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\">{{ 'Crm.OpportunitiesMessage.WinChance' | transloco }}\n            <span class=\"text-danger\">*</span>\n            <span class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.OpportunitiesMessage.Tooltip.WinChance' | transloco }}\n            </span>\n          </label>\n          <select formControlName=\"win_chances\"\n            class=\"form-control form-select\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['win_chances'].errors }\">\n            <option *ngFor=\"let option of winChance\"\n              [value]=\"option\">\n              {{ option }}\n            </option>\n          </select>\n        </div>\n      </div>\n\n      <div class=\"col-12 col-md-4\">\n        <div class=\"mb-3\">\n          <label class=\"info-circle\">{{ 'Crm.OpportunitiesMessage.Won' | transloco }}\n            <span class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.OpportunitiesMessage.Tooltip.Won' | transloco }}\n            </span>\n          </label>\n          <input type=\"number\"\n            NumberDirective\n            class=\"form-control\"\n            formControlName=\"won\"\n            id=\"won\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['won'].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\">{{ 'Crm.OpportunitiesMessage.StartingAt' | transloco\n                        }}<span class=\"text-danger\">*</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=\"yyyy-mm-dd\"\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-4\">\n        <pw-input-container [showTooltip]=\"true\"\n          [tooltipText]=\"'Crm.OpportunitiesMessage.Tooltip.Category' | transloco\"\n          [label]=\"'Crm.OpportunitiesMessage.Categories' | transloco\"\n          name=\"crm_opportunity_category_ids\"\n          [errorMsg]=\"'Crm.OpportunitiesMessage.CategoryErrorMessage' | transloco\">\n          <p-multiSelect [options]=\"categories\"\n            (onChange)=\"onCategoryChange($event)\"\n            formControlName=\"crm_opportunity_category_ids\"\n            appendTo=\"body\"></p-multiSelect>\n        </pw-input-container>\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=\"yyyy-mm-dd\"\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        <pw-input-container [showTooltip]=\"true\"\n          [tooltipText]=\"'Crm.OpportunitiesMessage.Tooltip.StageOpportunity' | transloco\"\n          [label]=\"'Crm.OpportunitiesMessage.Stage' | transloco\"\n          name=\"crm_opportunity_stage_id\"\n          errorMsg=\"Please select stage\">\n          <select class=\"form-select\"\n            formControlName=\"crm_opportunity_stage_id\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['crm_opportunity_stage_id'].errors }\">\n            <option value=\"\">Select Stage</option>\n            <option *ngFor=\"let option of stages\"\n              [value]=\"option.id\">\n              {{ option.name }}\n            </option>\n          </select>\n        </pw-input-container>\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          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}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.NumberDirective, selector: "input[numbersOnly]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "component", type: i6.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "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.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"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: i11.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText"] }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmOpportunitiesDetailsComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmOpportunitiesDetailsComponent, selector: "pw-smart-crm-opportunities-details", usesInheritance: true, ngImport: i0, template: "<div class=\"me-auto col-xs-6\">\n  <a href=\"javascript:void(0)\"\n    (click)=\"back()\"\n    class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n  <h3 class=\"m-subheader__title m-subheader__title--separator\">\n    <span>{{ 'Crm.OpportunitiesMessage.CrmOpportunity' | transloco }}:\n      {{ data?.name ? data?.name : ('Label.AddNew' | transloco) }}</span>\n  </h3>\n</div>\n<div class=\"p-2 mt-3\">\n  <form [formGroup]=\"form\"\n    (ngSubmit)=\"onSave()\">\n    <div class=\"row\">\n      <div class=\"col-12 col-sm-8\">\n        <pw-input-container [label]=\"'Crm.OpportunitiesMessage.Title' | transloco\"\n          name=\"title\"\n          [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\">{{ 'Crm.OpportunitiesMessage.Account' | transloco\n                    }}<span class=\"text-danger\">*</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>{{ '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\">{{ 'Crm.OpportunitiesMessage.OneTimeAmount' | transloco\n                        }}<span class=\"text-danger\">*</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\">{{ 'Crm.OpportunitiesMessage.MonthlyAmount' | transloco\n                        }}<span class=\"text-danger\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n                            'Crm.OpportunitiesMessage.Tooltip.MonthlyAmount' | 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\">\n        <label class=\"info-circle\">{{ '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\">{{ 'Crm.OpportunitiesMessage.WinChance' | transloco }}\n            <span class=\"text-danger\">*</span>\n            <span class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.OpportunitiesMessage.Tooltip.WinChance' | transloco }}\n            </span>\n          </label>\n          <select formControlName=\"win_chances\"\n            class=\"form-control form-select\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['win_chances'].errors }\">\n            <option *ngFor=\"let option of winChance\"\n              [value]=\"option\">\n              {{ option }}\n            </option>\n          </select>\n        </div>\n      </div>\n\n      <div class=\"col-12 col-md-4\">\n        <div class=\"mb-3\">\n          <label class=\"info-circle\">{{ 'Crm.OpportunitiesMessage.Won' | transloco }}\n            <span class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.OpportunitiesMessage.Tooltip.Won' | transloco }}\n            </span>\n          </label>\n          <input type=\"number\"\n            NumberDirective\n            class=\"form-control\"\n            formControlName=\"won\"\n            id=\"won\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['won'].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\">{{ 'Crm.OpportunitiesMessage.StartingAt' | transloco\n                        }}<span class=\"text-danger\">*</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=\"yyyy-mm-dd\"\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-4\">\n        <pw-input-container [showTooltip]=\"true\"\n          [tooltipText]=\"'Crm.OpportunitiesMessage.Tooltip.Category' | transloco\"\n          [label]=\"'Crm.OpportunitiesMessage.Categories' | transloco\"\n          name=\"crm_opportunity_category_ids\"\n          [errorMsg]=\"'Crm.OpportunitiesMessage.CategoryErrorMessage' | transloco\">\n          <p-multiSelect [options]=\"categories\"\n            (onChange)=\"onCategoryChange($event)\"\n            formControlName=\"crm_opportunity_category_ids\"\n            appendTo=\"body\"></p-multiSelect>\n        </pw-input-container>\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=\"yyyy-mm-dd\"\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        <pw-input-container [showTooltip]=\"true\"\n          [tooltipText]=\"'Crm.OpportunitiesMessage.Tooltip.StageOpportunity' | transloco\"\n          [label]=\"'Crm.OpportunitiesMessage.Stage' | transloco\"\n          name=\"crm_opportunity_stage_id\"\n          errorMsg=\"Please select stage\">\n          <select class=\"form-select\"\n            formControlName=\"crm_opportunity_stage_id\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['crm_opportunity_stage_id'].errors }\">\n            <option value=\"\">Select Stage</option>\n            <option *ngFor=\"let option of stages\"\n              [value]=\"option.id\">\n              {{ option.name }}\n            </option>\n          </select>\n        </pw-input-container>\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          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}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.NumberDirective, selector: "input[numbersOnly]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "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.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.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText"] }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmOpportunitiesDetailsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmOpportunitiesDetailsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pw-smart-crm-opportunities-details', template: "<div class=\"me-auto col-xs-6\">\n  <a href=\"javascript:void(0)\"\n    (click)=\"back()\"\n    class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n  <h3 class=\"m-subheader__title m-subheader__title--separator\">\n    <span>{{ 'Crm.OpportunitiesMessage.CrmOpportunity' | transloco }}:\n      {{ data?.name ? data?.name : ('Label.AddNew' | transloco) }}</span>\n  </h3>\n</div>\n<div class=\"p-2 mt-3\">\n  <form [formGroup]=\"form\"\n    (ngSubmit)=\"onSave()\">\n    <div class=\"row\">\n      <div class=\"col-12 col-sm-8\">\n        <pw-input-container [label]=\"'Crm.OpportunitiesMessage.Title' | transloco\"\n          name=\"title\"\n          [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\">{{ 'Crm.OpportunitiesMessage.Account' | transloco\n                    }}<span class=\"text-danger\">*</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>{{ '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\">{{ 'Crm.OpportunitiesMessage.OneTimeAmount' | transloco\n                        }}<span class=\"text-danger\">*</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\">{{ 'Crm.OpportunitiesMessage.MonthlyAmount' | transloco\n                        }}<span class=\"text-danger\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n                            'Crm.OpportunitiesMessage.Tooltip.MonthlyAmount' | 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\">\n        <label class=\"info-circle\">{{ '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\">{{ 'Crm.OpportunitiesMessage.WinChance' | transloco }}\n            <span class=\"text-danger\">*</span>\n            <span class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.OpportunitiesMessage.Tooltip.WinChance' | transloco }}\n            </span>\n          </label>\n          <select formControlName=\"win_chances\"\n            class=\"form-control form-select\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['win_chances'].errors }\">\n            <option *ngFor=\"let option of winChance\"\n              [value]=\"option\">\n              {{ option }}\n            </option>\n          </select>\n        </div>\n      </div>\n\n      <div class=\"col-12 col-md-4\">\n        <div class=\"mb-3\">\n          <label class=\"info-circle\">{{ 'Crm.OpportunitiesMessage.Won' | transloco }}\n            <span class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.OpportunitiesMessage.Tooltip.Won' | transloco }}\n            </span>\n          </label>\n          <input type=\"number\"\n            NumberDirective\n            class=\"form-control\"\n            formControlName=\"won\"\n            id=\"won\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['won'].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\">{{ 'Crm.OpportunitiesMessage.StartingAt' | transloco\n                        }}<span class=\"text-danger\">*</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=\"yyyy-mm-dd\"\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-4\">\n        <pw-input-container [showTooltip]=\"true\"\n          [tooltipText]=\"'Crm.OpportunitiesMessage.Tooltip.Category' | transloco\"\n          [label]=\"'Crm.OpportunitiesMessage.Categories' | transloco\"\n          name=\"crm_opportunity_category_ids\"\n          [errorMsg]=\"'Crm.OpportunitiesMessage.CategoryErrorMessage' | transloco\">\n          <p-multiSelect [options]=\"categories\"\n            (onChange)=\"onCategoryChange($event)\"\n            formControlName=\"crm_opportunity_category_ids\"\n            appendTo=\"body\"></p-multiSelect>\n        </pw-input-container>\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=\"yyyy-mm-dd\"\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        <pw-input-container [showTooltip]=\"true\"\n          [tooltipText]=\"'Crm.OpportunitiesMessage.Tooltip.StageOpportunity' | transloco\"\n          [label]=\"'Crm.OpportunitiesMessage.Stage' | transloco\"\n          name=\"crm_opportunity_stage_id\"\n          errorMsg=\"Please select stage\">\n          <select class=\"form-select\"\n            formControlName=\"crm_opportunity_stage_id\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['crm_opportunity_stage_id'].errors }\">\n            <option value=\"\">Select Stage</option>\n            <option *ngFor=\"let option of stages\"\n              [value]=\"option.id\">\n              {{ option.name }}\n            </option>\n          </select>\n        </pw-input-container>\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          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}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1.CrmService }] });
@@ -4878,8 +4878,8 @@ class SmartCrmOpportunitiesInfoComponent extends AppBaseComponent {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmOpportunitiesInfoComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }, { token: i2$2.NgbModal }, { token: i2.AuthService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", 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 href=\"javascript:void(0)\"\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\">{{\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\">{{\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\">{{\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_accounty?.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\">{{\n                        'Crm.OpportunitiesMessage.OneTimeAmount' | transloco\n                    }}</label>\n          <a class=\"form-control d-block pb-2 ps-1 user-value\"\n            *ngIf=\"isFormEdit && data?.one_time_amount\">{{ data?.one_time_amount | currency }}</a>\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\">{{\n                        'Crm.OpportunitiesMessage.MonthlyAmount' | transloco\n                    }}</label>\n          <a class=\"form-control d-block pb-2 ps-1 user-value\"\n            *ngIf=\"isFormEdit && data?.monthly_amount\">{{ data?.monthly_amount | currency }}</a>\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=\"yyyy-mm-dd\"\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              <input type=\"submit\"\n                [disabled]=\"buttonDisable\"\n                class=\"btn btn-primary mt-2 mb-2 float-end\"\n                value=\"Submit Note\" />\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=\"yyyy-mm-dd\"\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                      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                      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                      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_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.user-info .label{color:#777;font-size:14px;text-transform:capitalize}.user-info .user-value{border:0;border-bottom:1px solid rgb(119,119,119)}.user-info .user-value:focus{box-shadow:none}.user-info .user-value.is-invalid{border-color:#ff586b}.control-btns{display:none}.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: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "directive", type: i5.NumberDirective, selector: "input[numbersOnly]" }, { kind: "directive", type: i5.LazyImgDirective, selector: "img" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "directive", type: i2$2.NgbNavContent, selector: "ng-template[ngbNavContent]" }, { kind: "directive", type: i2$2.NgbNav, selector: "[ngbNav]", inputs: ["activeId", "animation", "destroyOnHide", "orientation", "roles", "keyboard"], outputs: ["activeIdChange", "shown", "hidden", "navChange"], exportAs: ["ngbNav"] }, { kind: "directive", type: i2$2.NgbNavItem, selector: "[ngbNavItem]", inputs: ["destroyOnHide", "disabled", "domId", "ngbNavItem"], outputs: ["shown", "hidden"], exportAs: ["ngbNavItem"] }, { kind: "directive", type: i2$2.NgbNavItemRole, selector: "[ngbNavItem]:not(ng-container)" }, { kind: "directive", type: i2$2.NgbNavLink, selector: "a[ngbNavLink]" }, { kind: "directive", type: i2$2.NgbNavLinkBase, selector: "[ngbNavLink]" }, { kind: "component", type: i2$2.NgbNavOutlet, selector: "[ngbNavOutlet]", inputs: ["paneRole", "ngbNavOutlet"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i9$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i7.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"], 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$1.NgFileDropDirective, selector: "[ngFileDrop]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "directive", type: i12$1.NgFileSelectDirective, selector: "[ngFileSelect]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "component", type: SmartCrmCompanyFilesComponent, selector: "pw-smart-crm-company-files", inputs: ["accountId", "contactId", "opportunityId"] }, { kind: "pipe", type: i2$1.JsonPipe, name: "json" }, { kind: "pipe", type: i2$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i2$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "pipe", type: i14.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
+    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$2.NgbModal }, { token: i2.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 href=\"javascript:void(0)\"\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\">{{\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\">{{\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\">{{\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_accounty?.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\">{{\n                        'Crm.OpportunitiesMessage.OneTimeAmount' | transloco\n                    }}</label>\n          <a class=\"form-control d-block pb-2 ps-1 user-value\"\n            *ngIf=\"isFormEdit && data?.one_time_amount\">{{ data?.one_time_amount | currency }}</a>\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\">{{\n                        'Crm.OpportunitiesMessage.MonthlyAmount' | transloco\n                    }}</label>\n          <a class=\"form-control d-block pb-2 ps-1 user-value\"\n            *ngIf=\"isFormEdit && data?.monthly_amount\">{{ data?.monthly_amount | currency }}</a>\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=\"yyyy-mm-dd\"\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              <input type=\"submit\"\n                [disabled]=\"buttonDisable\"\n                class=\"btn btn-primary mt-2 mb-2 float-end\"\n                value=\"Submit Note\" />\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=\"yyyy-mm-dd\"\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                      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                      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                      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_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.user-info .label{color:#777;font-size:14px;text-transform:capitalize}.user-info .user-value{border:0;border-bottom:1px solid rgb(119,119,119)}.user-info .user-value:focus{box-shadow:none}.user-info .user-value.is-invalid{border-color:#ff586b}.control-btns{display:none}.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: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "directive", type: i5.NumberDirective, selector: "input[numbersOnly]" }, { kind: "directive", type: i5.LazyImgDirective, selector: "img" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "directive", type: i2$2.NgbNavContent, selector: "ng-template[ngbNavContent]" }, { kind: "directive", type: i2$2.NgbNav, selector: "[ngbNav]", inputs: ["activeId", "animation", "destroyOnHide", "orientation", "roles", "keyboard"], outputs: ["activeIdChange", "shown", "hidden", "navChange"], exportAs: ["ngbNav"] }, { kind: "directive", type: i2$2.NgbNavItem, selector: "[ngbNavItem]", inputs: ["destroyOnHide", "disabled", "domId", "ngbNavItem"], outputs: ["shown", "hidden"], exportAs: ["ngbNavItem"] }, { kind: "directive", type: i2$2.NgbNavItemRole, selector: "[ngbNavItem]:not(ng-container)" }, { kind: "directive", type: i2$2.NgbNavLink, selector: "a[ngbNavLink]" }, { kind: "directive", type: i2$2.NgbNavLinkBase, selector: "[ngbNavLink]" }, { kind: "component", type: i2$2.NgbNavOutlet, selector: "[ngbNavOutlet]", inputs: ["paneRole", "ngbNavOutlet"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i9$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i7.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$1.NgFileDropDirective, selector: "[ngFileDrop]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "directive", type: i12$1.NgFileSelectDirective, selector: "[ngFileSelect]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "component", type: SmartCrmCompanyFilesComponent, selector: "pw-smart-crm-company-files", inputs: ["accountId", "contactId", "opportunityId"] }, { kind: "pipe", type: i2$1.JsonPipe, name: "json" }, { kind: "pipe", type: i2$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i2$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "pipe", type: i14.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
 }
 __decorate([
     ValidateForm('actionControls'),
@@ -4887,7 +4887,7 @@ __decorate([
     __metadata("design:paramtypes", []),
     __metadata("design:returntype", void 0)
 ], SmartCrmOpportunitiesInfoComponent.prototype, "onCommentSave", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmOpportunitiesInfoComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmOpportunitiesInfoComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pw-smart-crm-opportunities-info', 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 href=\"javascript:void(0)\"\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\">{{\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\">{{\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\">{{\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_accounty?.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\">{{\n                        'Crm.OpportunitiesMessage.OneTimeAmount' | transloco\n                    }}</label>\n          <a class=\"form-control d-block pb-2 ps-1 user-value\"\n            *ngIf=\"isFormEdit && data?.one_time_amount\">{{ data?.one_time_amount | currency }}</a>\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\">{{\n                        'Crm.OpportunitiesMessage.MonthlyAmount' | transloco\n                    }}</label>\n          <a class=\"form-control d-block pb-2 ps-1 user-value\"\n            *ngIf=\"isFormEdit && data?.monthly_amount\">{{ data?.monthly_amount | currency }}</a>\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=\"yyyy-mm-dd\"\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              <input type=\"submit\"\n                [disabled]=\"buttonDisable\"\n                class=\"btn btn-primary mt-2 mb-2 float-end\"\n                value=\"Submit Note\" />\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=\"yyyy-mm-dd\"\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                      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                      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                      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_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.user-info .label{color:#777;font-size:14px;text-transform:capitalize}.user-info .user-value{border:0;border-bottom:1px solid rgb(119,119,119)}.user-info .user-value:focus{box-shadow:none}.user-info .user-value.is-invalid{border-color:#ff586b}.control-btns{display:none}.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"] }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1.CrmService }, { type: i2$2.NgbModal }, { type: i2.AuthService }, { type: Document, decorators: [{
@@ -5078,19 +5078,19 @@ class SmartCrmOpportunitiesListComponent extends AppBaseComponent {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", 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.6", 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 mb-2 mb-sm-0\">\n                <p-multiSelect placeholder=\"Select Stage\" [options]=\"searchStages\" [(ngModel)]=\"filterByStages\"\n                    (onChange)=\"onSearchOptionChange($event, 'stage')\" [filter]=\"false\" [showHeader]=\"true\"\n                    [showToggleAll]=\"true\" appendTo=\"body\">\n                </p-multiSelect>\n            </div>\n            <div class=\"col-sm-3 col-6\">\n                <p-multiSelect placeholder=\"Select Category\" [options]=\"categories\" [(ngModel)]=\"filterByCategories\"\n                    (onChange)=\"onSearchOptionChange($event, 'category')\" [filter]=\"false\" [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 text-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 scope=\"true\" pSortableColumn=\"win_chances\"> {{ 'Crm.OpportunitiesMessage.WinChance' | transloco }}\n              <p-sortIcon field=\"win_chances\"></p-sortIcon>\n            </th>\n            <th scope=\"true\" pSortableColumn=\"monthly_amount\"> {{ 'Crm.OpportunitiesMessage.MonthlyAmount' | transloco\n              }} <p-sortIcon field=\"monthly_amount\"></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=\"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=\"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 *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 }} </td>\n            <td data-head=\"WinChance\"> {{ opportunities.win_chances / 100 | percent }} <span class=\"text-danger\"\n                *ngIf=\"opportunities.cancelled\">!Cancelled!</span>\n            </td>\n            <td data-head=\"Monthly Amount\"> {{ opportunities.monthly_amount / 100 | currency }} </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=\"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=\"Starting At\"> {{ opportunities.starting_at | dateFormat }} </td>\n            <td data-head=\"Action\">\n              <ul class=\"list-unstyled list-inline\">\n                <ng-container *ngIf=\"hasAccess || opportunities?.owner_id === userId\">\n                  <ng-container *rbacAllow=\"'Pages.Product.CRM.Role.Admin'\">\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                  <li ngbTooltip=\"Delete\" class=\"me-2 me-sm-3\">\n                    <i class=\"fa fa-trash delete-icon\" (click)=\"onDelete(opportunities.id)\" aria-hidden=\"true\"></i>\n                  </li>\n                </ng-container>\n              </ul>\n            </td>\n          </tr>\n        </ng-template>\n      </p-table>\n      <div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n        </pw-no-data>\n      </div>\n      <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n    </div>\n  </div>\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 *rbacAllow=\"'Pages.Beta'\">\n  <div class=\"row mt-5\" *ngIf=\"data.unfiltered_count !== 0 && isLoaded\">\n    <!-- Drill Down -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Drill Down</h5>\n      <div class=\"primeng-datatable-container table-responsive\" *ngIf=\"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.OpportunitiesMessage.Title' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.OpportunitiesMessage.Value' | 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=\"Title\"> {{ insight.title }} </td>\n              <td data-head=\"Value\"> {{ insight.value }} </td>\n              <td data-head=\"Reason\"> {{ insight.reason }} </td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\" *ngIf=\"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\">Geography</h5>\n      <div>\n        <ng-template [ngIf]=\"opportunitiesGeography\">\n          <plotly-plot [data]=\"opportunitiesGeography?.data\" [layout]=\"opportunitiesGeography?.layout\">\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>", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}@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: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]" }, { kind: "directive", type: i5.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color"] }, { kind: "directive", type: i5.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i7$1.PlotlyComponent, selector: "plotly-plot", inputs: ["data", "layout", "config", "frames", "style", "theme", "divId", "revision", "className", "debug", "useResizeHandler", "updateOnLayoutChange", "updateOnDataChange", "updateOnlyWithRevision"], outputs: ["initialized", "update", "purge", "error", "afterExport", "afterPlot", "animated", "animatingFrame", "animationInterrupted", "autoSize", "beforeExport", "beforeHover", "buttonClicked", "click", "plotlyClick", "clickAnnotation", "deselect", "doubleClick", "framework", "hover", "legendClick", "legendDoubleClick", "react", "relayout", "relayouting", "restyle", "redraw", "selected", "selecting", "sliderChange", "sliderEnd", "sliderStart", "sunburstclick", "transitioning", "transitionInterrupted", "unhover", "treemapclick", "webglcontextlost"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i6.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i8.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i11.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i2$1.PercentPipe, name: "percent" }, { kind: "pipe", type: i2$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i14.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i14.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
+    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 mb-2 mb-sm-0\">\n                <p-multiSelect placeholder=\"Select Stage\" [options]=\"searchStages\" [(ngModel)]=\"filterByStages\"\n                    (onChange)=\"onSearchOptionChange($event, 'stage')\" [filter]=\"false\" [showHeader]=\"true\"\n                    [showToggleAll]=\"true\" appendTo=\"body\">\n                </p-multiSelect>\n            </div>\n            <div class=\"col-sm-3 col-6\">\n                <p-multiSelect placeholder=\"Select Category\" [options]=\"categories\" [(ngModel)]=\"filterByCategories\"\n                    (onChange)=\"onSearchOptionChange($event, 'category')\" [filter]=\"false\" [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 text-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 scope=\"true\" pSortableColumn=\"win_chances\"> {{ 'Crm.OpportunitiesMessage.WinChance' | transloco }}\n              <p-sortIcon field=\"win_chances\"></p-sortIcon>\n            </th>\n            <th scope=\"true\" pSortableColumn=\"monthly_amount\"> {{ 'Crm.OpportunitiesMessage.MonthlyAmount' | transloco\n              }} <p-sortIcon field=\"monthly_amount\"></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=\"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=\"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 *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 }} </td>\n            <td data-head=\"WinChance\"> {{ opportunities.win_chances / 100 | percent }} <span class=\"text-danger\"\n                *ngIf=\"opportunities.cancelled\">!Cancelled!</span>\n            </td>\n            <td data-head=\"Monthly Amount\"> {{ opportunities.monthly_amount / 100 | currency }} </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=\"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=\"Starting At\"> {{ opportunities.starting_at | dateFormat }} </td>\n            <td data-head=\"Action\">\n              <ul class=\"list-unstyled list-inline\">\n                <ng-container *ngIf=\"hasAccess || opportunities?.owner_id === userId\">\n                  <ng-container *rbacAllow=\"'Pages.Product.CRM.Role.Admin'\">\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                  <li ngbTooltip=\"Delete\" class=\"me-2 me-sm-3\">\n                    <i class=\"fa fa-trash delete-icon\" (click)=\"onDelete(opportunities.id)\" aria-hidden=\"true\"></i>\n                  </li>\n                </ng-container>\n              </ul>\n            </td>\n          </tr>\n        </ng-template>\n      </p-table>\n      <div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n        </pw-no-data>\n      </div>\n      <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n    </div>\n  </div>\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 *rbacAllow=\"'Pages.Beta'\">\n  <div class=\"row mt-5\" *ngIf=\"data.unfiltered_count !== 0 && isLoaded\">\n    <!-- Drill Down -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Drill Down</h5>\n      <div class=\"primeng-datatable-container table-responsive\" *ngIf=\"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.OpportunitiesMessage.Title' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.OpportunitiesMessage.Value' | 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=\"Title\"> {{ insight.title }} </td>\n              <td data-head=\"Value\"> {{ insight.value }} </td>\n              <td data-head=\"Reason\"> {{ insight.reason }} </td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\" *ngIf=\"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\">Geography</h5>\n      <div>\n        <ng-template [ngIf]=\"opportunitiesGeography\">\n          <plotly-plot [data]=\"opportunitiesGeography?.data\" [layout]=\"opportunitiesGeography?.layout\">\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>", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}@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: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i5.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color"] }, { kind: "directive", type: i5.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i7$1.PlotlyComponent, selector: "plotly-plot", inputs: ["data", "layout", "config", "frames", "style", "theme", "divId", "revision", "className", "debug", "useResizeHandler", "updateOnLayoutChange", "updateOnDataChange", "updateOnlyWithRevision"], outputs: ["initialized", "update", "purge", "error", "afterExport", "afterPlot", "animated", "animatingFrame", "animationInterrupted", "autoSize", "beforeExport", "beforeHover", "buttonClicked", "click", "plotlyClick", "clickAnnotation", "deselect", "doubleClick", "framework", "hover", "legendClick", "legendDoubleClick", "react", "relayout", "relayouting", "restyle", "redraw", "selected", "selecting", "sliderChange", "sliderEnd", "sliderStart", "sunburstclick", "transitioning", "transitionInterrupted", "unhover", "treemapclick", "webglcontextlost"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i6.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i8.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i11.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i2$1.PercentPipe, name: "percent" }, { kind: "pipe", type: i2$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i14.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i14.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmOpportunitiesListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmOpportunitiesListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pw-smart-crm-opportunities-list', 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 mb-2 mb-sm-0\">\n                <p-multiSelect placeholder=\"Select Stage\" [options]=\"searchStages\" [(ngModel)]=\"filterByStages\"\n                    (onChange)=\"onSearchOptionChange($event, 'stage')\" [filter]=\"false\" [showHeader]=\"true\"\n                    [showToggleAll]=\"true\" appendTo=\"body\">\n                </p-multiSelect>\n            </div>\n            <div class=\"col-sm-3 col-6\">\n                <p-multiSelect placeholder=\"Select Category\" [options]=\"categories\" [(ngModel)]=\"filterByCategories\"\n                    (onChange)=\"onSearchOptionChange($event, 'category')\" [filter]=\"false\" [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 text-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 scope=\"true\" pSortableColumn=\"win_chances\"> {{ 'Crm.OpportunitiesMessage.WinChance' | transloco }}\n              <p-sortIcon field=\"win_chances\"></p-sortIcon>\n            </th>\n            <th scope=\"true\" pSortableColumn=\"monthly_amount\"> {{ 'Crm.OpportunitiesMessage.MonthlyAmount' | transloco\n              }} <p-sortIcon field=\"monthly_amount\"></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=\"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=\"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 *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 }} </td>\n            <td data-head=\"WinChance\"> {{ opportunities.win_chances / 100 | percent }} <span class=\"text-danger\"\n                *ngIf=\"opportunities.cancelled\">!Cancelled!</span>\n            </td>\n            <td data-head=\"Monthly Amount\"> {{ opportunities.monthly_amount / 100 | currency }} </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=\"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=\"Starting At\"> {{ opportunities.starting_at | dateFormat }} </td>\n            <td data-head=\"Action\">\n              <ul class=\"list-unstyled list-inline\">\n                <ng-container *ngIf=\"hasAccess || opportunities?.owner_id === userId\">\n                  <ng-container *rbacAllow=\"'Pages.Product.CRM.Role.Admin'\">\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                  <li ngbTooltip=\"Delete\" class=\"me-2 me-sm-3\">\n                    <i class=\"fa fa-trash delete-icon\" (click)=\"onDelete(opportunities.id)\" aria-hidden=\"true\"></i>\n                  </li>\n                </ng-container>\n              </ul>\n            </td>\n          </tr>\n        </ng-template>\n      </p-table>\n      <div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n        </pw-no-data>\n      </div>\n      <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n    </div>\n  </div>\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 *rbacAllow=\"'Pages.Beta'\">\n  <div class=\"row mt-5\" *ngIf=\"data.unfiltered_count !== 0 && isLoaded\">\n    <!-- Drill Down -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Drill Down</h5>\n      <div class=\"primeng-datatable-container table-responsive\" *ngIf=\"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.OpportunitiesMessage.Title' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.OpportunitiesMessage.Value' | 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=\"Title\"> {{ insight.title }} </td>\n              <td data-head=\"Value\"> {{ insight.value }} </td>\n              <td data-head=\"Reason\"> {{ insight.reason }} </td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\" *ngIf=\"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\">Geography</h5>\n      <div>\n        <ng-template [ngIf]=\"opportunitiesGeography\">\n          <plotly-plot [data]=\"opportunitiesGeography?.data\" [layout]=\"opportunitiesGeography?.layout\">\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>", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}@media (min-width: 640px) and (max-width: 768px){.primeng-datatable-container tr td{width:350px}}.search-opportunities-search-input{background-color:#fff!important}\n"] }]
         }], ctorParameters: () => [{ type: i1.CrmService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: i2.ProductService }] });
 class SmartCrmOpportunitiesComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmOpportunitiesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: SmartCrmOpportunitiesComponent, selector: "pw-smart-crm-opportunities", ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 mb-0\">\n    <h2>Opportunities</h2>\n    <p>In this section you can track your business opportunities.</p>\n  </div>\n</div>\n\n<ul ngbNav\n  #nav=\"ngbNav\"\n  class=\"nav-tabs\">\n  <li [ngbNavItem]=\"1\">\n    <a ngbNavLink>List</a>\n    <ng-template ngbNavContent>\n      <pw-smart-crm-opportunities-list></pw-smart-crm-opportunities-list>\n    </ng-template>\n  </li>\n  <li [ngbNavItem]=\"2\">\n    <a ngbNavLink>Board view</a>\n    <ng-template ngbNavContent>\n      <pw-smart-crm-board></pw-smart-crm-board>\n    </ng-template>\n  </li>\n</ul>\n\n<div [ngbNavOutlet]=\"nav\"></div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_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}}\n"], dependencies: [{ kind: "directive", type: i2$2.NgbNavContent, selector: "ng-template[ngbNavContent]" }, { kind: "directive", type: i2$2.NgbNav, selector: "[ngbNav]", inputs: ["activeId", "animation", "destroyOnHide", "orientation", "roles", "keyboard"], outputs: ["activeIdChange", "shown", "hidden", "navChange"], exportAs: ["ngbNav"] }, { kind: "directive", type: i2$2.NgbNavItem, selector: "[ngbNavItem]", inputs: ["destroyOnHide", "disabled", "domId", "ngbNavItem"], outputs: ["shown", "hidden"], exportAs: ["ngbNavItem"] }, { kind: "directive", type: i2$2.NgbNavItemRole, selector: "[ngbNavItem]:not(ng-container)" }, { kind: "directive", type: i2$2.NgbNavLink, selector: "a[ngbNavLink]" }, { kind: "directive", type: i2$2.NgbNavLinkBase, selector: "[ngbNavLink]" }, { kind: "component", type: i2$2.NgbNavOutlet, selector: "[ngbNavOutlet]", inputs: ["paneRole", "ngbNavOutlet"] }, { kind: "component", type: SmartCrmBoardComponent, selector: "pw-smart-crm-board" }, { kind: "component", type: SmartCrmOpportunitiesListComponent, selector: "pw-smart-crm-opportunities-list" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmOpportunitiesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmOpportunitiesComponent, selector: "pw-smart-crm-opportunities", ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 mb-0\">\n    <h2>Opportunities</h2>\n    <p>In this section you can track your business opportunities.</p>\n  </div>\n</div>\n\n<ul ngbNav\n  #nav=\"ngbNav\"\n  class=\"nav-tabs\">\n  <li [ngbNavItem]=\"1\">\n    <a ngbNavLink>List</a>\n    <ng-template ngbNavContent>\n      <pw-smart-crm-opportunities-list></pw-smart-crm-opportunities-list>\n    </ng-template>\n  </li>\n  <li [ngbNavItem]=\"2\">\n    <a ngbNavLink>Board view</a>\n    <ng-template ngbNavContent>\n      <pw-smart-crm-board></pw-smart-crm-board>\n    </ng-template>\n  </li>\n</ul>\n\n<div [ngbNavOutlet]=\"nav\"></div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_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}}\n"], dependencies: [{ kind: "directive", type: i2$2.NgbNavContent, selector: "ng-template[ngbNavContent]" }, { kind: "directive", type: i2$2.NgbNav, selector: "[ngbNav]", inputs: ["activeId", "animation", "destroyOnHide", "orientation", "roles", "keyboard"], outputs: ["activeIdChange", "shown", "hidden", "navChange"], exportAs: ["ngbNav"] }, { kind: "directive", type: i2$2.NgbNavItem, selector: "[ngbNavItem]", inputs: ["destroyOnHide", "disabled", "domId", "ngbNavItem"], outputs: ["shown", "hidden"], exportAs: ["ngbNavItem"] }, { kind: "directive", type: i2$2.NgbNavItemRole, selector: "[ngbNavItem]:not(ng-container)" }, { kind: "directive", type: i2$2.NgbNavLink, selector: "a[ngbNavLink]" }, { kind: "directive", type: i2$2.NgbNavLinkBase, selector: "[ngbNavLink]" }, { kind: "component", type: i2$2.NgbNavOutlet, selector: "[ngbNavOutlet]", inputs: ["paneRole", "ngbNavOutlet"] }, { kind: "component", type: SmartCrmBoardComponent, selector: "pw-smart-crm-board" }, { kind: "component", type: SmartCrmOpportunitiesListComponent, selector: "pw-smart-crm-opportunities-list" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmOpportunitiesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmOpportunitiesComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pw-smart-crm-opportunities', template: "<div class=\"row\">\n  <div class=\"col-12 mb-0\">\n    <h2>Opportunities</h2>\n    <p>In this section you can track your business opportunities.</p>\n  </div>\n</div>\n\n<ul ngbNav\n  #nav=\"ngbNav\"\n  class=\"nav-tabs\">\n  <li [ngbNavItem]=\"1\">\n    <a ngbNavLink>List</a>\n    <ng-template ngbNavContent>\n      <pw-smart-crm-opportunities-list></pw-smart-crm-opportunities-list>\n    </ng-template>\n  </li>\n  <li [ngbNavItem]=\"2\">\n    <a ngbNavLink>Board view</a>\n    <ng-template ngbNavContent>\n      <pw-smart-crm-board></pw-smart-crm-board>\n    </ng-template>\n  </li>\n</ul>\n\n<div [ngbNavOutlet]=\"nav\"></div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_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}}\n"] }]
         }] });
@@ -5319,10 +5319,10 @@ class SmartCrmSummaryActionsComponent extends AppBaseComponent {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmSummaryActionsComponent, deps: [{ token: i1.CrmService }, { token: i0.Injector }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: SmartCrmSummaryActionsComponent, selector: "pw-smart-crm-summary-actions", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 mb-3\">\n    <div class=\"col-12 col-sm-3 float-start mb-2\"\n      *ngIf=\"showFilter\">\n      <select class=\"form-select\"\n        (change)=\"filterByUser($event)\">\n        <option value=\"0\">Filter by user</option>\n        <option *ngFor=\"let member of allSubscriptionMembers\"\n          [value]=\"member.id\">\n          {{ member.first_name }} {{ member.last_name }}\n        </option>\n      </select>\n    </div>\n    <div>\n      <a class=\"btn btn-sm btn-outline-primary float-end\"\n        data-cy=\"add-contact\"\n        [routerLink]=\"['/' + subscription?.slug + routers.addAccount]\">\n        <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n        {{ 'Crm.AccountMessage.AddAccount' | transloco }}\n      </a>\n      <a class=\"btn btn-sm btn-outline-primary float-end me-3\"\n        [routerLink]=\"['/' + subscription?.slug + routers.contactDetails, 0]\"\n        data-cy=\"add-action\">\n        <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n        {{ 'Crm.ContactMessage.AddContact' | transloco }}\n      </a>\n    </div>\n  </div>\n  <!-- Pending Actions -->\n  <div class=\"col-12 col-md-6 mb-3\">\n    <h5 class=\"accordion-heading\">Pending Actions</h5>\n    <div class=\"w-100 text-center mt-3\"\n      *ngIf=\"!isLoaded\">\n      <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n    </div>\n    <div *ngIf=\"contactActions?.length === 0 && isLoaded\"\n      class=\"px-2\">\n      <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.SummaryMessage' | transloco\"> </pw-no-data>\n    </div>\n    <!-- wrapper for infinite scroll -->\n    <div class=\"pending-actions-wrapper\"\n      infiniteScroll\n      [infiniteScrollDistance]=\"2\"\n      [infiniteScrollThrottle]=\"50\"\n      [infiniteScrollContainer]=\"selector\"\n      [fromRoot]=\"true\"\n      (scrolled)=\"onScrollPendingActions()\">\n      <div class=\"mb-4 action-card bg-white\"\n        *ngFor=\"let action of contactActions; let i = index\">\n        <div class=\"p-2\">\n          <ul class=\"list-inline\">\n            <li class=\"list-inline-item me-2\">\n              <h6 *ngIf=\"!updating || actionId !== action.id\">\n                {{ action.when_short_date }}\n              </h6>\n              <input *ngIf=\"updating && actionId === action.id\"\n                placeholder=\"yyyy-mm-dd\"\n                [value]=\"action.when_short_date\"\n                ngbDatepicker\n                #d=\"ngbDatepicker\"\n                (focus)=\"d.toggle()\"\n                (dateSelect)=\"onDateSelect($event, action)\" />\n            </li>\n            <li>\n              <button type=\"button\"\n                class=\"btn btn-sm when-btn\"\n                (click)=\"showDatePicker(action?.id)\">\n                <i\n                                    class=\"fa fa-edit edit-icon\"\n                                    ngbTooltip=\"Click to Edit\"\n                                    aria-hidden=\"true\"\n                                ></i>\n              </button>\n            </li>\n            <li class=\"list-inline-item\">\n              <span class=\"badge bg-primary\">{{ action.crm_action?.name }}</span>\n            </li>\n            <li class=\"list-inline-item float-end\">\n              <a *ngIf=\"action?.crm_contact\"\n                ngbTooltip=\"See this contact\"\n                [routerLink]=\"[\n                                    '/' + subscription?.slug + routers.contactInfo,\n                                    action?.crm_contact?.id\n                                ]\">\n                <i class=\"fa fa-eye me-3 see-icon\" aria-hidden=\"true\"></i>\n              </a>\n              <a ngbTooltip=\"Set as completed\"\n                class=\"me-3\"\n                href=\"javascript:void(0);\"\n                (click)=\"setAsCompleted(action.id, action, i)\">\n                <i class=\"fa fa-tasks cta1-icon\" aria-hidden=\"true\"></i>\n              </a>\n              <a ngbTooltip=\"Set as cancelled\"\n                href=\"javascript:void(0);\"\n                (click)=\"setAsCancelled(action.id, action, i)\">\n                <i\n                                    class=\"fa fa-times text-danger delete-icon\"\n                                    aria-hidden=\"true\"\n                                ></i>\n              </a>\n            </li>\n          </ul>\n          <p [class.text-danger]=\"!action.color\"\n            class=\"mb-0\"\n            *ngIf=\"action.due\">\n            {{ action.due }}\n          </p>\n          <p *ngIf=\"action.owner?.id !== userId\"\n            class=\"m-0 mt-1\">\n            <a class=\"font-italic grey\"\n              [routerLink]=\"['/members', action?.owner?.slug]\">Added by\n              {{ action.owner?.first_name + ' ' + action.owner?.last_name }}</a>\n          </p>\n          <p class=\"mt-1 mb-1 fw-bold\">\n            <a class=\"text-secondary\"\n              *ngIf=\"action?.crm_contact\"\n              [routerLink]=\"[\n                                '/' + subscription?.slug + routers.contactInfo,\n                                action?.crm_contact?.id\n                            ]\">\n              {{\n                                action?.crm_contact?.first_name +\n                                    ' ' +\n                                    action?.crm_contact?.last_name\n                            }}\n            </a>\n            <a *ngIf=\"!action.crm_contact_id\">N/A</a> at\n            <a *ngIf=\"action.crm_account_id\"\n              [routerLink]=\"[\n                                '/' + subscription?.slug + routers.accountInfo,\n                                action?.crm_account?.id\n                            ]\">\n              {{ action?.crm_account?.name }}\n            </a>\n          </p>\n          <div class=\"comment-section\">\n            <textarea class=\"mt-1 textarea form-control mb-2\"\n              [(ngModel)]=\"action.comment\">{{ action.comment }}</textarea>\n            <div class=\"d-flex\">\n              <p class=\"my-1 comment\"\n                *ngIf=\"!showFullComment || action.id !== commentId\">\n                {{ action.comment | slice: 0:230\n                                }}<a *ngIf=\"action.comment.length > 230\"\n                  class=\"text-secondary\"\n                  (click)=\"showFullComment = true; commentId = action.id\">...show more\n                </a>\n              </p>\n              <p class=\"my-1 comment\"\n                *ngIf=\"showFullComment && action.id === commentId\">\n                {{ action.comment }}\n                <a *ngIf=\"action.comment.length > 230 && showFullComment\"\n                  (click)=\"showFullComment = false\"\n                  class=\"text-secondary\">...show less</a>\n              </p>\n              <button class=\"btn btn-md edit-btn\"\n                (click)=\"editComment($event)\">\n                <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n              </button>\n            </div>\n            <div class=\"control-btns edit-control-btns\">\n              <button type=\"button\"\n                class=\"btn btn-sm btn-outline-default me-2\"\n                (click)=\"editComment(undefined)\">\n                {{ 'Button.Cancel' | transloco }}\n              </button>\n              <button class=\"btn btn-sm btn-primary\"\n                (click)=\"updateComment(action)\">\n                {{ 'Button.Submit' | transloco }}\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- Suggested Actions -->\n  <div class=\"col-12 col-md-6 mb-3\">\n    <h5 class=\"accordion-heading\">Suggested Actions</h5>\n    <div class=\"w-100 text-center mt-3\"\n      *ngIf=\"!isLoaded\">\n      <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n    </div>\n\n    <div class=\"mb-4 action-card bg-white\"\n      *ngFor=\"\n                let suggestedAction of accountActionSuggested\n                    | paginate: { id: 'suggestedAction', itemsPerPage: 10, currentPage: p1 };\n                let i = index\n            \">\n      <div class=\"p-2\">\n        <p class=\"mt-1 mb-1 fw-bold\">\n          <a [routerLink]=\"[\n                            '/' + subscription?.slug + routers.accountInfo,\n                            suggestedAction?.crm_account?.id\n                        ]\">{{ suggestedAction?.crm_account?.name }}</a>\n        </p>\n        <p class=\"fw-bold mb-1\">{{ suggestedAction.crm_action }}</p>\n        <p class=\"mb-0\">{{ suggestedAction.reason }}</p>\n      </div>\n    </div>\n    <div class=\"text-center pagination-controls w-100 mt-3\"\n      *ngIf=\"accountActionSuggested?.length > 10\">\n      <pagination-controls id=\"suggestedAction\"\n        (pageChange)=\"p1 = $event\">\n      </pagination-controls>\n    </div>\n    <div *ngIf=\"accountActionSuggested.length === 0 && isLoadedSuggested\"\n      class=\"px-2\">\n      <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.SummarySuggestionsMessage' | transloco\">\n      </pw-no-data>\n    </div>\n  </div>\n</div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.textarea,.control-btns{display:none}.comment,.edit-btn{display:block}.comment{border:0;border-bottom:1px solid rgb(242,242,242);color:#000;font-size:1rem;resize:none}.textarea{border:0;border-bottom:1px solid rgb(242,242,242);color:#1769e1;display:none;font-size:17px}.comment-section{min-width:350px;padding-right:45px;position:relative}.comment-section p{word-break:break-all}.comment-section.show-controls .textarea,.comment-section.show-controls .control-btns{display:block}.comment-section.show-controls .comment,.comment-section.show-controls .edit-btn{display:none}.comment-section.show-controls .control-btns.edit-control-btns{display:flex;justify-content:flex-end}.edit-btn{margin-top:-15px}.when-btn:focus{border:0;box-shadow:none}.pending-actions-wrapper{height:500px;overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$2.PaginationControlsComponent, selector: "pagination-controls", inputs: ["id", "maxSize", "directionLinks", "autoHide", "responsive", "previousLabel", "nextLabel", "screenReaderPaginationLabel", "screenReaderPageLabel", "screenReaderCurrentLabel"], outputs: ["pageChange", "pageBoundsCorrection"] }, { kind: "directive", type: i2$2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i9$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i11.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i17.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "pipe", type: i2$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i4$2.PaginatePipe, name: "paginate" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmSummaryActionsComponent, deps: [{ token: i1.CrmService }, { token: i0.Injector }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmSummaryActionsComponent, selector: "pw-smart-crm-summary-actions", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 mb-3\">\n    <div class=\"col-12 col-sm-3 float-start mb-2\"\n      *ngIf=\"showFilter\">\n      <select class=\"form-select\"\n        (change)=\"filterByUser($event)\">\n        <option value=\"0\">Filter by user</option>\n        <option *ngFor=\"let member of allSubscriptionMembers\"\n          [value]=\"member.id\">\n          {{ member.first_name }} {{ member.last_name }}\n        </option>\n      </select>\n    </div>\n    <div>\n      <a class=\"btn btn-sm btn-outline-primary float-end\"\n        data-cy=\"add-contact\"\n        [routerLink]=\"['/' + subscription?.slug + routers.addAccount]\">\n        <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n        {{ 'Crm.AccountMessage.AddAccount' | transloco }}\n      </a>\n      <a class=\"btn btn-sm btn-outline-primary float-end me-3\"\n        [routerLink]=\"['/' + subscription?.slug + routers.contactDetails, 0]\"\n        data-cy=\"add-action\">\n        <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n        {{ 'Crm.ContactMessage.AddContact' | transloco }}\n      </a>\n    </div>\n  </div>\n  <!-- Pending Actions -->\n  <div class=\"col-12 col-md-6 mb-3\">\n    <h5 class=\"accordion-heading\">Pending Actions</h5>\n    <div class=\"w-100 text-center mt-3\"\n      *ngIf=\"!isLoaded\">\n      <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n    </div>\n    <div *ngIf=\"contactActions?.length === 0 && isLoaded\"\n      class=\"px-2\">\n      <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.SummaryMessage' | transloco\"> </pw-no-data>\n    </div>\n    <!-- wrapper for infinite scroll -->\n    <div class=\"pending-actions-wrapper\"\n      infiniteScroll\n      [infiniteScrollDistance]=\"2\"\n      [infiniteScrollThrottle]=\"50\"\n      [infiniteScrollContainer]=\"selector\"\n      [fromRoot]=\"true\"\n      (scrolled)=\"onScrollPendingActions()\">\n      <div class=\"mb-4 action-card bg-white\"\n        *ngFor=\"let action of contactActions; let i = index\">\n        <div class=\"p-2\">\n          <ul class=\"list-inline\">\n            <li class=\"list-inline-item me-2\">\n              <h6 *ngIf=\"!updating || actionId !== action.id\">\n                {{ action.when_short_date }}\n              </h6>\n              <input *ngIf=\"updating && actionId === action.id\"\n                placeholder=\"yyyy-mm-dd\"\n                [value]=\"action.when_short_date\"\n                ngbDatepicker\n                #d=\"ngbDatepicker\"\n                (focus)=\"d.toggle()\"\n                (dateSelect)=\"onDateSelect($event, action)\" />\n            </li>\n            <li>\n              <button type=\"button\"\n                class=\"btn btn-sm when-btn\"\n                (click)=\"showDatePicker(action?.id)\">\n                <i\n                                    class=\"fa fa-edit edit-icon\"\n                                    ngbTooltip=\"Click to Edit\"\n                                    aria-hidden=\"true\"\n                                ></i>\n              </button>\n            </li>\n            <li class=\"list-inline-item\">\n              <span class=\"badge bg-primary\">{{ action.crm_action?.name }}</span>\n            </li>\n            <li class=\"list-inline-item float-end\">\n              <a *ngIf=\"action?.crm_contact\"\n                ngbTooltip=\"See this contact\"\n                [routerLink]=\"[\n                                    '/' + subscription?.slug + routers.contactInfo,\n                                    action?.crm_contact?.id\n                                ]\">\n                <i class=\"fa fa-eye me-3 see-icon\" aria-hidden=\"true\"></i>\n              </a>\n              <a ngbTooltip=\"Set as completed\"\n                class=\"me-3\"\n                href=\"javascript:void(0);\"\n                (click)=\"setAsCompleted(action.id, action, i)\">\n                <i class=\"fa fa-tasks cta1-icon\" aria-hidden=\"true\"></i>\n              </a>\n              <a ngbTooltip=\"Set as cancelled\"\n                href=\"javascript:void(0);\"\n                (click)=\"setAsCancelled(action.id, action, i)\">\n                <i\n                                    class=\"fa fa-times text-danger delete-icon\"\n                                    aria-hidden=\"true\"\n                                ></i>\n              </a>\n            </li>\n          </ul>\n          <p [class.text-danger]=\"!action.color\"\n            class=\"mb-0\"\n            *ngIf=\"action.due\">\n            {{ action.due }}\n          </p>\n          <p *ngIf=\"action.owner?.id !== userId\"\n            class=\"m-0 mt-1\">\n            <a class=\"font-italic grey\"\n              [routerLink]=\"['/members', action?.owner?.slug]\">Added by\n              {{ action.owner?.first_name + ' ' + action.owner?.last_name }}</a>\n          </p>\n          <p class=\"mt-1 mb-1 fw-bold\">\n            <a class=\"text-secondary\"\n              *ngIf=\"action?.crm_contact\"\n              [routerLink]=\"[\n                                '/' + subscription?.slug + routers.contactInfo,\n                                action?.crm_contact?.id\n                            ]\">\n              {{\n                                action?.crm_contact?.first_name +\n                                    ' ' +\n                                    action?.crm_contact?.last_name\n                            }}\n            </a>\n            <a *ngIf=\"!action.crm_contact_id\">N/A</a> at\n            <a *ngIf=\"action.crm_account_id\"\n              [routerLink]=\"[\n                                '/' + subscription?.slug + routers.accountInfo,\n                                action?.crm_account?.id\n                            ]\">\n              {{ action?.crm_account?.name }}\n            </a>\n          </p>\n          <div class=\"comment-section\">\n            <textarea class=\"mt-1 textarea form-control mb-2\"\n              [(ngModel)]=\"action.comment\">{{ action.comment }}</textarea>\n            <div class=\"d-flex\">\n              <p class=\"my-1 comment\"\n                *ngIf=\"!showFullComment || action.id !== commentId\">\n                {{ action.comment | slice: 0:230\n                                }}<a *ngIf=\"action.comment.length > 230\"\n                  class=\"text-secondary\"\n                  (click)=\"showFullComment = true; commentId = action.id\">...show more\n                </a>\n              </p>\n              <p class=\"my-1 comment\"\n                *ngIf=\"showFullComment && action.id === commentId\">\n                {{ action.comment }}\n                <a *ngIf=\"action.comment.length > 230 && showFullComment\"\n                  (click)=\"showFullComment = false\"\n                  class=\"text-secondary\">...show less</a>\n              </p>\n              <button class=\"btn btn-md edit-btn\"\n                (click)=\"editComment($event)\">\n                <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n              </button>\n            </div>\n            <div class=\"control-btns edit-control-btns\">\n              <button type=\"button\"\n                class=\"btn btn-sm btn-outline-default me-2\"\n                (click)=\"editComment(undefined)\">\n                {{ 'Button.Cancel' | transloco }}\n              </button>\n              <button class=\"btn btn-sm btn-primary\"\n                (click)=\"updateComment(action)\">\n                {{ 'Button.Submit' | transloco }}\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- Suggested Actions -->\n  <div class=\"col-12 col-md-6 mb-3\">\n    <h5 class=\"accordion-heading\">Suggested Actions</h5>\n    <div class=\"w-100 text-center mt-3\"\n      *ngIf=\"!isLoaded\">\n      <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n    </div>\n\n    <div class=\"mb-4 action-card bg-white\"\n      *ngFor=\"\n                let suggestedAction of accountActionSuggested\n                    | paginate: { id: 'suggestedAction', itemsPerPage: 10, currentPage: p1 };\n                let i = index\n            \">\n      <div class=\"p-2\">\n        <p class=\"mt-1 mb-1 fw-bold\">\n          <a [routerLink]=\"[\n                            '/' + subscription?.slug + routers.accountInfo,\n                            suggestedAction?.crm_account?.id\n                        ]\">{{ suggestedAction?.crm_account?.name }}</a>\n        </p>\n        <p class=\"fw-bold mb-1\">{{ suggestedAction.crm_action }}</p>\n        <p class=\"mb-0\">{{ suggestedAction.reason }}</p>\n      </div>\n    </div>\n    <div class=\"text-center pagination-controls w-100 mt-3\"\n      *ngIf=\"accountActionSuggested?.length > 10\">\n      <pagination-controls id=\"suggestedAction\"\n        (pageChange)=\"p1 = $event\">\n      </pagination-controls>\n    </div>\n    <div *ngIf=\"accountActionSuggested.length === 0 && isLoadedSuggested\"\n      class=\"px-2\">\n      <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.SummarySuggestionsMessage' | transloco\">\n      </pw-no-data>\n    </div>\n  </div>\n</div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.textarea,.control-btns{display:none}.comment,.edit-btn{display:block}.comment{border:0;border-bottom:1px solid rgb(242,242,242);color:#000;font-size:1rem;resize:none}.textarea{border:0;border-bottom:1px solid rgb(242,242,242);color:#1769e1;display:none;font-size:17px}.comment-section{min-width:350px;padding-right:45px;position:relative}.comment-section p{word-break:break-all}.comment-section.show-controls .textarea,.comment-section.show-controls .control-btns{display:block}.comment-section.show-controls .comment,.comment-section.show-controls .edit-btn{display:none}.comment-section.show-controls .control-btns.edit-control-btns{display:flex;justify-content:flex-end}.edit-btn{margin-top:-15px}.when-btn:focus{border:0;box-shadow:none}.pending-actions-wrapper{height:500px;overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$2.PaginationControlsComponent, selector: "pagination-controls", inputs: ["id", "maxSize", "directionLinks", "autoHide", "responsive", "previousLabel", "nextLabel", "screenReaderPaginationLabel", "screenReaderPageLabel", "screenReaderCurrentLabel"], outputs: ["pageChange", "pageBoundsCorrection"] }, { kind: "directive", type: i2$2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i9$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i11.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i17.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "pipe", type: i2$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i4$2.PaginatePipe, name: "paginate" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmSummaryActionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmSummaryActionsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pw-smart-crm-summary-actions', template: "<div class=\"row\">\n  <div class=\"col-12 mb-3\">\n    <div class=\"col-12 col-sm-3 float-start mb-2\"\n      *ngIf=\"showFilter\">\n      <select class=\"form-select\"\n        (change)=\"filterByUser($event)\">\n        <option value=\"0\">Filter by user</option>\n        <option *ngFor=\"let member of allSubscriptionMembers\"\n          [value]=\"member.id\">\n          {{ member.first_name }} {{ member.last_name }}\n        </option>\n      </select>\n    </div>\n    <div>\n      <a class=\"btn btn-sm btn-outline-primary float-end\"\n        data-cy=\"add-contact\"\n        [routerLink]=\"['/' + subscription?.slug + routers.addAccount]\">\n        <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n        {{ 'Crm.AccountMessage.AddAccount' | transloco }}\n      </a>\n      <a class=\"btn btn-sm btn-outline-primary float-end me-3\"\n        [routerLink]=\"['/' + subscription?.slug + routers.contactDetails, 0]\"\n        data-cy=\"add-action\">\n        <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n        {{ 'Crm.ContactMessage.AddContact' | transloco }}\n      </a>\n    </div>\n  </div>\n  <!-- Pending Actions -->\n  <div class=\"col-12 col-md-6 mb-3\">\n    <h5 class=\"accordion-heading\">Pending Actions</h5>\n    <div class=\"w-100 text-center mt-3\"\n      *ngIf=\"!isLoaded\">\n      <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n    </div>\n    <div *ngIf=\"contactActions?.length === 0 && isLoaded\"\n      class=\"px-2\">\n      <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.SummaryMessage' | transloco\"> </pw-no-data>\n    </div>\n    <!-- wrapper for infinite scroll -->\n    <div class=\"pending-actions-wrapper\"\n      infiniteScroll\n      [infiniteScrollDistance]=\"2\"\n      [infiniteScrollThrottle]=\"50\"\n      [infiniteScrollContainer]=\"selector\"\n      [fromRoot]=\"true\"\n      (scrolled)=\"onScrollPendingActions()\">\n      <div class=\"mb-4 action-card bg-white\"\n        *ngFor=\"let action of contactActions; let i = index\">\n        <div class=\"p-2\">\n          <ul class=\"list-inline\">\n            <li class=\"list-inline-item me-2\">\n              <h6 *ngIf=\"!updating || actionId !== action.id\">\n                {{ action.when_short_date }}\n              </h6>\n              <input *ngIf=\"updating && actionId === action.id\"\n                placeholder=\"yyyy-mm-dd\"\n                [value]=\"action.when_short_date\"\n                ngbDatepicker\n                #d=\"ngbDatepicker\"\n                (focus)=\"d.toggle()\"\n                (dateSelect)=\"onDateSelect($event, action)\" />\n            </li>\n            <li>\n              <button type=\"button\"\n                class=\"btn btn-sm when-btn\"\n                (click)=\"showDatePicker(action?.id)\">\n                <i\n                                    class=\"fa fa-edit edit-icon\"\n                                    ngbTooltip=\"Click to Edit\"\n                                    aria-hidden=\"true\"\n                                ></i>\n              </button>\n            </li>\n            <li class=\"list-inline-item\">\n              <span class=\"badge bg-primary\">{{ action.crm_action?.name }}</span>\n            </li>\n            <li class=\"list-inline-item float-end\">\n              <a *ngIf=\"action?.crm_contact\"\n                ngbTooltip=\"See this contact\"\n                [routerLink]=\"[\n                                    '/' + subscription?.slug + routers.contactInfo,\n                                    action?.crm_contact?.id\n                                ]\">\n                <i class=\"fa fa-eye me-3 see-icon\" aria-hidden=\"true\"></i>\n              </a>\n              <a ngbTooltip=\"Set as completed\"\n                class=\"me-3\"\n                href=\"javascript:void(0);\"\n                (click)=\"setAsCompleted(action.id, action, i)\">\n                <i class=\"fa fa-tasks cta1-icon\" aria-hidden=\"true\"></i>\n              </a>\n              <a ngbTooltip=\"Set as cancelled\"\n                href=\"javascript:void(0);\"\n                (click)=\"setAsCancelled(action.id, action, i)\">\n                <i\n                                    class=\"fa fa-times text-danger delete-icon\"\n                                    aria-hidden=\"true\"\n                                ></i>\n              </a>\n            </li>\n          </ul>\n          <p [class.text-danger]=\"!action.color\"\n            class=\"mb-0\"\n            *ngIf=\"action.due\">\n            {{ action.due }}\n          </p>\n          <p *ngIf=\"action.owner?.id !== userId\"\n            class=\"m-0 mt-1\">\n            <a class=\"font-italic grey\"\n              [routerLink]=\"['/members', action?.owner?.slug]\">Added by\n              {{ action.owner?.first_name + ' ' + action.owner?.last_name }}</a>\n          </p>\n          <p class=\"mt-1 mb-1 fw-bold\">\n            <a class=\"text-secondary\"\n              *ngIf=\"action?.crm_contact\"\n              [routerLink]=\"[\n                                '/' + subscription?.slug + routers.contactInfo,\n                                action?.crm_contact?.id\n                            ]\">\n              {{\n                                action?.crm_contact?.first_name +\n                                    ' ' +\n                                    action?.crm_contact?.last_name\n                            }}\n            </a>\n            <a *ngIf=\"!action.crm_contact_id\">N/A</a> at\n            <a *ngIf=\"action.crm_account_id\"\n              [routerLink]=\"[\n                                '/' + subscription?.slug + routers.accountInfo,\n                                action?.crm_account?.id\n                            ]\">\n              {{ action?.crm_account?.name }}\n            </a>\n          </p>\n          <div class=\"comment-section\">\n            <textarea class=\"mt-1 textarea form-control mb-2\"\n              [(ngModel)]=\"action.comment\">{{ action.comment }}</textarea>\n            <div class=\"d-flex\">\n              <p class=\"my-1 comment\"\n                *ngIf=\"!showFullComment || action.id !== commentId\">\n                {{ action.comment | slice: 0:230\n                                }}<a *ngIf=\"action.comment.length > 230\"\n                  class=\"text-secondary\"\n                  (click)=\"showFullComment = true; commentId = action.id\">...show more\n                </a>\n              </p>\n              <p class=\"my-1 comment\"\n                *ngIf=\"showFullComment && action.id === commentId\">\n                {{ action.comment }}\n                <a *ngIf=\"action.comment.length > 230 && showFullComment\"\n                  (click)=\"showFullComment = false\"\n                  class=\"text-secondary\">...show less</a>\n              </p>\n              <button class=\"btn btn-md edit-btn\"\n                (click)=\"editComment($event)\">\n                <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n              </button>\n            </div>\n            <div class=\"control-btns edit-control-btns\">\n              <button type=\"button\"\n                class=\"btn btn-sm btn-outline-default me-2\"\n                (click)=\"editComment(undefined)\">\n                {{ 'Button.Cancel' | transloco }}\n              </button>\n              <button class=\"btn btn-sm btn-primary\"\n                (click)=\"updateComment(action)\">\n                {{ 'Button.Submit' | transloco }}\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- Suggested Actions -->\n  <div class=\"col-12 col-md-6 mb-3\">\n    <h5 class=\"accordion-heading\">Suggested Actions</h5>\n    <div class=\"w-100 text-center mt-3\"\n      *ngIf=\"!isLoaded\">\n      <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n    </div>\n\n    <div class=\"mb-4 action-card bg-white\"\n      *ngFor=\"\n                let suggestedAction of accountActionSuggested\n                    | paginate: { id: 'suggestedAction', itemsPerPage: 10, currentPage: p1 };\n                let i = index\n            \">\n      <div class=\"p-2\">\n        <p class=\"mt-1 mb-1 fw-bold\">\n          <a [routerLink]=\"[\n                            '/' + subscription?.slug + routers.accountInfo,\n                            suggestedAction?.crm_account?.id\n                        ]\">{{ suggestedAction?.crm_account?.name }}</a>\n        </p>\n        <p class=\"fw-bold mb-1\">{{ suggestedAction.crm_action }}</p>\n        <p class=\"mb-0\">{{ suggestedAction.reason }}</p>\n      </div>\n    </div>\n    <div class=\"text-center pagination-controls w-100 mt-3\"\n      *ngIf=\"accountActionSuggested?.length > 10\">\n      <pagination-controls id=\"suggestedAction\"\n        (pageChange)=\"p1 = $event\">\n      </pagination-controls>\n    </div>\n    <div *ngIf=\"accountActionSuggested.length === 0 && isLoadedSuggested\"\n      class=\"px-2\">\n      <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.SummarySuggestionsMessage' | transloco\">\n      </pw-no-data>\n    </div>\n  </div>\n</div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.textarea,.control-btns{display:none}.comment,.edit-btn{display:block}.comment{border:0;border-bottom:1px solid rgb(242,242,242);color:#000;font-size:1rem;resize:none}.textarea{border:0;border-bottom:1px solid rgb(242,242,242);color:#1769e1;display:none;font-size:17px}.comment-section{min-width:350px;padding-right:45px;position:relative}.comment-section p{word-break:break-all}.comment-section.show-controls .textarea,.comment-section.show-controls .control-btns{display:block}.comment-section.show-controls .comment,.comment-section.show-controls .edit-btn{display:none}.comment-section.show-controls .control-btns.edit-control-btns{display:flex;justify-content:flex-end}.edit-btn{margin-top:-15px}.when-btn:focus{border:0;box-shadow:none}.pending-actions-wrapper{height:500px;overflow-y:auto}\n"] }]
         }], ctorParameters: () => [{ type: i1.CrmService }, { type: i0.Injector }, { type: Document, decorators: [{
@@ -5458,19 +5458,19 @@ class SmartCrmSummaryOthersComponent extends AppBaseComponent {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmSummaryOthersComponent, deps: [{ token: i1.CrmService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: SmartCrmSummaryOthersComponent, selector: "pw-smart-crm-summary-others", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <ng-container class=\"mt-5\"\n    *rbacAllow=\"'Pages.Beta'\">\n    <!-- Signed up last 30 days -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Signed up Last 30 Days</h5>\n      <div class=\"w-100 text-center mt-3\">\n        <ng-template [ngIf]=\"!signUpLastThirtyDaysLoaded\">\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </ng-template>\n      </div>\n      <div class=\"primeng-datatable-container table-responsive\"\n        *ngIf=\"signedUpLastThirtyDays?.length\">\n        <p-table class=\"table\"\n          #dt\n          [value]=\"signedUpLastThirtyDays\"\n          [paginator]=\"true\"\n          [rows]=\"PAGE_SIZE\"\n          [totalRecords]=\"signedUpLastThirtyDays.length\"\n          [lazy]=\"true\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.Summary.Owner' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.ContactName' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.ContactEmail' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\"\n            let-signUp>\n            <tr>\n              <td data-head=\"Owner\">\n                {{ signUp.owner?.first_name }} {{ signUp.owner?.last_name }}\n              </td>\n              <td data-head=\"Contact Name\">\n                {{ signUp.contact_name }}\n              </td>\n              <td data-head=\"Contact Email\">\n                {{ signUp.contact_email }}\n              </td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{ signedUpLastThirtyDays.length }}</span>\n      </div>\n      <div *ngIf=\"signedUpLastThirtyDays?.length === 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n      </div>\n    </div>\n    <!-- Active Opportunities -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Active Opportunities</h5>\n      <div class=\"w-100 text-center mt-3\">\n        <ng-template [ngIf]=\"!activeOpportunitiesLoaded\">\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </ng-template>\n      </div>\n      <div class=\"primeng-datatable-container table-responsive\"\n        *ngIf=\"activeOpportunities?.length\">\n        <p-table class=\"table\"\n          #dt\n          [value]=\"activeOpportunities\"\n          [paginator]=\"true\"\n          [rows]=\"PAGE_SIZE\"\n\n          [totalRecords]=\"activeOpportunities.length\"\n          [lazy]=\"true\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.Summary.Title' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.ContactName' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.Account' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.OneTimeAmount' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.WinChance' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.MonthlyAmount' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\"\n            let-opportunities>\n            <tr>\n              <td data-head=\"Title\">\n                {{ opportunities.title }}\n              </td>\n              <td data-head=\"Contact Name\">\n                {{ opportunities.crm_contact?.first_name }}\n                {{ opportunities.crm_contact?.last_name }}\n              </td>\n              <td data-head=\"Account\">\n                {{ opportunities.crm_account?.name }}\n              </td>\n              <td data-head=\"One Time Amount\">\n                {{ opportunities.one_time_amount / 100 | currency }}\n              </td>\n              <td data-head=\"Monthly Amount\">\n                {{ opportunities.monthly_amount / 100 | currency }}\n              </td>\n              <td data-head=\"Win Chance\">\n                {{ opportunities.win_chances | percent }}\n              </td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{ activeOpportunities.length }}</span>\n      </div>\n      <div *ngIf=\"activeOpportunities?.length === 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n      </div>\n    </div>\n    <!-- Accounts at risk -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Accounts at Risk</h5>\n      <div class=\"w-100 text-center mt-3\">\n        <ng-template [ngIf]=\"!accountAtRiskDetailsLoaded\">\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </ng-template>\n      </div>\n      <div class=\"primeng-datatable-container table-responsive\"\n        *ngIf=\"accountAtRisk?.length\">\n        <p-table class=\"table\"\n          #dt\n          [value]=\"accountAtRisk\"\n          [paginator]=\"true\"\n          [rows]=\"PAGE_SIZE\"\n\n          [totalRecords]=\"accountAtRisk.length\"\n          [lazy]=\"true\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.Summary.Owner' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.ContactName' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.Organisation' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.ContactEmail' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\"\n            let-account>\n            <tr>\n              <td data-head=\"Owner\">\n                {{ account.owner?.first_name }} {{ account.owner?.last_name }}\n              </td>\n              <td data-head=\"Contact Name\">\n                {{ account.contact_name }}\n              </td>\n              <td data-head=\"Organisation\">\n                {{ account.name }}\n              </td>\n              <td data-head=\"Contact Email\">\n                {{ account.contact_email }}\n              </td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{ accountAtRisk.length }}</span>\n      </div>\n      <div *ngIf=\"accountAtRisk?.length === 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n      </div>\n    </div>\n    <!-- Contract renewal -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Contract Renewal</h5>\n      <div class=\"w-100 text-center mt-3\">\n        <ng-template [ngIf]=\"!contactRenewalLoaded\">\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </ng-template>\n      </div>\n      <div class=\"primeng-datatable-container table-responsive\"\n        *ngIf=\"ContractRenewal?.length\">\n        <p-table class=\"table\"\n          #dt\n          [value]=\"ContractRenewal\"\n          [paginator]=\"true\"\n          [rows]=\"PAGE_SIZE\"\n\n          [totalRecords]=\"ContractRenewal.length\"\n          [lazy]=\"true\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.Summary.Owner' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.ContactName' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.Organisation' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.ContactEmail' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\"\n            let-account>\n            <tr>\n              <td data-head=\"Owner\">\n                {{ account.owner?.first_name }} {{ account.owner?.last_name }}\n              </td>\n              <td data-head=\"Contact Name\">\n                {{ account.contact_name }}\n              </td>\n              <td data-head=\"Organisation\">\n                {{ account.name }}\n              </td>\n              <td data-head=\"Contact Email\">\n                {{ account.contact_email }}\n              </td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{ ContractRenewal.length }}</span>\n      </div>\n      <div *ngIf=\"ContractRenewal?.length === 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n      </div>\n    </div>\n    <!-- Credit Card Expiring -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Credit Card Expiring</h5>\n      <div class=\"w-100 text-center mt-3\">\n        <ng-template [ngIf]=\"!creditCardExpiringDetailsLoaded\">\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </ng-template>\n      </div>\n      <div class=\"primeng-datatable-container table-responsive\"\n        *ngIf=\"creditCardExpiring?.length\">\n        <p-table class=\"table\"\n          #dt\n          [value]=\"creditCardExpiring\"\n          [paginator]=\"true\"\n          [rows]=\"PAGE_SIZE\"\n\n          [totalRecords]=\"creditCardExpiring.length\"\n          [lazy]=\"true\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.Summary.Owner' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.ContactName' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.Organisation' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.ContactEmail' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\"\n            let-account>\n            <tr>\n              <td data-head=\"Owner\">\n                {{ account.owner?.first_name }} {{ account.owner?.last_name }}\n              </td>\n              <td data-head=\"Contact Name\">\n                {{ account.contact_name }}\n              </td>\n              <td data-head=\"Organisation\">\n                {{ account.name }}\n              </td>\n              <td data-head=\"Contact Email\">\n                {{ account.contact_email }}\n              </td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{ creditCardExpiring.length }}</span>\n      </div>\n      <div *ngIf=\"creditCardExpiring?.length === 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n      </div>\n    </div>\n    <!-- Magic Moment -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Magic Moment</h5>\n      <div class=\"w-100 text-center mt-3\">\n        <ng-template [ngIf]=\"!magicMomentLoaded\">\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </ng-template>\n      </div>\n      <div class=\"primeng-datatable-container table-responsive\"\n        *ngIf=\"magicMoment?.length\">\n        <p-table class=\"table\"\n          #dt\n          [value]=\"magicMoment\"\n          [paginator]=\"true\"\n          [rows]=\"PAGE_SIZE\"\n\n          [totalRecords]=\"magicMoment.length\"\n          [lazy]=\"true\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.Summary.Owner' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.ContactName' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.Organisation' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.ContactEmail' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\"\n            let-account>\n            <tr>\n              <td data-head=\"Owner\">\n                {{ account.owner?.first_name }} {{ account.owner?.last_name }}\n              </td>\n              <td data-head=\"Contact Name\">\n                {{ account.contact_name }}\n              </td>\n              <td data-head=\"Organisation\">\n                {{ account.name }}\n              </td>\n              <td data-head=\"Contact Email\">\n                {{ account.contact_email }}\n              </td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{ magicMoment.length }}</span>\n      </div>\n      <div *ngIf=\"magicMoment?.length === 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n      </div>\n    </div>\n  </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i8.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "component", type: i11.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i2$1.PercentPipe, name: "percent" }, { kind: "pipe", type: i2$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmSummaryOthersComponent, 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: SmartCrmSummaryOthersComponent, selector: "pw-smart-crm-summary-others", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <ng-container class=\"mt-5\"\n    *rbacAllow=\"'Pages.Beta'\">\n    <!-- Signed up last 30 days -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Signed up Last 30 Days</h5>\n      <div class=\"w-100 text-center mt-3\">\n        <ng-template [ngIf]=\"!signUpLastThirtyDaysLoaded\">\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </ng-template>\n      </div>\n      <div class=\"primeng-datatable-container table-responsive\"\n        *ngIf=\"signedUpLastThirtyDays?.length\">\n        <p-table class=\"table\"\n          #dt\n          [value]=\"signedUpLastThirtyDays\"\n          [paginator]=\"true\"\n          [rows]=\"PAGE_SIZE\"\n          [totalRecords]=\"signedUpLastThirtyDays.length\"\n          [lazy]=\"true\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.Summary.Owner' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.ContactName' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.ContactEmail' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\"\n            let-signUp>\n            <tr>\n              <td data-head=\"Owner\">\n                {{ signUp.owner?.first_name }} {{ signUp.owner?.last_name }}\n              </td>\n              <td data-head=\"Contact Name\">\n                {{ signUp.contact_name }}\n              </td>\n              <td data-head=\"Contact Email\">\n                {{ signUp.contact_email }}\n              </td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{ signedUpLastThirtyDays.length }}</span>\n      </div>\n      <div *ngIf=\"signedUpLastThirtyDays?.length === 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n      </div>\n    </div>\n    <!-- Active Opportunities -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Active Opportunities</h5>\n      <div class=\"w-100 text-center mt-3\">\n        <ng-template [ngIf]=\"!activeOpportunitiesLoaded\">\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </ng-template>\n      </div>\n      <div class=\"primeng-datatable-container table-responsive\"\n        *ngIf=\"activeOpportunities?.length\">\n        <p-table class=\"table\"\n          #dt\n          [value]=\"activeOpportunities\"\n          [paginator]=\"true\"\n          [rows]=\"PAGE_SIZE\"\n\n          [totalRecords]=\"activeOpportunities.length\"\n          [lazy]=\"true\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.Summary.Title' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.ContactName' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.Account' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.OneTimeAmount' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.WinChance' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.MonthlyAmount' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\"\n            let-opportunities>\n            <tr>\n              <td data-head=\"Title\">\n                {{ opportunities.title }}\n              </td>\n              <td data-head=\"Contact Name\">\n                {{ opportunities.crm_contact?.first_name }}\n                {{ opportunities.crm_contact?.last_name }}\n              </td>\n              <td data-head=\"Account\">\n                {{ opportunities.crm_account?.name }}\n              </td>\n              <td data-head=\"One Time Amount\">\n                {{ opportunities.one_time_amount / 100 | currency }}\n              </td>\n              <td data-head=\"Monthly Amount\">\n                {{ opportunities.monthly_amount / 100 | currency }}\n              </td>\n              <td data-head=\"Win Chance\">\n                {{ opportunities.win_chances | percent }}\n              </td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{ activeOpportunities.length }}</span>\n      </div>\n      <div *ngIf=\"activeOpportunities?.length === 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n      </div>\n    </div>\n    <!-- Accounts at risk -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Accounts at Risk</h5>\n      <div class=\"w-100 text-center mt-3\">\n        <ng-template [ngIf]=\"!accountAtRiskDetailsLoaded\">\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </ng-template>\n      </div>\n      <div class=\"primeng-datatable-container table-responsive\"\n        *ngIf=\"accountAtRisk?.length\">\n        <p-table class=\"table\"\n          #dt\n          [value]=\"accountAtRisk\"\n          [paginator]=\"true\"\n          [rows]=\"PAGE_SIZE\"\n\n          [totalRecords]=\"accountAtRisk.length\"\n          [lazy]=\"true\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.Summary.Owner' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.ContactName' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.Organisation' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.ContactEmail' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\"\n            let-account>\n            <tr>\n              <td data-head=\"Owner\">\n                {{ account.owner?.first_name }} {{ account.owner?.last_name }}\n              </td>\n              <td data-head=\"Contact Name\">\n                {{ account.contact_name }}\n              </td>\n              <td data-head=\"Organisation\">\n                {{ account.name }}\n              </td>\n              <td data-head=\"Contact Email\">\n                {{ account.contact_email }}\n              </td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{ accountAtRisk.length }}</span>\n      </div>\n      <div *ngIf=\"accountAtRisk?.length === 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n      </div>\n    </div>\n    <!-- Contract renewal -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Contract Renewal</h5>\n      <div class=\"w-100 text-center mt-3\">\n        <ng-template [ngIf]=\"!contactRenewalLoaded\">\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </ng-template>\n      </div>\n      <div class=\"primeng-datatable-container table-responsive\"\n        *ngIf=\"ContractRenewal?.length\">\n        <p-table class=\"table\"\n          #dt\n          [value]=\"ContractRenewal\"\n          [paginator]=\"true\"\n          [rows]=\"PAGE_SIZE\"\n\n          [totalRecords]=\"ContractRenewal.length\"\n          [lazy]=\"true\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.Summary.Owner' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.ContactName' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.Organisation' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.ContactEmail' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\"\n            let-account>\n            <tr>\n              <td data-head=\"Owner\">\n                {{ account.owner?.first_name }} {{ account.owner?.last_name }}\n              </td>\n              <td data-head=\"Contact Name\">\n                {{ account.contact_name }}\n              </td>\n              <td data-head=\"Organisation\">\n                {{ account.name }}\n              </td>\n              <td data-head=\"Contact Email\">\n                {{ account.contact_email }}\n              </td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{ ContractRenewal.length }}</span>\n      </div>\n      <div *ngIf=\"ContractRenewal?.length === 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n      </div>\n    </div>\n    <!-- Credit Card Expiring -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Credit Card Expiring</h5>\n      <div class=\"w-100 text-center mt-3\">\n        <ng-template [ngIf]=\"!creditCardExpiringDetailsLoaded\">\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </ng-template>\n      </div>\n      <div class=\"primeng-datatable-container table-responsive\"\n        *ngIf=\"creditCardExpiring?.length\">\n        <p-table class=\"table\"\n          #dt\n          [value]=\"creditCardExpiring\"\n          [paginator]=\"true\"\n          [rows]=\"PAGE_SIZE\"\n\n          [totalRecords]=\"creditCardExpiring.length\"\n          [lazy]=\"true\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.Summary.Owner' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.ContactName' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.Organisation' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.ContactEmail' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\"\n            let-account>\n            <tr>\n              <td data-head=\"Owner\">\n                {{ account.owner?.first_name }} {{ account.owner?.last_name }}\n              </td>\n              <td data-head=\"Contact Name\">\n                {{ account.contact_name }}\n              </td>\n              <td data-head=\"Organisation\">\n                {{ account.name }}\n              </td>\n              <td data-head=\"Contact Email\">\n                {{ account.contact_email }}\n              </td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{ creditCardExpiring.length }}</span>\n      </div>\n      <div *ngIf=\"creditCardExpiring?.length === 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n      </div>\n    </div>\n    <!-- Magic Moment -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Magic Moment</h5>\n      <div class=\"w-100 text-center mt-3\">\n        <ng-template [ngIf]=\"!magicMomentLoaded\">\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </ng-template>\n      </div>\n      <div class=\"primeng-datatable-container table-responsive\"\n        *ngIf=\"magicMoment?.length\">\n        <p-table class=\"table\"\n          #dt\n          [value]=\"magicMoment\"\n          [paginator]=\"true\"\n          [rows]=\"PAGE_SIZE\"\n\n          [totalRecords]=\"magicMoment.length\"\n          [lazy]=\"true\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.Summary.Owner' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.ContactName' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.Organisation' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.ContactEmail' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\"\n            let-account>\n            <tr>\n              <td data-head=\"Owner\">\n                {{ account.owner?.first_name }} {{ account.owner?.last_name }}\n              </td>\n              <td data-head=\"Contact Name\">\n                {{ account.contact_name }}\n              </td>\n              <td data-head=\"Organisation\">\n                {{ account.name }}\n              </td>\n              <td data-head=\"Contact Email\">\n                {{ account.contact_email }}\n              </td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{ magicMoment.length }}</span>\n      </div>\n      <div *ngIf=\"magicMoment?.length === 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n      </div>\n    </div>\n  </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i8.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "component", type: i11.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i2$1.PercentPipe, name: "percent" }, { kind: "pipe", type: i2$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmSummaryOthersComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmSummaryOthersComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pw-smart-crm-summary-others', template: "<div class=\"row\">\n  <ng-container class=\"mt-5\"\n    *rbacAllow=\"'Pages.Beta'\">\n    <!-- Signed up last 30 days -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Signed up Last 30 Days</h5>\n      <div class=\"w-100 text-center mt-3\">\n        <ng-template [ngIf]=\"!signUpLastThirtyDaysLoaded\">\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </ng-template>\n      </div>\n      <div class=\"primeng-datatable-container table-responsive\"\n        *ngIf=\"signedUpLastThirtyDays?.length\">\n        <p-table class=\"table\"\n          #dt\n          [value]=\"signedUpLastThirtyDays\"\n          [paginator]=\"true\"\n          [rows]=\"PAGE_SIZE\"\n          [totalRecords]=\"signedUpLastThirtyDays.length\"\n          [lazy]=\"true\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.Summary.Owner' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.ContactName' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.ContactEmail' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\"\n            let-signUp>\n            <tr>\n              <td data-head=\"Owner\">\n                {{ signUp.owner?.first_name }} {{ signUp.owner?.last_name }}\n              </td>\n              <td data-head=\"Contact Name\">\n                {{ signUp.contact_name }}\n              </td>\n              <td data-head=\"Contact Email\">\n                {{ signUp.contact_email }}\n              </td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{ signedUpLastThirtyDays.length }}</span>\n      </div>\n      <div *ngIf=\"signedUpLastThirtyDays?.length === 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n      </div>\n    </div>\n    <!-- Active Opportunities -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Active Opportunities</h5>\n      <div class=\"w-100 text-center mt-3\">\n        <ng-template [ngIf]=\"!activeOpportunitiesLoaded\">\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </ng-template>\n      </div>\n      <div class=\"primeng-datatable-container table-responsive\"\n        *ngIf=\"activeOpportunities?.length\">\n        <p-table class=\"table\"\n          #dt\n          [value]=\"activeOpportunities\"\n          [paginator]=\"true\"\n          [rows]=\"PAGE_SIZE\"\n\n          [totalRecords]=\"activeOpportunities.length\"\n          [lazy]=\"true\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.Summary.Title' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.ContactName' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.Account' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.OneTimeAmount' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.WinChance' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.MonthlyAmount' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\"\n            let-opportunities>\n            <tr>\n              <td data-head=\"Title\">\n                {{ opportunities.title }}\n              </td>\n              <td data-head=\"Contact Name\">\n                {{ opportunities.crm_contact?.first_name }}\n                {{ opportunities.crm_contact?.last_name }}\n              </td>\n              <td data-head=\"Account\">\n                {{ opportunities.crm_account?.name }}\n              </td>\n              <td data-head=\"One Time Amount\">\n                {{ opportunities.one_time_amount / 100 | currency }}\n              </td>\n              <td data-head=\"Monthly Amount\">\n                {{ opportunities.monthly_amount / 100 | currency }}\n              </td>\n              <td data-head=\"Win Chance\">\n                {{ opportunities.win_chances | percent }}\n              </td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{ activeOpportunities.length }}</span>\n      </div>\n      <div *ngIf=\"activeOpportunities?.length === 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n      </div>\n    </div>\n    <!-- Accounts at risk -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Accounts at Risk</h5>\n      <div class=\"w-100 text-center mt-3\">\n        <ng-template [ngIf]=\"!accountAtRiskDetailsLoaded\">\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </ng-template>\n      </div>\n      <div class=\"primeng-datatable-container table-responsive\"\n        *ngIf=\"accountAtRisk?.length\">\n        <p-table class=\"table\"\n          #dt\n          [value]=\"accountAtRisk\"\n          [paginator]=\"true\"\n          [rows]=\"PAGE_SIZE\"\n\n          [totalRecords]=\"accountAtRisk.length\"\n          [lazy]=\"true\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.Summary.Owner' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.ContactName' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.Organisation' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.ContactEmail' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\"\n            let-account>\n            <tr>\n              <td data-head=\"Owner\">\n                {{ account.owner?.first_name }} {{ account.owner?.last_name }}\n              </td>\n              <td data-head=\"Contact Name\">\n                {{ account.contact_name }}\n              </td>\n              <td data-head=\"Organisation\">\n                {{ account.name }}\n              </td>\n              <td data-head=\"Contact Email\">\n                {{ account.contact_email }}\n              </td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{ accountAtRisk.length }}</span>\n      </div>\n      <div *ngIf=\"accountAtRisk?.length === 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n      </div>\n    </div>\n    <!-- Contract renewal -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Contract Renewal</h5>\n      <div class=\"w-100 text-center mt-3\">\n        <ng-template [ngIf]=\"!contactRenewalLoaded\">\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </ng-template>\n      </div>\n      <div class=\"primeng-datatable-container table-responsive\"\n        *ngIf=\"ContractRenewal?.length\">\n        <p-table class=\"table\"\n          #dt\n          [value]=\"ContractRenewal\"\n          [paginator]=\"true\"\n          [rows]=\"PAGE_SIZE\"\n\n          [totalRecords]=\"ContractRenewal.length\"\n          [lazy]=\"true\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.Summary.Owner' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.ContactName' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.Organisation' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.ContactEmail' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\"\n            let-account>\n            <tr>\n              <td data-head=\"Owner\">\n                {{ account.owner?.first_name }} {{ account.owner?.last_name }}\n              </td>\n              <td data-head=\"Contact Name\">\n                {{ account.contact_name }}\n              </td>\n              <td data-head=\"Organisation\">\n                {{ account.name }}\n              </td>\n              <td data-head=\"Contact Email\">\n                {{ account.contact_email }}\n              </td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{ ContractRenewal.length }}</span>\n      </div>\n      <div *ngIf=\"ContractRenewal?.length === 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n      </div>\n    </div>\n    <!-- Credit Card Expiring -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Credit Card Expiring</h5>\n      <div class=\"w-100 text-center mt-3\">\n        <ng-template [ngIf]=\"!creditCardExpiringDetailsLoaded\">\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </ng-template>\n      </div>\n      <div class=\"primeng-datatable-container table-responsive\"\n        *ngIf=\"creditCardExpiring?.length\">\n        <p-table class=\"table\"\n          #dt\n          [value]=\"creditCardExpiring\"\n          [paginator]=\"true\"\n          [rows]=\"PAGE_SIZE\"\n\n          [totalRecords]=\"creditCardExpiring.length\"\n          [lazy]=\"true\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.Summary.Owner' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.ContactName' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.Organisation' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.ContactEmail' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\"\n            let-account>\n            <tr>\n              <td data-head=\"Owner\">\n                {{ account.owner?.first_name }} {{ account.owner?.last_name }}\n              </td>\n              <td data-head=\"Contact Name\">\n                {{ account.contact_name }}\n              </td>\n              <td data-head=\"Organisation\">\n                {{ account.name }}\n              </td>\n              <td data-head=\"Contact Email\">\n                {{ account.contact_email }}\n              </td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{ creditCardExpiring.length }}</span>\n      </div>\n      <div *ngIf=\"creditCardExpiring?.length === 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n      </div>\n    </div>\n    <!-- Magic Moment -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Magic Moment</h5>\n      <div class=\"w-100 text-center mt-3\">\n        <ng-template [ngIf]=\"!magicMomentLoaded\">\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </ng-template>\n      </div>\n      <div class=\"primeng-datatable-container table-responsive\"\n        *ngIf=\"magicMoment?.length\">\n        <p-table class=\"table\"\n          #dt\n          [value]=\"magicMoment\"\n          [paginator]=\"true\"\n          [rows]=\"PAGE_SIZE\"\n\n          [totalRecords]=\"magicMoment.length\"\n          [lazy]=\"true\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.Summary.Owner' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.ContactName' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.Organisation' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.ContactEmail' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\"\n            let-account>\n            <tr>\n              <td data-head=\"Owner\">\n                {{ account.owner?.first_name }} {{ account.owner?.last_name }}\n              </td>\n              <td data-head=\"Contact Name\">\n                {{ account.contact_name }}\n              </td>\n              <td data-head=\"Organisation\">\n                {{ account.name }}\n              </td>\n              <td data-head=\"Contact Email\">\n                {{ account.contact_email }}\n              </td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{ magicMoment.length }}</span>\n      </div>\n      <div *ngIf=\"magicMoment?.length === 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n      </div>\n    </div>\n  </ng-container>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.CrmService }, { type: i0.Injector }] });
 class SmartCrmSummaryComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmSummaryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: SmartCrmSummaryComponent, selector: "pw-smart-crm-summary", ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 mb-0\">\n    <h2>{{ 'Crm.SmartCrmSummary' | transloco }}</h2>\n    <p>In this section you can see your CRM at a glance.</p>\n  </div>\n</div>\n<ul ngbNav\n  #nav=\"ngbNav\"\n  class=\"nav-tabs\">\n  <li [ngbNavItem]=\"1\">\n    <a ngbNavLink>Actions</a>\n    <ng-template ngbNavContent>\n      <pw-smart-crm-summary-actions></pw-smart-crm-summary-actions>\n    </ng-template>\n  </li>\n  <li [ngbNavItem]=\"2\"\n    *rbacAllow=\"'Pages.Beta'\">\n    <a ngbNavLink>Other</a>\n    <ng-template ngbNavContent>\n      <pw-smart-crm-summary-others></pw-smart-crm-summary-others>\n    </ng-template>\n  </li>\n</ul>\n\n<div [ngbNavOutlet]=\"nav\"></div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.textarea,.control-btns{display:none}.comment,.edit-btn{display:block}.comment{border:0;border-bottom:1px solid rgb(242,242,242);color:#000;font-size:1rem;resize:none}.textarea{border:0;border-bottom:1px solid rgb(242,242,242);color:#1769e1;display:none;font-size:17px}.comment-section{min-width:350px;padding-right:45px;position:relative}.comment-section p{word-break:break-all}.comment-section.show-controls .textarea,.comment-section.show-controls .control-btns{display:block}.comment-section.show-controls .comment,.comment-section.show-controls .edit-btn{display:none}.comment-section.show-controls .control-btns.edit-control-btns{display:flex;justify-content:flex-end}.edit-btn{margin-top:-15px}.when-btn:focus{border:0;box-shadow:none}\n"], dependencies: [{ kind: "directive", type: i5.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i2$2.NgbNavContent, selector: "ng-template[ngbNavContent]" }, { kind: "directive", type: i2$2.NgbNav, selector: "[ngbNav]", inputs: ["activeId", "animation", "destroyOnHide", "orientation", "roles", "keyboard"], outputs: ["activeIdChange", "shown", "hidden", "navChange"], exportAs: ["ngbNav"] }, { kind: "directive", type: i2$2.NgbNavItem, selector: "[ngbNavItem]", inputs: ["destroyOnHide", "disabled", "domId", "ngbNavItem"], outputs: ["shown", "hidden"], exportAs: ["ngbNavItem"] }, { kind: "directive", type: i2$2.NgbNavItemRole, selector: "[ngbNavItem]:not(ng-container)" }, { kind: "directive", type: i2$2.NgbNavLink, selector: "a[ngbNavLink]" }, { kind: "directive", type: i2$2.NgbNavLinkBase, selector: "[ngbNavLink]" }, { kind: "component", type: i2$2.NgbNavOutlet, selector: "[ngbNavOutlet]", inputs: ["paneRole", "ngbNavOutlet"] }, { kind: "component", type: SmartCrmSummaryActionsComponent, selector: "pw-smart-crm-summary-actions" }, { kind: "component", type: SmartCrmSummaryOthersComponent, selector: "pw-smart-crm-summary-others" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmSummaryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmSummaryComponent, selector: "pw-smart-crm-summary", ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 mb-0\">\n    <h2>{{ 'Crm.SmartCrmSummary' | transloco }}</h2>\n    <p>In this section you can see your CRM at a glance.</p>\n  </div>\n</div>\n<ul ngbNav\n  #nav=\"ngbNav\"\n  class=\"nav-tabs\">\n  <li [ngbNavItem]=\"1\">\n    <a ngbNavLink>Actions</a>\n    <ng-template ngbNavContent>\n      <pw-smart-crm-summary-actions></pw-smart-crm-summary-actions>\n    </ng-template>\n  </li>\n  <li [ngbNavItem]=\"2\"\n    *rbacAllow=\"'Pages.Beta'\">\n    <a ngbNavLink>Other</a>\n    <ng-template ngbNavContent>\n      <pw-smart-crm-summary-others></pw-smart-crm-summary-others>\n    </ng-template>\n  </li>\n</ul>\n\n<div [ngbNavOutlet]=\"nav\"></div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.textarea,.control-btns{display:none}.comment,.edit-btn{display:block}.comment{border:0;border-bottom:1px solid rgb(242,242,242);color:#000;font-size:1rem;resize:none}.textarea{border:0;border-bottom:1px solid rgb(242,242,242);color:#1769e1;display:none;font-size:17px}.comment-section{min-width:350px;padding-right:45px;position:relative}.comment-section p{word-break:break-all}.comment-section.show-controls .textarea,.comment-section.show-controls .control-btns{display:block}.comment-section.show-controls .comment,.comment-section.show-controls .edit-btn{display:none}.comment-section.show-controls .control-btns.edit-control-btns{display:flex;justify-content:flex-end}.edit-btn{margin-top:-15px}.when-btn:focus{border:0;box-shadow:none}\n"], dependencies: [{ kind: "directive", type: i5.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i2$2.NgbNavContent, selector: "ng-template[ngbNavContent]" }, { kind: "directive", type: i2$2.NgbNav, selector: "[ngbNav]", inputs: ["activeId", "animation", "destroyOnHide", "orientation", "roles", "keyboard"], outputs: ["activeIdChange", "shown", "hidden", "navChange"], exportAs: ["ngbNav"] }, { kind: "directive", type: i2$2.NgbNavItem, selector: "[ngbNavItem]", inputs: ["destroyOnHide", "disabled", "domId", "ngbNavItem"], outputs: ["shown", "hidden"], exportAs: ["ngbNavItem"] }, { kind: "directive", type: i2$2.NgbNavItemRole, selector: "[ngbNavItem]:not(ng-container)" }, { kind: "directive", type: i2$2.NgbNavLink, selector: "a[ngbNavLink]" }, { kind: "directive", type: i2$2.NgbNavLinkBase, selector: "[ngbNavLink]" }, { kind: "component", type: i2$2.NgbNavOutlet, selector: "[ngbNavOutlet]", inputs: ["paneRole", "ngbNavOutlet"] }, { kind: "component", type: SmartCrmSummaryActionsComponent, selector: "pw-smart-crm-summary-actions" }, { kind: "component", type: SmartCrmSummaryOthersComponent, selector: "pw-smart-crm-summary-others" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmSummaryComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmSummaryComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pw-smart-crm-summary', template: "<div class=\"row\">\n  <div class=\"col-12 mb-0\">\n    <h2>{{ 'Crm.SmartCrmSummary' | transloco }}</h2>\n    <p>In this section you can see your CRM at a glance.</p>\n  </div>\n</div>\n<ul ngbNav\n  #nav=\"ngbNav\"\n  class=\"nav-tabs\">\n  <li [ngbNavItem]=\"1\">\n    <a ngbNavLink>Actions</a>\n    <ng-template ngbNavContent>\n      <pw-smart-crm-summary-actions></pw-smart-crm-summary-actions>\n    </ng-template>\n  </li>\n  <li [ngbNavItem]=\"2\"\n    *rbacAllow=\"'Pages.Beta'\">\n    <a ngbNavLink>Other</a>\n    <ng-template ngbNavContent>\n      <pw-smart-crm-summary-others></pw-smart-crm-summary-others>\n    </ng-template>\n  </li>\n</ul>\n\n<div [ngbNavOutlet]=\"nav\"></div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.textarea,.control-btns{display:none}.comment,.edit-btn{display:block}.comment{border:0;border-bottom:1px solid rgb(242,242,242);color:#000;font-size:1rem;resize:none}.textarea{border:0;border-bottom:1px solid rgb(242,242,242);color:#1769e1;display:none;font-size:17px}.comment-section{min-width:350px;padding-right:45px;position:relative}.comment-section p{word-break:break-all}.comment-section.show-controls .textarea,.comment-section.show-controls .control-btns{display:block}.comment-section.show-controls .comment,.comment-section.show-controls .edit-btn{display:none}.comment-section.show-controls .control-btns.edit-control-btns{display:flex;justify-content:flex-end}.edit-btn{margin-top:-15px}.when-btn:focus{border:0;box-shadow:none}\n"] }]
         }] });
@@ -5551,10 +5551,10 @@ class SmartCrmTabsComponent extends AppBaseComponent {
             }
         ];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmTabsComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: SmartCrmTabsComponent, selector: "pw-smart-crm-private-tabs", usesInheritance: true, ngImport: i0, template: `<pw-tabs [items]="items" [withSubscription]="true"></pw-tabs>`, isInline: true, dependencies: [{ kind: "component", type: i11.PwTabsComponent, selector: "pw-tabs", inputs: ["items", "withSubscription"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmTabsComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmTabsComponent, selector: "pw-smart-crm-private-tabs", usesInheritance: true, ngImport: i0, template: `<pw-tabs [items]="items" [withSubscription]="true"></pw-tabs>`, isInline: true, dependencies: [{ kind: "component", type: i11.PwTabsComponent, selector: "pw-tabs", inputs: ["items", "withSubscription"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmTabsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmTabsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'pw-smart-crm-private-tabs',
@@ -5829,11 +5829,11 @@ const routes$1 = [
     }
 ];
 class SmartCrmPrivateRoutingModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmPrivateRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmPrivateRoutingModule, imports: [i1$1.RouterModule], exports: [RouterModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmPrivateRoutingModule, imports: [RouterModule.forChild(routes$1), RouterModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmPrivateRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmPrivateRoutingModule, imports: [i1$1.RouterModule], exports: [RouterModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmPrivateRoutingModule, imports: [RouterModule.forChild(routes$1), RouterModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmPrivateRoutingModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmPrivateRoutingModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [RouterModule.forChild(routes$1)],
@@ -5843,8 +5843,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImpor
 PlotlyViaCDNModule.setPlotlyVersion('1.55.2');
 class SmartCrmPrivateModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmPrivateModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmPrivateModule, declarations: [SmartCrmTabsComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmPrivateModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmPrivateModule, declarations: [SmartCrmTabsComponent,
             SmartCrmSummaryComponent,
             SmartCrmCompaniesComponent,
             SmartCrmContactComponent,
@@ -5937,7 +5937,7 @@ class SmartCrmPrivateModule {
             SmartCrmMarketingViewComponent,
             SmartCrmOpportunityCategoriesComponent,
             SmartCrmOpportunityCategoriesDetailsComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmPrivateModule, providers: [
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmPrivateModule, providers: [
             {
                 provide: TRANSLOCO_SCOPE,
                 useValue: {
@@ -5978,7 +5978,7 @@ class SmartCrmPrivateModule {
             // LazyLoadModules
         ] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SmartCrmPrivateModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmPrivateModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -6144,10 +6144,10 @@ class CrmNewsletterConfirmationComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: CrmNewsletterConfirmationComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i1.CrmService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: CrmNewsletterConfirmationComponent, selector: "pw-crm-newsletter-confirmation", ngImport: i0, template: "<pw-public-layout title=\"Newsletter Confirmation\">\n  <div class=\"login-inner\">\n    <div class=\"card-block public-inner\">\n      <div class=\"message\">\n        {{ message }}\n      </div>\n      <ng-container *ngIf=\"!message\">\n        <div class=\"page-loading\">\n          <img src=\"/assets/img/logos/oval.svg\"\n            alt=\"\"\n            class=\"loading-icon\" />\n        </div>\n      </ng-container>\n    </div>\n  </div>\n  <div class=\"mb-2\">\n    <br /><br />\n    <strong>\n      <a class=\"footer-links me-4\"\n        routerLink=\"/\">{{ 'Button.Home' | transloco }}</a>\n      <a class=\"footer-links\"\n        routerLink=\"/register\">{{\n                'User.Account.CreateAccount' | transloco\n            }}</a>\n    </strong>\n  </div>\n</pw-public-layout>\n", styles: [".message{font-size:18px;font-weight:400}\n"], dependencies: [{ kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3$1.PublicLayoutComponent, selector: "pw-public-layout", inputs: ["title"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CrmNewsletterConfirmationComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i1.CrmService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: CrmNewsletterConfirmationComponent, selector: "pw-crm-newsletter-confirmation", ngImport: i0, template: "<pw-public-layout title=\"Newsletter Confirmation\">\n  <div class=\"login-inner\">\n    <div class=\"card-block public-inner\">\n      <div class=\"message\">\n        {{ message }}\n      </div>\n      <ng-container *ngIf=\"!message\">\n        <div class=\"page-loading\">\n          <img src=\"/assets/img/logos/oval.svg\"\n            alt=\"\"\n            class=\"loading-icon\" />\n        </div>\n      </ng-container>\n    </div>\n  </div>\n  <div class=\"mb-2\">\n    <br /><br />\n    <strong>\n      <a class=\"footer-links me-4\"\n        routerLink=\"/\">{{ 'Button.Home' | transloco }}</a>\n      <a class=\"footer-links\"\n        routerLink=\"/register\">{{\n                'User.Account.CreateAccount' | transloco\n            }}</a>\n    </strong>\n  </div>\n</pw-public-layout>\n", styles: [".message{font-size:18px;font-weight:400}\n"], dependencies: [{ kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3$1.PublicLayoutComponent, selector: "pw-public-layout", inputs: ["title"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: CrmNewsletterConfirmationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CrmNewsletterConfirmationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pw-crm-newsletter-confirmation', template: "<pw-public-layout title=\"Newsletter Confirmation\">\n  <div class=\"login-inner\">\n    <div class=\"card-block public-inner\">\n      <div class=\"message\">\n        {{ message }}\n      </div>\n      <ng-container *ngIf=\"!message\">\n        <div class=\"page-loading\">\n          <img src=\"/assets/img/logos/oval.svg\"\n            alt=\"\"\n            class=\"loading-icon\" />\n        </div>\n      </ng-container>\n    </div>\n  </div>\n  <div class=\"mb-2\">\n    <br /><br />\n    <strong>\n      <a class=\"footer-links me-4\"\n        routerLink=\"/\">{{ 'Button.Home' | transloco }}</a>\n      <a class=\"footer-links\"\n        routerLink=\"/register\">{{\n                'User.Account.CreateAccount' | transloco\n            }}</a>\n    </strong>\n  </div>\n</pw-public-layout>\n", styles: [".message{font-size:18px;font-weight:400}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: i1.CrmService }] });
@@ -6190,10 +6190,10 @@ class CrmNewsletterUnsubscribeComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: CrmNewsletterUnsubscribeComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i1.CrmService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: CrmNewsletterUnsubscribeComponent, selector: "pw-crm-newsletter-unsubscribe", ngImport: i0, template: "<pw-public-layout title=\"Newsletter Unsubscribe\">\n  <div class=\"login-inner\">\n    <div class=\"card-block public-inner\">\n      <div class=\"alert alert-danger\"\n        *ngIf=\"error\">\n        <ng-container *ngIf=\"error\">\n          {{ errorMsg }}\n        </ng-container>\n      </div>\n\n      <div class=\"message\">\n        {{ message }}\n      </div>\n\n      <ng-container *ngIf=\"!message && !error\">\n        <div class=\"page-loading\">\n          <img src=\"/assets/img/logos/oval.svg\"\n            alt=\"\"\n            class=\"loading-icon\" />\n        </div>\n      </ng-container>\n    </div>\n  </div>\n\n  <div class=\"mb-2\">\n    <br /><br /><br />\n    <strong>\n      <a class=\"footer-links me-4\"\n        routerLink=\"/\">{{ 'Button.Home' | transloco }}</a>\n      <a class=\"footer-links\"\n        routerLink=\"/register\">{{\n                'User.Account.CreateAccount' | transloco\n            }}</a>\n    </strong>\n  </div>\n</pw-public-layout>\n", dependencies: [{ kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3$1.PublicLayoutComponent, selector: "pw-public-layout", inputs: ["title"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CrmNewsletterUnsubscribeComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i1.CrmService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: CrmNewsletterUnsubscribeComponent, selector: "pw-crm-newsletter-unsubscribe", ngImport: i0, template: "<pw-public-layout title=\"Newsletter Unsubscribe\">\n  <div class=\"login-inner\">\n    <div class=\"card-block public-inner\">\n      <div class=\"alert alert-danger\"\n        *ngIf=\"error\">\n        <ng-container *ngIf=\"error\">\n          {{ errorMsg }}\n        </ng-container>\n      </div>\n\n      <div class=\"message\">\n        {{ message }}\n      </div>\n\n      <ng-container *ngIf=\"!message && !error\">\n        <div class=\"page-loading\">\n          <img src=\"/assets/img/logos/oval.svg\"\n            alt=\"\"\n            class=\"loading-icon\" />\n        </div>\n      </ng-container>\n    </div>\n  </div>\n\n  <div class=\"mb-2\">\n    <br /><br /><br />\n    <strong>\n      <a class=\"footer-links me-4\"\n        routerLink=\"/\">{{ 'Button.Home' | transloco }}</a>\n      <a class=\"footer-links\"\n        routerLink=\"/register\">{{\n                'User.Account.CreateAccount' | transloco\n            }}</a>\n    </strong>\n  </div>\n</pw-public-layout>\n", dependencies: [{ kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3$1.PublicLayoutComponent, selector: "pw-public-layout", inputs: ["title"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: CrmNewsletterUnsubscribeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CrmNewsletterUnsubscribeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pw-crm-newsletter-unsubscribe', template: "<pw-public-layout title=\"Newsletter Unsubscribe\">\n  <div class=\"login-inner\">\n    <div class=\"card-block public-inner\">\n      <div class=\"alert alert-danger\"\n        *ngIf=\"error\">\n        <ng-container *ngIf=\"error\">\n          {{ errorMsg }}\n        </ng-container>\n      </div>\n\n      <div class=\"message\">\n        {{ message }}\n      </div>\n\n      <ng-container *ngIf=\"!message && !error\">\n        <div class=\"page-loading\">\n          <img src=\"/assets/img/logos/oval.svg\"\n            alt=\"\"\n            class=\"loading-icon\" />\n        </div>\n      </ng-container>\n    </div>\n  </div>\n\n  <div class=\"mb-2\">\n    <br /><br /><br />\n    <strong>\n      <a class=\"footer-links me-4\"\n        routerLink=\"/\">{{ 'Button.Home' | transloco }}</a>\n      <a class=\"footer-links\"\n        routerLink=\"/register\">{{\n                'User.Account.CreateAccount' | transloco\n            }}</a>\n    </strong>\n  </div>\n</pw-public-layout>\n" }]
         }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: i1.CrmService }] });
@@ -6218,10 +6218,10 @@ class CrmSignupComponent extends AppBaseComponent {
     scrollableLeft() {
         $('.register').css('opacity', 1);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: CrmSignupComponent, deps: [{ token: i2.AuthService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: CrmSignupComponent, selector: "pw-crm-signup", usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid register\">\n  <div class=\"register-container row h-100\">\n    <div class=\"col-8 col-xl-9 col-md-7 col-lg-8 register-outer\">\n      <h1 class=\"my-5\">\n        Not just a CRM <br />\n        but\n        <span data-period=\"3000\"\n          class=\"txt-rotate\"\n          [attr.data-rotate]=\"[\n                        'Qualified Leads',\n                        'New Prospects',\n                        'New Business Opportunities'\n                    ]\"></span>\n        <span class=\"blinking-cursor\">|</span>\n        <br />regularly delivered to you\n      </h1>\n\n      <h3 class=\"my-5\">\n        We use growth hacking tools - mainly crawlers and machine learning - to automate the\n        sourcing of new prospect lists.\n      </h3>\n\n      <div class=\"row services\">\n        <div class=\"col-lg-6 col-md-12 service-desc service-image\">\n          <figure>\n            <img src=\"/assets/img/products/smart-crm/crm-effective-solution.png\"\n              alt=\"Effective Solution\"\n              class=\"img-fluid\" />\n          </figure>\n        </div>\n        <div class=\"col-lg-6 col-md-12 service-desc product-features text-start\">\n          <h2><span>A More Effective</span> solution to increase your sales funnel.</h2>\n          <p>Our proprietary technology automates the sourcing of new leads.</p>\n\n          <ul class=\"list-unstyled\">\n            <li>\n              <span class=\"icon-check branding-color\"></span> Stop wasting time\n              searching for new prospects. Let us automate the process instead.\n            </li>\n            <li>\n              <span class=\"icon-check branding-color\"></span> We provide all you need\n              to contact prospects effectively.\n            </li>\n            <li>\n              <span class=\"icon-check branding-color\"></span> Focus on what's really\n              important - talking to your clients.\n            </li>\n          </ul>\n        </div>\n      </div>\n\n      <div class=\"row services\">\n        <div class=\"col-lg-6 col-md-12 service-desc product-features text-start\">\n          <h2>The full power of <span>Machine Learning</span>.</h2>\n          <p>\n            We have built a system that is able to understand when a prospect is most\n            likely to be looking for new vendors.\n          </p>\n          <ul class=\"list-unstyled\">\n            <li>\n              <span class=\"icon-check branding-color\"></span> Don't waste time. Reach\n              out to prospects at exactly the right moment.\n            </li>\n            <li>\n              <span class=\"icon-check branding-color\"></span> Let us tell you the most\n              efficient way to engage in conversation with your prospect.\n            </li>\n            <li>\n              <span class=\"icon-check branding-color\"></span> Maximize the chances to\n              convert the prospect into a paying customer.\n            </li>\n          </ul>\n        </div>\n        <div class=\"col-lg-6 col-md-12 service-image\">\n          <figure>\n            <img src=\"/assets/img/products/smart-crm/crm-machine-learning.png\"\n              alt=\"Machine Learning\"\n              class=\"img-fluid\" />\n          </figure>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"register-right-wrapper\">\n      <div class=\"register-right\">\n        <ul class=\"nav nav-tabs nav-justified\"\n          role=\"tablist\">\n          <li class=\"nav-item\">\n            <a class=\"nav-link active\"\n              id=\"login-tab\"\n              data-bs-toggle=\"tab\"\n              href=\"#login\"\n              role=\"tab\"\n              aria-controls=\"login\"\n              aria-selected=\"true\">Login</a>\n          </li>\n          <li class=\"nav-item\">\n            <a class=\"nav-link\"\n              id=\"join-tab\"\n              data-bs-toggle=\"tab\"\n              href=\"#join\"\n              role=\"tab\"\n              aria-controls=\"join\"\n              aria-selected=\"false\">Interested?</a>\n          </li>\n        </ul>\n\n        <div class=\"tab-content social-inline\">\n          <div class=\"tab-pane fade show\"\n            id=\"join\"\n            role=\"tabpanel\"\n            aria-labelledby=\"join-tab\">\n            <h3>\n              Contact us for a demo.<br />\n              It's worth more than a 1000 words.\n            </h3>\n            <pw-contact-us [masterProductId]=\"masterProductId\"\n              [productKey]=\"productKey\"\n              [subject]=\"subject\"></pw-contact-us>\n          </div>\n\n          <div class=\"tab-pane fade show active\"\n            id=\"login\"\n            role=\"tabpanel\"\n            aria-labelledby=\"login-tab\">\n            <h3>Welcome back</h3>\n            <pw-login></pw-login>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.register{background:#fff url(/assets/img/landing-page/testimonial-bg.png) fixed center top;background-size:100%;min-height:100vh;opacity:0;padding:40px}.register ul{border-top-left-radius:10px;border-top-right-radius:10px}.register ul.nav-tabs li{margin-bottom:-2px}.register ul.nav-tabs li:last-child a{border-top-right-radius:10px}.register ul.nav-tabs li:first-child a{border-top-left-radius:10px}.register ul.nav-tabs li a{background-color:#fff;border:0;border-radius:10px 10px 0 0;color:#000;font-family:Roboto,sans-serif;outline:none}.register ul.nav-tabs li a.active{background-color:#36c283;color:#fff}.register-container{margin:0 auto;max-width:100%;padding-right:15px}.register-container h1{color:#45d292}.register-container h3{color:var(--text)}.register-outer{color:#fff;padding-right:50px;text-align:center}.register-outer .logo-div{text-align:left}.register-outer .logo-div img{margin-bottom:0}.register-outer.fixed{position:absolute;top:8%;width:62%}.register-outer .txt-rotate{color:var(--text)}.register-outer input{background:#f8f9fa;border:0;border-radius:1.5rem;color:#383d41;cursor:pointer;font-weight:700;margin-bottom:3%;margin-top:30%;padding:2%;width:60%}.register-outer img{animation:mover 2s infinite alternate;margin-bottom:5%}.register-right{background:#f8f9fa;border-radius:10px;box-shadow:0 0 2px #00000080;flex:0 0 25%;margin-left:0!important;max-width:350px;padding:0;position:fixed;right:50px;top:20%;width:100%}.register-form{position:relative}.register-form iframe{left:50%;position:absolute;transform:translate(-50%) scale(.8)}.card{background-color:#fff;border-radius:20px;box-shadow:0 0 5px 1px #0003}.card-header i{background-color:var(--second);border-radius:50px;box-shadow:0 0 5px 2px #0003;color:#fff;font-size:20px;height:60px;padding:20px;width:60px}.card-block{color:var(--text);font:14px/1.5 Roboto,sans-serif}form .form-control{border-radius:50px;font-size:13px}form input[type=submit]{font-size:16px;margin-bottom:20px;padding:8px 30px}.tab-content{background-color:#fff;border-bottom-left-radius:10px;border-bottom-right-radius:10px;border-top:6px solid var(--second);padding:20px!important}.tab-content h3{font-size:20px;margin:30px 0;text-align:center;text-transform:uppercase}.tab-content form .form-control{border-radius:50px;font-size:13px}.tab-content form input[type=submit]{font-size:16px;margin-bottom:20px;padding:8px 30px}.form-check-input{cursor:pointer;height:100%;left:0;opacity:0;top:0;z-index:1}label{font:400 13px/1.3 Roboto,sans-serif;text-transform:none}label:after,label:before{top:0}.blinking-cursor{animation:1s blink step-end infinite;font-size:40px;font-weight:100}.product-features{color:var(--text);letter-spacing:.3px}.product-features.service-desc h2{font-size:32px;font-weight:700}.product-features.service-desc h2 span{color:var(--second)}.product-features .product-features ul li span{margin-right:15px}.product-features .branding-color{color:var(--second)}.product-features .icon-check:before{content:\"\\e080\"}.product-features p{color:var(--text);font-size:18px;font-weight:400;line-height:27px}.product-features ul li{align-items:center;-webkit-box-align:center;display:flex;-ms-flex-align:center;font-size:18px;line-height:25px;margin:0 0 15px}.product-features ul li span{margin-right:15px}.services{padding:50px 0}.forgot-pwd{color:#2e3238;font-size:.8rem;text-decoration:underline}.msp-container{padding:0!important}.msp-container .register-container{min-height:100vh!important}.msp-container .services{padding:0}.msp-container .services .service-points{font-size:18px;line-height:1.15em}.msp-container .branding-color{color:#fff}.msp-container .product-features ul li{color:#fff!important;margin:0 0 15px}.msp-container .register-outer{background:linear-gradient(var(--first),var(--second))}.msp-container .register-outer h1,.msp-container .register-outer h2,.msp-container .register-outer h3,.msp-container .register-outer p{color:#fff!important}.msp-container .register-right .tab-content{border-top:6px solid var(--first)}.msp-container .register-right .tab-content h3{color:var(--first);font-weight:700}.msp-container .register-right ul.nav-tabs li a.active{background-color:var(--first)}.vendor-container{padding:0!important}.vendor-container .register-outer h1{color:var(--first)}.vendor-container .service-points{font-size:18px;line-height:1.15em}.vendor-container .branding-color{color:var(--first)!important}.vendor-container .register-right .tab-content{border-top:6px solid var(--first)}.vendor-container .register-right .tab-content h3{color:var(--first);font-weight:700}.vendor-container .register-right ul.nav-tabs li a.active{background-color:var(--first)}.vendor-container .form-container{background-image:url(/assets/img/products/trial/login-form-background-img.png)}@keyframes blink{0%{color:transparent}50%{color:#45d292}to{color:transparent}}@media (max-width: 991px){.services{padding:25px 0}}@media only screen and (max-width: 768px){.register-container{max-width:100%;padding-right:0}.service-image{display:none}.register-outer{margin-top:30px;order:2;padding-right:0;transform:none}.register-outer h1{font-size:30px;padding:0}.register-outer h2{font-size:22px}.register-right{margin-top:10px;order:1;position:unset;top:0;transform:translateY(0)}.register-right,.register-outer{flex:100%;max-width:100%;width:100%}.product-features.service-desc h2{font-size:30px!important}.vendor-container .logo-div img{margin-bottom:0!important;padding-right:65px}.vendor-container .form-container{background:none}}app-social-login{padding:0 15px;width:100%}@media only screen and (min-width: 768px){.register-left{padding-right:40px}}@media only screen and (max-width: 480px){.register{padding:10px}.vendor-container{padding:10px!important}.vendor-container .form-container{padding:0!important}}@media screen and (min-width: 769px){.vendor-container .form-container{background-size:cover;height:100vh;position:fixed;right:0}}@media screen and (max-width: 768px){.vendor-container{background-image:url(/assets/img/products/c/login-form-background-img.png);background-position:right;background-repeat:no-repeat;background-size:60vw 100%}.vendor-container h3{letter-spacing:.03px;line-height:27px}.vendor-container .product-features li{margin:0 0 15px!important}}@media screen and (max-width: 575px){.vendor-container .logo-div{margin:0 auto 30px;text-align:center;width:300px}.vendor-container .logo-div img{margin-top:0!important;padding-right:0!important}}@media (min-width: 768px) and (max-width: 768px){.logo-div img{flex:0 0 33.3333%;max-width:33.3333%}}@media (min-width: 769px) and (max-width: 820px){.register-outer{flex:0 0 50%;max-width:50%}}@media (min-width: 1200px) and (max-width: 1280px){.register-outer{flex:0 0 66.6667%;max-width:66.6667%}}pw-cloudolive-signup-tabs-a{width:100%}.register-right-wrapper{width:100%}.register-outer.fixed{position:static}@media (min-width: 1600px){.register-right-wrapper{display:flex;justify-content:flex-end;width:100%}.register-right{right:auto}.register-container{max-width:85%}.register-container .form-container{background:none;position:static;right:auto}}@media (min-width: 1800px){.register-container{max-width:73%}}@media (min-width: 2560px){.register-container{max-width:65%}}.wrapper-register-content{margin-top:50px;padding:0!important}.wrapper-register-content .register-outer{margin:0 auto!important;padding:0 20px!important}.cloudolive-header h1,.blinking-text-wrapper h1{color:#45d292}.cloudolive-header h3,.blinking-text-wrapper h3,.cloudolive-header .txt-rotate,.blinking-text-wrapper .txt-rotate{color:var(--text)}.cloudolive-header .blinking-cursor,.blinking-text-wrapper .blinking-cursor{animation:1s blink step-end infinite;font-size:40px;font-weight:100}.tech-features-wrapper .container{padding-left:20px!important;padding-right:20px!important}.tech-features-wrapper section{padding:70px 0}.tech-features-wrapper section.blinking-text-wrapper{padding:100px 0}@media (max-width: 768px){.tech-features-wrapper section{padding:40px 0}.tech-features-wrapper section.blinking-text-wrapper{padding:50px 0}}.testimonial-bg{background:#fff url(/assets/img/landing-page/testimonial-bg.png) fixed center top;background-size:100%}\n"], dependencies: [{ kind: "component", type: i2$3.ProductLoginComponent, selector: "pw-login", inputs: ["gaEventObj", "googleCode"] }, { kind: "component", type: i2$3.ContactUsComponent, selector: "pw-contact-us", inputs: ["productKey", "subject", "masterProductId", "gaEventObj"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CrmSignupComponent, deps: [{ token: i2.AuthService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: CrmSignupComponent, selector: "pw-crm-signup", usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid register\">\n  <div class=\"register-container row h-100\">\n    <div class=\"col-8 col-xl-9 col-md-7 col-lg-8 register-outer\">\n      <h1 class=\"my-5\">\n        Not just a CRM <br />\n        but\n        <span data-period=\"3000\"\n          class=\"txt-rotate\"\n          [attr.data-rotate]=\"[\n                        'Qualified Leads',\n                        'New Prospects',\n                        'New Business Opportunities'\n                    ]\"></span>\n        <span class=\"blinking-cursor\">|</span>\n        <br />regularly delivered to you\n      </h1>\n\n      <h3 class=\"my-5\">\n        We use growth hacking tools - mainly crawlers and machine learning - to automate the\n        sourcing of new prospect lists.\n      </h3>\n\n      <div class=\"row services\">\n        <div class=\"col-lg-6 col-md-12 service-desc service-image\">\n          <figure>\n            <img src=\"/assets/img/products/smart-crm/crm-effective-solution.png\"\n              alt=\"Effective Solution\"\n              class=\"img-fluid\" />\n          </figure>\n        </div>\n        <div class=\"col-lg-6 col-md-12 service-desc product-features text-start\">\n          <h2><span>A More Effective</span> solution to increase your sales funnel.</h2>\n          <p>Our proprietary technology automates the sourcing of new leads.</p>\n\n          <ul class=\"list-unstyled\">\n            <li>\n              <span class=\"icon-check branding-color\"></span> Stop wasting time\n              searching for new prospects. Let us automate the process instead.\n            </li>\n            <li>\n              <span class=\"icon-check branding-color\"></span> We provide all you need\n              to contact prospects effectively.\n            </li>\n            <li>\n              <span class=\"icon-check branding-color\"></span> Focus on what's really\n              important - talking to your clients.\n            </li>\n          </ul>\n        </div>\n      </div>\n\n      <div class=\"row services\">\n        <div class=\"col-lg-6 col-md-12 service-desc product-features text-start\">\n          <h2>The full power of <span>Machine Learning</span>.</h2>\n          <p>\n            We have built a system that is able to understand when a prospect is most\n            likely to be looking for new vendors.\n          </p>\n          <ul class=\"list-unstyled\">\n            <li>\n              <span class=\"icon-check branding-color\"></span> Don't waste time. Reach\n              out to prospects at exactly the right moment.\n            </li>\n            <li>\n              <span class=\"icon-check branding-color\"></span> Let us tell you the most\n              efficient way to engage in conversation with your prospect.\n            </li>\n            <li>\n              <span class=\"icon-check branding-color\"></span> Maximize the chances to\n              convert the prospect into a paying customer.\n            </li>\n          </ul>\n        </div>\n        <div class=\"col-lg-6 col-md-12 service-image\">\n          <figure>\n            <img src=\"/assets/img/products/smart-crm/crm-machine-learning.png\"\n              alt=\"Machine Learning\"\n              class=\"img-fluid\" />\n          </figure>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"register-right-wrapper\">\n      <div class=\"register-right\">\n        <ul class=\"nav nav-tabs nav-justified\"\n          role=\"tablist\">\n          <li class=\"nav-item\">\n            <a class=\"nav-link active\"\n              id=\"login-tab\"\n              data-bs-toggle=\"tab\"\n              href=\"#login\"\n              role=\"tab\"\n              aria-controls=\"login\"\n              aria-selected=\"true\">Login</a>\n          </li>\n          <li class=\"nav-item\">\n            <a class=\"nav-link\"\n              id=\"join-tab\"\n              data-bs-toggle=\"tab\"\n              href=\"#join\"\n              role=\"tab\"\n              aria-controls=\"join\"\n              aria-selected=\"false\">Interested?</a>\n          </li>\n        </ul>\n\n        <div class=\"tab-content social-inline\">\n          <div class=\"tab-pane fade show\"\n            id=\"join\"\n            role=\"tabpanel\"\n            aria-labelledby=\"join-tab\">\n            <h3>\n              Contact us for a demo.<br />\n              It's worth more than a 1000 words.\n            </h3>\n            <pw-contact-us [masterProductId]=\"masterProductId\"\n              [productKey]=\"productKey\"\n              [subject]=\"subject\"></pw-contact-us>\n          </div>\n\n          <div class=\"tab-pane fade show active\"\n            id=\"login\"\n            role=\"tabpanel\"\n            aria-labelledby=\"login-tab\">\n            <h3>Welcome back</h3>\n            <pw-login></pw-login>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.register{background:#fff url(/assets/img/landing-page/testimonial-bg.png) fixed center top;background-size:100%;min-height:100vh;opacity:0;padding:40px}.register ul{border-top-left-radius:10px;border-top-right-radius:10px}.register ul.nav-tabs li{margin-bottom:-2px}.register ul.nav-tabs li:last-child a{border-top-right-radius:10px}.register ul.nav-tabs li:first-child a{border-top-left-radius:10px}.register ul.nav-tabs li a{background-color:#fff;border:0;border-radius:10px 10px 0 0;color:#000;font-family:Roboto,sans-serif;outline:none}.register ul.nav-tabs li a.active{background-color:#36c283;color:#fff}.register-container{margin:0 auto;max-width:100%;padding-right:15px}.register-container h1{color:#45d292}.register-container h3{color:var(--text)}.register-outer{color:#fff;padding-right:50px;text-align:center}.register-outer .logo-div{text-align:left}.register-outer .logo-div img{margin-bottom:0}.register-outer.fixed{position:absolute;top:8%;width:62%}.register-outer .txt-rotate{color:var(--text)}.register-outer input{background:#f8f9fa;border:0;border-radius:1.5rem;color:#383d41;cursor:pointer;font-weight:700;margin-bottom:3%;margin-top:30%;padding:2%;width:60%}.register-outer img{animation:mover 2s infinite alternate;margin-bottom:5%}.register-right{background:#f8f9fa;border-radius:10px;box-shadow:0 0 2px #00000080;flex:0 0 25%;margin-left:0!important;max-width:350px;padding:0;position:fixed;right:50px;top:20%;width:100%}.register-form{position:relative}.register-form iframe{left:50%;position:absolute;transform:translate(-50%) scale(.8)}.card{background-color:#fff;border-radius:20px;box-shadow:0 0 5px 1px #0003}.card-header i{background-color:var(--second);border-radius:50px;box-shadow:0 0 5px 2px #0003;color:#fff;font-size:20px;height:60px;padding:20px;width:60px}.card-block{color:var(--text);font:14px/1.5 Roboto,sans-serif}form .form-control{border-radius:50px;font-size:13px}form input[type=submit]{font-size:16px;margin-bottom:20px;padding:8px 30px}.tab-content{background-color:#fff;border-bottom-left-radius:10px;border-bottom-right-radius:10px;border-top:6px solid var(--second);padding:20px!important}.tab-content h3{font-size:20px;margin:30px 0;text-align:center;text-transform:uppercase}.tab-content form .form-control{border-radius:50px;font-size:13px}.tab-content form input[type=submit]{font-size:16px;margin-bottom:20px;padding:8px 30px}.form-check-input{cursor:pointer;height:100%;left:0;opacity:0;top:0;z-index:1}label{font:400 13px/1.3 Roboto,sans-serif;text-transform:none}label:after,label:before{top:0}.blinking-cursor{animation:1s blink step-end infinite;font-size:40px;font-weight:100}.product-features{color:var(--text);letter-spacing:.3px}.product-features.service-desc h2{font-size:32px;font-weight:700}.product-features.service-desc h2 span{color:var(--second)}.product-features .product-features ul li span{margin-right:15px}.product-features .branding-color{color:var(--second)}.product-features .icon-check:before{content:\"\\e080\"}.product-features p{color:var(--text);font-size:18px;font-weight:400;line-height:27px}.product-features ul li{align-items:center;-webkit-box-align:center;display:flex;-ms-flex-align:center;font-size:18px;line-height:25px;margin:0 0 15px}.product-features ul li span{margin-right:15px}.services{padding:50px 0}.forgot-pwd{color:#2e3238;font-size:.8rem;text-decoration:underline}.msp-container{padding:0!important}.msp-container .register-container{min-height:100vh!important}.msp-container .services{padding:0}.msp-container .services .service-points{font-size:18px;line-height:1.15em}.msp-container .branding-color{color:#fff}.msp-container .product-features ul li{color:#fff!important;margin:0 0 15px}.msp-container .register-outer{background:linear-gradient(var(--first),var(--second))}.msp-container .register-outer h1,.msp-container .register-outer h2,.msp-container .register-outer h3,.msp-container .register-outer p{color:#fff!important}.msp-container .register-right .tab-content{border-top:6px solid var(--first)}.msp-container .register-right .tab-content h3{color:var(--first);font-weight:700}.msp-container .register-right ul.nav-tabs li a.active{background-color:var(--first)}.vendor-container{padding:0!important}.vendor-container .register-outer h1{color:var(--first)}.vendor-container .service-points{font-size:18px;line-height:1.15em}.vendor-container .branding-color{color:var(--first)!important}.vendor-container .register-right .tab-content{border-top:6px solid var(--first)}.vendor-container .register-right .tab-content h3{color:var(--first);font-weight:700}.vendor-container .register-right ul.nav-tabs li a.active{background-color:var(--first)}.vendor-container .form-container{background-image:url(/assets/img/products/trial/login-form-background-img.png)}@keyframes blink{0%{color:transparent}50%{color:#45d292}to{color:transparent}}@media (max-width: 991px){.services{padding:25px 0}}@media only screen and (max-width: 768px){.register-container{max-width:100%;padding-right:0}.service-image{display:none}.register-outer{margin-top:30px;order:2;padding-right:0;transform:none}.register-outer h1{font-size:30px;padding:0}.register-outer h2{font-size:22px}.register-right{margin-top:10px;order:1;position:unset;top:0;transform:translateY(0)}.register-right,.register-outer{flex:100%;max-width:100%;width:100%}.product-features.service-desc h2{font-size:30px!important}.vendor-container .logo-div img{margin-bottom:0!important;padding-right:65px}.vendor-container .form-container{background:none}}app-social-login{padding:0 15px;width:100%}@media only screen and (min-width: 768px){.register-left{padding-right:40px}}@media only screen and (max-width: 480px){.register{padding:10px}.vendor-container{padding:10px!important}.vendor-container .form-container{padding:0!important}}@media screen and (min-width: 769px){.vendor-container .form-container{background-size:cover;height:100vh;position:fixed;right:0}}@media screen and (max-width: 768px){.vendor-container{background-image:url(/assets/img/products/c/login-form-background-img.png);background-position:right;background-repeat:no-repeat;background-size:60vw 100%}.vendor-container h3{letter-spacing:.03px;line-height:27px}.vendor-container .product-features li{margin:0 0 15px!important}}@media screen and (max-width: 575px){.vendor-container .logo-div{margin:0 auto 30px;text-align:center;width:300px}.vendor-container .logo-div img{margin-top:0!important;padding-right:0!important}}@media (min-width: 768px) and (max-width: 768px){.logo-div img{flex:0 0 33.3333%;max-width:33.3333%}}@media (min-width: 769px) and (max-width: 820px){.register-outer{flex:0 0 50%;max-width:50%}}@media (min-width: 1200px) and (max-width: 1280px){.register-outer{flex:0 0 66.6667%;max-width:66.6667%}}pw-cloudolive-signup-tabs-a{width:100%}.register-right-wrapper{width:100%}.register-outer.fixed{position:static}@media (min-width: 1600px){.register-right-wrapper{display:flex;justify-content:flex-end;width:100%}.register-right{right:auto}.register-container{max-width:85%}.register-container .form-container{background:none;position:static;right:auto}}@media (min-width: 1800px){.register-container{max-width:73%}}@media (min-width: 2560px){.register-container{max-width:65%}}.wrapper-register-content{margin-top:50px;padding:0!important}.wrapper-register-content .register-outer{margin:0 auto!important;padding:0 20px!important}.cloudolive-header h1,.blinking-text-wrapper h1{color:#45d292}.cloudolive-header h3,.blinking-text-wrapper h3,.cloudolive-header .txt-rotate,.blinking-text-wrapper .txt-rotate{color:var(--text)}.cloudolive-header .blinking-cursor,.blinking-text-wrapper .blinking-cursor{animation:1s blink step-end infinite;font-size:40px;font-weight:100}.tech-features-wrapper .container{padding-left:20px!important;padding-right:20px!important}.tech-features-wrapper section{padding:70px 0}.tech-features-wrapper section.blinking-text-wrapper{padding:100px 0}@media (max-width: 768px){.tech-features-wrapper section{padding:40px 0}.tech-features-wrapper section.blinking-text-wrapper{padding:50px 0}}.testimonial-bg{background:#fff url(/assets/img/landing-page/testimonial-bg.png) fixed center top;background-size:100%}\n"], dependencies: [{ kind: "component", type: i2$3.ProductLoginComponent, selector: "pw-login", inputs: ["gaEventObj", "googleCode"] }, { kind: "component", type: i2$3.ContactUsComponent, selector: "pw-contact-us", inputs: ["productKey", "subject", "masterProductId", "gaEventObj"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: CrmSignupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CrmSignupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pw-crm-signup', template: "<div class=\"container-fluid register\">\n  <div class=\"register-container row h-100\">\n    <div class=\"col-8 col-xl-9 col-md-7 col-lg-8 register-outer\">\n      <h1 class=\"my-5\">\n        Not just a CRM <br />\n        but\n        <span data-period=\"3000\"\n          class=\"txt-rotate\"\n          [attr.data-rotate]=\"[\n                        'Qualified Leads',\n                        'New Prospects',\n                        'New Business Opportunities'\n                    ]\"></span>\n        <span class=\"blinking-cursor\">|</span>\n        <br />regularly delivered to you\n      </h1>\n\n      <h3 class=\"my-5\">\n        We use growth hacking tools - mainly crawlers and machine learning - to automate the\n        sourcing of new prospect lists.\n      </h3>\n\n      <div class=\"row services\">\n        <div class=\"col-lg-6 col-md-12 service-desc service-image\">\n          <figure>\n            <img src=\"/assets/img/products/smart-crm/crm-effective-solution.png\"\n              alt=\"Effective Solution\"\n              class=\"img-fluid\" />\n          </figure>\n        </div>\n        <div class=\"col-lg-6 col-md-12 service-desc product-features text-start\">\n          <h2><span>A More Effective</span> solution to increase your sales funnel.</h2>\n          <p>Our proprietary technology automates the sourcing of new leads.</p>\n\n          <ul class=\"list-unstyled\">\n            <li>\n              <span class=\"icon-check branding-color\"></span> Stop wasting time\n              searching for new prospects. Let us automate the process instead.\n            </li>\n            <li>\n              <span class=\"icon-check branding-color\"></span> We provide all you need\n              to contact prospects effectively.\n            </li>\n            <li>\n              <span class=\"icon-check branding-color\"></span> Focus on what's really\n              important - talking to your clients.\n            </li>\n          </ul>\n        </div>\n      </div>\n\n      <div class=\"row services\">\n        <div class=\"col-lg-6 col-md-12 service-desc product-features text-start\">\n          <h2>The full power of <span>Machine Learning</span>.</h2>\n          <p>\n            We have built a system that is able to understand when a prospect is most\n            likely to be looking for new vendors.\n          </p>\n          <ul class=\"list-unstyled\">\n            <li>\n              <span class=\"icon-check branding-color\"></span> Don't waste time. Reach\n              out to prospects at exactly the right moment.\n            </li>\n            <li>\n              <span class=\"icon-check branding-color\"></span> Let us tell you the most\n              efficient way to engage in conversation with your prospect.\n            </li>\n            <li>\n              <span class=\"icon-check branding-color\"></span> Maximize the chances to\n              convert the prospect into a paying customer.\n            </li>\n          </ul>\n        </div>\n        <div class=\"col-lg-6 col-md-12 service-image\">\n          <figure>\n            <img src=\"/assets/img/products/smart-crm/crm-machine-learning.png\"\n              alt=\"Machine Learning\"\n              class=\"img-fluid\" />\n          </figure>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"register-right-wrapper\">\n      <div class=\"register-right\">\n        <ul class=\"nav nav-tabs nav-justified\"\n          role=\"tablist\">\n          <li class=\"nav-item\">\n            <a class=\"nav-link active\"\n              id=\"login-tab\"\n              data-bs-toggle=\"tab\"\n              href=\"#login\"\n              role=\"tab\"\n              aria-controls=\"login\"\n              aria-selected=\"true\">Login</a>\n          </li>\n          <li class=\"nav-item\">\n            <a class=\"nav-link\"\n              id=\"join-tab\"\n              data-bs-toggle=\"tab\"\n              href=\"#join\"\n              role=\"tab\"\n              aria-controls=\"join\"\n              aria-selected=\"false\">Interested?</a>\n          </li>\n        </ul>\n\n        <div class=\"tab-content social-inline\">\n          <div class=\"tab-pane fade show\"\n            id=\"join\"\n            role=\"tabpanel\"\n            aria-labelledby=\"join-tab\">\n            <h3>\n              Contact us for a demo.<br />\n              It's worth more than a 1000 words.\n            </h3>\n            <pw-contact-us [masterProductId]=\"masterProductId\"\n              [productKey]=\"productKey\"\n              [subject]=\"subject\"></pw-contact-us>\n          </div>\n\n          <div class=\"tab-pane fade show active\"\n            id=\"login\"\n            role=\"tabpanel\"\n            aria-labelledby=\"login-tab\">\n            <h3>Welcome back</h3>\n            <pw-login></pw-login>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.register{background:#fff url(/assets/img/landing-page/testimonial-bg.png) fixed center top;background-size:100%;min-height:100vh;opacity:0;padding:40px}.register ul{border-top-left-radius:10px;border-top-right-radius:10px}.register ul.nav-tabs li{margin-bottom:-2px}.register ul.nav-tabs li:last-child a{border-top-right-radius:10px}.register ul.nav-tabs li:first-child a{border-top-left-radius:10px}.register ul.nav-tabs li a{background-color:#fff;border:0;border-radius:10px 10px 0 0;color:#000;font-family:Roboto,sans-serif;outline:none}.register ul.nav-tabs li a.active{background-color:#36c283;color:#fff}.register-container{margin:0 auto;max-width:100%;padding-right:15px}.register-container h1{color:#45d292}.register-container h3{color:var(--text)}.register-outer{color:#fff;padding-right:50px;text-align:center}.register-outer .logo-div{text-align:left}.register-outer .logo-div img{margin-bottom:0}.register-outer.fixed{position:absolute;top:8%;width:62%}.register-outer .txt-rotate{color:var(--text)}.register-outer input{background:#f8f9fa;border:0;border-radius:1.5rem;color:#383d41;cursor:pointer;font-weight:700;margin-bottom:3%;margin-top:30%;padding:2%;width:60%}.register-outer img{animation:mover 2s infinite alternate;margin-bottom:5%}.register-right{background:#f8f9fa;border-radius:10px;box-shadow:0 0 2px #00000080;flex:0 0 25%;margin-left:0!important;max-width:350px;padding:0;position:fixed;right:50px;top:20%;width:100%}.register-form{position:relative}.register-form iframe{left:50%;position:absolute;transform:translate(-50%) scale(.8)}.card{background-color:#fff;border-radius:20px;box-shadow:0 0 5px 1px #0003}.card-header i{background-color:var(--second);border-radius:50px;box-shadow:0 0 5px 2px #0003;color:#fff;font-size:20px;height:60px;padding:20px;width:60px}.card-block{color:var(--text);font:14px/1.5 Roboto,sans-serif}form .form-control{border-radius:50px;font-size:13px}form input[type=submit]{font-size:16px;margin-bottom:20px;padding:8px 30px}.tab-content{background-color:#fff;border-bottom-left-radius:10px;border-bottom-right-radius:10px;border-top:6px solid var(--second);padding:20px!important}.tab-content h3{font-size:20px;margin:30px 0;text-align:center;text-transform:uppercase}.tab-content form .form-control{border-radius:50px;font-size:13px}.tab-content form input[type=submit]{font-size:16px;margin-bottom:20px;padding:8px 30px}.form-check-input{cursor:pointer;height:100%;left:0;opacity:0;top:0;z-index:1}label{font:400 13px/1.3 Roboto,sans-serif;text-transform:none}label:after,label:before{top:0}.blinking-cursor{animation:1s blink step-end infinite;font-size:40px;font-weight:100}.product-features{color:var(--text);letter-spacing:.3px}.product-features.service-desc h2{font-size:32px;font-weight:700}.product-features.service-desc h2 span{color:var(--second)}.product-features .product-features ul li span{margin-right:15px}.product-features .branding-color{color:var(--second)}.product-features .icon-check:before{content:\"\\e080\"}.product-features p{color:var(--text);font-size:18px;font-weight:400;line-height:27px}.product-features ul li{align-items:center;-webkit-box-align:center;display:flex;-ms-flex-align:center;font-size:18px;line-height:25px;margin:0 0 15px}.product-features ul li span{margin-right:15px}.services{padding:50px 0}.forgot-pwd{color:#2e3238;font-size:.8rem;text-decoration:underline}.msp-container{padding:0!important}.msp-container .register-container{min-height:100vh!important}.msp-container .services{padding:0}.msp-container .services .service-points{font-size:18px;line-height:1.15em}.msp-container .branding-color{color:#fff}.msp-container .product-features ul li{color:#fff!important;margin:0 0 15px}.msp-container .register-outer{background:linear-gradient(var(--first),var(--second))}.msp-container .register-outer h1,.msp-container .register-outer h2,.msp-container .register-outer h3,.msp-container .register-outer p{color:#fff!important}.msp-container .register-right .tab-content{border-top:6px solid var(--first)}.msp-container .register-right .tab-content h3{color:var(--first);font-weight:700}.msp-container .register-right ul.nav-tabs li a.active{background-color:var(--first)}.vendor-container{padding:0!important}.vendor-container .register-outer h1{color:var(--first)}.vendor-container .service-points{font-size:18px;line-height:1.15em}.vendor-container .branding-color{color:var(--first)!important}.vendor-container .register-right .tab-content{border-top:6px solid var(--first)}.vendor-container .register-right .tab-content h3{color:var(--first);font-weight:700}.vendor-container .register-right ul.nav-tabs li a.active{background-color:var(--first)}.vendor-container .form-container{background-image:url(/assets/img/products/trial/login-form-background-img.png)}@keyframes blink{0%{color:transparent}50%{color:#45d292}to{color:transparent}}@media (max-width: 991px){.services{padding:25px 0}}@media only screen and (max-width: 768px){.register-container{max-width:100%;padding-right:0}.service-image{display:none}.register-outer{margin-top:30px;order:2;padding-right:0;transform:none}.register-outer h1{font-size:30px;padding:0}.register-outer h2{font-size:22px}.register-right{margin-top:10px;order:1;position:unset;top:0;transform:translateY(0)}.register-right,.register-outer{flex:100%;max-width:100%;width:100%}.product-features.service-desc h2{font-size:30px!important}.vendor-container .logo-div img{margin-bottom:0!important;padding-right:65px}.vendor-container .form-container{background:none}}app-social-login{padding:0 15px;width:100%}@media only screen and (min-width: 768px){.register-left{padding-right:40px}}@media only screen and (max-width: 480px){.register{padding:10px}.vendor-container{padding:10px!important}.vendor-container .form-container{padding:0!important}}@media screen and (min-width: 769px){.vendor-container .form-container{background-size:cover;height:100vh;position:fixed;right:0}}@media screen and (max-width: 768px){.vendor-container{background-image:url(/assets/img/products/c/login-form-background-img.png);background-position:right;background-repeat:no-repeat;background-size:60vw 100%}.vendor-container h3{letter-spacing:.03px;line-height:27px}.vendor-container .product-features li{margin:0 0 15px!important}}@media screen and (max-width: 575px){.vendor-container .logo-div{margin:0 auto 30px;text-align:center;width:300px}.vendor-container .logo-div img{margin-top:0!important;padding-right:0!important}}@media (min-width: 768px) and (max-width: 768px){.logo-div img{flex:0 0 33.3333%;max-width:33.3333%}}@media (min-width: 769px) and (max-width: 820px){.register-outer{flex:0 0 50%;max-width:50%}}@media (min-width: 1200px) and (max-width: 1280px){.register-outer{flex:0 0 66.6667%;max-width:66.6667%}}pw-cloudolive-signup-tabs-a{width:100%}.register-right-wrapper{width:100%}.register-outer.fixed{position:static}@media (min-width: 1600px){.register-right-wrapper{display:flex;justify-content:flex-end;width:100%}.register-right{right:auto}.register-container{max-width:85%}.register-container .form-container{background:none;position:static;right:auto}}@media (min-width: 1800px){.register-container{max-width:73%}}@media (min-width: 2560px){.register-container{max-width:65%}}.wrapper-register-content{margin-top:50px;padding:0!important}.wrapper-register-content .register-outer{margin:0 auto!important;padding:0 20px!important}.cloudolive-header h1,.blinking-text-wrapper h1{color:#45d292}.cloudolive-header h3,.blinking-text-wrapper h3,.cloudolive-header .txt-rotate,.blinking-text-wrapper .txt-rotate{color:var(--text)}.cloudolive-header .blinking-cursor,.blinking-text-wrapper .blinking-cursor{animation:1s blink step-end infinite;font-size:40px;font-weight:100}.tech-features-wrapper .container{padding-left:20px!important;padding-right:20px!important}.tech-features-wrapper section{padding:70px 0}.tech-features-wrapper section.blinking-text-wrapper{padding:100px 0}@media (max-width: 768px){.tech-features-wrapper section{padding:40px 0}.tech-features-wrapper section.blinking-text-wrapper{padding:50px 0}}.testimonial-bg{background:#fff url(/assets/img/landing-page/testimonial-bg.png) fixed center top;background-size:100%}\n"] }]
         }], ctorParameters: () => [{ type: i2.AuthService }, { type: i0.Injector }] });
@@ -6251,11 +6251,11 @@ const routes = [
     }
 ];
 class CrmPublicRoutingModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: CrmPublicRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.6", ngImport: i0, type: CrmPublicRoutingModule, imports: [i1$1.RouterModule], exports: [RouterModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: CrmPublicRoutingModule, imports: [RouterModule.forChild(routes), RouterModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CrmPublicRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: CrmPublicRoutingModule, imports: [i1$1.RouterModule], exports: [RouterModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CrmPublicRoutingModule, imports: [RouterModule.forChild(routes), RouterModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: CrmPublicRoutingModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CrmPublicRoutingModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [RouterModule.forChild(routes)],
@@ -6264,11 +6264,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImpor
         }] });
 class CRMPublicModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: CRMPublicModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.6", ngImport: i0, type: CRMPublicModule, declarations: [CrmSignupComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CRMPublicModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: CRMPublicModule, declarations: [CrmSignupComponent,
             CrmNewsletterUnsubscribeComponent,
             CrmNewsletterConfirmationComponent], imports: [CrmPublicRoutingModule, ProductsShared, LayoutsModule, TranslocoModule, CommonModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: CRMPublicModule, providers: [
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CRMPublicModule, providers: [
             {
                 provide: TRANSLOCO_SCOPE,
                 useValue: {
@@ -6278,7 +6278,7 @@ class CRMPublicModule {
             }
         ], imports: [CrmPublicRoutingModule, ProductsShared, LayoutsModule, TranslocoModule, CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: CRMPublicModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CRMPublicModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CrmPublicRoutingModule, ProductsShared, LayoutsModule, TranslocoModule, CommonModule],