@posiwise/smart-crm 0.0.1 → 0.0.2

package/fesm2022/posiwise-smart-crm.mjs

@@ -196,6 +196,7 @@ class AppSmartCrm {
             previous_stage_id: [''],
             visible: [false],
             is_default: [false],
+            color_code: '',
             crm_opportunity_category_ids: ['', Validators.required]
         });
     }
@@ -646,13 +647,6 @@ class SmartCrmCompanyInfoComponent extends AppBaseComponent {
         this.organizationIndustries$ = this.commonService.getOrganizationIndustries();
         this.organizationTypes$ = this.commonService.getOrganizationTypes();
         this.organizationSizes$ = this.commonService.getOrganizationSizes();
-        this.route.params.subscribe(data => {
-            this.accountId = Number(data['id']);
-            if (this.accountId) {
-                this.getAccountDetails();
-                this.getContactVersion();
-            }
-        });
         this.userStore().subscribe(res => {
             if (res) {
                 this.userId = res.id;
@@ -666,6 +660,13 @@ class SmartCrmCompanyInfoComponent extends AppBaseComponent {
                 this.getActions();
                 this.accountDefaultValues(this.subscription.id);
             }
+            this.route.params.subscribe(data => {
+                this.accountId = Number(data['id']);
+                if (this.accountId) {
+                    this.getAccountDetails();
+                    this.getContactVersion();
+                }
+            });
         });
         this.getAllComments();
     }
@@ -1141,11 +1142,11 @@ class SmartCrmCompanyInfoComponent extends AppBaseComponent {
         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\">\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 [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 [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\">\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 message=\"No Result\"> </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 [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 [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)}\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"] }, { 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: i13.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i13.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i13.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
+    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 [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 [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 message=\"No Result\"> </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 [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 [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"] }, { 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: i13.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i13.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i13.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: [{
             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\">\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 [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 [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\">\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 message=\"No Result\"> </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 [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 [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)}\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 [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 [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 message=\"No Result\"> </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 [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 [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]
@@ -1386,6 +1387,30 @@ class SmartCrmCompaniesComponent extends AppBaseComponent {
             this.accountGeography = response;
         });
     }
+    getUserAccountInfo(account) {
+        if (account.signed_up_at !== null) {
+            if (account.unsubscribed_at === null) {
+                return { message: 'Paid Customer', iconClass: 'fas fa-dollar-sign money-icon' };
+            }
+            else {
+                return {
+                    message: 'Old Customer',
+                    iconClass: 'fas fa-exclamation-triangle text-danger'
+                };
+            }
+        }
+        else if (account.child_subscription_id !== null) {
+            return {
+                message: 'Account with existing subscription',
+                iconClass: 'fas fa-link account-link-icon'
+            };
+        }
+        return { message: null, iconClass: null };
+    }
+    formatMRR(mrrInCents) {
+        const mrrInDollars = (mrrInCents / 100).toFixed(2);
+        return '$' + mrrInDollars.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+    }
     /** Function to call account activities */
     getAccountActivities() {
         this.crmService
@@ -1432,11 +1457,11 @@ class SmartCrmCompaniesComponent extends AppBaseComponent {
         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]=\"true\" [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=\"tel\"> {{ 'Crm.AccountMessage.Tel' | transloco }} <p-sortIcon field=\"tel\">\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\">\n          <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, account.id]\">\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>{{ account.name }}</span>\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 }}</td>\n        <td data-head=\"Tel\">{{ account.tel }}</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 message=\"No Result\"> </pw-no-data>\n  </div>\n  <span class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [message]=\"'Crm.AccountMessage.NoAccountMessage' | 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]=\"true\" [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\">{{ 'Label.Total' | transloco }}: {{ accountInsight.length }}</span>\n      </div>\n      <div *ngIf=\"accountInsight?.length === 0\">\n        <pw-no-data [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 [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]=\"true\" [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\">{{ 'Label.Total' | transloco }}: {{ accountActivities.length }}</span>\n      </div>\n      <div *ngIf=\"accountActivities?.length === 0\">\n        <pw-no-data [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]=\"true\" [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\">{{ 'Label.Total' | transloco }}: {{ accountLastInvoices.length }}</span>\n      </div>\n      <div *ngIf=\"accountLastInvoices?.length === 0\">\n        <pw-no-data [message]=\"'Crm.AccountMessage.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)}.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}\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.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"] }, { kind: "pipe", type: i13.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
+    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]=\"true\" [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 message=\"No Result\"> </pw-no-data>\n  </div>\n  <span class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [message]=\"'Crm.AccountMessage.NoAccountMessage' | 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]=\"true\" [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\">{{ 'Label.Total' | transloco }}: {{ accountInsight.length }}</span>\n      </div>\n      <div *ngIf=\"accountInsight?.length === 0\">\n        <pw-no-data [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 [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]=\"true\" [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\">{{ 'Label.Total' | transloco }}: {{ accountActivities.length }}</span>\n      </div>\n      <div *ngIf=\"accountActivities?.length === 0\">\n        <pw-no-data [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]=\"true\" [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\">{{ 'Label.Total' | transloco }}: {{ accountLastInvoices.length }}</span>\n      </div>\n      <div *ngIf=\"accountLastInvoices?.length === 0\">\n        <pw-no-data [message]=\"'Crm.AccountMessage.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)}.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"] }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "pipe", type: i13.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: [{
             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]=\"true\" [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=\"tel\"> {{ 'Crm.AccountMessage.Tel' | transloco }} <p-sortIcon field=\"tel\">\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\">\n          <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, account.id]\">\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>{{ account.name }}</span>\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 }}</td>\n        <td data-head=\"Tel\">{{ account.tel }}</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 message=\"No Result\"> </pw-no-data>\n  </div>\n  <span class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [message]=\"'Crm.AccountMessage.NoAccountMessage' | 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]=\"true\" [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\">{{ 'Label.Total' | transloco }}: {{ accountInsight.length }}</span>\n      </div>\n      <div *ngIf=\"accountInsight?.length === 0\">\n        <pw-no-data [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 [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]=\"true\" [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\">{{ 'Label.Total' | transloco }}: {{ accountActivities.length }}</span>\n      </div>\n      <div *ngIf=\"accountActivities?.length === 0\">\n        <pw-no-data [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]=\"true\" [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\">{{ 'Label.Total' | transloco }}: {{ accountLastInvoices.length }}</span>\n      </div>\n      <div *ngIf=\"accountLastInvoices?.length === 0\">\n        <pw-no-data [message]=\"'Crm.AccountMessage.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)}.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}\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]=\"true\" [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 message=\"No Result\"> </pw-no-data>\n  </div>\n  <span class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [message]=\"'Crm.AccountMessage.NoAccountMessage' | 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]=\"true\" [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\">{{ 'Label.Total' | transloco }}: {{ accountInsight.length }}</span>\n      </div>\n      <div *ngIf=\"accountInsight?.length === 0\">\n        <pw-no-data [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 [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]=\"true\" [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\">{{ 'Label.Total' | transloco }}: {{ accountActivities.length }}</span>\n      </div>\n      <div *ngIf=\"accountActivities?.length === 0\">\n        <pw-no-data [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]=\"true\" [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\">{{ 'Label.Total' | transloco }}: {{ accountLastInvoices.length }}</span>\n      </div>\n      <div *ngIf=\"accountLastInvoices?.length === 0\">\n        <pw-no-data [message]=\"'Crm.AccountMessage.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)}.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 {
@@ -2199,11 +2224,11 @@ class SmartCrmStageDetailsComponent extends AppBaseComponent {
         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 [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", 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.ɵ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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", 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 [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" }]
+            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 }] });
 
 class SmartCrmWidgetsDetailsComponent extends AppBaseComponent {
@@ -2276,11 +2301,11 @@ class SmartCrmWidgetsDetailsComponent extends AppBaseComponent {
         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\">\n        <div class=\"col-12 col-sm-4\"\n          *ngIf=\"allWidgets$ | async as widgets\">\n          <pw-input-container [label]=\"'Crm.Widgets.CrmWidget' | transloco\"\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          <pw-input-container [label]=\"'Crm.Widgets.Position' | transloco\"\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 mb-2\">{{\n                            'Crm.Widgets.Visible' | transloco\n                        }}</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", 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.ɵ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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", 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\">\n        <div class=\"col-12 col-sm-4\"\n          *ngIf=\"allWidgets$ | async as widgets\">\n          <pw-input-container [label]=\"'Crm.Widgets.CrmWidget' | transloco\"\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          <pw-input-container [label]=\"'Crm.Widgets.Position' | transloco\"\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 mb-2\">{{\n                            'Crm.Widgets.Visible' | transloco\n                        }}</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" }]
+            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 }] });
 
 class SmartCrmContactDetailsComponent extends AppBaseComponent {
@@ -2831,11 +2856,11 @@ class SmartCrmContactInfoComponent extends AppBaseComponent {
         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\">\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 [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 [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 [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}\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"] }, { 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: i13.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i13.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
+    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 [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 [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 [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"] }, { 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: i13.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i13.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: [{
             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\">\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 [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 [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 [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}\n"] }]
+            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 [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 [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 [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: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -3295,11 +3320,11 @@ class SmartCrmLeadsDetailsComponent extends AppBaseComponent {
         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.CrmLeads.Lead' | 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.EmailVerified.ComingSoon'| 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\n            class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.CrmLeads.Source.ComingSoon' | 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.Potential.ComingSoon' | 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.Labels.ComingSoon' | 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>", 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.ɵ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.CrmLeads.Lead' | 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\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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", 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.CrmLeads.Lead' | 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.EmailVerified.ComingSoon'| 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\n            class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.CrmLeads.Source.ComingSoon' | 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.Potential.ComingSoon' | 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.Labels.ComingSoon' | 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>" }]
+            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.CrmLeads.Lead' | 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\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 }] });
 
 class SmartCrmLeadsComponent extends AppBaseComponent {
@@ -3469,11 +3494,11 @@ class SmartCrmMarketingUsersListComponent extends AppBaseComponent {
         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]=\"true\"\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          pSortableColumn=\"sent_at\">\n          {{ 'Crm.MarketingInsight.SentAt' | transloco }}\n          <p-sortIcon field=\"sent_at\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"last_opened\">\n          {{ 'Crm.MarketingInsight.LastOpened' | transloco }}\n          <p-sortIcon field=\"last_opened\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"open_count\">\n          {{ 'Crm.MarketingInsight.OpenCount' | transloco }}\n          <p-sortIcon field=\"open_count\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"clicked_at\">\n          {{ 'Crm.MarketingInsight.ClickedAt' | transloco }}\n          <p-sortIcon field=\"clicked_at\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"clicked_count\">\n          {{ 'Crm.MarketingInsight.ClickedCount' | transloco }}\n          <p-sortIcon field=\"clicked_count\"></p-sortIcon>\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 message=\"No Result\"> </pw-no-data>\n  </div>\n  <span class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [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"] }, { kind: "pipe", type: i13.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i13.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
+    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]=\"true\"\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 message=\"No Result\"> </pw-no-data>\n  </div>\n  <span class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [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"] }, { kind: "pipe", type: i13.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i13.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: [{
             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]=\"true\"\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          pSortableColumn=\"sent_at\">\n          {{ 'Crm.MarketingInsight.SentAt' | transloco }}\n          <p-sortIcon field=\"sent_at\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"last_opened\">\n          {{ 'Crm.MarketingInsight.LastOpened' | transloco }}\n          <p-sortIcon field=\"last_opened\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"open_count\">\n          {{ 'Crm.MarketingInsight.OpenCount' | transloco }}\n          <p-sortIcon field=\"open_count\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"clicked_at\">\n          {{ 'Crm.MarketingInsight.ClickedAt' | transloco }}\n          <p-sortIcon field=\"clicked_at\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"clicked_count\">\n          {{ 'Crm.MarketingInsight.ClickedCount' | transloco }}\n          <p-sortIcon field=\"clicked_count\"></p-sortIcon>\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 message=\"No Result\"> </pw-no-data>\n  </div>\n  <span class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [message]=\"'Crm.MarketingInsight.NoUserListMessage' | transloco\"> </pw-no-data>\n</div>\n" }]
+            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]=\"true\"\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 message=\"No Result\"> </pw-no-data>\n  </div>\n  <span class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [message]=\"'Crm.MarketingInsight.NoUserListMessage' | transloco\"> </pw-no-data>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1.CrmService }, { type: i0.ChangeDetectorRef }] });
 
 class SmartCrmCommunicationsDetailsComponent extends AppBaseComponent {
@@ -3504,7 +3529,6 @@ class SmartCrmCommunicationsDetailsComponent extends AppBaseComponent {
         });
         this.getUserSubscriptionId().subscribe(response => {
             this.subscriptionId = response;
-            console.log(this.subscriptionId);
             this.getDefaultValues(this.subscriptionId);
             if (this.subscriptionId) {
                 this.getAllCrmProducts();
@@ -4774,7 +4798,7 @@ class SmartCrmOpportunitiesInfoComponent extends AppBaseComponent {
         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\">\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 [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 [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 [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}\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"] }, { 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: i13.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
+    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 [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 [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 [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"] }, { 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: i13.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
 }
 __decorate([
     ValidateForm('actionControls'),
@@ -4784,7 +4808,7 @@ __decorate([
 ], SmartCrmOpportunitiesInfoComponent.prototype, "onCommentSave", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", 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\">\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 [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 [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 [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}\n"] }]
+            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 [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 [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 [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: [{
                     type: Inject,
                     args: [DOCUMENT]