@posiwise/smart-crm 0.0.57 → 0.0.59

package/fesm2022/posiwise-smart-crm.mjs

@@ -694,6 +694,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             }] } });
 
 class SmartCrmCompanyInfoComponent extends AppBaseComponent {
+    canViewContactsTab() {
+        if (this.hasAccess || this.userId === this.data?.owner?.id) {
+            return true;
+        }
+        const subscriptionSlug = this.subscription?.slug;
+        const isCsm = this.isGranted('Pages.Role.CustomerSuccessManager') ||
+            (!!subscriptionSlug &&
+                this.isGranted(`Pages.Role.${subscriptionSlug}.CustomerSuccessManager`));
+        const isMarketing = this.isGranted('Pages.Role.MarketingManager') ||
+            (!!subscriptionSlug &&
+                this.isGranted(`Pages.Role.${subscriptionSlug}.MarketingManager`));
+        return isCsm || isMarketing;
+    }
+    lastSeenAtTextClass(value) {
+        if (!value) {
+            return '';
+        }
+        const m = moment(value);
+        if (!m.isValid()) {
+            return '';
+        }
+        // Ticket requirement:
+        // - if last_logged_in_at is < 1 month ago -> orange
+        // - if last_logged_in_at is < 3 months ago -> red
+        const now = moment();
+        if (m.isAfter(now.clone().subtract(1, 'month'))) {
+            return 'text-warning';
+        }
+        if (m.isAfter(now.clone().subtract(3, 'month'))) {
+            return 'text-danger';
+        }
+        return '';
+    }
     constructor(injector, crmService, subscriptionService, geoService, commonService, modalService, authService, cdr, logoCacheService, document) {
         super(injector);
         this.crmService = crmService;
@@ -742,6 +775,7 @@ class SmartCrmCompanyInfoComponent extends AppBaseComponent {
         this.organizationSizes$ = this.commonService.getOrganizationSizes();
         this.userStore().subscribe(res => {
             if (res) {
+                this.user = res;
                 this.userId = res.id;
                 this.actionControls.get('owner_id').setValue(res.id);
             }
@@ -1258,11 +1292,11 @@ class SmartCrmCompanyInfoComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", 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: "19.2.18", type: SmartCrmCompanyInfoComponent, isStandalone: false, 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 aria-label=\"Navigate to Target\"\n          (click)=\"back()\"\n          class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n        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=\"w-100 text-center mt-3\"\n  *ngIf=\"!isDataLoaded\">\n  <p-progressSpinner> </p-progressSpinner>\n  </div>\n  <div *ngIf=\"isDataLoaded\">\n    <div class=\"row\">\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 Logo\"\n                width=\"100\"\n                height=\"100\"\n                [src]=\"getAccountLogo(data?.company_url)\"\n                class=\"img-fluid company-logo\"\n                (error)=\"handleImageError($event, '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 name-block\">\n              About <span *ngIf=\"data?.id\">{{ data.name }}</span>\n            </h4>\n            <a href=\"javascript:void(0);\"\n              *ngIf=\"isFormEdit && (userId === data?.owner?.id || hasAccess)\"\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\" for=\"name\">{{ '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\" for=\"Location\">{{\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 for=\"country\">{{ 'Crm.AccountMessage.Country' | transloco\n                            }}<span class=\"text-danger required-icon\">*</span>\n              </label>\n              <p-dropdown\n              [options]=\"countries\"\n              formControlName=\"country\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['country'].errors }\"\n              [placeholder]=\"'Select Country'\"\n              optionValue=\"code\"\n              optionLabel=\"name\">\n            </p-dropdown>\n            </div>\n            <div class=\"mb-3 ui-fluid skills-modal\">\n              <label class=\"label mb-2\" for=\"Message\">{{ '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=\"displayName\"\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\" for=\"CompanyUrl\">{{\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\" for=\"AccountMessage\">{{ '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 for=\"organizationType\">{{ 'Organization.OrganizationType' | transloco }}</label>\n              <p-dropdown\n                [options]=\"types['organization_types']\"\n                formControlName=\"organization_type_id\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['organization_type_id'].errors }\"\n                [placeholder]=\"'Select Organization Type'\"\n                optionValue=\"id\"\n                optionLabel=\"name\">\n              </p-dropdown>\n            </div>\n            <div class=\"mb-3\"\n              *ngIf=\"organizationIndustries$ | async as industries\">\n              <label for=\"file\">{{ 'Organization.OrganizationIndustry' | transloco }}</label>\n              <p-dropdown\n                [options]=\"industries['organization_industries']\"\n                formControlName=\"organization_industry_id\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['organization_industry_id'].errors }\"\n                [placeholder]=\"'Select Industry'\"\n                optionValue=\"id\"\n                optionLabel=\"name\">\n              </p-dropdown>\n            </div>\n            <div class=\"mb-3\"\n              *ngIf=\"organizationSizes$ | async as sizes\">\n              <label for=\"size\">{{ 'Crm.AccountMessage.Size' | transloco }}</label>\n              <p-dropdown\n                [options]=\"sizes['organization_sizes']\"\n                formControlName=\"organization_size_id\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['organization_size_id'].errors }\"\n                [placeholder]=\"'Select Size'\"\n                optionValue=\"id\"\n                optionLabel=\"name\">\n              </p-dropdown>\n            </div>\n            <div class=\"mb-3\">\n              <label for=\"status\">{{ 'Crm.AccountMessage.Status' | transloco }}</label>\n              <p-dropdown\n                [options]=\"status\"\n                formControlName=\"status\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['status'].errors }\"\n                [placeholder]=\"'Select Status'\">\n              </p-dropdown>\n            </div>\n            <div class=\"mb-3\">\n              <label for=\"priority\">{{ 'Crm.AccountMessage.Priority' | transloco }}</label>\n              <p-dropdown\n                [options]=\"priority\"\n                formControlName=\"priority\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['priority'].errors }\"\n                [placeholder]=\"'Select Priority'\">\n              </p-dropdown>\n            </div>\n            <div class=\"mb-3\">\n              <label for=\"message\">{{ 'Crm.AccountMessage.Source' | transloco }}</label>\n              <p-dropdown\n                [options]=\"source\"\n                formControlName=\"crm_source_id\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['crm_source_id'].errors }\"\n                [placeholder]=\"'Select Source'\"\n                optionValue=\"id\"\n                optionLabel=\"name\">\n              </p-dropdown>\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                <button type=\"submit\"\n                [buttonBusy]=\"buttonBusy\"\n                class=\"btn btn-primary ms-3\"\n                (click)=\"updateAccountInfo()\">\n                {{ 'Button.Submit' | transloco }}\n              </button>\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=\"dd-mmm-yyyy\"\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                    (keydown.enter)=\"openModal(content)\"\n                    (click)=\"openModal(content)\">{{ 'Upload file' | transloco }}</a>\n                  <button type=\"submit\"\n                    [buttonBusy]=\"buttonBusy\"\n                    [disabled]=\"buttonDisable\"\n                    class=\"btn btn-primary mt-2 mb-2\">Submit Note</button>\n                </div>\n                <div *ngIf=\"buttonDisable\"\n                  class=\"no-actions pt-4\">\n                  <pw-no-data [withImage]=\"true\" [message]=\"\n                                        'Crm.AccountMessage.NoActionsInAccountInfoMessage' | transloco\n                                    \">\n                  </pw-no-data>\n                </div>\n              </form>\n              <div class=\"w-100 text-center mt-3\"\n                *ngIf=\"!isLoaded\">\n                <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n              </div>\n              <div *ngIf=\"!accountComments?.length && isLoaded\"\n                class=\"no-actions pt-2\">\n                <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoActionsMessage' | transloco\">\n                </pw-no-data>\n              </div>\n              <div *ngIf=\"accountComments?.length\">\n                <div id=\"timeline\"\n                  class=\"pt-3 clear-both timeline-center timeline-wrapper timeline-container\"\n                  infiniteScroll\n                  [infiniteScrollDistance]=\"2\"\n                  [infiniteScrollThrottle]=\"50\"\n                  [infiniteScrollContainer]=\"selector\"\n                  [fromRoot]=\"true\"\n                  (scrolled)=\"onScrollTimeline()\">\n                  <ul class=\"timeline\">\n                    <li class=\"timeline-line\"></li>\n                  </ul>\n                  <ul class=\"timeline\">\n                    <li class=\"timeline-line\"></li>\n                    <li class=\"timeline-item\"\n                      [ngClass]=\"{ 'mt-5': odd || last }\"\n                      *ngFor=\"\n                                            let item of accountComments;\n                                            index as i;\n                                            let odd = odd;\n                                            let even = even;\n                                            let last = last;\n                                            let first = first\n                                        \">\n                      <div class=\"timeline-badge\">\n                        <span class=\"bg-red bg-lighten-1\">\n                          <span class=\"timeline-year\">\n                            <span class=\"d-block date-year\">{{\n                                                        item.when | date: 'medium' | slice: 0:3\n                                                    }}</span>\n                            <span>{{ item.year }}</span></span>\n                        </span>\n                      </div>\n                      <div class=\"timeline-card shadow card pb-0 rounded border-grey border-lighten-2 position-static\">\n                        <div class=\"card-header py-4\">\n                          <div class=\"mb-0 clearfix\">\n                            <textarea type=\"text\"\n                              name=\"comment\"\n                              class=\"comment-field form-control p-0\"\n                              [(ngModel)]=\"item.comment\">{{ item.comment }}</textarea>\n                            <div class=\"auto-complete mb-3 ui-fluid skills-modal\">\n                              <p-autoComplete [(ngModel)]=\"item.crm_contact\"\n                                [suggestions]=\"filteredContactComment\"\n                                dataKey=\"id\"\n                                field=\"first_name\"\n                                dropdown=\" true \"\n                                (completeMethod)=\"\n                                                                searchContactInComment($event)\n                                                            \"\n                                (onSelect)=\"selectCommentContact($event)\"\n                                (onBlur)=\"OnContactBlur()\"\n                                styleClass=\" w-100 \"\n                                placeholder=\" Search contact \"\n                                [multiple]=\"false\"\n                                (onDropdownClick)=\"onDropdownClick()\">\n                              </p-autoComplete>\n                            </div>\n                            <p class=\"float-start mb-0\"\n                              *ngIf=\"\n                                                            !showFullComment || item.id !== commentId\n                                                        \">\n                              {{ item.comment | slice: 0:170\n                                                        }}<a *ngIf=\"item.comment.length > 170\"\n                                class=\"text-secondary\"\n                                (click)=\"\n                                                                showFullComment = true;\n                                                                commentId = item.id\n                                                            \">...show more\n                              </a>\n                            </p>\n                            <p class=\"float-start mb-0\"\n                              *ngIf=\"showFullComment && item.id === commentId\">\n                              {{ item.comment }}\n                              <a *ngIf=\"\n                                                                item.comment.length > 170 &&\n                                                                showFullComment\n                                                            \"\n                                (click)=\"showFullComment = false\"\n                                class=\"text-secondary\">...show less</a>\n                            </p>\n                            <button class=\"btn btn-md edit-btn float-end py-0\"\n                              (click)=\"showEditControls($event, item)\"\n                              *ngIf=\"userId === item.owner_id || hasAccess\">\n                              <i\n                                                            class=\"fa fa-edit edit-icon\"\n                                                            aria-hidden=\"true\"\n                                                        ></i>\n                            </button>\n                          </div>\n                          <div class=\"card-subtitle text-muted my-0 clearfix\">\n                            <div class=\"float-start\">\n                              <span *ngIf=\"!updating || actionId !== item.id\"\n                                class=\"font-small-3\">\n                                {{ item.when }}</span>\n                              <input *ngIf=\"updating && actionId === item.id\"\n                                placeholder=\"dd-mmm-yyyy\"\n                                value=\"{{ item.when }}\"\n                                ngbDatepicker\n                                #d=\"ngbDatepicker\"\n                                (focus)=\"d.toggle()\"\n                                (dateSelect)=\"onDateSelect($event, item)\" />\n                            </div>\n                            <button type=\" button\"\n                              class=\"btn btn-sm float-end when-btn py-0\"\n                              *ngIf=\"userId === item.owner_id || hasAccess\"\n                              (click)=\"showDatePickerUpdate(item.id)\">\n                              <i\n                                                            class=\"fa fa-edit edit-icon\"\n                                                            aria-hidden=\"true\"\n                                                        ></i>\n                            </button>\n                          </div>\n                          <p [class.text-danger]=\"!item.color\"\n                            *ngIf=\"!item.cancelled && !item.completed\"\n                            class=\"mb-0\">\n                            {{ item.due }}\n                          </p>\n                          <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                            aria-label=\"Set as completed\"\n                            class=\"me-3 ms-3\"\n                            href=\"javascript:void(0);\"\n                            (click)=\"\n                                                        setAsCompletedOrUncompleted(\n                                                            item.id,\n                                                            item,\n                                                            item.completed\n                                                        )\n                                                    \">\n                            <i\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                            aria-label=\"Set as cancelled\"\n                            href=\"javascript:void(0);\"\n                            (click)=\"setAsCancelled(item.id, item)\">\n                            <i\n                                                        class=\"fa fa-times delete-icon\"\n                                                        aria-hidden=\"true\"\n                                                    ></i>\n                          </a>\n                          <a *ngIf=\"\n                                                        item.completed &&\n                                                        (userId === item.owner_id || hasAccess)\n                                                    \"\n                            ngbTooltip=\"Set as UnCompleted\"\n                            aria-label=\"Set as UnCompleted\"\n                            href=\"javascript:void(0);\"\n                            (click)=\"\n                                                        setAsCompletedOrUncompleted(\n                                                            item.id,\n                                                            item,\n                                                            item.completed\n                                                        )\n                                                    \"\n                            class=\"ms-2\">\n                            <i\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\" *ngIf=\"hasAccess || userId === data?.owner?.id\">\n            <a ngbNavLink>Contacts</a>\n            <ng-template ngbNavContent>\n              <div class=\"row\">\n                <div class=\"col-12 mb-3\">\n                  <a class=\"btn btn-sm btn-outline-primary float-end\"\n                    data-cy=\"add-contact\"\n                    [routerLink]=\"[\n                                        '/' + subscription?.slug + routers.contactAdd,\n                                        accountId\n                                    ]\">\n                    <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n                    {{ 'Crm.ContactMessage.AddContact' | transloco }}\n                  </a>\n                </div>\n              </div>\n              <div class=\"primeng-datatable-container table-responsive\"\n                [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n                <p-table class=\"table\"\n                  #dt\n                  [value]=\"contacts\"\n                  [paginator]=\"totalRecords !== 0\"\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                                                ]\"> {{ (contact.first_name || '') + ' ' + (contact.last_name || '') | textTruncate: 20 }}</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 list-action\">\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                                                        (keydown.enter)=\"onDeleteContact(contact.id)\"\n                                                        (keydown.space)=\"onDeleteContact(contact.id)\"\n                                                        (click)=\"onDeleteContact(contact.id)\"\n                                                        aria-hidden=\"true\"\n                                                    ></i>\n                          </li>\n                        </ul>\n                      </td>\n                    </tr>\n                  </ng-template>\n                </p-table>\n                <div *ngIf=\"totalRecords === 0 && totalRecordsUnFiltered !== 0\">\n                  <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n        </pw-no-data>\n                </div>\n                <span class=\"total-records-count\" *ngIf=\"totalRecords !== 0\">{{ 'Label.Total' | transloco }}: {{ totalRecords }}</span>\n              </div>\n              <div *ngIf=\"totalRecordsUnFiltered === 0\">\n                <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.ContactsAdminMessage' | transloco\">\n                </pw-no-data>\n              </div>\n            </ng-template>\n          </li>\n          <li [ngbNavItem]=\"3\" *ngIf=\"hasAccess\">\n            <a ngbNavLink>Versioning</a>\n            <ng-template ngbNavContent>\n              <div *ngFor=\"let versioning of accountVersioning\">\n                <p>\n                  <strong>Event: </strong>{{ versioning.event }} |\n                  <strong>Author: </strong><a *ngIf=\"versioning?.author\"\n                    [routerLink]=\"['/members', versioning?.author?.slug]\">{{ versioning?.author | ifNameNullShowEmail }}</a>\n                  | <strong>Created at: </strong>{{ versioning.created_at | dateFormat: 'datetime' }}<br />\n                  <strong>Object: </strong>{{ versioning.object | json }}\n                </p>\n                <hr />\n              </div>\n              <div *ngIf=\"accountVersioning?.length === 0\">\n                <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoVersionsMessage' | transloco\">\n                </pw-no-data>\n              </div>\n            </ng-template>\n          </li>\n          <li [ngbNavItem]=\"4\">\n            <a ngbNavLink>Files</a>\n            <ng-template ngbNavContent>\n              <pw-smart-crm-company-files [accountId]=\"accountId\"></pw-smart-crm-company-files>\n            </ng-template>\n          </li>\n          <li [ngbNavItem]=\"5\" *ngIf=\"hasAccess\">\n            <a ngbNavLink>Invoices</a>\n            <ng-template ngbNavContent>\n              <pw-smart-crm-account-invoices [accountId]=\"accountId\"/>\n            </ng-template>\n          </li>\n        </ul>\n        <div [ngbNavOutlet]=\"nav\"></div>\n      </div>\n    </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_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.user-info .label{color:#777;font-size:14px;text-transform:capitalize}.user-info .user-value{border:0;border-bottom:1px solid rgb(119,119,119)}.user-info .user-value:focus{box-shadow:none}.user-info .user-value.is-invalid{border-color:#ff586b}.control-btns{display:none}::ng-deep .p-overlay{width:100%!important;min-width:100%!important;max-width:100%!important;left:0!important}::ng-deep .p-autocomplete-items li{white-space:nowrap!important;overflow:auto!important;text-overflow:ellipsis!important}::ng-deep .p-autocomplete-items li:hover{text-overflow:clip!important}.name-block{width:85%}.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 input,.isDisabled textarea,.isDisabled p-dropdown,.isDisabled select{pointer-events:none}.isDisabled select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:none!important}.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.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { 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: 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.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { 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: i7.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: i2$2.NgbNavContent, selector: "ng-template[ngbNavContent]" }, { kind: "directive", type: i2$2.NgbNav, selector: "[ngbNav]", inputs: ["activeId", "animation", "destroyOnHide", "orientation", "roles", "keyboard"], outputs: ["activeIdChange", "shown", "hidden", "navChange"], exportAs: ["ngbNav"] }, { kind: "directive", type: i2$2.NgbNavItem, selector: "[ngbNavItem]", inputs: ["destroyOnHide", "disabled", "domId", "ngbNavItem"], outputs: ["shown", "hidden"], exportAs: ["ngbNavItem"] }, { kind: "directive", type: i2$2.NgbNavItemRole, selector: "[ngbNavItem]:not(ng-container)" }, { kind: "directive", type: i2$2.NgbNavLink, selector: "a[ngbNavLink]" }, { kind: "directive", type: i2$2.NgbNavLinkBase, selector: "[ngbNavLink]" }, { kind: "component", type: i2$2.NgbNavOutlet, selector: "[ngbNavOutlet]", inputs: ["paneRole", "ngbNavOutlet"] }, { kind: "component", type: i8.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i9.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i8.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i8.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i6.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i10.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i11.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", 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", "typeahead", "variant", "fluid"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: i11$1.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "component", type: i11$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i12.NgFileDropDirective, selector: "[ngFileDrop]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "directive", type: i12.NgFileSelectDirective, selector: "[ngFileSelect]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "directive", type: i18.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: 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: SmartCrmCompanyFilesComponent, selector: "pw-smart-crm-company-files", inputs: ["accountId", "contactId", "opportunityId"] }, { kind: "component", type: SmartCrmCompanyAccountInvoiceComponent, selector: "pw-smart-crm-account-invoices", inputs: ["accountId"] }, { 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: i15.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i15.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i15.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }, { kind: "pipe", type: i11$2.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: SmartCrmCompanyInfoComponent, isStandalone: false, 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 aria-label=\"Navigate to Target\"\n          (click)=\"back()\"\n          class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n        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=\"w-100 text-center mt-3\"\n  *ngIf=\"!isDataLoaded\">\n  <p-progressSpinner> </p-progressSpinner>\n  </div>\n  <div *ngIf=\"isDataLoaded\">\n    <div class=\"row\">\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 Logo\"\n                width=\"100\"\n                height=\"100\"\n                [src]=\"getAccountLogo(data?.company_url)\"\n                class=\"img-fluid company-logo\"\n                (error)=\"handleImageError($event, '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 name-block\">\n              About <span *ngIf=\"data?.id\">{{ data.name }}</span>\n            </h4>\n            <a href=\"javascript:void(0);\"\n              *ngIf=\"isFormEdit && (userId === data?.owner?.id || hasAccess)\"\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\" for=\"name\">{{ '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\" for=\"Location\">{{\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 for=\"country\">{{ 'Crm.AccountMessage.Country' | transloco\n                            }}<span class=\"text-danger required-icon\">*</span>\n              </label>\n              <p-dropdown\n              [options]=\"countries\"\n              formControlName=\"country\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['country'].errors }\"\n              [placeholder]=\"'Select Country'\"\n              optionValue=\"code\"\n              optionLabel=\"name\">\n            </p-dropdown>\n            </div>\n            <div class=\"mb-3 ui-fluid skills-modal\">\n              <label class=\"label mb-2\" for=\"Message\">{{ '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=\"displayName\"\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\" for=\"CompanyUrl\">{{\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\" for=\"AccountMessage\">{{ '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 for=\"organizationType\">{{ 'Organization.OrganizationType' | transloco }}</label>\n              <p-dropdown\n                [options]=\"types['organization_types']\"\n                formControlName=\"organization_type_id\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['organization_type_id'].errors }\"\n                [placeholder]=\"'Select Organization Type'\"\n                optionValue=\"id\"\n                optionLabel=\"name\">\n              </p-dropdown>\n            </div>\n            <div class=\"mb-3\"\n              *ngIf=\"organizationIndustries$ | async as industries\">\n              <label for=\"file\">{{ 'Organization.OrganizationIndustry' | transloco }}</label>\n              <p-dropdown\n                [options]=\"industries['organization_industries']\"\n                formControlName=\"organization_industry_id\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['organization_industry_id'].errors }\"\n                [placeholder]=\"'Select Industry'\"\n                optionValue=\"id\"\n                optionLabel=\"name\">\n              </p-dropdown>\n            </div>\n            <div class=\"mb-3\"\n              *ngIf=\"organizationSizes$ | async as sizes\">\n              <label for=\"size\">{{ 'Crm.AccountMessage.Size' | transloco }}</label>\n              <p-dropdown\n                [options]=\"sizes['organization_sizes']\"\n                formControlName=\"organization_size_id\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['organization_size_id'].errors }\"\n                [placeholder]=\"'Select Size'\"\n                optionValue=\"id\"\n                optionLabel=\"name\">\n              </p-dropdown>\n            </div>\n            <div class=\"mb-3\">\n              <label for=\"status\">{{ 'Crm.AccountMessage.Status' | transloco }}</label>\n              <p-dropdown\n                [options]=\"status\"\n                formControlName=\"status\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['status'].errors }\"\n                [placeholder]=\"'Select Status'\">\n              </p-dropdown>\n            </div>\n            <div class=\"mb-3\">\n              <label for=\"priority\">{{ 'Crm.AccountMessage.Priority' | transloco }}</label>\n              <p-dropdown\n                [options]=\"priority\"\n                formControlName=\"priority\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['priority'].errors }\"\n                [placeholder]=\"'Select Priority'\">\n              </p-dropdown>\n            </div>\n            <div class=\"mb-3\">\n              <label for=\"message\">{{ 'Crm.AccountMessage.Source' | transloco }}</label>\n              <p-dropdown\n                [options]=\"source\"\n                formControlName=\"crm_source_id\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['crm_source_id'].errors }\"\n                [placeholder]=\"'Select Source'\"\n                optionValue=\"id\"\n                optionLabel=\"name\">\n              </p-dropdown>\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                <button type=\"submit\"\n                [buttonBusy]=\"buttonBusy\"\n                class=\"btn btn-primary ms-3\"\n                (click)=\"updateAccountInfo()\">\n                {{ 'Button.Submit' | transloco }}\n              </button>\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=\"dd-mmm-yyyy\"\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                    (keydown.enter)=\"openModal(content)\"\n                    (click)=\"openModal(content)\">{{ 'Upload file' | transloco }}</a>\n                  <button type=\"submit\"\n                    [buttonBusy]=\"buttonBusy\"\n                    [disabled]=\"buttonDisable\"\n                    class=\"btn btn-primary mt-2 mb-2\">Submit Note</button>\n                </div>\n                <div *ngIf=\"buttonDisable\"\n                  class=\"no-actions pt-4\">\n                  <pw-no-data [withImage]=\"true\" [message]=\"\n                                        'Crm.AccountMessage.NoActionsInAccountInfoMessage' | transloco\n                                    \">\n                  </pw-no-data>\n                </div>\n              </form>\n              <div class=\"w-100 text-center mt-3\"\n                *ngIf=\"!isLoaded\">\n                <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n              </div>\n              <div *ngIf=\"!accountComments?.length && isLoaded\"\n                class=\"no-actions pt-2\">\n                <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoActionsMessage' | transloco\">\n                </pw-no-data>\n              </div>\n              <div *ngIf=\"accountComments?.length\">\n                <div id=\"timeline\"\n                  class=\"pt-3 clear-both timeline-center timeline-wrapper timeline-container\"\n                  infiniteScroll\n                  [infiniteScrollDistance]=\"2\"\n                  [infiniteScrollThrottle]=\"50\"\n                  [infiniteScrollContainer]=\"selector\"\n                  [fromRoot]=\"true\"\n                  (scrolled)=\"onScrollTimeline()\">\n                  <ul class=\"timeline\">\n                    <li class=\"timeline-line\"></li>\n                  </ul>\n                  <ul class=\"timeline\">\n                    <li class=\"timeline-line\"></li>\n                    <li class=\"timeline-item\"\n                      [ngClass]=\"{ 'mt-5': odd || last }\"\n                      *ngFor=\"\n                                            let item of accountComments;\n                                            index as i;\n                                            let odd = odd;\n                                            let even = even;\n                                            let last = last;\n                                            let first = first\n                                        \">\n                      <div class=\"timeline-badge\">\n                        <span class=\"bg-red bg-lighten-1\">\n                          <span class=\"timeline-year\">\n                            <span class=\"d-block date-year\">{{\n                                                        item.when | date: 'medium' | slice: 0:3\n                                                    }}</span>\n                            <span>{{ item.year }}</span></span>\n                        </span>\n                      </div>\n                      <div class=\"timeline-card shadow card pb-0 rounded border-grey border-lighten-2 position-static\">\n                        <div class=\"card-header py-4\">\n                          <div class=\"mb-0 clearfix\">\n                            <textarea type=\"text\"\n                              name=\"comment\"\n                              class=\"comment-field form-control p-0\"\n                              [(ngModel)]=\"item.comment\">{{ item.comment }}</textarea>\n                            <div class=\"auto-complete mb-3 ui-fluid skills-modal\">\n                              <p-autoComplete [(ngModel)]=\"item.crm_contact\"\n                                [suggestions]=\"filteredContactComment\"\n                                dataKey=\"id\"\n                                field=\"first_name\"\n                                dropdown=\" true \"\n                                (completeMethod)=\"\n                                                                searchContactInComment($event)\n                                                            \"\n                                (onSelect)=\"selectCommentContact($event)\"\n                                (onBlur)=\"OnContactBlur()\"\n                                styleClass=\" w-100 \"\n                                placeholder=\" Search contact \"\n                                [multiple]=\"false\"\n                                (onDropdownClick)=\"onDropdownClick()\">\n                              </p-autoComplete>\n                            </div>\n                            <p class=\"float-start mb-0\"\n                              *ngIf=\"\n                                                            !showFullComment || item.id !== commentId\n                                                        \">\n                              {{ item.comment | slice: 0:170\n                                                        }}<a *ngIf=\"item.comment.length > 170\"\n                                class=\"text-secondary\"\n                                (click)=\"\n                                                                showFullComment = true;\n                                                                commentId = item.id\n                                                            \">...show more\n                              </a>\n                            </p>\n                            <p class=\"float-start mb-0\"\n                              *ngIf=\"showFullComment && item.id === commentId\">\n                              {{ item.comment }}\n                              <a *ngIf=\"\n                                                                item.comment.length > 170 &&\n                                                                showFullComment\n                                                            \"\n                                (click)=\"showFullComment = false\"\n                                class=\"text-secondary\">...show less</a>\n                            </p>\n                            <button class=\"btn btn-md edit-btn float-end py-0\"\n                              (click)=\"showEditControls($event, item)\"\n                              *ngIf=\"userId === item.owner_id || hasAccess\">\n                              <i\n                                                            class=\"fa fa-edit edit-icon\"\n                                                            aria-hidden=\"true\"\n                                                        ></i>\n                            </button>\n                          </div>\n                          <div class=\"card-subtitle text-muted my-0 clearfix\">\n                            <div class=\"float-start\">\n                              <span *ngIf=\"!updating || actionId !== item.id\"\n                                class=\"font-small-3\">\n                                {{ item.when }}</span>\n                              <input *ngIf=\"updating && actionId === item.id\"\n                                placeholder=\"dd-mmm-yyyy\"\n                                value=\"{{ item.when }}\"\n                                ngbDatepicker\n                                #d=\"ngbDatepicker\"\n                                (focus)=\"d.toggle()\"\n                                (dateSelect)=\"onDateSelect($event, item)\" />\n                            </div>\n                            <button type=\" button\"\n                              class=\"btn btn-sm float-end when-btn py-0\"\n                              *ngIf=\"userId === item.owner_id || hasAccess\"\n                              (click)=\"showDatePickerUpdate(item.id)\">\n                              <i\n                                                            class=\"fa fa-edit edit-icon\"\n                                                            aria-hidden=\"true\"\n                                                        ></i>\n                            </button>\n                          </div>\n                          <p [class.text-danger]=\"!item.color\"\n                            *ngIf=\"!item.cancelled && !item.completed\"\n                            class=\"mb-0\">\n                            {{ item.due }}\n                          </p>\n                          <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                            aria-label=\"Set as completed\"\n                            class=\"me-3 ms-3\"\n                            href=\"javascript:void(0);\"\n                            (click)=\"\n                                                        setAsCompletedOrUncompleted(\n                                                            item.id,\n                                                            item,\n                                                            item.completed\n                                                        )\n                                                    \">\n                            <i\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                            aria-label=\"Set as cancelled\"\n                            href=\"javascript:void(0);\"\n                            (click)=\"setAsCancelled(item.id, item)\">\n                            <i\n                                                        class=\"fa fa-times delete-icon\"\n                                                        aria-hidden=\"true\"\n                                                    ></i>\n                          </a>\n                          <a *ngIf=\"\n                                                        item.completed &&\n                                                        (userId === item.owner_id || hasAccess)\n                                                    \"\n                            ngbTooltip=\"Set as UnCompleted\"\n                            aria-label=\"Set as UnCompleted\"\n                            href=\"javascript:void(0);\"\n                            (click)=\"\n                                                        setAsCompletedOrUncompleted(\n                                                            item.id,\n                                                            item,\n                                                            item.completed\n                                                        )\n                                                    \"\n                            class=\"ms-2\">\n                            <i\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\" *ngIf=\"canViewContactsTab()\">\n            <a ngbNavLink>Contacts</a>\n            <ng-template ngbNavContent>\n              <div class=\"row\">\n                <div class=\"col-12 mb-3\">\n                  <a class=\"btn btn-sm btn-outline-primary float-end\"\n                    data-cy=\"add-contact\"\n                    [routerLink]=\"[\n                                        '/' + subscription?.slug + routers.contactAdd,\n                                        accountId\n                                    ]\">\n                    <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n                    {{ 'Crm.ContactMessage.AddContact' | transloco }}\n                  </a>\n                </div>\n              </div>\n              <div class=\"primeng-datatable-container table-responsive\"\n                [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n                <p-table class=\"table\"\n                  #dt\n                  [value]=\"contacts\"\n                  [paginator]=\"totalRecords !== 0\"\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\"\n                        pSortableColumn=\"last_logged_in_at\">\n                        Last Seen At\n                        <p-sortIcon field=\"last_logged_in_at\"></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                                                ]\"> {{ (contact.first_name || '') + ' ' + (contact.last_name || '') | textTruncate: 20 }}</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=\"LastSeenAt\">\n                        <ng-container *ngIf=\"contact?.last_logged_in_at\">\n                          <span [ngClass]=\"lastSeenAtTextClass(contact?.last_logged_in_at)\">\n                            {{ contact?.last_logged_in_at | dateFormat }}\n                          </span>\n                        </ng-container>\n                      </td>\n                      <td data-head=\"Action\">\n                        <ul class=\"list-unstyled list-inline list-action\">\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                                                        (keydown.enter)=\"onDeleteContact(contact.id)\"\n                                                        (keydown.space)=\"onDeleteContact(contact.id)\"\n                                                        (click)=\"onDeleteContact(contact.id)\"\n                                                        aria-hidden=\"true\"\n                                                    ></i>\n                          </li>\n                        </ul>\n                      </td>\n                    </tr>\n                  </ng-template>\n                </p-table>\n                <div *ngIf=\"totalRecords === 0 && totalRecordsUnFiltered !== 0\">\n                  <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n        </pw-no-data>\n                </div>\n                <span class=\"total-records-count\" *ngIf=\"totalRecords !== 0\">{{ 'Label.Total' | transloco }}: {{ totalRecords }}</span>\n              </div>\n              <div *ngIf=\"totalRecordsUnFiltered === 0\">\n                <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.ContactsAdminMessage' | transloco\">\n                </pw-no-data>\n              </div>\n            </ng-template>\n          </li>\n          <li [ngbNavItem]=\"3\" *ngIf=\"hasAccess\">\n            <a ngbNavLink>Versioning</a>\n            <ng-template ngbNavContent>\n              <div *ngFor=\"let versioning of accountVersioning\">\n                <p>\n                  <strong>Event: </strong>{{ versioning.event }} |\n                  <strong>Author: </strong><a *ngIf=\"versioning?.author\"\n                    [routerLink]=\"['/members', versioning?.author?.slug]\">{{ versioning?.author | ifNameNullShowEmail }}</a>\n                  | <strong>Created at: </strong>{{ versioning.created_at | dateFormat: 'datetime' }}<br />\n                  <strong>Object: </strong>{{ versioning.object | json }}\n                </p>\n                <hr />\n              </div>\n              <div *ngIf=\"accountVersioning?.length === 0\">\n                <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoVersionsMessage' | transloco\">\n                </pw-no-data>\n              </div>\n            </ng-template>\n          </li>\n          <li [ngbNavItem]=\"4\">\n            <a ngbNavLink>Files</a>\n            <ng-template ngbNavContent>\n              <pw-smart-crm-company-files [accountId]=\"accountId\"></pw-smart-crm-company-files>\n            </ng-template>\n          </li>\n          <li [ngbNavItem]=\"5\" *ngIf=\"hasAccess\">\n            <a ngbNavLink>Invoices</a>\n            <ng-template ngbNavContent>\n              <pw-smart-crm-account-invoices [accountId]=\"accountId\"/>\n            </ng-template>\n          </li>\n        </ul>\n        <div [ngbNavOutlet]=\"nav\"></div>\n      </div>\n    </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_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.user-info .label{color:#777;font-size:14px;text-transform:capitalize}.user-info .user-value{border:0;border-bottom:1px solid rgb(119,119,119)}.user-info .user-value:focus{box-shadow:none}.user-info .user-value.is-invalid{border-color:#ff586b}.control-btns{display:none}::ng-deep .p-overlay{width:100%!important;min-width:100%!important;max-width:100%!important;left:0!important}::ng-deep .p-autocomplete-items li{white-space:nowrap!important;overflow:auto!important;text-overflow:ellipsis!important}::ng-deep .p-autocomplete-items li:hover{text-overflow:clip!important}.name-block{width:85%}.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 input,.isDisabled textarea,.isDisabled p-dropdown,.isDisabled select{pointer-events:none}.isDisabled select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:none!important}.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.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { 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: 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.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { 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: i7.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: i2$2.NgbNavContent, selector: "ng-template[ngbNavContent]" }, { kind: "directive", type: i2$2.NgbNav, selector: "[ngbNav]", inputs: ["activeId", "animation", "destroyOnHide", "orientation", "roles", "keyboard"], outputs: ["activeIdChange", "shown", "hidden", "navChange"], exportAs: ["ngbNav"] }, { kind: "directive", type: i2$2.NgbNavItem, selector: "[ngbNavItem]", inputs: ["destroyOnHide", "disabled", "domId", "ngbNavItem"], outputs: ["shown", "hidden"], exportAs: ["ngbNavItem"] }, { kind: "directive", type: i2$2.NgbNavItemRole, selector: "[ngbNavItem]:not(ng-container)" }, { kind: "directive", type: i2$2.NgbNavLink, selector: "a[ngbNavLink]" }, { kind: "directive", type: i2$2.NgbNavLinkBase, selector: "[ngbNavLink]" }, { kind: "component", type: i2$2.NgbNavOutlet, selector: "[ngbNavOutlet]", inputs: ["paneRole", "ngbNavOutlet"] }, { kind: "component", type: i8.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i9.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i8.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i8.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i6.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i10.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i11.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", 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", "typeahead", "variant", "fluid"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: i11$1.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "component", type: i11$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i12.NgFileDropDirective, selector: "[ngFileDrop]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "directive", type: i12.NgFileSelectDirective, selector: "[ngFileSelect]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "directive", type: i18.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: 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: SmartCrmCompanyFilesComponent, selector: "pw-smart-crm-company-files", inputs: ["accountId", "contactId", "opportunityId"] }, { kind: "component", type: SmartCrmCompanyAccountInvoiceComponent, selector: "pw-smart-crm-account-invoices", inputs: ["accountId"] }, { 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: i15.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i15.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i15.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }, { kind: "pipe", type: i11$2.TranslocoPipe, name: "transloco" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SmartCrmCompanyInfoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-smart-crm-company-info', standalone: false, template: "<div class=\"row\">\n  <div class=\"col-12 mb-0\">\n    <div class=\"me-auto mb-0\">\n      <h2 class=\"mb-0\">\n        <a aria-label=\"Navigate to Target\"\n          (click)=\"back()\"\n          class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n        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=\"w-100 text-center mt-3\"\n  *ngIf=\"!isDataLoaded\">\n  <p-progressSpinner> </p-progressSpinner>\n  </div>\n  <div *ngIf=\"isDataLoaded\">\n    <div class=\"row\">\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 Logo\"\n                width=\"100\"\n                height=\"100\"\n                [src]=\"getAccountLogo(data?.company_url)\"\n                class=\"img-fluid company-logo\"\n                (error)=\"handleImageError($event, '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 name-block\">\n              About <span *ngIf=\"data?.id\">{{ data.name }}</span>\n            </h4>\n            <a href=\"javascript:void(0);\"\n              *ngIf=\"isFormEdit && (userId === data?.owner?.id || hasAccess)\"\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\" for=\"name\">{{ '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\" for=\"Location\">{{\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 for=\"country\">{{ 'Crm.AccountMessage.Country' | transloco\n                            }}<span class=\"text-danger required-icon\">*</span>\n              </label>\n              <p-dropdown\n              [options]=\"countries\"\n              formControlName=\"country\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['country'].errors }\"\n              [placeholder]=\"'Select Country'\"\n              optionValue=\"code\"\n              optionLabel=\"name\">\n            </p-dropdown>\n            </div>\n            <div class=\"mb-3 ui-fluid skills-modal\">\n              <label class=\"label mb-2\" for=\"Message\">{{ '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=\"displayName\"\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\" for=\"CompanyUrl\">{{\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\" for=\"AccountMessage\">{{ '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 for=\"organizationType\">{{ 'Organization.OrganizationType' | transloco }}</label>\n              <p-dropdown\n                [options]=\"types['organization_types']\"\n                formControlName=\"organization_type_id\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['organization_type_id'].errors }\"\n                [placeholder]=\"'Select Organization Type'\"\n                optionValue=\"id\"\n                optionLabel=\"name\">\n              </p-dropdown>\n            </div>\n            <div class=\"mb-3\"\n              *ngIf=\"organizationIndustries$ | async as industries\">\n              <label for=\"file\">{{ 'Organization.OrganizationIndustry' | transloco }}</label>\n              <p-dropdown\n                [options]=\"industries['organization_industries']\"\n                formControlName=\"organization_industry_id\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['organization_industry_id'].errors }\"\n                [placeholder]=\"'Select Industry'\"\n                optionValue=\"id\"\n                optionLabel=\"name\">\n              </p-dropdown>\n            </div>\n            <div class=\"mb-3\"\n              *ngIf=\"organizationSizes$ | async as sizes\">\n              <label for=\"size\">{{ 'Crm.AccountMessage.Size' | transloco }}</label>\n              <p-dropdown\n                [options]=\"sizes['organization_sizes']\"\n                formControlName=\"organization_size_id\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['organization_size_id'].errors }\"\n                [placeholder]=\"'Select Size'\"\n                optionValue=\"id\"\n                optionLabel=\"name\">\n              </p-dropdown>\n            </div>\n            <div class=\"mb-3\">\n              <label for=\"status\">{{ 'Crm.AccountMessage.Status' | transloco }}</label>\n              <p-dropdown\n                [options]=\"status\"\n                formControlName=\"status\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['status'].errors }\"\n                [placeholder]=\"'Select Status'\">\n              </p-dropdown>\n            </div>\n            <div class=\"mb-3\">\n              <label for=\"priority\">{{ 'Crm.AccountMessage.Priority' | transloco }}</label>\n              <p-dropdown\n                [options]=\"priority\"\n                formControlName=\"priority\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['priority'].errors }\"\n                [placeholder]=\"'Select Priority'\">\n              </p-dropdown>\n            </div>\n            <div class=\"mb-3\">\n              <label for=\"message\">{{ 'Crm.AccountMessage.Source' | transloco }}</label>\n              <p-dropdown\n                [options]=\"source\"\n                formControlName=\"crm_source_id\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['crm_source_id'].errors }\"\n                [placeholder]=\"'Select Source'\"\n                optionValue=\"id\"\n                optionLabel=\"name\">\n              </p-dropdown>\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                <button type=\"submit\"\n                [buttonBusy]=\"buttonBusy\"\n                class=\"btn btn-primary ms-3\"\n                (click)=\"updateAccountInfo()\">\n                {{ 'Button.Submit' | transloco }}\n              </button>\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=\"dd-mmm-yyyy\"\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                    (keydown.enter)=\"openModal(content)\"\n                    (click)=\"openModal(content)\">{{ 'Upload file' | transloco }}</a>\n                  <button type=\"submit\"\n                    [buttonBusy]=\"buttonBusy\"\n                    [disabled]=\"buttonDisable\"\n                    class=\"btn btn-primary mt-2 mb-2\">Submit Note</button>\n                </div>\n                <div *ngIf=\"buttonDisable\"\n                  class=\"no-actions pt-4\">\n                  <pw-no-data [withImage]=\"true\" [message]=\"\n                                        'Crm.AccountMessage.NoActionsInAccountInfoMessage' | transloco\n                                    \">\n                  </pw-no-data>\n                </div>\n              </form>\n              <div class=\"w-100 text-center mt-3\"\n                *ngIf=\"!isLoaded\">\n                <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n              </div>\n              <div *ngIf=\"!accountComments?.length && isLoaded\"\n                class=\"no-actions pt-2\">\n                <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoActionsMessage' | transloco\">\n                </pw-no-data>\n              </div>\n              <div *ngIf=\"accountComments?.length\">\n                <div id=\"timeline\"\n                  class=\"pt-3 clear-both timeline-center timeline-wrapper timeline-container\"\n                  infiniteScroll\n                  [infiniteScrollDistance]=\"2\"\n                  [infiniteScrollThrottle]=\"50\"\n                  [infiniteScrollContainer]=\"selector\"\n                  [fromRoot]=\"true\"\n                  (scrolled)=\"onScrollTimeline()\">\n                  <ul class=\"timeline\">\n                    <li class=\"timeline-line\"></li>\n                  </ul>\n                  <ul class=\"timeline\">\n                    <li class=\"timeline-line\"></li>\n                    <li class=\"timeline-item\"\n                      [ngClass]=\"{ 'mt-5': odd || last }\"\n                      *ngFor=\"\n                                            let item of accountComments;\n                                            index as i;\n                                            let odd = odd;\n                                            let even = even;\n                                            let last = last;\n                                            let first = first\n                                        \">\n                      <div class=\"timeline-badge\">\n                        <span class=\"bg-red bg-lighten-1\">\n                          <span class=\"timeline-year\">\n                            <span class=\"d-block date-year\">{{\n                                                        item.when | date: 'medium' | slice: 0:3\n                                                    }}</span>\n                            <span>{{ item.year }}</span></span>\n                        </span>\n                      </div>\n                      <div class=\"timeline-card shadow card pb-0 rounded border-grey border-lighten-2 position-static\">\n                        <div class=\"card-header py-4\">\n                          <div class=\"mb-0 clearfix\">\n                            <textarea type=\"text\"\n                              name=\"comment\"\n                              class=\"comment-field form-control p-0\"\n                              [(ngModel)]=\"item.comment\">{{ item.comment }}</textarea>\n                            <div class=\"auto-complete mb-3 ui-fluid skills-modal\">\n                              <p-autoComplete [(ngModel)]=\"item.crm_contact\"\n                                [suggestions]=\"filteredContactComment\"\n                                dataKey=\"id\"\n                                field=\"first_name\"\n                                dropdown=\" true \"\n                                (completeMethod)=\"\n                                                                searchContactInComment($event)\n                                                            \"\n                                (onSelect)=\"selectCommentContact($event)\"\n                                (onBlur)=\"OnContactBlur()\"\n                                styleClass=\" w-100 \"\n                                placeholder=\" Search contact \"\n                                [multiple]=\"false\"\n                                (onDropdownClick)=\"onDropdownClick()\">\n                              </p-autoComplete>\n                            </div>\n                            <p class=\"float-start mb-0\"\n                              *ngIf=\"\n                                                            !showFullComment || item.id !== commentId\n                                                        \">\n                              {{ item.comment | slice: 0:170\n                                                        }}<a *ngIf=\"item.comment.length > 170\"\n                                class=\"text-secondary\"\n                                (click)=\"\n                                                                showFullComment = true;\n                                                                commentId = item.id\n                                                            \">...show more\n                              </a>\n                            </p>\n                            <p class=\"float-start mb-0\"\n                              *ngIf=\"showFullComment && item.id === commentId\">\n                              {{ item.comment }}\n                              <a *ngIf=\"\n                                                                item.comment.length > 170 &&\n                                                                showFullComment\n                                                            \"\n                                (click)=\"showFullComment = false\"\n                                class=\"text-secondary\">...show less</a>\n                            </p>\n                            <button class=\"btn btn-md edit-btn float-end py-0\"\n                              (click)=\"showEditControls($event, item)\"\n                              *ngIf=\"userId === item.owner_id || hasAccess\">\n                              <i\n                                                            class=\"fa fa-edit edit-icon\"\n                                                            aria-hidden=\"true\"\n                                                        ></i>\n                            </button>\n                          </div>\n                          <div class=\"card-subtitle text-muted my-0 clearfix\">\n                            <div class=\"float-start\">\n                              <span *ngIf=\"!updating || actionId !== item.id\"\n                                class=\"font-small-3\">\n                                {{ item.when }}</span>\n                              <input *ngIf=\"updating && actionId === item.id\"\n                                placeholder=\"dd-mmm-yyyy\"\n                                value=\"{{ item.when }}\"\n                                ngbDatepicker\n                                #d=\"ngbDatepicker\"\n                                (focus)=\"d.toggle()\"\n                                (dateSelect)=\"onDateSelect($event, item)\" />\n                            </div>\n                            <button type=\" button\"\n                              class=\"btn btn-sm float-end when-btn py-0\"\n                              *ngIf=\"userId === item.owner_id || hasAccess\"\n                              (click)=\"showDatePickerUpdate(item.id)\">\n                              <i\n                                                            class=\"fa fa-edit edit-icon\"\n                                                            aria-hidden=\"true\"\n                                                        ></i>\n                            </button>\n                          </div>\n                          <p [class.text-danger]=\"!item.color\"\n                            *ngIf=\"!item.cancelled && !item.completed\"\n                            class=\"mb-0\">\n                            {{ item.due }}\n                          </p>\n                          <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                            aria-label=\"Set as completed\"\n                            class=\"me-3 ms-3\"\n                            href=\"javascript:void(0);\"\n                            (click)=\"\n                                                        setAsCompletedOrUncompleted(\n                                                            item.id,\n                                                            item,\n                                                            item.completed\n                                                        )\n                                                    \">\n                            <i\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                            aria-label=\"Set as cancelled\"\n                            href=\"javascript:void(0);\"\n                            (click)=\"setAsCancelled(item.id, item)\">\n                            <i\n                                                        class=\"fa fa-times delete-icon\"\n                                                        aria-hidden=\"true\"\n                                                    ></i>\n                          </a>\n                          <a *ngIf=\"\n                                                        item.completed &&\n                                                        (userId === item.owner_id || hasAccess)\n                                                    \"\n                            ngbTooltip=\"Set as UnCompleted\"\n                            aria-label=\"Set as UnCompleted\"\n                            href=\"javascript:void(0);\"\n                            (click)=\"\n                                                        setAsCompletedOrUncompleted(\n                                                            item.id,\n                                                            item,\n                                                            item.completed\n                                                        )\n                                                    \"\n                            class=\"ms-2\">\n                            <i\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\" *ngIf=\"hasAccess || userId === data?.owner?.id\">\n            <a ngbNavLink>Contacts</a>\n            <ng-template ngbNavContent>\n              <div class=\"row\">\n                <div class=\"col-12 mb-3\">\n                  <a class=\"btn btn-sm btn-outline-primary float-end\"\n                    data-cy=\"add-contact\"\n                    [routerLink]=\"[\n                                        '/' + subscription?.slug + routers.contactAdd,\n                                        accountId\n                                    ]\">\n                    <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n                    {{ 'Crm.ContactMessage.AddContact' | transloco }}\n                  </a>\n                </div>\n              </div>\n              <div class=\"primeng-datatable-container table-responsive\"\n                [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n                <p-table class=\"table\"\n                  #dt\n                  [value]=\"contacts\"\n                  [paginator]=\"totalRecords !== 0\"\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                                                ]\"> {{ (contact.first_name || '') + ' ' + (contact.last_name || '') | textTruncate: 20 }}</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 list-action\">\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                                                        (keydown.enter)=\"onDeleteContact(contact.id)\"\n                                                        (keydown.space)=\"onDeleteContact(contact.id)\"\n                                                        (click)=\"onDeleteContact(contact.id)\"\n                                                        aria-hidden=\"true\"\n                                                    ></i>\n                          </li>\n                        </ul>\n                      </td>\n                    </tr>\n                  </ng-template>\n                </p-table>\n                <div *ngIf=\"totalRecords === 0 && totalRecordsUnFiltered !== 0\">\n                  <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n        </pw-no-data>\n                </div>\n                <span class=\"total-records-count\" *ngIf=\"totalRecords !== 0\">{{ 'Label.Total' | transloco }}: {{ totalRecords }}</span>\n              </div>\n              <div *ngIf=\"totalRecordsUnFiltered === 0\">\n                <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.ContactsAdminMessage' | transloco\">\n                </pw-no-data>\n              </div>\n            </ng-template>\n          </li>\n          <li [ngbNavItem]=\"3\" *ngIf=\"hasAccess\">\n            <a ngbNavLink>Versioning</a>\n            <ng-template ngbNavContent>\n              <div *ngFor=\"let versioning of accountVersioning\">\n                <p>\n                  <strong>Event: </strong>{{ versioning.event }} |\n                  <strong>Author: </strong><a *ngIf=\"versioning?.author\"\n                    [routerLink]=\"['/members', versioning?.author?.slug]\">{{ versioning?.author | ifNameNullShowEmail }}</a>\n                  | <strong>Created at: </strong>{{ versioning.created_at | dateFormat: 'datetime' }}<br />\n                  <strong>Object: </strong>{{ versioning.object | json }}\n                </p>\n                <hr />\n              </div>\n              <div *ngIf=\"accountVersioning?.length === 0\">\n                <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoVersionsMessage' | transloco\">\n                </pw-no-data>\n              </div>\n            </ng-template>\n          </li>\n          <li [ngbNavItem]=\"4\">\n            <a ngbNavLink>Files</a>\n            <ng-template ngbNavContent>\n              <pw-smart-crm-company-files [accountId]=\"accountId\"></pw-smart-crm-company-files>\n            </ng-template>\n          </li>\n          <li [ngbNavItem]=\"5\" *ngIf=\"hasAccess\">\n            <a ngbNavLink>Invoices</a>\n            <ng-template ngbNavContent>\n              <pw-smart-crm-account-invoices [accountId]=\"accountId\"/>\n            </ng-template>\n          </li>\n        </ul>\n        <div [ngbNavOutlet]=\"nav\"></div>\n      </div>\n    </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_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.user-info .label{color:#777;font-size:14px;text-transform:capitalize}.user-info .user-value{border:0;border-bottom:1px solid rgb(119,119,119)}.user-info .user-value:focus{box-shadow:none}.user-info .user-value.is-invalid{border-color:#ff586b}.control-btns{display:none}::ng-deep .p-overlay{width:100%!important;min-width:100%!important;max-width:100%!important;left:0!important}::ng-deep .p-autocomplete-items li{white-space:nowrap!important;overflow:auto!important;text-overflow:ellipsis!important}::ng-deep .p-autocomplete-items li:hover{text-overflow:clip!important}.name-block{width:85%}.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 input,.isDisabled textarea,.isDisabled p-dropdown,.isDisabled select{pointer-events:none}.isDisabled select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:none!important}.timeline-card.card{min-height:auto}@media (max-width: 768px){.completed-toggle{padding-top:10px}}.when-btn:focus{border:0;box-shadow:none}.no-actions{clear:both}.timeline-container{height:700px;overflow-y:scroll}.action-btn.active{color:#fff!important;background-color:var(--first)}.form-action-buttons{margin-bottom:14px;margin-top:15px}\n"] }]
+            args: [{ selector: 'pw-smart-crm-company-info', standalone: false, template: "<div class=\"row\">\n  <div class=\"col-12 mb-0\">\n    <div class=\"me-auto mb-0\">\n      <h2 class=\"mb-0\">\n        <a aria-label=\"Navigate to Target\"\n          (click)=\"back()\"\n          class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n        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=\"w-100 text-center mt-3\"\n  *ngIf=\"!isDataLoaded\">\n  <p-progressSpinner> </p-progressSpinner>\n  </div>\n  <div *ngIf=\"isDataLoaded\">\n    <div class=\"row\">\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 Logo\"\n                width=\"100\"\n                height=\"100\"\n                [src]=\"getAccountLogo(data?.company_url)\"\n                class=\"img-fluid company-logo\"\n                (error)=\"handleImageError($event, '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 name-block\">\n              About <span *ngIf=\"data?.id\">{{ data.name }}</span>\n            </h4>\n            <a href=\"javascript:void(0);\"\n              *ngIf=\"isFormEdit && (userId === data?.owner?.id || hasAccess)\"\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\" for=\"name\">{{ '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\" for=\"Location\">{{\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 for=\"country\">{{ 'Crm.AccountMessage.Country' | transloco\n                            }}<span class=\"text-danger required-icon\">*</span>\n              </label>\n              <p-dropdown\n              [options]=\"countries\"\n              formControlName=\"country\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['country'].errors }\"\n              [placeholder]=\"'Select Country'\"\n              optionValue=\"code\"\n              optionLabel=\"name\">\n            </p-dropdown>\n            </div>\n            <div class=\"mb-3 ui-fluid skills-modal\">\n              <label class=\"label mb-2\" for=\"Message\">{{ '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=\"displayName\"\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\" for=\"CompanyUrl\">{{\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\" for=\"AccountMessage\">{{ '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 for=\"organizationType\">{{ 'Organization.OrganizationType' | transloco }}</label>\n              <p-dropdown\n                [options]=\"types['organization_types']\"\n                formControlName=\"organization_type_id\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['organization_type_id'].errors }\"\n                [placeholder]=\"'Select Organization Type'\"\n                optionValue=\"id\"\n                optionLabel=\"name\">\n              </p-dropdown>\n            </div>\n            <div class=\"mb-3\"\n              *ngIf=\"organizationIndustries$ | async as industries\">\n              <label for=\"file\">{{ 'Organization.OrganizationIndustry' | transloco }}</label>\n              <p-dropdown\n                [options]=\"industries['organization_industries']\"\n                formControlName=\"organization_industry_id\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['organization_industry_id'].errors }\"\n                [placeholder]=\"'Select Industry'\"\n                optionValue=\"id\"\n                optionLabel=\"name\">\n              </p-dropdown>\n            </div>\n            <div class=\"mb-3\"\n              *ngIf=\"organizationSizes$ | async as sizes\">\n              <label for=\"size\">{{ 'Crm.AccountMessage.Size' | transloco }}</label>\n              <p-dropdown\n                [options]=\"sizes['organization_sizes']\"\n                formControlName=\"organization_size_id\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['organization_size_id'].errors }\"\n                [placeholder]=\"'Select Size'\"\n                optionValue=\"id\"\n                optionLabel=\"name\">\n              </p-dropdown>\n            </div>\n            <div class=\"mb-3\">\n              <label for=\"status\">{{ 'Crm.AccountMessage.Status' | transloco }}</label>\n              <p-dropdown\n                [options]=\"status\"\n                formControlName=\"status\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['status'].errors }\"\n                [placeholder]=\"'Select Status'\">\n              </p-dropdown>\n            </div>\n            <div class=\"mb-3\">\n              <label for=\"priority\">{{ 'Crm.AccountMessage.Priority' | transloco }}</label>\n              <p-dropdown\n                [options]=\"priority\"\n                formControlName=\"priority\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['priority'].errors }\"\n                [placeholder]=\"'Select Priority'\">\n              </p-dropdown>\n            </div>\n            <div class=\"mb-3\">\n              <label for=\"message\">{{ 'Crm.AccountMessage.Source' | transloco }}</label>\n              <p-dropdown\n                [options]=\"source\"\n                formControlName=\"crm_source_id\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['crm_source_id'].errors }\"\n                [placeholder]=\"'Select Source'\"\n                optionValue=\"id\"\n                optionLabel=\"name\">\n              </p-dropdown>\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                <button type=\"submit\"\n                [buttonBusy]=\"buttonBusy\"\n                class=\"btn btn-primary ms-3\"\n                (click)=\"updateAccountInfo()\">\n                {{ 'Button.Submit' | transloco }}\n              </button>\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=\"dd-mmm-yyyy\"\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                    (keydown.enter)=\"openModal(content)\"\n                    (click)=\"openModal(content)\">{{ 'Upload file' | transloco }}</a>\n                  <button type=\"submit\"\n                    [buttonBusy]=\"buttonBusy\"\n                    [disabled]=\"buttonDisable\"\n                    class=\"btn btn-primary mt-2 mb-2\">Submit Note</button>\n                </div>\n                <div *ngIf=\"buttonDisable\"\n                  class=\"no-actions pt-4\">\n                  <pw-no-data [withImage]=\"true\" [message]=\"\n                                        'Crm.AccountMessage.NoActionsInAccountInfoMessage' | transloco\n                                    \">\n                  </pw-no-data>\n                </div>\n              </form>\n              <div class=\"w-100 text-center mt-3\"\n                *ngIf=\"!isLoaded\">\n                <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n              </div>\n              <div *ngIf=\"!accountComments?.length && isLoaded\"\n                class=\"no-actions pt-2\">\n                <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoActionsMessage' | transloco\">\n                </pw-no-data>\n              </div>\n              <div *ngIf=\"accountComments?.length\">\n                <div id=\"timeline\"\n                  class=\"pt-3 clear-both timeline-center timeline-wrapper timeline-container\"\n                  infiniteScroll\n                  [infiniteScrollDistance]=\"2\"\n                  [infiniteScrollThrottle]=\"50\"\n                  [infiniteScrollContainer]=\"selector\"\n                  [fromRoot]=\"true\"\n                  (scrolled)=\"onScrollTimeline()\">\n                  <ul class=\"timeline\">\n                    <li class=\"timeline-line\"></li>\n                  </ul>\n                  <ul class=\"timeline\">\n                    <li class=\"timeline-line\"></li>\n                    <li class=\"timeline-item\"\n                      [ngClass]=\"{ 'mt-5': odd || last }\"\n                      *ngFor=\"\n                                            let item of accountComments;\n                                            index as i;\n                                            let odd = odd;\n                                            let even = even;\n                                            let last = last;\n                                            let first = first\n                                        \">\n                      <div class=\"timeline-badge\">\n                        <span class=\"bg-red bg-lighten-1\">\n                          <span class=\"timeline-year\">\n                            <span class=\"d-block date-year\">{{\n                                                        item.when | date: 'medium' | slice: 0:3\n                                                    }}</span>\n                            <span>{{ item.year }}</span></span>\n                        </span>\n                      </div>\n                      <div class=\"timeline-card shadow card pb-0 rounded border-grey border-lighten-2 position-static\">\n                        <div class=\"card-header py-4\">\n                          <div class=\"mb-0 clearfix\">\n                            <textarea type=\"text\"\n                              name=\"comment\"\n                              class=\"comment-field form-control p-0\"\n                              [(ngModel)]=\"item.comment\">{{ item.comment }}</textarea>\n                            <div class=\"auto-complete mb-3 ui-fluid skills-modal\">\n                              <p-autoComplete [(ngModel)]=\"item.crm_contact\"\n                                [suggestions]=\"filteredContactComment\"\n                                dataKey=\"id\"\n                                field=\"first_name\"\n                                dropdown=\" true \"\n                                (completeMethod)=\"\n                                                                searchContactInComment($event)\n                                                            \"\n                                (onSelect)=\"selectCommentContact($event)\"\n                                (onBlur)=\"OnContactBlur()\"\n                                styleClass=\" w-100 \"\n                                placeholder=\" Search contact \"\n                                [multiple]=\"false\"\n                                (onDropdownClick)=\"onDropdownClick()\">\n                              </p-autoComplete>\n                            </div>\n                            <p class=\"float-start mb-0\"\n                              *ngIf=\"\n                                                            !showFullComment || item.id !== commentId\n                                                        \">\n                              {{ item.comment | slice: 0:170\n                                                        }}<a *ngIf=\"item.comment.length > 170\"\n                                class=\"text-secondary\"\n                                (click)=\"\n                                                                showFullComment = true;\n                                                                commentId = item.id\n                                                            \">...show more\n                              </a>\n                            </p>\n                            <p class=\"float-start mb-0\"\n                              *ngIf=\"showFullComment && item.id === commentId\">\n                              {{ item.comment }}\n                              <a *ngIf=\"\n                                                                item.comment.length > 170 &&\n                                                                showFullComment\n                                                            \"\n                                (click)=\"showFullComment = false\"\n                                class=\"text-secondary\">...show less</a>\n                            </p>\n                            <button class=\"btn btn-md edit-btn float-end py-0\"\n                              (click)=\"showEditControls($event, item)\"\n                              *ngIf=\"userId === item.owner_id || hasAccess\">\n                              <i\n                                                            class=\"fa fa-edit edit-icon\"\n                                                            aria-hidden=\"true\"\n                                                        ></i>\n                            </button>\n                          </div>\n                          <div class=\"card-subtitle text-muted my-0 clearfix\">\n                            <div class=\"float-start\">\n                              <span *ngIf=\"!updating || actionId !== item.id\"\n                                class=\"font-small-3\">\n                                {{ item.when }}</span>\n                              <input *ngIf=\"updating && actionId === item.id\"\n                                placeholder=\"dd-mmm-yyyy\"\n                                value=\"{{ item.when }}\"\n                                ngbDatepicker\n                                #d=\"ngbDatepicker\"\n                                (focus)=\"d.toggle()\"\n                                (dateSelect)=\"onDateSelect($event, item)\" />\n                            </div>\n                            <button type=\" button\"\n                              class=\"btn btn-sm float-end when-btn py-0\"\n                              *ngIf=\"userId === item.owner_id || hasAccess\"\n                              (click)=\"showDatePickerUpdate(item.id)\">\n                              <i\n                                                            class=\"fa fa-edit edit-icon\"\n                                                            aria-hidden=\"true\"\n                                                        ></i>\n                            </button>\n                          </div>\n                          <p [class.text-danger]=\"!item.color\"\n                            *ngIf=\"!item.cancelled && !item.completed\"\n                            class=\"mb-0\">\n                            {{ item.due }}\n                          </p>\n                          <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                            aria-label=\"Set as completed\"\n                            class=\"me-3 ms-3\"\n                            href=\"javascript:void(0);\"\n                            (click)=\"\n                                                        setAsCompletedOrUncompleted(\n                                                            item.id,\n                                                            item,\n                                                            item.completed\n                                                        )\n                                                    \">\n                            <i\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                            aria-label=\"Set as cancelled\"\n                            href=\"javascript:void(0);\"\n                            (click)=\"setAsCancelled(item.id, item)\">\n                            <i\n                                                        class=\"fa fa-times delete-icon\"\n                                                        aria-hidden=\"true\"\n                                                    ></i>\n                          </a>\n                          <a *ngIf=\"\n                                                        item.completed &&\n                                                        (userId === item.owner_id || hasAccess)\n                                                    \"\n                            ngbTooltip=\"Set as UnCompleted\"\n                            aria-label=\"Set as UnCompleted\"\n                            href=\"javascript:void(0);\"\n                            (click)=\"\n                                                        setAsCompletedOrUncompleted(\n                                                            item.id,\n                                                            item,\n                                                            item.completed\n                                                        )\n                                                    \"\n                            class=\"ms-2\">\n                            <i\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\" *ngIf=\"canViewContactsTab()\">\n            <a ngbNavLink>Contacts</a>\n            <ng-template ngbNavContent>\n              <div class=\"row\">\n                <div class=\"col-12 mb-3\">\n                  <a class=\"btn btn-sm btn-outline-primary float-end\"\n                    data-cy=\"add-contact\"\n                    [routerLink]=\"[\n                                        '/' + subscription?.slug + routers.contactAdd,\n                                        accountId\n                                    ]\">\n                    <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n                    {{ 'Crm.ContactMessage.AddContact' | transloco }}\n                  </a>\n                </div>\n              </div>\n              <div class=\"primeng-datatable-container table-responsive\"\n                [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n                <p-table class=\"table\"\n                  #dt\n                  [value]=\"contacts\"\n                  [paginator]=\"totalRecords !== 0\"\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\"\n                        pSortableColumn=\"last_logged_in_at\">\n                        Last Seen At\n                        <p-sortIcon field=\"last_logged_in_at\"></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                                                ]\"> {{ (contact.first_name || '') + ' ' + (contact.last_name || '') | textTruncate: 20 }}</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=\"LastSeenAt\">\n                        <ng-container *ngIf=\"contact?.last_logged_in_at\">\n                          <span [ngClass]=\"lastSeenAtTextClass(contact?.last_logged_in_at)\">\n                            {{ contact?.last_logged_in_at | dateFormat }}\n                          </span>\n                        </ng-container>\n                      </td>\n                      <td data-head=\"Action\">\n                        <ul class=\"list-unstyled list-inline list-action\">\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                                                        (keydown.enter)=\"onDeleteContact(contact.id)\"\n                                                        (keydown.space)=\"onDeleteContact(contact.id)\"\n                                                        (click)=\"onDeleteContact(contact.id)\"\n                                                        aria-hidden=\"true\"\n                                                    ></i>\n                          </li>\n                        </ul>\n                      </td>\n                    </tr>\n                  </ng-template>\n                </p-table>\n                <div *ngIf=\"totalRecords === 0 && totalRecordsUnFiltered !== 0\">\n                  <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n        </pw-no-data>\n                </div>\n                <span class=\"total-records-count\" *ngIf=\"totalRecords !== 0\">{{ 'Label.Total' | transloco }}: {{ totalRecords }}</span>\n              </div>\n              <div *ngIf=\"totalRecordsUnFiltered === 0\">\n                <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.ContactsAdminMessage' | transloco\">\n                </pw-no-data>\n              </div>\n            </ng-template>\n          </li>\n          <li [ngbNavItem]=\"3\" *ngIf=\"hasAccess\">\n            <a ngbNavLink>Versioning</a>\n            <ng-template ngbNavContent>\n              <div *ngFor=\"let versioning of accountVersioning\">\n                <p>\n                  <strong>Event: </strong>{{ versioning.event }} |\n                  <strong>Author: </strong><a *ngIf=\"versioning?.author\"\n                    [routerLink]=\"['/members', versioning?.author?.slug]\">{{ versioning?.author | ifNameNullShowEmail }}</a>\n                  | <strong>Created at: </strong>{{ versioning.created_at | dateFormat: 'datetime' }}<br />\n                  <strong>Object: </strong>{{ versioning.object | json }}\n                </p>\n                <hr />\n              </div>\n              <div *ngIf=\"accountVersioning?.length === 0\">\n                <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoVersionsMessage' | transloco\">\n                </pw-no-data>\n              </div>\n            </ng-template>\n          </li>\n          <li [ngbNavItem]=\"4\">\n            <a ngbNavLink>Files</a>\n            <ng-template ngbNavContent>\n              <pw-smart-crm-company-files [accountId]=\"accountId\"></pw-smart-crm-company-files>\n            </ng-template>\n          </li>\n          <li [ngbNavItem]=\"5\" *ngIf=\"hasAccess\">\n            <a ngbNavLink>Invoices</a>\n            <ng-template ngbNavContent>\n              <pw-smart-crm-account-invoices [accountId]=\"accountId\"/>\n            </ng-template>\n          </li>\n        </ul>\n        <div [ngbNavOutlet]=\"nav\"></div>\n      </div>\n    </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_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.user-info .label{color:#777;font-size:14px;text-transform:capitalize}.user-info .user-value{border:0;border-bottom:1px solid rgb(119,119,119)}.user-info .user-value:focus{box-shadow:none}.user-info .user-value.is-invalid{border-color:#ff586b}.control-btns{display:none}::ng-deep .p-overlay{width:100%!important;min-width:100%!important;max-width:100%!important;left:0!important}::ng-deep .p-autocomplete-items li{white-space:nowrap!important;overflow:auto!important;text-overflow:ellipsis!important}::ng-deep .p-autocomplete-items li:hover{text-overflow:clip!important}.name-block{width:85%}.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 input,.isDisabled textarea,.isDisabled p-dropdown,.isDisabled select{pointer-events:none}.isDisabled select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:none!important}.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]
@@ -3567,7 +3601,8 @@ class SmartCrmAnalysisComponent extends AppBaseComponent {
         this.userStore().subscribe(user => {
             if (user) {
                 this.userId = user.id;
-                if (this.permissionService.isGranted('Pages.Beta')) {
+                if (this.permissionService.evaluatePermissions(CRM_PERMISSIONS.Insight) ||
+                    this.permissionService.isSuperAdmin()) {
                     this.dateRanges = HelperService.initializeDateRanges();
                     this.selectedDateRange = '';
                     this.getChartData();
@@ -3906,7 +3941,7 @@ class SmartCrmAccountInsightComponent extends AppBaseComponent {
             if (user) {
                 this.user = user;
                 this.userId = user.id;
-                if (this.permissionService.isGranted('Pages.Beta') ||
+                if (this.permissionService.evaluatePermissions(CRM_PERMISSIONS.Insight) ||
                     this.permissionService.isSuperAdmin()) {
                     this.getSignedUpLastNinetyDays();
                     this.getActiveOpportunities();