@posiwise/smart-crm 0.0.77 → 0.0.78
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1308,11 +1308,11 @@ class SmartCrmCompanyInfoComponent extends AppBaseComponent {
|
|
|
1308
1308
|
super.ngOnDestroy();
|
|
1309
1309
|
}
|
|
1310
1310
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SmartCrmCompanyInfoComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }, { token: i2.SubscriptionService }, { token: i2.GeoService }, { token: i2.CommonService }, { token: i2$2.NgbModal }, { token: i2.AuthService }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1311
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", 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 @if (!isDataLoaded) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner> </p-progressSpinner>\n </div>\n }\n @if (isDataLoaded) {\n <div>\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 <pw-clearbit-icon [src]=\"data?.company_url\"\n [name]=\"data?.name\"\n altText=\"Company Logo\"\n [size]=\"100\"\n iconClass=\"mb-3\"></pw-clearbit-icon>\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 @if (data?.id) {\n <span>{{ data.name }}</span>\n }\n </h4>\n @if (isFormEdit && (userId === data?.owner?.id || hasAccess)) {\n <a href=\"#\"\n class=\"btn btn-sm btn-outline-primary float-end\"\n (click)=\"$event.preventDefault(); isFormEdit = !isFormEdit; this.getAllSubscriptionMembers()\">{{ 'Button.Edit' | transloco }}</a>\n }\n </div>\n @if (isFormEdit) {\n <div class=\"about-readview\">\n @if (data?.name || data?.company_url || data?.location || f['country'].value || data?.tel) {\n <h3 class=\"readview-section\">{{ 'Crm.AccountMessage.Section.Identity' | transloco }}</h3>\n <div class=\"row\">\n @if (data?.name) {\n <div class=\"col-12 readview-field\">\n <span class=\"label\">{{ 'Crm.AccountMessage.Name' | transloco }}</span>\n <p class=\"readview-value\">{{ data.name }}</p>\n </div>\n }\n @if (data?.company_url) {\n <div class=\"col-12 readview-field\">\n <span class=\"label\">{{ 'Crm.AccountMessage.CompanyUrl' | transloco }}</span>\n <a class=\"readview-value\" [href]=\"data.company_url\" target=\"blank\">{{ data.company_url }}</a>\n </div>\n }\n @if (data?.location) {\n <div class=\"col-12 readview-field\">\n <span class=\"label\">{{ 'Crm.AccountMessage.Location' | transloco }}</span>\n <p class=\"readview-value\">{{ data.location }}</p>\n </div>\n }\n @if (f['country'].value) {\n <div class=\"col-6 readview-field\">\n <span class=\"label\">{{ 'Crm.AccountMessage.Country' | transloco }}</span>\n @if (countries$ | async; as countries) {\n <p class=\"readview-value\">{{ labelFor(countries, f['country'].value, 'code', 'name') || f['country'].value }}</p>\n }\n </div>\n }\n @if (data?.tel) {\n <div class=\"col-6 readview-field\">\n <span class=\"label\">{{ 'Crm.AccountMessage.Tel' | transloco }}</span>\n <p class=\"readview-value\">{{ data.tel }}</p>\n </div>\n }\n </div>\n }\n @if (\n data?.owner_id || data?.status || data?.priority || data?.crm_source_id ||\n data?.organization_type_id || data?.organization_industry_id || data?.organization_size_id\n ) {\n <h3 class=\"readview-section\">{{ 'Crm.AccountMessage.Section.Classification' | transloco }}</h3>\n <div class=\"row\">\n @if (data?.owner_id) {\n <div class=\"col-12 readview-field\">\n <span class=\"label\">{{ 'Crm.AccountMessage.Owner' | transloco }}</span>\n <p class=\"readview-value\">{{ data?.owner?.first_name }} {{ data?.owner?.last_name }}</p>\n </div>\n }\n @if (data?.status) {\n <div class=\"col-6 readview-field\">\n <span class=\"label\">{{ 'Crm.AccountMessage.Status' | transloco }}</span>\n <p class=\"readview-value text-capitalize\">{{ data.status }}</p>\n </div>\n }\n @if (data?.priority) {\n <div class=\"col-6 readview-field\">\n <span class=\"label\">{{ 'Crm.AccountMessage.Priority' | transloco }}</span>\n <p class=\"readview-value text-capitalize\">{{ data.priority }}</p>\n </div>\n }\n @if (data?.crm_source_id) {\n <div class=\"col-6 readview-field\">\n <span class=\"label\">{{ 'Crm.AccountMessage.Source' | transloco }}</span>\n <p class=\"readview-value\">{{ labelFor(source, f['crm_source_id'].value, 'id', 'name') || '\u2014' }}</p>\n </div>\n }\n @if (data?.organization_type_id) {\n <div class=\"col-6 readview-field\">\n <span class=\"label\">{{ 'Organization.OrganizationType' | transloco }}</span>\n @if (organizationTypes$ | async; as types) {\n <p class=\"readview-value\">{{ labelFor(types['organization_types'], f['organization_type_id'].value) || '\u2014' }}</p>\n }\n </div>\n }\n @if (data?.organization_industry_id) {\n <div class=\"col-6 readview-field\">\n <span class=\"label\">{{ 'Organization.OrganizationIndustry' | transloco }}</span>\n @if (organizationIndustries$ | async; as industries) {\n <p class=\"readview-value\">{{ labelFor(industries['organization_industries'], f['organization_industry_id'].value) || '\u2014' }}</p>\n }\n </div>\n }\n @if (data?.organization_size_id) {\n <div class=\"col-6 readview-field\">\n <span class=\"label\">{{ 'Crm.AccountMessage.Size' | transloco }}</span>\n @if (organizationSizes$ | async; as sizes) {\n <p class=\"readview-value\">{{ labelFor(sizes['organization_sizes'], f['organization_size_id'].value) || '\u2014' }}</p>\n }\n </div>\n }\n </div>\n }\n @if (data?.description) {\n <h3 class=\"readview-section\">{{ 'Crm.AccountMessage.Section.About' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"col-12 readview-field\">\n <span class=\"label\">{{ 'Crm.AccountMessage.Description' | transloco }}</span>\n <p class=\"readview-value\">{{ data.description }}</p>\n </div>\n </div>\n }\n </div>\n } @else {\n <form [formGroup]=\"aboutControls\">\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"crm-account-info-name\">{{ 'Crm.AccountMessage.Name' | transloco }}</label>\n <input type=\"text\"\n id=\"crm-account-info-name\"\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 <span class=\"pw-label-style label mb-0\" id=\"crm-account-info-location-label\">{{\n 'Crm.AccountMessage.Location' | transloco\n }}</span>\n <input ngx-gp-autocomplete\n id=\"crm-account-info-location\"\n name=\"location\"\n [attr.aria-labelledby]=\"'crm-account-info-location-label'\"\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 @if (countries$ | async; as countries) {\n <div class=\"mb-3\">\n <span id=\"crm-account-info-country-label\" class=\"pw-label-style\">{{ 'Crm.AccountMessage.Country' | transloco\n }}<span class=\"text-danger required-icon\">*</span>\n </span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-country-label'\"\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-select>\n </div>\n }\n <div class=\"mb-3 ui-fluid skills-modal\">\n <span class=\"pw-label-style label mb-2\" id=\"crm-account-info-owner-label\">{{ 'Crm.AccountMessage.Owner' | transloco }}</span>\n <p-autoComplete\n appendTo=\"body\"\n [attr.aria-labelledby]=\"'crm-account-info-owner-label'\"\n [suggestions]=\"filteredOwner\"\n formControlName=\"owner_id\"\n dataKey=\"id\"\n optionLabel=\"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 <span class=\"label mb-0 d-block\" id=\"crm-account-info-company_url-label\">{{\n 'Crm.AccountMessage.CompanyUrl' | transloco\n }}</span>\n <input\n type=\"text\"\n id=\"crm-account-info-company_url\"\n class=\"form-control rounded-0 ps-1 user-value\"\n [attr.aria-labelledby]=\"'crm-account-info-company_url-label'\"\n formControlName=\"company_url\"\n [ngClass]=\"{ 'is-invalid': submitted && f['company_url'].errors }\" />\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"crm-account-info-tel\">{{ 'Crm.AccountMessage.Tel' | transloco }}</label>\n <input type=\"text\"\n id=\"crm-account-info-tel\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"tel\" />\n </div>\n @if (organizationTypes$ | async; as types) {\n <div class=\"mb-3\">\n <span id=\"crm-account-info-organization-type-label\" class=\"pw-label-style\">{{ 'Organization.OrganizationType' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-organization-type-label'\"\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-select>\n </div>\n }\n @if (organizationIndustries$ | async; as industries) {\n <div class=\"mb-3\">\n <span id=\"crm-account-info-industry-label\" class=\"pw-label-style\">{{ 'Organization.OrganizationIndustry' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-industry-label'\"\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-select>\n </div>\n }\n @if (organizationSizes$ | async; as sizes) {\n <div class=\"mb-3\">\n <span id=\"crm-account-info-size-label\" class=\"pw-label-style\">{{ 'Crm.AccountMessage.Size' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-size-label'\"\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-select>\n </div>\n }\n <div class=\"mb-3\">\n <span id=\"crm-account-info-status-label\" class=\"pw-label-style\">{{ 'Crm.AccountMessage.Status' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-status-label'\"\n [options]=\"status\"\n formControlName=\"status\"\n [ngClass]=\"{ 'is-invalid': submitted && f['status'].errors }\"\n [placeholder]=\"'Select Status'\">\n </p-select>\n </div>\n <div class=\"mb-3\">\n <span id=\"crm-account-info-priority-label\" class=\"pw-label-style\">{{ 'Crm.AccountMessage.Priority' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-priority-label'\"\n [options]=\"priority\"\n formControlName=\"priority\"\n [ngClass]=\"{ 'is-invalid': submitted && f['priority'].errors }\"\n [placeholder]=\"'Select Priority'\">\n </p-select>\n </div>\n <div class=\"mb-3\">\n <span id=\"crm-account-info-source-label\" class=\"pw-label-style\">{{ 'Crm.AccountMessage.Source' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-source-label'\"\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-select>\n </div>\n <div class=\"mb-3\">\n <pw-input-container [label]=\"'Crm.AccountMessage.Description' | transloco\"\n name=\"description\">\n <textarea rows=\"5\"\n type=\"text\"\n class=\"form-control\"\n formControlName=\"description\"\n id=\"description\"\n [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors }\"></textarea>\n </pw-input-container>\n </div>\n <div class=\"text-end form-action-buttons\">\n <input type=\"button\"\n class=\"btn btn-outline-default\"\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 }\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 <label for=\"crm-account-info-comment\" class=\"visually-hidden\">Note</label>\n <textarea id=\"crm-account-info-comment\"\n name=\"comment\"\n class=\"form-control\"\n formControlName=\"comment\"\n rows=\"6\"></textarea>\n @if (\n actionControls.get('comment').touched &&\n actionControls.get('comment').invalid\n ) {\n <p class=\"text-danger\"\n >\n Note Required\n </p>\n }\n @if (actions?.length) {\n <div\n class=\"d-block clear-both pt-3\">\n @for (action of actions; track action.id; let i = $index) {\n @if (action.visible) {\n <button\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 }\n }\n @if (submitAction && actionControls.get('crm_action_id').invalid) {\n <div class=\"text-danger\"\n >\n Please select an action\n </div>\n }\n <div class=\"row mt-3 align-items-center g-2\">\n <div class=\"col-12 col-sm-3\">\n <label for=\"crm-account-info-when\" class=\"visually-hidden\">Date</label>\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"crm-account-info-when\"\n name=\"when\"\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-12 col-sm ps-0\">\n <p-autoComplete inputId=\"crm-account-info-search-contact\"\n appendTo=\"body\"\n [suggestions]=\"filteredContact\"\n formControlName=\"crm_contact_id\"\n dataKey=\"id\"\n optionLabel=\"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-auto pe-0 completed-toggle\">\n <div class=\"d-flex align-items-center h-100\">\n <ui-switch\n [checkedLabel]=\"'Crm.Actions.Completed' | transloco\"\n [uncheckedLabel]=\"'Crm.Actions.Completed' | transloco\"\n [ariaLabel]=\"'Crm.Actions.Completed' | transloco\"\n [pTooltip]=\"'Crm.Actions.Tooltip.Completed' | transloco\"\n [appendTo]=\"'body'\"\n tooltipPosition=\"top\"\n formControlName=\"completed\"\n name=\"completed\">\n </ui-switch>\n </div>\n </div>\n <div class=\"col-12 col-sm-auto ms-sm-auto d-flex align-items-center gap-2 mt-2 mt-sm-0\">\n <a class=\"btn btn-outline-primary\"\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\">Submit Note</button>\n </div>\n </div>\n </div>\n }\n @if (buttonDisable) {\n <div\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 }\n </form>\n @if (!isLoaded) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n }\n @if (!accountComments?.length && isLoaded) {\n <div\n class=\"no-actions pt-2\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoActionsMessage' | transloco\">\n </pw-no-data>\n </div>\n }\n @if (accountComments?.length) {\n <div>\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 @for (\n item of accountComments; track\n item.id; let i = $index; let odd = $odd; let even = $even; let last = $last; let first = $first) {\n <li class=\"timeline-item\"\n [ngClass]=\"{ 'mt-5': odd || last }\"\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 card pb-0 position-static\">\n <div class=\"card-header\">\n <div class=\"mb-0 clearfix\">\n <textarea type=\"text\"\n [id]=\"'crm-account-timeline-comment-' + item.id\"\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 appendTo=\"body\"\n [suggestions]=\"filteredContactComment\"\n dataKey=\"id\"\n optionLabel=\"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 @if (\n !showFullComment || item.id !== commentId\n ) {\n <p class=\"float-start mb-0\"\n >\n {{ item.comment | slice: 0:170\n }}@if (item.comment.length > 170) {\n <a\n class=\"text-secondary\"\n (click)=\"\n showFullComment = true;\n commentId = item.id\n \">...show more\n </a>\n }\n </p>\n }\n @if (showFullComment && item.id === commentId) {\n <p class=\"float-start mb-0\"\n >\n {{ item.comment }}\n @if (\n item.comment.length > 170 &&\n showFullComment\n ) {\n <a\n (click)=\"showFullComment = false\"\n class=\"text-secondary\">...show less</a>\n }\n </p>\n }\n @if (userId === item.owner_id || hasAccess) {\n <button class=\"btn btn-md edit-btn float-end py-0\"\n (click)=\"showEditControls($event, item)\"\n >\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></i>\n </button>\n }\n </div>\n <div class=\"card-subtitle text-muted my-0 clearfix\">\n <div class=\"float-start owner-meta\">\n By {{ item.owner.first_name + ' ' + item.owner.last_name }} on\n @if (!updating || actionId !== item.id) {\n <span class=\"font-small-3\">{{ item.when }}</span>\n }\n @if (updating && actionId === item.id) {\n <input\n [id]=\"'crm-account-info-when-' + item.id\"\n name=\"when\"\n placeholder=\"dd-mmm-yyyy\"\n value=\"{{ item.when }}\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (focus)=\"d.toggle()\"\n (dateSelect)=\"onDateSelect($event, item)\"\n aria-label=\"Date\" />\n }\n </div>\n @if (userId === item.owner_id || hasAccess) {\n <button type=\" button\"\n class=\"btn btn-sm float-end when-btn py-0\"\n (click)=\"showDatePickerUpdate(item.id)\">\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></i>\n </button>\n }\n </div>\n @if (item.crm_contact) {\n <a class=\"text-secondary action-owner\"\n ngbTooltip=\"Related contact\"\n container=\"body\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.contactInfo,\n item.crm_contact.id\n ]\"><i class=\"fa fa-user\" aria-hidden=\"true\"></i>{{ item.crm_contact.first_name }}\n {{ item.crm_contact.last_name || '' }}</a>\n }\n <div class=\"action-row\">\n <span class=\"badge bg-primary\">{{\n item?.crm_action?.name\n }}</span>\n @if (\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n ) {\n <span\n class=\"badge bg-success ms-2\">Open</span>\n }\n @if (!item.cancelled && !item.completed) {\n <p [class.text-danger]=\"!item.color\"\n class=\"due-status mb-0\">\n {{ item.due }}\n </p>\n }\n <span class=\"action-icons\">\n @if (\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n ) {\n <a\n ngbTooltip=\"Set as completed\"\n aria-label=\"Set as completed\"\n class=\"me-3 ms-3\"\n href=\"#\"\n (click)=\"\n $event.preventDefault();\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 }\n @if (\n !item.cancelled &&\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n ) {\n <a\n ngbTooltip=\"Set as cancelled\"\n aria-label=\"Set as cancelled\"\n href=\"#\"\n (click)=\"$event.preventDefault(); setAsCancelled(item.id, item)\">\n <i\n class=\"fa fa-times delete-icon\"\n aria-hidden=\"true\"\n ></i>\n </a>\n }\n @if (\n item.completed &&\n (userId === item.owner_id || hasAccess)\n ) {\n <a\n ngbTooltip=\"Set as UnCompleted\"\n aria-label=\"Set as UnCompleted\"\n href=\"#\"\n (click)=\"\n $event.preventDefault();\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 }\n </span>\n </div>\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 }\n </ul>\n </div>\n </div>\n }\n </ng-template>\n </li>\n @if (canViewContactsTab()) {\n <li [ngbNavItem]=\"2\">\n <a ngbNavLink>Contacts</a>\n <ng-template ngbNavContent>\n <div class=\"row\">\n <div class=\"col-12 mb-3\">\n <a class=\"btn btn-sm btn-outline-primary float-end\"\n data-cy=\"add-contact\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.contactAdd,\n accountId\n ]\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.ContactMessage.AddContact' | transloco }}\n </a>\n </div>\n </div>\n <div class=\"primeng-datatable-container actions-collapsed 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 <label for=\"crm-account-info-contacts-search\" class=\"visually-hidden\">Search Contact</label>\n <p-iconfield iconPosition=\"left\">\n <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n <input type=\"text\"\n id=\"crm-account-info-contacts-search\"\n name=\"crm-account-info-contacts-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search contact...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n </p-iconfield>\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\" class=\"actions-list-three\">{{ '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 @if (contact?.last_logged_in_at) {\n <span [ngClass]=\"lastSeenAtTextClass(contact?.last_logged_in_at)\">\n {{ contact?.last_logged_in_at | dateFormat }}\n </span>\n }\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 @if (\n hasAccess ||\n contact.owner_id === userId ||\n contact.crm_account.owner_id === userId\n ) {\n <li\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 }\n @if (\n hasAccess ||\n contact.owner_id === userId ||\n contact.crm_account.owner_id === userId\n ) {\n <li\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 }\n @if (\n hasAccess ||\n contact.owner_id === userId ||\n contact.crm_account.owner_id === userId\n ) {\n <li\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 }\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n @if (totalRecords === 0 && totalRecordsUnFiltered !== 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n </pw-no-data>\n </div>\n }\n @if (totalRecords !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n }\n </div>\n @if (totalRecordsUnFiltered === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.ContactsAdminMessage' | transloco\">\n </pw-no-data>\n </div>\n }\n </ng-template>\n </li>\n }\n @if (hasAccess) {\n <li [ngbNavItem]=\"3\">\n <a ngbNavLink>Versioning</a>\n <ng-template ngbNavContent>\n @for (versioning of accountVersioning; track versioning.item_id) {\n <div>\n <p>\n <strong>Event: </strong>{{ versioning.event }} |\n <strong>Author: </strong>@if (versioning?.author) {\n <a\n [routerLink]=\"['/members', versioning?.author?.slug]\">{{ versioning?.author | ifNameNullShowEmail }}</a>\n }\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 }\n @if (accountVersioning?.length === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoVersionsMessage' | transloco\">\n </pw-no-data>\n </div>\n }\n </ng-template>\n </li>\n }\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 @if (hasAccess) {\n <li [ngbNavItem]=\"5\">\n <a ngbNavLink>Invoices</a>\n <ng-template ngbNavContent>\n <pw-smart-crm-account-invoices [accountId]=\"accountId\"/>\n </ng-template>\n </li>\n }\n </ul>\n <div [ngbNavOutlet]=\"nav\"></div>\n </div>\n </div>\n </div>\n}\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\" for=\"account-info-file-upload\">\n <input type=\"file\"\n id=\"account-info-file-upload\"\n name=\"account-info-file-upload\"\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 @for (f of files; track f.name; let i = $index) {\n <div class=\"upload-item\"\n >\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 @if (!f['uploaded']) {\n <span>{{ f.progress?.data?.percentage - 1 }}%\n </span>\n }\n @if (f['uploaded']) {\n <span>100 %</span>\n }\n @if (!f['uploaded']) {\n <span>Uploading...</span>\n }\n @if (f['uploaded']) {\n <span>Done</span>\n }\n </span>\n @if (f.progress?.data?.percentage !== 0 && !f['uploaded']) {\n <span class=\"speed-and-eta-text\"\n >\n <span>{{ f.progress?.data?.speedHuman }} </span>\n <span>ETA {{ f.progress?.data?.etaHuman }}</span>\n </span>\n }\n </div>\n </div>\n </div>\n }\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)}.timeline-card.card{border:1px solid #e2e5ea;border-radius:10px;box-shadow:0 1px 2px #1018280f}.timeline-card.card .card-header{padding:14px 16px 6px;background:transparent;border-bottom:0}.timeline-card.card .card-header p.float-start{font-size:14px;line-height:1.5}.timeline-card.card .due-status.text-danger{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:9999px;background:#fbecea;color:#b23a2c!important;font-size:12px;font-weight:600;line-height:1.2;border:1px solid #f3d4cf}.timeline-card.card .due-status.text-danger:before{content:\"\";width:6px;height:6px;border-radius:50%;background:#c0392b}.timeline-card.card .owner-meta{color:#5a6473;font-size:12px;font-weight:500}.timeline-card.card .owner-meta .font-small-3{color:#5a6473}.timeline-card.card .action-owner{display:inline-flex;align-items:center;gap:5px;margin-top:10px;color:#5a6473!important;font-size:12px;text-decoration:none}.timeline-card.card .action-owner i{font-size:11px;color:#a8afbc}.timeline-card.card .action-owner:hover{color:var(--first, #1769e1)!important}.timeline-card.card .badge{margin-top:10px;padding:4px 10px;border-radius:9999px;font-size:12px;font-weight:600;letter-spacing:0}.timeline-card.card .badge.bg-primary{background-color:#f1f3f6!important;color:#3d4654!important;border:1px solid #e2e5ea}.timeline-card.card .badge.bg-success{display:inline-flex;align-items:center;gap:6px;background-color:#e7f5ee!important;color:#1f7a47!important;border:1px solid #c9e9d6}.timeline-card.card .badge.bg-success:before{content:\"\";width:6px;height:6px;border-radius:50%;background:#1f9d57}.timeline-card.card .action-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}.timeline-card.card .action-row .badge,.timeline-card.card .action-row .due-status{margin:0!important}.timeline-card.card .action-icons{display:inline-flex;align-items:center;gap:14px;margin-left:auto}.timeline-card.card .action-icons a{margin:0!important}.timeline-card.card .edit-icon{color:#7c8696;transition:color .15s ease}.timeline-card.card .edit-btn:hover .edit-icon,.timeline-card.card .when-btn:hover .edit-icon{color:var(--first, #1769e1)}.timeline-card.card .completed{color:#1f9d57}.timeline-card.card .delete-icon{color:#c0392b}.timeline-badge .bg-red.bg-lighten-1{background-color:#fbeae8!important}.timeline-badge .bg-red.bg-lighten-1 .timeline-year,.timeline-badge .bg-red.bg-lighten-1 .date-year{color:#c0392b!important}.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}.user-info .about-readview{padding:4px 8px 8px}.user-info .about-readview .row{--bs-gutter-x: 1rem}.user-info .about-readview .readview-section{display:block;margin:24px 0 14px;padding-top:18px;border-top:1px solid #e2e5ea;color:#5a6473;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}.user-info .about-readview .readview-section:first-of-type{margin-top:4px;padding-top:0;border-top:0}.user-info .about-readview .readview-field{margin-bottom:20px}.user-info .about-readview .label{display:block;margin-bottom:4px;color:#7c8696;font-size:12px;font-weight:500;text-transform:none}.user-info .about-readview .readview-value{max-width:100%;margin:0;color:#272e38;font-size:14px;font-weight:500;line-height:1.4;word-break:break-word}.user-info .about-readview a.readview-value{color:var(--first, #1769e1);text-decoration:none}.user-info .about-readview a.readview-value:hover{text-decoration:underline}.user-info .about-readview .badge{font-weight:500}.control-btns{display:none}::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 p-select,.isDisabled p-autocomplete,.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}.completed-toggle ::ng-deep .switch-label-checked,.completed-toggle ::ng-deep .switch-label-unchecked{font-size:11px!important;letter-spacing:.3px;text-transform:none}@media(max-width:575.98px){.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: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i4$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i5$1.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i6$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { 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$2.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: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: 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: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "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", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "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: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i6.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i9.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i11.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo", "motionOptions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: i12.ClearBitIconComponent, selector: "pw-clearbit-icon", inputs: ["src", "altText", "name", "size", "iconClass"] }, { kind: "component", type: i12.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "controlId", "useAriaLabelledbyOnly", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "component", type: i12.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i12.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "directive", type: i15.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "directive", type: i13$1.NgFileDropDirective, selector: "[ngFileDrop]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "directive", type: i13$1.NgFileSelectDirective, selector: "[ngFileSelect]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "directive", type: i21.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: i17.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i17.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i17.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
|
|
1311
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", 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 @if (!isDataLoaded) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner> </p-progressSpinner>\n </div>\n }\n @if (isDataLoaded) {\n <div>\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 <pw-clearbit-icon [src]=\"data?.company_url\"\n [name]=\"data?.name\"\n altText=\"Company Logo\"\n [size]=\"100\"\n iconClass=\"mb-3\"></pw-clearbit-icon>\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 @if (data?.id) {\n <span>{{ data.name }}</span>\n }\n </h4>\n @if (isFormEdit && (userId === data?.owner?.id || hasAccess)) {\n <a href=\"#\"\n class=\"btn btn-sm btn-outline-primary float-end\"\n (click)=\"$event.preventDefault(); isFormEdit = !isFormEdit; this.getAllSubscriptionMembers()\">{{ 'Button.Edit' | transloco }}</a>\n }\n </div>\n @if (isFormEdit) {\n <div class=\"about-readview\">\n @if (data?.name || data?.company_url || data?.location || f['country'].value || data?.tel) {\n <h3 class=\"readview-section\">{{ 'Crm.AccountMessage.Section.Identity' | transloco }}</h3>\n <div class=\"row\">\n @if (data?.name) {\n <div class=\"col-12 readview-field\">\n <span class=\"label\">{{ 'Crm.AccountMessage.Name' | transloco }}</span>\n <p class=\"readview-value\">{{ data.name }}</p>\n </div>\n }\n @if (data?.company_url) {\n <div class=\"col-12 readview-field\">\n <span class=\"label\">{{ 'Crm.AccountMessage.CompanyUrl' | transloco }}</span>\n <a class=\"readview-value\" [href]=\"data.company_url\" target=\"blank\">{{ data.company_url }}</a>\n </div>\n }\n @if (data?.location) {\n <div class=\"col-12 readview-field\">\n <span class=\"label\">{{ 'Crm.AccountMessage.Location' | transloco }}</span>\n <p class=\"readview-value\">{{ data.location }}</p>\n </div>\n }\n @if (f['country'].value) {\n <div class=\"col-6 readview-field\">\n <span class=\"label\">{{ 'Crm.AccountMessage.Country' | transloco }}</span>\n @if (countries$ | async; as countries) {\n <p class=\"readview-value\">{{ labelFor(countries, f['country'].value, 'code', 'name') || f['country'].value }}</p>\n }\n </div>\n }\n @if (data?.tel) {\n <div class=\"col-6 readview-field\">\n <span class=\"label\">{{ 'Crm.AccountMessage.Tel' | transloco }}</span>\n <p class=\"readview-value\">{{ data.tel }}</p>\n </div>\n }\n </div>\n }\n @if (\n data?.owner_id || data?.status || data?.priority || data?.crm_source_id ||\n data?.organization_type_id || data?.organization_industry_id || data?.organization_size_id\n ) {\n <h3 class=\"readview-section\">{{ 'Crm.AccountMessage.Section.Classification' | transloco }}</h3>\n <div class=\"row\">\n @if (data?.owner_id) {\n <div class=\"col-12 readview-field\">\n <span class=\"label\">{{ 'Crm.AccountMessage.Owner' | transloco }}</span>\n <p class=\"readview-value\">{{ data?.owner?.first_name }} {{ data?.owner?.last_name }}</p>\n </div>\n }\n @if (data?.status) {\n <div class=\"col-6 readview-field\">\n <span class=\"label\">{{ 'Crm.AccountMessage.Status' | transloco }}</span>\n <p class=\"readview-value text-capitalize\">{{ data.status }}</p>\n </div>\n }\n @if (data?.priority) {\n <div class=\"col-6 readview-field\">\n <span class=\"label\">{{ 'Crm.AccountMessage.Priority' | transloco }}</span>\n <p class=\"readview-value text-capitalize\">{{ data.priority }}</p>\n </div>\n }\n @if (data?.crm_source_id) {\n <div class=\"col-6 readview-field\">\n <span class=\"label\">{{ 'Crm.AccountMessage.Source' | transloco }}</span>\n <p class=\"readview-value\">{{ labelFor(source, f['crm_source_id'].value, 'id', 'name') || '\u2014' }}</p>\n </div>\n }\n @if (data?.organization_type_id) {\n <div class=\"col-6 readview-field\">\n <span class=\"label\">{{ 'Organization.OrganizationType' | transloco }}</span>\n @if (organizationTypes$ | async; as types) {\n <p class=\"readview-value\">{{ labelFor(types['organization_types'], f['organization_type_id'].value) || '\u2014' }}</p>\n }\n </div>\n }\n @if (data?.organization_industry_id) {\n <div class=\"col-6 readview-field\">\n <span class=\"label\">{{ 'Organization.OrganizationIndustry' | transloco }}</span>\n @if (organizationIndustries$ | async; as industries) {\n <p class=\"readview-value\">{{ labelFor(industries['organization_industries'], f['organization_industry_id'].value) || '\u2014' }}</p>\n }\n </div>\n }\n @if (data?.organization_size_id) {\n <div class=\"col-6 readview-field\">\n <span class=\"label\">{{ 'Crm.AccountMessage.Size' | transloco }}</span>\n @if (organizationSizes$ | async; as sizes) {\n <p class=\"readview-value\">{{ labelFor(sizes['organization_sizes'], f['organization_size_id'].value) || '\u2014' }}</p>\n }\n </div>\n }\n </div>\n }\n @if (data?.description) {\n <h3 class=\"readview-section\">{{ 'Crm.AccountMessage.Section.About' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"col-12 readview-field\">\n <span class=\"label\">{{ 'Crm.AccountMessage.Description' | transloco }}</span>\n <p class=\"readview-value\">{{ data.description }}</p>\n </div>\n </div>\n }\n </div>\n } @else {\n <form [formGroup]=\"aboutControls\">\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"crm-account-info-name\">{{ 'Crm.AccountMessage.Name' | transloco }}</label>\n <input type=\"text\"\n id=\"crm-account-info-name\"\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 <span class=\"pw-label-style label mb-0\" id=\"crm-account-info-location-label\">{{\n 'Crm.AccountMessage.Location' | transloco\n }}</span>\n <input ngx-gp-autocomplete\n id=\"crm-account-info-location\"\n name=\"location\"\n [attr.aria-labelledby]=\"'crm-account-info-location-label'\"\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 @if (countries$ | async; as countries) {\n <div class=\"mb-3\">\n <span id=\"crm-account-info-country-label\" class=\"pw-label-style\">{{ 'Crm.AccountMessage.Country' | transloco\n }}<span class=\"text-danger required-icon\">*</span>\n </span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-country-label'\"\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-select>\n </div>\n }\n <div class=\"mb-3 ui-fluid skills-modal\">\n <span class=\"pw-label-style label mb-2\" id=\"crm-account-info-owner-label\">{{ 'Crm.AccountMessage.Owner' | transloco }}</span>\n <p-autoComplete\n appendTo=\"body\"\n [attr.aria-labelledby]=\"'crm-account-info-owner-label'\"\n [suggestions]=\"filteredOwner\"\n formControlName=\"owner_id\"\n dataKey=\"id\"\n optionLabel=\"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 <span class=\"label mb-0 d-block\" id=\"crm-account-info-company_url-label\">{{\n 'Crm.AccountMessage.CompanyUrl' | transloco\n }}</span>\n <input\n type=\"text\"\n id=\"crm-account-info-company_url\"\n class=\"form-control rounded-0 ps-1 user-value\"\n [attr.aria-labelledby]=\"'crm-account-info-company_url-label'\"\n formControlName=\"company_url\"\n [ngClass]=\"{ 'is-invalid': submitted && f['company_url'].errors }\" />\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"crm-account-info-tel\">{{ 'Crm.AccountMessage.Tel' | transloco }}</label>\n <input type=\"text\"\n id=\"crm-account-info-tel\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"tel\" />\n </div>\n @if (organizationTypes$ | async; as types) {\n <div class=\"mb-3\">\n <span id=\"crm-account-info-organization-type-label\" class=\"pw-label-style\">{{ 'Organization.OrganizationType' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-organization-type-label'\"\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-select>\n </div>\n }\n @if (organizationIndustries$ | async; as industries) {\n <div class=\"mb-3\">\n <span id=\"crm-account-info-industry-label\" class=\"pw-label-style\">{{ 'Organization.OrganizationIndustry' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-industry-label'\"\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-select>\n </div>\n }\n @if (organizationSizes$ | async; as sizes) {\n <div class=\"mb-3\">\n <span id=\"crm-account-info-size-label\" class=\"pw-label-style\">{{ 'Crm.AccountMessage.Size' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-size-label'\"\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-select>\n </div>\n }\n <div class=\"mb-3\">\n <span id=\"crm-account-info-status-label\" class=\"pw-label-style\">{{ 'Crm.AccountMessage.Status' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-status-label'\"\n [options]=\"status\"\n formControlName=\"status\"\n [ngClass]=\"{ 'is-invalid': submitted && f['status'].errors }\"\n [placeholder]=\"'Select Status'\">\n </p-select>\n </div>\n <div class=\"mb-3\">\n <span id=\"crm-account-info-priority-label\" class=\"pw-label-style\">{{ 'Crm.AccountMessage.Priority' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-priority-label'\"\n [options]=\"priority\"\n formControlName=\"priority\"\n [ngClass]=\"{ 'is-invalid': submitted && f['priority'].errors }\"\n [placeholder]=\"'Select Priority'\">\n </p-select>\n </div>\n <div class=\"mb-3\">\n <span id=\"crm-account-info-source-label\" class=\"pw-label-style\">{{ 'Crm.AccountMessage.Source' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-source-label'\"\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-select>\n </div>\n <div class=\"mb-3\">\n <pw-input-container [label]=\"'Crm.AccountMessage.Description' | transloco\"\n name=\"description\">\n <textarea rows=\"5\"\n type=\"text\"\n class=\"form-control\"\n formControlName=\"description\"\n id=\"description\"\n [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors }\"></textarea>\n </pw-input-container>\n </div>\n <div class=\"text-end form-action-buttons\">\n <input type=\"button\"\n class=\"btn btn-outline-default\"\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 }\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 <label for=\"crm-account-info-comment\" class=\"visually-hidden\">Note</label>\n <textarea id=\"crm-account-info-comment\"\n name=\"comment\"\n class=\"form-control\"\n formControlName=\"comment\"\n rows=\"6\"></textarea>\n @if (\n actionControls.get('comment').touched &&\n actionControls.get('comment').invalid\n ) {\n <p class=\"text-danger\"\n >\n Note Required\n </p>\n }\n @if (actions?.length) {\n <div\n class=\"d-block clear-both pt-3\">\n @for (action of actions; track action.id; let i = $index) {\n @if (action.visible) {\n <button\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 }\n }\n @if (submitAction && actionControls.get('crm_action_id').invalid) {\n <div class=\"text-danger\"\n >\n Please select an action\n </div>\n }\n <div class=\"row mt-3 align-items-center g-2\">\n <div class=\"col-12 col-sm-3\">\n <label for=\"crm-account-info-when\" class=\"visually-hidden\">Date</label>\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"crm-account-info-when\"\n name=\"when\"\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-12 col-sm-3 ps-0\">\n <p-autoComplete inputId=\"crm-account-info-search-contact\"\n appendTo=\"body\"\n [suggestions]=\"filteredContact\"\n formControlName=\"crm_contact_id\"\n dataKey=\"id\"\n optionLabel=\"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-auto pe-0 completed-toggle\">\n <div class=\"d-flex align-items-center h-100\">\n <ui-switch\n [checkedLabel]=\"'Crm.Actions.Completed' | transloco\"\n [uncheckedLabel]=\"'Crm.Actions.Completed' | transloco\"\n [ariaLabel]=\"'Crm.Actions.Completed' | transloco\"\n [pTooltip]=\"'Crm.Actions.Tooltip.Completed' | transloco\"\n [appendTo]=\"'body'\"\n tooltipPosition=\"top\"\n formControlName=\"completed\"\n name=\"completed\">\n </ui-switch>\n </div>\n </div>\n <div class=\"col-12 d-flex justify-content-end align-items-center gap-2 mt-2\">\n <a class=\"btn btn-outline-primary\"\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\">Submit Note</button>\n </div>\n </div>\n </div>\n }\n @if (buttonDisable) {\n <div\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 }\n </form>\n @if (!isLoaded) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n }\n @if (!accountComments?.length && isLoaded) {\n <div\n class=\"no-actions pt-2\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoActionsMessage' | transloco\">\n </pw-no-data>\n </div>\n }\n @if (accountComments?.length) {\n <div>\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 @for (\n item of accountComments; track\n item.id; let i = $index; let odd = $odd; let even = $even; let last = $last; let first = $first) {\n <li class=\"timeline-item\"\n [ngClass]=\"{ 'mt-5': odd || last }\"\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 card pb-0 position-static\">\n <div class=\"card-header\">\n <div class=\"mb-0 clearfix\">\n <textarea type=\"text\"\n [id]=\"'crm-account-timeline-comment-' + item.id\"\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 appendTo=\"body\"\n [suggestions]=\"filteredContactComment\"\n dataKey=\"id\"\n optionLabel=\"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 @if (\n !showFullComment || item.id !== commentId\n ) {\n <p class=\"float-start mb-0\"\n >\n {{ item.comment | slice: 0:170\n }}@if (item.comment.length > 170) {\n <a\n class=\"text-secondary\"\n (click)=\"\n showFullComment = true;\n commentId = item.id\n \">...show more\n </a>\n }\n </p>\n }\n @if (showFullComment && item.id === commentId) {\n <p class=\"float-start mb-0\"\n >\n {{ item.comment }}\n @if (\n item.comment.length > 170 &&\n showFullComment\n ) {\n <a\n (click)=\"showFullComment = false\"\n class=\"text-secondary\">...show less</a>\n }\n </p>\n }\n @if (userId === item.owner_id || hasAccess) {\n <button class=\"btn btn-md edit-btn float-end py-0\"\n (click)=\"showEditControls($event, item)\"\n >\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></i>\n </button>\n }\n </div>\n <div class=\"card-subtitle text-muted my-0 clearfix\">\n <div class=\"float-start owner-meta\">\n By {{ item.owner.first_name + ' ' + item.owner.last_name }} on\n @if (!updating || actionId !== item.id) {\n <span class=\"font-small-3\">{{ item.when }}</span>\n }\n @if (updating && actionId === item.id) {\n <input\n [id]=\"'crm-account-info-when-' + item.id\"\n name=\"when\"\n placeholder=\"dd-mmm-yyyy\"\n value=\"{{ item.when }}\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (focus)=\"d.toggle()\"\n (dateSelect)=\"onDateSelect($event, item)\"\n aria-label=\"Date\" />\n }\n </div>\n @if (userId === item.owner_id || hasAccess) {\n <button type=\" button\"\n class=\"btn btn-sm float-end when-btn py-0\"\n (click)=\"showDatePickerUpdate(item.id)\">\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></i>\n </button>\n }\n </div>\n @if (item.crm_contact) {\n <a class=\"text-secondary action-owner\"\n ngbTooltip=\"Related contact\"\n container=\"body\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.contactInfo,\n item.crm_contact.id\n ]\"><i class=\"fa fa-user\" aria-hidden=\"true\"></i>{{ item.crm_contact.first_name }}\n {{ item.crm_contact.last_name || '' }}</a>\n }\n <div class=\"action-row\">\n <span class=\"badge bg-primary\">{{\n item?.crm_action?.name\n }}</span>\n @if (\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n ) {\n <span\n class=\"badge bg-success ms-2\">Open</span>\n }\n @if (!item.cancelled && !item.completed) {\n <p [class.text-danger]=\"!item.color\"\n class=\"due-status mb-0\">\n {{ item.due }}\n </p>\n }\n <span class=\"action-icons\">\n @if (\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n ) {\n <a\n ngbTooltip=\"Set as completed\"\n aria-label=\"Set as completed\"\n class=\"me-3 ms-3\"\n href=\"#\"\n (click)=\"\n $event.preventDefault();\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 }\n @if (\n !item.cancelled &&\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n ) {\n <a\n ngbTooltip=\"Set as cancelled\"\n aria-label=\"Set as cancelled\"\n href=\"#\"\n (click)=\"$event.preventDefault(); setAsCancelled(item.id, item)\">\n <i\n class=\"fa fa-times delete-icon\"\n aria-hidden=\"true\"\n ></i>\n </a>\n }\n @if (\n item.completed &&\n (userId === item.owner_id || hasAccess)\n ) {\n <a\n ngbTooltip=\"Set as UnCompleted\"\n aria-label=\"Set as UnCompleted\"\n href=\"#\"\n (click)=\"\n $event.preventDefault();\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 }\n </span>\n </div>\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 }\n </ul>\n </div>\n </div>\n }\n </ng-template>\n </li>\n @if (canViewContactsTab()) {\n <li [ngbNavItem]=\"2\">\n <a ngbNavLink>Contacts</a>\n <ng-template ngbNavContent>\n <div class=\"row\">\n <div class=\"col-12 mb-3\">\n <a class=\"btn btn-sm btn-outline-primary float-end\"\n data-cy=\"add-contact\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.contactAdd,\n accountId\n ]\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.ContactMessage.AddContact' | transloco }}\n </a>\n </div>\n </div>\n <div class=\"primeng-datatable-container actions-collapsed 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 <label for=\"crm-account-info-contacts-search\" class=\"visually-hidden\">Search Contact</label>\n <p-iconfield iconPosition=\"left\">\n <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n <input type=\"text\"\n id=\"crm-account-info-contacts-search\"\n name=\"crm-account-info-contacts-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search contact...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n </p-iconfield>\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\" class=\"actions-list-three\">{{ '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 @if (contact?.last_logged_in_at) {\n <span [ngClass]=\"lastSeenAtTextClass(contact?.last_logged_in_at)\">\n {{ contact?.last_logged_in_at | dateFormat }}\n </span>\n }\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 @if (\n hasAccess ||\n contact.owner_id === userId ||\n contact.crm_account.owner_id === userId\n ) {\n <li\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 }\n @if (\n hasAccess ||\n contact.owner_id === userId ||\n contact.crm_account.owner_id === userId\n ) {\n <li\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 }\n @if (\n hasAccess ||\n contact.owner_id === userId ||\n contact.crm_account.owner_id === userId\n ) {\n <li\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 }\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n @if (totalRecords === 0 && totalRecordsUnFiltered !== 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n </pw-no-data>\n </div>\n }\n @if (totalRecords !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n }\n </div>\n @if (totalRecordsUnFiltered === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.ContactsAdminMessage' | transloco\">\n </pw-no-data>\n </div>\n }\n </ng-template>\n </li>\n }\n @if (hasAccess) {\n <li [ngbNavItem]=\"3\">\n <a ngbNavLink>Versioning</a>\n <ng-template ngbNavContent>\n @for (versioning of accountVersioning; track versioning.item_id) {\n <div>\n <p>\n <strong>Event: </strong>{{ versioning.event }} |\n <strong>Author: </strong>@if (versioning?.author) {\n <a\n [routerLink]=\"['/members', versioning?.author?.slug]\">{{ versioning?.author | ifNameNullShowEmail }}</a>\n }\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 }\n @if (accountVersioning?.length === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoVersionsMessage' | transloco\">\n </pw-no-data>\n </div>\n }\n </ng-template>\n </li>\n }\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 @if (hasAccess) {\n <li [ngbNavItem]=\"5\">\n <a ngbNavLink>Invoices</a>\n <ng-template ngbNavContent>\n <pw-smart-crm-account-invoices [accountId]=\"accountId\"/>\n </ng-template>\n </li>\n }\n </ul>\n <div [ngbNavOutlet]=\"nav\"></div>\n </div>\n </div>\n </div>\n}\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\" for=\"account-info-file-upload\">\n <input type=\"file\"\n id=\"account-info-file-upload\"\n name=\"account-info-file-upload\"\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 @for (f of files; track f.name; let i = $index) {\n <div class=\"upload-item\"\n >\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 @if (!f['uploaded']) {\n <span>{{ f.progress?.data?.percentage - 1 }}%\n </span>\n }\n @if (f['uploaded']) {\n <span>100 %</span>\n }\n @if (!f['uploaded']) {\n <span>Uploading...</span>\n }\n @if (f['uploaded']) {\n <span>Done</span>\n }\n </span>\n @if (f.progress?.data?.percentage !== 0 && !f['uploaded']) {\n <span class=\"speed-and-eta-text\"\n >\n <span>{{ f.progress?.data?.speedHuman }} </span>\n <span>ETA {{ f.progress?.data?.etaHuman }}</span>\n </span>\n }\n </div>\n </div>\n </div>\n }\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)}.timeline-card.card{border:1px solid #e2e5ea;border-radius:10px;box-shadow:0 1px 2px #1018280f}.timeline-card.card .card-header{padding:14px 16px 6px;background:transparent;border-bottom:0}.timeline-card.card .card-header p.float-start{font-size:14px;line-height:1.5}.timeline-card.card .due-status.text-danger{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:9999px;background:#fbecea;color:#b23a2c!important;font-size:12px;font-weight:600;line-height:1.2;border:1px solid #f3d4cf}.timeline-card.card .due-status.text-danger:before{content:\"\";width:6px;height:6px;border-radius:50%;background:#c0392b}.timeline-card.card .owner-meta{color:#5a6473;font-size:12px;font-weight:500}.timeline-card.card .owner-meta .font-small-3{color:#5a6473}.timeline-card.card .action-owner{display:inline-flex;align-items:center;gap:5px;margin-top:10px;color:#5a6473!important;font-size:12px;text-decoration:none}.timeline-card.card .action-owner i{font-size:11px;color:#a8afbc}.timeline-card.card .action-owner:hover{color:var(--first, #1769e1)!important}.timeline-card.card .badge{margin-top:10px;padding:4px 10px;border-radius:9999px;font-size:12px;font-weight:600;letter-spacing:0}.timeline-card.card .badge.bg-primary{background-color:#f1f3f6!important;color:#3d4654!important;border:1px solid #e2e5ea}.timeline-card.card .badge.bg-success{display:inline-flex;align-items:center;gap:6px;background-color:#e7f5ee!important;color:#1f7a47!important;border:1px solid #c9e9d6}.timeline-card.card .badge.bg-success:before{content:\"\";width:6px;height:6px;border-radius:50%;background:#1f9d57}.timeline-card.card .action-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}.timeline-card.card .action-row .badge,.timeline-card.card .action-row .due-status{margin:0!important}.timeline-card.card .action-icons{display:inline-flex;align-items:center;gap:14px;margin-left:auto}.timeline-card.card .action-icons a{margin:0!important}.timeline-card.card .edit-icon{color:#7c8696;transition:color .15s ease}.timeline-card.card .edit-btn:hover .edit-icon,.timeline-card.card .when-btn:hover .edit-icon{color:var(--first, #1769e1)}.timeline-card.card .completed{color:#1f9d57}.timeline-card.card .delete-icon{color:#c0392b}.timeline-badge .bg-red.bg-lighten-1{background-color:#fbeae8!important}.timeline-badge .bg-red.bg-lighten-1 .timeline-year,.timeline-badge .bg-red.bg-lighten-1 .date-year{color:#c0392b!important}.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}.user-info .about-readview{padding:4px 8px 8px}.user-info .about-readview .row{--bs-gutter-x: 1rem}.user-info .about-readview .readview-section{display:block;margin:24px 0 14px;padding-top:18px;border-top:1px solid #e2e5ea;color:#5a6473;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}.user-info .about-readview .readview-section:first-of-type{margin-top:4px;padding-top:0;border-top:0}.user-info .about-readview .readview-field{margin-bottom:20px}.user-info .about-readview .label{display:block;margin-bottom:4px;color:#7c8696;font-size:12px;font-weight:500;text-transform:none}.user-info .about-readview .readview-value{max-width:100%;margin:0;color:#272e38;font-size:14px;font-weight:500;line-height:1.4;word-break:break-word}.user-info .about-readview a.readview-value{color:var(--first, #1769e1);text-decoration:none}.user-info .about-readview a.readview-value:hover{text-decoration:underline}.user-info .about-readview .badge{font-weight:500}.control-btns{display:none}::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 p-select,.isDisabled p-autocomplete,.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}.completed-toggle ::ng-deep .switch-label-checked,.completed-toggle ::ng-deep .switch-label-unchecked{font-size:11px!important;letter-spacing:.3px;text-transform:none}@media(max-width:575.98px){.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: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i4$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i5$1.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i6$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { 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$2.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: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: 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: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "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", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "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: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i6.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i9.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i11.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo", "motionOptions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: i12.ClearBitIconComponent, selector: "pw-clearbit-icon", inputs: ["src", "altText", "name", "size", "iconClass"] }, { kind: "component", type: i12.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "controlId", "useAriaLabelledbyOnly", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "component", type: i12.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i12.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "directive", type: i15.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "directive", type: i13$1.NgFileDropDirective, selector: "[ngFileDrop]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "directive", type: i13$1.NgFileSelectDirective, selector: "[ngFileSelect]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "directive", type: i21.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: i17.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i17.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i17.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
|
|
1312
1312
|
}
|
|
1313
1313
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SmartCrmCompanyInfoComponent, decorators: [{
|
|
1314
1314
|
type: Component,
|
|
1315
|
-
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 @if (!isDataLoaded) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner> </p-progressSpinner>\n </div>\n }\n @if (isDataLoaded) {\n <div>\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 <pw-clearbit-icon [src]=\"data?.company_url\"\n [name]=\"data?.name\"\n altText=\"Company Logo\"\n [size]=\"100\"\n iconClass=\"mb-3\"></pw-clearbit-icon>\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 @if (data?.id) {\n <span>{{ data.name }}</span>\n }\n </h4>\n @if (isFormEdit && (userId === data?.owner?.id || hasAccess)) {\n <a href=\"#\"\n class=\"btn btn-sm btn-outline-primary float-end\"\n (click)=\"$event.preventDefault(); isFormEdit = !isFormEdit; this.getAllSubscriptionMembers()\">{{ 'Button.Edit' | transloco }}</a>\n }\n </div>\n @if (isFormEdit) {\n <div class=\"about-readview\">\n @if (data?.name || data?.company_url || data?.location || f['country'].value || data?.tel) {\n <h3 class=\"readview-section\">{{ 'Crm.AccountMessage.Section.Identity' | transloco }}</h3>\n <div class=\"row\">\n @if (data?.name) {\n <div class=\"col-12 readview-field\">\n <span class=\"label\">{{ 'Crm.AccountMessage.Name' | transloco }}</span>\n <p class=\"readview-value\">{{ data.name }}</p>\n </div>\n }\n @if (data?.company_url) {\n <div class=\"col-12 readview-field\">\n <span class=\"label\">{{ 'Crm.AccountMessage.CompanyUrl' | transloco }}</span>\n <a class=\"readview-value\" [href]=\"data.company_url\" target=\"blank\">{{ data.company_url }}</a>\n </div>\n }\n @if (data?.location) {\n <div class=\"col-12 readview-field\">\n <span class=\"label\">{{ 'Crm.AccountMessage.Location' | transloco }}</span>\n <p class=\"readview-value\">{{ data.location }}</p>\n </div>\n }\n @if (f['country'].value) {\n <div class=\"col-6 readview-field\">\n <span class=\"label\">{{ 'Crm.AccountMessage.Country' | transloco }}</span>\n @if (countries$ | async; as countries) {\n <p class=\"readview-value\">{{ labelFor(countries, f['country'].value, 'code', 'name') || f['country'].value }}</p>\n }\n </div>\n }\n @if (data?.tel) {\n <div class=\"col-6 readview-field\">\n <span class=\"label\">{{ 'Crm.AccountMessage.Tel' | transloco }}</span>\n <p class=\"readview-value\">{{ data.tel }}</p>\n </div>\n }\n </div>\n }\n @if (\n data?.owner_id || data?.status || data?.priority || data?.crm_source_id ||\n data?.organization_type_id || data?.organization_industry_id || data?.organization_size_id\n ) {\n <h3 class=\"readview-section\">{{ 'Crm.AccountMessage.Section.Classification' | transloco }}</h3>\n <div class=\"row\">\n @if (data?.owner_id) {\n <div class=\"col-12 readview-field\">\n <span class=\"label\">{{ 'Crm.AccountMessage.Owner' | transloco }}</span>\n <p class=\"readview-value\">{{ data?.owner?.first_name }} {{ data?.owner?.last_name }}</p>\n </div>\n }\n @if (data?.status) {\n <div class=\"col-6 readview-field\">\n <span class=\"label\">{{ 'Crm.AccountMessage.Status' | transloco }}</span>\n <p class=\"readview-value text-capitalize\">{{ data.status }}</p>\n </div>\n }\n @if (data?.priority) {\n <div class=\"col-6 readview-field\">\n <span class=\"label\">{{ 'Crm.AccountMessage.Priority' | transloco }}</span>\n <p class=\"readview-value text-capitalize\">{{ data.priority }}</p>\n </div>\n }\n @if (data?.crm_source_id) {\n <div class=\"col-6 readview-field\">\n <span class=\"label\">{{ 'Crm.AccountMessage.Source' | transloco }}</span>\n <p class=\"readview-value\">{{ labelFor(source, f['crm_source_id'].value, 'id', 'name') || '\u2014' }}</p>\n </div>\n }\n @if (data?.organization_type_id) {\n <div class=\"col-6 readview-field\">\n <span class=\"label\">{{ 'Organization.OrganizationType' | transloco }}</span>\n @if (organizationTypes$ | async; as types) {\n <p class=\"readview-value\">{{ labelFor(types['organization_types'], f['organization_type_id'].value) || '\u2014' }}</p>\n }\n </div>\n }\n @if (data?.organization_industry_id) {\n <div class=\"col-6 readview-field\">\n <span class=\"label\">{{ 'Organization.OrganizationIndustry' | transloco }}</span>\n @if (organizationIndustries$ | async; as industries) {\n <p class=\"readview-value\">{{ labelFor(industries['organization_industries'], f['organization_industry_id'].value) || '\u2014' }}</p>\n }\n </div>\n }\n @if (data?.organization_size_id) {\n <div class=\"col-6 readview-field\">\n <span class=\"label\">{{ 'Crm.AccountMessage.Size' | transloco }}</span>\n @if (organizationSizes$ | async; as sizes) {\n <p class=\"readview-value\">{{ labelFor(sizes['organization_sizes'], f['organization_size_id'].value) || '\u2014' }}</p>\n }\n </div>\n }\n </div>\n }\n @if (data?.description) {\n <h3 class=\"readview-section\">{{ 'Crm.AccountMessage.Section.About' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"col-12 readview-field\">\n <span class=\"label\">{{ 'Crm.AccountMessage.Description' | transloco }}</span>\n <p class=\"readview-value\">{{ data.description }}</p>\n </div>\n </div>\n }\n </div>\n } @else {\n <form [formGroup]=\"aboutControls\">\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"crm-account-info-name\">{{ 'Crm.AccountMessage.Name' | transloco }}</label>\n <input type=\"text\"\n id=\"crm-account-info-name\"\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 <span class=\"pw-label-style label mb-0\" id=\"crm-account-info-location-label\">{{\n 'Crm.AccountMessage.Location' | transloco\n }}</span>\n <input ngx-gp-autocomplete\n id=\"crm-account-info-location\"\n name=\"location\"\n [attr.aria-labelledby]=\"'crm-account-info-location-label'\"\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 @if (countries$ | async; as countries) {\n <div class=\"mb-3\">\n <span id=\"crm-account-info-country-label\" class=\"pw-label-style\">{{ 'Crm.AccountMessage.Country' | transloco\n }}<span class=\"text-danger required-icon\">*</span>\n </span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-country-label'\"\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-select>\n </div>\n }\n <div class=\"mb-3 ui-fluid skills-modal\">\n <span class=\"pw-label-style label mb-2\" id=\"crm-account-info-owner-label\">{{ 'Crm.AccountMessage.Owner' | transloco }}</span>\n <p-autoComplete\n appendTo=\"body\"\n [attr.aria-labelledby]=\"'crm-account-info-owner-label'\"\n [suggestions]=\"filteredOwner\"\n formControlName=\"owner_id\"\n dataKey=\"id\"\n optionLabel=\"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 <span class=\"label mb-0 d-block\" id=\"crm-account-info-company_url-label\">{{\n 'Crm.AccountMessage.CompanyUrl' | transloco\n }}</span>\n <input\n type=\"text\"\n id=\"crm-account-info-company_url\"\n class=\"form-control rounded-0 ps-1 user-value\"\n [attr.aria-labelledby]=\"'crm-account-info-company_url-label'\"\n formControlName=\"company_url\"\n [ngClass]=\"{ 'is-invalid': submitted && f['company_url'].errors }\" />\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"crm-account-info-tel\">{{ 'Crm.AccountMessage.Tel' | transloco }}</label>\n <input type=\"text\"\n id=\"crm-account-info-tel\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"tel\" />\n </div>\n @if (organizationTypes$ | async; as types) {\n <div class=\"mb-3\">\n <span id=\"crm-account-info-organization-type-label\" class=\"pw-label-style\">{{ 'Organization.OrganizationType' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-organization-type-label'\"\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-select>\n </div>\n }\n @if (organizationIndustries$ | async; as industries) {\n <div class=\"mb-3\">\n <span id=\"crm-account-info-industry-label\" class=\"pw-label-style\">{{ 'Organization.OrganizationIndustry' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-industry-label'\"\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-select>\n </div>\n }\n @if (organizationSizes$ | async; as sizes) {\n <div class=\"mb-3\">\n <span id=\"crm-account-info-size-label\" class=\"pw-label-style\">{{ 'Crm.AccountMessage.Size' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-size-label'\"\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-select>\n </div>\n }\n <div class=\"mb-3\">\n <span id=\"crm-account-info-status-label\" class=\"pw-label-style\">{{ 'Crm.AccountMessage.Status' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-status-label'\"\n [options]=\"status\"\n formControlName=\"status\"\n [ngClass]=\"{ 'is-invalid': submitted && f['status'].errors }\"\n [placeholder]=\"'Select Status'\">\n </p-select>\n </div>\n <div class=\"mb-3\">\n <span id=\"crm-account-info-priority-label\" class=\"pw-label-style\">{{ 'Crm.AccountMessage.Priority' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-priority-label'\"\n [options]=\"priority\"\n formControlName=\"priority\"\n [ngClass]=\"{ 'is-invalid': submitted && f['priority'].errors }\"\n [placeholder]=\"'Select Priority'\">\n </p-select>\n </div>\n <div class=\"mb-3\">\n <span id=\"crm-account-info-source-label\" class=\"pw-label-style\">{{ 'Crm.AccountMessage.Source' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-source-label'\"\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-select>\n </div>\n <div class=\"mb-3\">\n <pw-input-container [label]=\"'Crm.AccountMessage.Description' | transloco\"\n name=\"description\">\n <textarea rows=\"5\"\n type=\"text\"\n class=\"form-control\"\n formControlName=\"description\"\n id=\"description\"\n [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors }\"></textarea>\n </pw-input-container>\n </div>\n <div class=\"text-end form-action-buttons\">\n <input type=\"button\"\n class=\"btn btn-outline-default\"\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 }\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 <label for=\"crm-account-info-comment\" class=\"visually-hidden\">Note</label>\n <textarea id=\"crm-account-info-comment\"\n name=\"comment\"\n class=\"form-control\"\n formControlName=\"comment\"\n rows=\"6\"></textarea>\n @if (\n actionControls.get('comment').touched &&\n actionControls.get('comment').invalid\n ) {\n <p class=\"text-danger\"\n >\n Note Required\n </p>\n }\n @if (actions?.length) {\n <div\n class=\"d-block clear-both pt-3\">\n @for (action of actions; track action.id; let i = $index) {\n @if (action.visible) {\n <button\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 }\n }\n @if (submitAction && actionControls.get('crm_action_id').invalid) {\n <div class=\"text-danger\"\n >\n Please select an action\n </div>\n }\n <div class=\"row mt-3 align-items-center g-2\">\n <div class=\"col-12 col-sm-3\">\n <label for=\"crm-account-info-when\" class=\"visually-hidden\">Date</label>\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"crm-account-info-when\"\n name=\"when\"\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-12 col-sm ps-0\">\n <p-autoComplete inputId=\"crm-account-info-search-contact\"\n appendTo=\"body\"\n [suggestions]=\"filteredContact\"\n formControlName=\"crm_contact_id\"\n dataKey=\"id\"\n optionLabel=\"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-auto pe-0 completed-toggle\">\n <div class=\"d-flex align-items-center h-100\">\n <ui-switch\n [checkedLabel]=\"'Crm.Actions.Completed' | transloco\"\n [uncheckedLabel]=\"'Crm.Actions.Completed' | transloco\"\n [ariaLabel]=\"'Crm.Actions.Completed' | transloco\"\n [pTooltip]=\"'Crm.Actions.Tooltip.Completed' | transloco\"\n [appendTo]=\"'body'\"\n tooltipPosition=\"top\"\n formControlName=\"completed\"\n name=\"completed\">\n </ui-switch>\n </div>\n </div>\n <div class=\"col-12 col-sm-auto ms-sm-auto d-flex align-items-center gap-2 mt-2 mt-sm-0\">\n <a class=\"btn btn-outline-primary\"\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\">Submit Note</button>\n </div>\n </div>\n </div>\n }\n @if (buttonDisable) {\n <div\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 }\n </form>\n @if (!isLoaded) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n }\n @if (!accountComments?.length && isLoaded) {\n <div\n class=\"no-actions pt-2\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoActionsMessage' | transloco\">\n </pw-no-data>\n </div>\n }\n @if (accountComments?.length) {\n <div>\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 @for (\n item of accountComments; track\n item.id; let i = $index; let odd = $odd; let even = $even; let last = $last; let first = $first) {\n <li class=\"timeline-item\"\n [ngClass]=\"{ 'mt-5': odd || last }\"\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 card pb-0 position-static\">\n <div class=\"card-header\">\n <div class=\"mb-0 clearfix\">\n <textarea type=\"text\"\n [id]=\"'crm-account-timeline-comment-' + item.id\"\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 appendTo=\"body\"\n [suggestions]=\"filteredContactComment\"\n dataKey=\"id\"\n optionLabel=\"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 @if (\n !showFullComment || item.id !== commentId\n ) {\n <p class=\"float-start mb-0\"\n >\n {{ item.comment | slice: 0:170\n }}@if (item.comment.length > 170) {\n <a\n class=\"text-secondary\"\n (click)=\"\n showFullComment = true;\n commentId = item.id\n \">...show more\n </a>\n }\n </p>\n }\n @if (showFullComment && item.id === commentId) {\n <p class=\"float-start mb-0\"\n >\n {{ item.comment }}\n @if (\n item.comment.length > 170 &&\n showFullComment\n ) {\n <a\n (click)=\"showFullComment = false\"\n class=\"text-secondary\">...show less</a>\n }\n </p>\n }\n @if (userId === item.owner_id || hasAccess) {\n <button class=\"btn btn-md edit-btn float-end py-0\"\n (click)=\"showEditControls($event, item)\"\n >\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></i>\n </button>\n }\n </div>\n <div class=\"card-subtitle text-muted my-0 clearfix\">\n <div class=\"float-start owner-meta\">\n By {{ item.owner.first_name + ' ' + item.owner.last_name }} on\n @if (!updating || actionId !== item.id) {\n <span class=\"font-small-3\">{{ item.when }}</span>\n }\n @if (updating && actionId === item.id) {\n <input\n [id]=\"'crm-account-info-when-' + item.id\"\n name=\"when\"\n placeholder=\"dd-mmm-yyyy\"\n value=\"{{ item.when }}\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (focus)=\"d.toggle()\"\n (dateSelect)=\"onDateSelect($event, item)\"\n aria-label=\"Date\" />\n }\n </div>\n @if (userId === item.owner_id || hasAccess) {\n <button type=\" button\"\n class=\"btn btn-sm float-end when-btn py-0\"\n (click)=\"showDatePickerUpdate(item.id)\">\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></i>\n </button>\n }\n </div>\n @if (item.crm_contact) {\n <a class=\"text-secondary action-owner\"\n ngbTooltip=\"Related contact\"\n container=\"body\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.contactInfo,\n item.crm_contact.id\n ]\"><i class=\"fa fa-user\" aria-hidden=\"true\"></i>{{ item.crm_contact.first_name }}\n {{ item.crm_contact.last_name || '' }}</a>\n }\n <div class=\"action-row\">\n <span class=\"badge bg-primary\">{{\n item?.crm_action?.name\n }}</span>\n @if (\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n ) {\n <span\n class=\"badge bg-success ms-2\">Open</span>\n }\n @if (!item.cancelled && !item.completed) {\n <p [class.text-danger]=\"!item.color\"\n class=\"due-status mb-0\">\n {{ item.due }}\n </p>\n }\n <span class=\"action-icons\">\n @if (\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n ) {\n <a\n ngbTooltip=\"Set as completed\"\n aria-label=\"Set as completed\"\n class=\"me-3 ms-3\"\n href=\"#\"\n (click)=\"\n $event.preventDefault();\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 }\n @if (\n !item.cancelled &&\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n ) {\n <a\n ngbTooltip=\"Set as cancelled\"\n aria-label=\"Set as cancelled\"\n href=\"#\"\n (click)=\"$event.preventDefault(); setAsCancelled(item.id, item)\">\n <i\n class=\"fa fa-times delete-icon\"\n aria-hidden=\"true\"\n ></i>\n </a>\n }\n @if (\n item.completed &&\n (userId === item.owner_id || hasAccess)\n ) {\n <a\n ngbTooltip=\"Set as UnCompleted\"\n aria-label=\"Set as UnCompleted\"\n href=\"#\"\n (click)=\"\n $event.preventDefault();\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 }\n </span>\n </div>\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 }\n </ul>\n </div>\n </div>\n }\n </ng-template>\n </li>\n @if (canViewContactsTab()) {\n <li [ngbNavItem]=\"2\">\n <a ngbNavLink>Contacts</a>\n <ng-template ngbNavContent>\n <div class=\"row\">\n <div class=\"col-12 mb-3\">\n <a class=\"btn btn-sm btn-outline-primary float-end\"\n data-cy=\"add-contact\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.contactAdd,\n accountId\n ]\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.ContactMessage.AddContact' | transloco }}\n </a>\n </div>\n </div>\n <div class=\"primeng-datatable-container actions-collapsed 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 <label for=\"crm-account-info-contacts-search\" class=\"visually-hidden\">Search Contact</label>\n <p-iconfield iconPosition=\"left\">\n <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n <input type=\"text\"\n id=\"crm-account-info-contacts-search\"\n name=\"crm-account-info-contacts-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search contact...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n </p-iconfield>\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\" class=\"actions-list-three\">{{ '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 @if (contact?.last_logged_in_at) {\n <span [ngClass]=\"lastSeenAtTextClass(contact?.last_logged_in_at)\">\n {{ contact?.last_logged_in_at | dateFormat }}\n </span>\n }\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 @if (\n hasAccess ||\n contact.owner_id === userId ||\n contact.crm_account.owner_id === userId\n ) {\n <li\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 }\n @if (\n hasAccess ||\n contact.owner_id === userId ||\n contact.crm_account.owner_id === userId\n ) {\n <li\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 }\n @if (\n hasAccess ||\n contact.owner_id === userId ||\n contact.crm_account.owner_id === userId\n ) {\n <li\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 }\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n @if (totalRecords === 0 && totalRecordsUnFiltered !== 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n </pw-no-data>\n </div>\n }\n @if (totalRecords !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n }\n </div>\n @if (totalRecordsUnFiltered === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.ContactsAdminMessage' | transloco\">\n </pw-no-data>\n </div>\n }\n </ng-template>\n </li>\n }\n @if (hasAccess) {\n <li [ngbNavItem]=\"3\">\n <a ngbNavLink>Versioning</a>\n <ng-template ngbNavContent>\n @for (versioning of accountVersioning; track versioning.item_id) {\n <div>\n <p>\n <strong>Event: </strong>{{ versioning.event }} |\n <strong>Author: </strong>@if (versioning?.author) {\n <a\n [routerLink]=\"['/members', versioning?.author?.slug]\">{{ versioning?.author | ifNameNullShowEmail }}</a>\n }\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 }\n @if (accountVersioning?.length === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoVersionsMessage' | transloco\">\n </pw-no-data>\n </div>\n }\n </ng-template>\n </li>\n }\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 @if (hasAccess) {\n <li [ngbNavItem]=\"5\">\n <a ngbNavLink>Invoices</a>\n <ng-template ngbNavContent>\n <pw-smart-crm-account-invoices [accountId]=\"accountId\"/>\n </ng-template>\n </li>\n }\n </ul>\n <div [ngbNavOutlet]=\"nav\"></div>\n </div>\n </div>\n </div>\n}\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\" for=\"account-info-file-upload\">\n <input type=\"file\"\n id=\"account-info-file-upload\"\n name=\"account-info-file-upload\"\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 @for (f of files; track f.name; let i = $index) {\n <div class=\"upload-item\"\n >\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 @if (!f['uploaded']) {\n <span>{{ f.progress?.data?.percentage - 1 }}%\n </span>\n }\n @if (f['uploaded']) {\n <span>100 %</span>\n }\n @if (!f['uploaded']) {\n <span>Uploading...</span>\n }\n @if (f['uploaded']) {\n <span>Done</span>\n }\n </span>\n @if (f.progress?.data?.percentage !== 0 && !f['uploaded']) {\n <span class=\"speed-and-eta-text\"\n >\n <span>{{ f.progress?.data?.speedHuman }} </span>\n <span>ETA {{ f.progress?.data?.etaHuman }}</span>\n </span>\n }\n </div>\n </div>\n </div>\n }\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)}.timeline-card.card{border:1px solid #e2e5ea;border-radius:10px;box-shadow:0 1px 2px #1018280f}.timeline-card.card .card-header{padding:14px 16px 6px;background:transparent;border-bottom:0}.timeline-card.card .card-header p.float-start{font-size:14px;line-height:1.5}.timeline-card.card .due-status.text-danger{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:9999px;background:#fbecea;color:#b23a2c!important;font-size:12px;font-weight:600;line-height:1.2;border:1px solid #f3d4cf}.timeline-card.card .due-status.text-danger:before{content:\"\";width:6px;height:6px;border-radius:50%;background:#c0392b}.timeline-card.card .owner-meta{color:#5a6473;font-size:12px;font-weight:500}.timeline-card.card .owner-meta .font-small-3{color:#5a6473}.timeline-card.card .action-owner{display:inline-flex;align-items:center;gap:5px;margin-top:10px;color:#5a6473!important;font-size:12px;text-decoration:none}.timeline-card.card .action-owner i{font-size:11px;color:#a8afbc}.timeline-card.card .action-owner:hover{color:var(--first, #1769e1)!important}.timeline-card.card .badge{margin-top:10px;padding:4px 10px;border-radius:9999px;font-size:12px;font-weight:600;letter-spacing:0}.timeline-card.card .badge.bg-primary{background-color:#f1f3f6!important;color:#3d4654!important;border:1px solid #e2e5ea}.timeline-card.card .badge.bg-success{display:inline-flex;align-items:center;gap:6px;background-color:#e7f5ee!important;color:#1f7a47!important;border:1px solid #c9e9d6}.timeline-card.card .badge.bg-success:before{content:\"\";width:6px;height:6px;border-radius:50%;background:#1f9d57}.timeline-card.card .action-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}.timeline-card.card .action-row .badge,.timeline-card.card .action-row .due-status{margin:0!important}.timeline-card.card .action-icons{display:inline-flex;align-items:center;gap:14px;margin-left:auto}.timeline-card.card .action-icons a{margin:0!important}.timeline-card.card .edit-icon{color:#7c8696;transition:color .15s ease}.timeline-card.card .edit-btn:hover .edit-icon,.timeline-card.card .when-btn:hover .edit-icon{color:var(--first, #1769e1)}.timeline-card.card .completed{color:#1f9d57}.timeline-card.card .delete-icon{color:#c0392b}.timeline-badge .bg-red.bg-lighten-1{background-color:#fbeae8!important}.timeline-badge .bg-red.bg-lighten-1 .timeline-year,.timeline-badge .bg-red.bg-lighten-1 .date-year{color:#c0392b!important}.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}.user-info .about-readview{padding:4px 8px 8px}.user-info .about-readview .row{--bs-gutter-x: 1rem}.user-info .about-readview .readview-section{display:block;margin:24px 0 14px;padding-top:18px;border-top:1px solid #e2e5ea;color:#5a6473;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}.user-info .about-readview .readview-section:first-of-type{margin-top:4px;padding-top:0;border-top:0}.user-info .about-readview .readview-field{margin-bottom:20px}.user-info .about-readview .label{display:block;margin-bottom:4px;color:#7c8696;font-size:12px;font-weight:500;text-transform:none}.user-info .about-readview .readview-value{max-width:100%;margin:0;color:#272e38;font-size:14px;font-weight:500;line-height:1.4;word-break:break-word}.user-info .about-readview a.readview-value{color:var(--first, #1769e1);text-decoration:none}.user-info .about-readview a.readview-value:hover{text-decoration:underline}.user-info .about-readview .badge{font-weight:500}.control-btns{display:none}::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 p-select,.isDisabled p-autocomplete,.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}.completed-toggle ::ng-deep .switch-label-checked,.completed-toggle ::ng-deep .switch-label-unchecked{font-size:11px!important;letter-spacing:.3px;text-transform:none}@media(max-width:575.98px){.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"] }]
|
|
1315
|
+
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 @if (!isDataLoaded) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner> </p-progressSpinner>\n </div>\n }\n @if (isDataLoaded) {\n <div>\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 <pw-clearbit-icon [src]=\"data?.company_url\"\n [name]=\"data?.name\"\n altText=\"Company Logo\"\n [size]=\"100\"\n iconClass=\"mb-3\"></pw-clearbit-icon>\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 @if (data?.id) {\n <span>{{ data.name }}</span>\n }\n </h4>\n @if (isFormEdit && (userId === data?.owner?.id || hasAccess)) {\n <a href=\"#\"\n class=\"btn btn-sm btn-outline-primary float-end\"\n (click)=\"$event.preventDefault(); isFormEdit = !isFormEdit; this.getAllSubscriptionMembers()\">{{ 'Button.Edit' | transloco }}</a>\n }\n </div>\n @if (isFormEdit) {\n <div class=\"about-readview\">\n @if (data?.name || data?.company_url || data?.location || f['country'].value || data?.tel) {\n <h3 class=\"readview-section\">{{ 'Crm.AccountMessage.Section.Identity' | transloco }}</h3>\n <div class=\"row\">\n @if (data?.name) {\n <div class=\"col-12 readview-field\">\n <span class=\"label\">{{ 'Crm.AccountMessage.Name' | transloco }}</span>\n <p class=\"readview-value\">{{ data.name }}</p>\n </div>\n }\n @if (data?.company_url) {\n <div class=\"col-12 readview-field\">\n <span class=\"label\">{{ 'Crm.AccountMessage.CompanyUrl' | transloco }}</span>\n <a class=\"readview-value\" [href]=\"data.company_url\" target=\"blank\">{{ data.company_url }}</a>\n </div>\n }\n @if (data?.location) {\n <div class=\"col-12 readview-field\">\n <span class=\"label\">{{ 'Crm.AccountMessage.Location' | transloco }}</span>\n <p class=\"readview-value\">{{ data.location }}</p>\n </div>\n }\n @if (f['country'].value) {\n <div class=\"col-6 readview-field\">\n <span class=\"label\">{{ 'Crm.AccountMessage.Country' | transloco }}</span>\n @if (countries$ | async; as countries) {\n <p class=\"readview-value\">{{ labelFor(countries, f['country'].value, 'code', 'name') || f['country'].value }}</p>\n }\n </div>\n }\n @if (data?.tel) {\n <div class=\"col-6 readview-field\">\n <span class=\"label\">{{ 'Crm.AccountMessage.Tel' | transloco }}</span>\n <p class=\"readview-value\">{{ data.tel }}</p>\n </div>\n }\n </div>\n }\n @if (\n data?.owner_id || data?.status || data?.priority || data?.crm_source_id ||\n data?.organization_type_id || data?.organization_industry_id || data?.organization_size_id\n ) {\n <h3 class=\"readview-section\">{{ 'Crm.AccountMessage.Section.Classification' | transloco }}</h3>\n <div class=\"row\">\n @if (data?.owner_id) {\n <div class=\"col-12 readview-field\">\n <span class=\"label\">{{ 'Crm.AccountMessage.Owner' | transloco }}</span>\n <p class=\"readview-value\">{{ data?.owner?.first_name }} {{ data?.owner?.last_name }}</p>\n </div>\n }\n @if (data?.status) {\n <div class=\"col-6 readview-field\">\n <span class=\"label\">{{ 'Crm.AccountMessage.Status' | transloco }}</span>\n <p class=\"readview-value text-capitalize\">{{ data.status }}</p>\n </div>\n }\n @if (data?.priority) {\n <div class=\"col-6 readview-field\">\n <span class=\"label\">{{ 'Crm.AccountMessage.Priority' | transloco }}</span>\n <p class=\"readview-value text-capitalize\">{{ data.priority }}</p>\n </div>\n }\n @if (data?.crm_source_id) {\n <div class=\"col-6 readview-field\">\n <span class=\"label\">{{ 'Crm.AccountMessage.Source' | transloco }}</span>\n <p class=\"readview-value\">{{ labelFor(source, f['crm_source_id'].value, 'id', 'name') || '\u2014' }}</p>\n </div>\n }\n @if (data?.organization_type_id) {\n <div class=\"col-6 readview-field\">\n <span class=\"label\">{{ 'Organization.OrganizationType' | transloco }}</span>\n @if (organizationTypes$ | async; as types) {\n <p class=\"readview-value\">{{ labelFor(types['organization_types'], f['organization_type_id'].value) || '\u2014' }}</p>\n }\n </div>\n }\n @if (data?.organization_industry_id) {\n <div class=\"col-6 readview-field\">\n <span class=\"label\">{{ 'Organization.OrganizationIndustry' | transloco }}</span>\n @if (organizationIndustries$ | async; as industries) {\n <p class=\"readview-value\">{{ labelFor(industries['organization_industries'], f['organization_industry_id'].value) || '\u2014' }}</p>\n }\n </div>\n }\n @if (data?.organization_size_id) {\n <div class=\"col-6 readview-field\">\n <span class=\"label\">{{ 'Crm.AccountMessage.Size' | transloco }}</span>\n @if (organizationSizes$ | async; as sizes) {\n <p class=\"readview-value\">{{ labelFor(sizes['organization_sizes'], f['organization_size_id'].value) || '\u2014' }}</p>\n }\n </div>\n }\n </div>\n }\n @if (data?.description) {\n <h3 class=\"readview-section\">{{ 'Crm.AccountMessage.Section.About' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"col-12 readview-field\">\n <span class=\"label\">{{ 'Crm.AccountMessage.Description' | transloco }}</span>\n <p class=\"readview-value\">{{ data.description }}</p>\n </div>\n </div>\n }\n </div>\n } @else {\n <form [formGroup]=\"aboutControls\">\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"crm-account-info-name\">{{ 'Crm.AccountMessage.Name' | transloco }}</label>\n <input type=\"text\"\n id=\"crm-account-info-name\"\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 <span class=\"pw-label-style label mb-0\" id=\"crm-account-info-location-label\">{{\n 'Crm.AccountMessage.Location' | transloco\n }}</span>\n <input ngx-gp-autocomplete\n id=\"crm-account-info-location\"\n name=\"location\"\n [attr.aria-labelledby]=\"'crm-account-info-location-label'\"\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 @if (countries$ | async; as countries) {\n <div class=\"mb-3\">\n <span id=\"crm-account-info-country-label\" class=\"pw-label-style\">{{ 'Crm.AccountMessage.Country' | transloco\n }}<span class=\"text-danger required-icon\">*</span>\n </span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-country-label'\"\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-select>\n </div>\n }\n <div class=\"mb-3 ui-fluid skills-modal\">\n <span class=\"pw-label-style label mb-2\" id=\"crm-account-info-owner-label\">{{ 'Crm.AccountMessage.Owner' | transloco }}</span>\n <p-autoComplete\n appendTo=\"body\"\n [attr.aria-labelledby]=\"'crm-account-info-owner-label'\"\n [suggestions]=\"filteredOwner\"\n formControlName=\"owner_id\"\n dataKey=\"id\"\n optionLabel=\"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 <span class=\"label mb-0 d-block\" id=\"crm-account-info-company_url-label\">{{\n 'Crm.AccountMessage.CompanyUrl' | transloco\n }}</span>\n <input\n type=\"text\"\n id=\"crm-account-info-company_url\"\n class=\"form-control rounded-0 ps-1 user-value\"\n [attr.aria-labelledby]=\"'crm-account-info-company_url-label'\"\n formControlName=\"company_url\"\n [ngClass]=\"{ 'is-invalid': submitted && f['company_url'].errors }\" />\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"crm-account-info-tel\">{{ 'Crm.AccountMessage.Tel' | transloco }}</label>\n <input type=\"text\"\n id=\"crm-account-info-tel\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"tel\" />\n </div>\n @if (organizationTypes$ | async; as types) {\n <div class=\"mb-3\">\n <span id=\"crm-account-info-organization-type-label\" class=\"pw-label-style\">{{ 'Organization.OrganizationType' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-organization-type-label'\"\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-select>\n </div>\n }\n @if (organizationIndustries$ | async; as industries) {\n <div class=\"mb-3\">\n <span id=\"crm-account-info-industry-label\" class=\"pw-label-style\">{{ 'Organization.OrganizationIndustry' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-industry-label'\"\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-select>\n </div>\n }\n @if (organizationSizes$ | async; as sizes) {\n <div class=\"mb-3\">\n <span id=\"crm-account-info-size-label\" class=\"pw-label-style\">{{ 'Crm.AccountMessage.Size' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-size-label'\"\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-select>\n </div>\n }\n <div class=\"mb-3\">\n <span id=\"crm-account-info-status-label\" class=\"pw-label-style\">{{ 'Crm.AccountMessage.Status' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-status-label'\"\n [options]=\"status\"\n formControlName=\"status\"\n [ngClass]=\"{ 'is-invalid': submitted && f['status'].errors }\"\n [placeholder]=\"'Select Status'\">\n </p-select>\n </div>\n <div class=\"mb-3\">\n <span id=\"crm-account-info-priority-label\" class=\"pw-label-style\">{{ 'Crm.AccountMessage.Priority' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-priority-label'\"\n [options]=\"priority\"\n formControlName=\"priority\"\n [ngClass]=\"{ 'is-invalid': submitted && f['priority'].errors }\"\n [placeholder]=\"'Select Priority'\">\n </p-select>\n </div>\n <div class=\"mb-3\">\n <span id=\"crm-account-info-source-label\" class=\"pw-label-style\">{{ 'Crm.AccountMessage.Source' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-source-label'\"\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-select>\n </div>\n <div class=\"mb-3\">\n <pw-input-container [label]=\"'Crm.AccountMessage.Description' | transloco\"\n name=\"description\">\n <textarea rows=\"5\"\n type=\"text\"\n class=\"form-control\"\n formControlName=\"description\"\n id=\"description\"\n [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors }\"></textarea>\n </pw-input-container>\n </div>\n <div class=\"text-end form-action-buttons\">\n <input type=\"button\"\n class=\"btn btn-outline-default\"\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 }\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 <label for=\"crm-account-info-comment\" class=\"visually-hidden\">Note</label>\n <textarea id=\"crm-account-info-comment\"\n name=\"comment\"\n class=\"form-control\"\n formControlName=\"comment\"\n rows=\"6\"></textarea>\n @if (\n actionControls.get('comment').touched &&\n actionControls.get('comment').invalid\n ) {\n <p class=\"text-danger\"\n >\n Note Required\n </p>\n }\n @if (actions?.length) {\n <div\n class=\"d-block clear-both pt-3\">\n @for (action of actions; track action.id; let i = $index) {\n @if (action.visible) {\n <button\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 }\n }\n @if (submitAction && actionControls.get('crm_action_id').invalid) {\n <div class=\"text-danger\"\n >\n Please select an action\n </div>\n }\n <div class=\"row mt-3 align-items-center g-2\">\n <div class=\"col-12 col-sm-3\">\n <label for=\"crm-account-info-when\" class=\"visually-hidden\">Date</label>\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"crm-account-info-when\"\n name=\"when\"\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-12 col-sm-3 ps-0\">\n <p-autoComplete inputId=\"crm-account-info-search-contact\"\n appendTo=\"body\"\n [suggestions]=\"filteredContact\"\n formControlName=\"crm_contact_id\"\n dataKey=\"id\"\n optionLabel=\"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-auto pe-0 completed-toggle\">\n <div class=\"d-flex align-items-center h-100\">\n <ui-switch\n [checkedLabel]=\"'Crm.Actions.Completed' | transloco\"\n [uncheckedLabel]=\"'Crm.Actions.Completed' | transloco\"\n [ariaLabel]=\"'Crm.Actions.Completed' | transloco\"\n [pTooltip]=\"'Crm.Actions.Tooltip.Completed' | transloco\"\n [appendTo]=\"'body'\"\n tooltipPosition=\"top\"\n formControlName=\"completed\"\n name=\"completed\">\n </ui-switch>\n </div>\n </div>\n <div class=\"col-12 d-flex justify-content-end align-items-center gap-2 mt-2\">\n <a class=\"btn btn-outline-primary\"\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\">Submit Note</button>\n </div>\n </div>\n </div>\n }\n @if (buttonDisable) {\n <div\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 }\n </form>\n @if (!isLoaded) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n }\n @if (!accountComments?.length && isLoaded) {\n <div\n class=\"no-actions pt-2\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoActionsMessage' | transloco\">\n </pw-no-data>\n </div>\n }\n @if (accountComments?.length) {\n <div>\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 @for (\n item of accountComments; track\n item.id; let i = $index; let odd = $odd; let even = $even; let last = $last; let first = $first) {\n <li class=\"timeline-item\"\n [ngClass]=\"{ 'mt-5': odd || last }\"\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 card pb-0 position-static\">\n <div class=\"card-header\">\n <div class=\"mb-0 clearfix\">\n <textarea type=\"text\"\n [id]=\"'crm-account-timeline-comment-' + item.id\"\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 appendTo=\"body\"\n [suggestions]=\"filteredContactComment\"\n dataKey=\"id\"\n optionLabel=\"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 @if (\n !showFullComment || item.id !== commentId\n ) {\n <p class=\"float-start mb-0\"\n >\n {{ item.comment | slice: 0:170\n }}@if (item.comment.length > 170) {\n <a\n class=\"text-secondary\"\n (click)=\"\n showFullComment = true;\n commentId = item.id\n \">...show more\n </a>\n }\n </p>\n }\n @if (showFullComment && item.id === commentId) {\n <p class=\"float-start mb-0\"\n >\n {{ item.comment }}\n @if (\n item.comment.length > 170 &&\n showFullComment\n ) {\n <a\n (click)=\"showFullComment = false\"\n class=\"text-secondary\">...show less</a>\n }\n </p>\n }\n @if (userId === item.owner_id || hasAccess) {\n <button class=\"btn btn-md edit-btn float-end py-0\"\n (click)=\"showEditControls($event, item)\"\n >\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></i>\n </button>\n }\n </div>\n <div class=\"card-subtitle text-muted my-0 clearfix\">\n <div class=\"float-start owner-meta\">\n By {{ item.owner.first_name + ' ' + item.owner.last_name }} on\n @if (!updating || actionId !== item.id) {\n <span class=\"font-small-3\">{{ item.when }}</span>\n }\n @if (updating && actionId === item.id) {\n <input\n [id]=\"'crm-account-info-when-' + item.id\"\n name=\"when\"\n placeholder=\"dd-mmm-yyyy\"\n value=\"{{ item.when }}\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (focus)=\"d.toggle()\"\n (dateSelect)=\"onDateSelect($event, item)\"\n aria-label=\"Date\" />\n }\n </div>\n @if (userId === item.owner_id || hasAccess) {\n <button type=\" button\"\n class=\"btn btn-sm float-end when-btn py-0\"\n (click)=\"showDatePickerUpdate(item.id)\">\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></i>\n </button>\n }\n </div>\n @if (item.crm_contact) {\n <a class=\"text-secondary action-owner\"\n ngbTooltip=\"Related contact\"\n container=\"body\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.contactInfo,\n item.crm_contact.id\n ]\"><i class=\"fa fa-user\" aria-hidden=\"true\"></i>{{ item.crm_contact.first_name }}\n {{ item.crm_contact.last_name || '' }}</a>\n }\n <div class=\"action-row\">\n <span class=\"badge bg-primary\">{{\n item?.crm_action?.name\n }}</span>\n @if (\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n ) {\n <span\n class=\"badge bg-success ms-2\">Open</span>\n }\n @if (!item.cancelled && !item.completed) {\n <p [class.text-danger]=\"!item.color\"\n class=\"due-status mb-0\">\n {{ item.due }}\n </p>\n }\n <span class=\"action-icons\">\n @if (\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n ) {\n <a\n ngbTooltip=\"Set as completed\"\n aria-label=\"Set as completed\"\n class=\"me-3 ms-3\"\n href=\"#\"\n (click)=\"\n $event.preventDefault();\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 }\n @if (\n !item.cancelled &&\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n ) {\n <a\n ngbTooltip=\"Set as cancelled\"\n aria-label=\"Set as cancelled\"\n href=\"#\"\n (click)=\"$event.preventDefault(); setAsCancelled(item.id, item)\">\n <i\n class=\"fa fa-times delete-icon\"\n aria-hidden=\"true\"\n ></i>\n </a>\n }\n @if (\n item.completed &&\n (userId === item.owner_id || hasAccess)\n ) {\n <a\n ngbTooltip=\"Set as UnCompleted\"\n aria-label=\"Set as UnCompleted\"\n href=\"#\"\n (click)=\"\n $event.preventDefault();\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 }\n </span>\n </div>\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 }\n </ul>\n </div>\n </div>\n }\n </ng-template>\n </li>\n @if (canViewContactsTab()) {\n <li [ngbNavItem]=\"2\">\n <a ngbNavLink>Contacts</a>\n <ng-template ngbNavContent>\n <div class=\"row\">\n <div class=\"col-12 mb-3\">\n <a class=\"btn btn-sm btn-outline-primary float-end\"\n data-cy=\"add-contact\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.contactAdd,\n accountId\n ]\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.ContactMessage.AddContact' | transloco }}\n </a>\n </div>\n </div>\n <div class=\"primeng-datatable-container actions-collapsed 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 <label for=\"crm-account-info-contacts-search\" class=\"visually-hidden\">Search Contact</label>\n <p-iconfield iconPosition=\"left\">\n <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n <input type=\"text\"\n id=\"crm-account-info-contacts-search\"\n name=\"crm-account-info-contacts-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search contact...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n </p-iconfield>\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\" class=\"actions-list-three\">{{ '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 @if (contact?.last_logged_in_at) {\n <span [ngClass]=\"lastSeenAtTextClass(contact?.last_logged_in_at)\">\n {{ contact?.last_logged_in_at | dateFormat }}\n </span>\n }\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 @if (\n hasAccess ||\n contact.owner_id === userId ||\n contact.crm_account.owner_id === userId\n ) {\n <li\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 }\n @if (\n hasAccess ||\n contact.owner_id === userId ||\n contact.crm_account.owner_id === userId\n ) {\n <li\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 }\n @if (\n hasAccess ||\n contact.owner_id === userId ||\n contact.crm_account.owner_id === userId\n ) {\n <li\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 }\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n @if (totalRecords === 0 && totalRecordsUnFiltered !== 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n </pw-no-data>\n </div>\n }\n @if (totalRecords !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n }\n </div>\n @if (totalRecordsUnFiltered === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.ContactsAdminMessage' | transloco\">\n </pw-no-data>\n </div>\n }\n </ng-template>\n </li>\n }\n @if (hasAccess) {\n <li [ngbNavItem]=\"3\">\n <a ngbNavLink>Versioning</a>\n <ng-template ngbNavContent>\n @for (versioning of accountVersioning; track versioning.item_id) {\n <div>\n <p>\n <strong>Event: </strong>{{ versioning.event }} |\n <strong>Author: </strong>@if (versioning?.author) {\n <a\n [routerLink]=\"['/members', versioning?.author?.slug]\">{{ versioning?.author | ifNameNullShowEmail }}</a>\n }\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 }\n @if (accountVersioning?.length === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoVersionsMessage' | transloco\">\n </pw-no-data>\n </div>\n }\n </ng-template>\n </li>\n }\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 @if (hasAccess) {\n <li [ngbNavItem]=\"5\">\n <a ngbNavLink>Invoices</a>\n <ng-template ngbNavContent>\n <pw-smart-crm-account-invoices [accountId]=\"accountId\"/>\n </ng-template>\n </li>\n }\n </ul>\n <div [ngbNavOutlet]=\"nav\"></div>\n </div>\n </div>\n </div>\n}\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\" for=\"account-info-file-upload\">\n <input type=\"file\"\n id=\"account-info-file-upload\"\n name=\"account-info-file-upload\"\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 @for (f of files; track f.name; let i = $index) {\n <div class=\"upload-item\"\n >\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 @if (!f['uploaded']) {\n <span>{{ f.progress?.data?.percentage - 1 }}%\n </span>\n }\n @if (f['uploaded']) {\n <span>100 %</span>\n }\n @if (!f['uploaded']) {\n <span>Uploading...</span>\n }\n @if (f['uploaded']) {\n <span>Done</span>\n }\n </span>\n @if (f.progress?.data?.percentage !== 0 && !f['uploaded']) {\n <span class=\"speed-and-eta-text\"\n >\n <span>{{ f.progress?.data?.speedHuman }} </span>\n <span>ETA {{ f.progress?.data?.etaHuman }}</span>\n </span>\n }\n </div>\n </div>\n </div>\n }\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)}.timeline-card.card{border:1px solid #e2e5ea;border-radius:10px;box-shadow:0 1px 2px #1018280f}.timeline-card.card .card-header{padding:14px 16px 6px;background:transparent;border-bottom:0}.timeline-card.card .card-header p.float-start{font-size:14px;line-height:1.5}.timeline-card.card .due-status.text-danger{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:9999px;background:#fbecea;color:#b23a2c!important;font-size:12px;font-weight:600;line-height:1.2;border:1px solid #f3d4cf}.timeline-card.card .due-status.text-danger:before{content:\"\";width:6px;height:6px;border-radius:50%;background:#c0392b}.timeline-card.card .owner-meta{color:#5a6473;font-size:12px;font-weight:500}.timeline-card.card .owner-meta .font-small-3{color:#5a6473}.timeline-card.card .action-owner{display:inline-flex;align-items:center;gap:5px;margin-top:10px;color:#5a6473!important;font-size:12px;text-decoration:none}.timeline-card.card .action-owner i{font-size:11px;color:#a8afbc}.timeline-card.card .action-owner:hover{color:var(--first, #1769e1)!important}.timeline-card.card .badge{margin-top:10px;padding:4px 10px;border-radius:9999px;font-size:12px;font-weight:600;letter-spacing:0}.timeline-card.card .badge.bg-primary{background-color:#f1f3f6!important;color:#3d4654!important;border:1px solid #e2e5ea}.timeline-card.card .badge.bg-success{display:inline-flex;align-items:center;gap:6px;background-color:#e7f5ee!important;color:#1f7a47!important;border:1px solid #c9e9d6}.timeline-card.card .badge.bg-success:before{content:\"\";width:6px;height:6px;border-radius:50%;background:#1f9d57}.timeline-card.card .action-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}.timeline-card.card .action-row .badge,.timeline-card.card .action-row .due-status{margin:0!important}.timeline-card.card .action-icons{display:inline-flex;align-items:center;gap:14px;margin-left:auto}.timeline-card.card .action-icons a{margin:0!important}.timeline-card.card .edit-icon{color:#7c8696;transition:color .15s ease}.timeline-card.card .edit-btn:hover .edit-icon,.timeline-card.card .when-btn:hover .edit-icon{color:var(--first, #1769e1)}.timeline-card.card .completed{color:#1f9d57}.timeline-card.card .delete-icon{color:#c0392b}.timeline-badge .bg-red.bg-lighten-1{background-color:#fbeae8!important}.timeline-badge .bg-red.bg-lighten-1 .timeline-year,.timeline-badge .bg-red.bg-lighten-1 .date-year{color:#c0392b!important}.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}.user-info .about-readview{padding:4px 8px 8px}.user-info .about-readview .row{--bs-gutter-x: 1rem}.user-info .about-readview .readview-section{display:block;margin:24px 0 14px;padding-top:18px;border-top:1px solid #e2e5ea;color:#5a6473;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}.user-info .about-readview .readview-section:first-of-type{margin-top:4px;padding-top:0;border-top:0}.user-info .about-readview .readview-field{margin-bottom:20px}.user-info .about-readview .label{display:block;margin-bottom:4px;color:#7c8696;font-size:12px;font-weight:500;text-transform:none}.user-info .about-readview .readview-value{max-width:100%;margin:0;color:#272e38;font-size:14px;font-weight:500;line-height:1.4;word-break:break-word}.user-info .about-readview a.readview-value{color:var(--first, #1769e1);text-decoration:none}.user-info .about-readview a.readview-value:hover{text-decoration:underline}.user-info .about-readview .badge{font-weight:500}.control-btns{display:none}::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 p-select,.isDisabled p-autocomplete,.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}.completed-toggle ::ng-deep .switch-label-checked,.completed-toggle ::ng-deep .switch-label-unchecked{font-size:11px!important;letter-spacing:.3px;text-transform:none}@media(max-width:575.98px){.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"] }]
|
|
1316
1316
|
}], 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: Document, decorators: [{
|
|
1317
1317
|
type: Inject,
|
|
1318
1318
|
args: [DOCUMENT]
|
|
@@ -3301,11 +3301,11 @@ class SmartCrmContactInfoComponent extends AppBaseComponent {
|
|
|
3301
3301
|
super.ngOnDestroy();
|
|
3302
3302
|
}
|
|
3303
3303
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SmartCrmContactInfoComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }, { token: i2$2.NgbCalendar }, { token: i2$2.NgbModal }, { token: i2.AuthService }, { token: i2.GeoService }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3304
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: SmartCrmContactInfoComponent, isStandalone: false, selector: "pw-smart-crm-contact-info", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12 mb-0\">\n <div class=\"me-auto mb-0\">\n <h2 class=\"mb-0\">\n <a 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 Contact Info\n </h2>\n </div>\n <a class=\"btn btn-sm btn-outline-primary float-end mb-3\"\n data-cy=\"add-opportunities\"\n (click)=\"navigateToOpportunities()\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n </a>\n </div>\n @if (!isDataLoaded) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner> </p-progressSpinner>\n </div>\n }\n @if (isDataLoaded) {\n <div>\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 <pw-clearbit-icon [name]=\"data | ifNameNullShowEmail\"\n altText=\"Contact\"\n [size]=\"100\"\n iconClass=\"mb-3\"></pw-clearbit-icon>\n </a>\n </div>\n <div class=\"mb-4 d-flex justify-content-between align-items-center\">\n <h4 class=\"d-inline-block\">\n About @if (data?.id) {\n <span>{{ data | ifNameNullShowEmail }}</span>\n }\n </h4>\n @if (isFormEdit) {\n <a href=\"#\"\n class=\"btn btn-sm btn-outline-primary float-end\"\n (click)=\"$event.preventDefault(); isFormEdit = !isFormEdit\">Edit</a>\n }\n </div>\n @if (isFormEdit) {\n <div class=\"about-readview\">\n @if (data?.first_name || data?.last_name || data?.headline) {\n <h3 class=\"readview-section\">{{ 'Crm.ContactMessage.Section.Identity' | transloco }}</h3>\n <div class=\"row\">\n @if (data?.first_name) {\n <div class=\"col-6 readview-field\">\n <span class=\"label\">{{ 'Crm.ContactMessage.FirstName' | transloco }}</span>\n <p class=\"readview-value\">{{ data.first_name }}</p>\n </div>\n }\n @if (data?.last_name) {\n <div class=\"col-6 readview-field\">\n <span class=\"label\">{{ 'Crm.ContactMessage.LastName' | transloco }}</span>\n <p class=\"readview-value\">{{ data.last_name }}</p>\n </div>\n }\n @if (data?.headline) {\n <div class=\"col-12 readview-field\">\n <span class=\"label\">{{ 'Crm.ContactMessage.Headline' | transloco }}</span>\n <p class=\"readview-value\">{{ data.headline }}</p>\n </div>\n }\n </div>\n }\n @if (\n data?.email || data?.tel || data?.crm_account_id ||\n data?.linkedin_url || f['location'].value || f['country'].value\n ) {\n <h3 class=\"readview-section\">{{ 'Crm.ContactMessage.Section.Contact' | transloco }}</h3>\n <div class=\"row\">\n @if (data?.email) {\n <div class=\"col-12 readview-field\">\n <span class=\"label\">{{ 'Crm.ContactMessage.Email' | transloco }}</span>\n <a class=\"readview-value\" href=\"mailTo:{{ data.email }}\">{{ data.email }}</a>\n </div>\n }\n @if (data?.crm_account_id) {\n <div class=\"col-12 readview-field\">\n <span class=\"label\">{{ 'Crm.ContactMessage.Account' | transloco }}</span>\n <a class=\"readview-value\"\n [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, data.crm_account_id]\"\n >{{ f['crm_account_id'].value?.name }}</a>\n </div>\n }\n @if (data?.linkedin_url) {\n <div class=\"col-12 readview-field\">\n <span class=\"label\">{{ 'Crm.ContactMessage.LinkedInUrl' | transloco }}</span>\n <a class=\"readview-value\" [href]=\"data.linkedin_url\" target=\"blank\">{{ data.linkedin_url }}</a>\n </div>\n }\n @if (f['location'].value) {\n <div class=\"col-12 readview-field\">\n <span class=\"label\">{{ 'Crm.AccountMessage.Location' | transloco }}</span>\n <p class=\"readview-value\">{{ f['location'].value }}</p>\n </div>\n }\n @if (f['country'].value) {\n <div class=\"col-6 readview-field\">\n <span class=\"label\">{{ 'Crm.AccountMessage.Country' | transloco }}</span>\n @if (countries$ | async; as countries) {\n <p class=\"readview-value\">{{ labelFor(countries, f['country'].value, 'code', 'name') || f['country'].value }}</p>\n }\n </div>\n }\n @if (data?.tel) {\n <div class=\"col-6 readview-field\">\n <span class=\"label\">{{ 'Crm.ContactMessage.Tel' | transloco }}</span>\n <p class=\"readview-value\">{{ data.tel }}</p>\n </div>\n }\n </div>\n }\n @if (data?.potential || data?.labels?.length) {\n <h3 class=\"readview-section\">{{ 'Crm.ContactMessage.Section.Classification' | transloco }}</h3>\n <div class=\"row\">\n @if (data?.potential) {\n <div class=\"col-6 readview-field\">\n <span class=\"label\">{{ 'Crm.ContactMessage.Potential' | transloco }}</span>\n <p class=\"readview-value text-capitalize\">{{ data.potential }}</p>\n </div>\n }\n @if (data?.labels?.length) {\n <div class=\"col-12 readview-field\">\n <span class=\"label\">{{ 'Crm.ContactMessage.Labels' | transloco }}</span>\n <div class=\"readview-value\">\n @for (label of data.labels; track label) {\n <span class=\"badge bg-secondary me-1 mb-1\">{{ label }}</span>\n }\n </div>\n </div>\n }\n </div>\n }\n </div>\n } @else {\n <form [formGroup]=\"aboutControls\">\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"input_first_name_1\">{{\n 'Crm.ContactMessage.FirstName' | transloco\n }}</label>\n <input type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"first_name\"\n [ngClass]=\"{ 'is-invalid': submitted && f['first_name'].errors }\" id=\"input_first_name_1\" name=\"input_first_name_1\"/>\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"input_last_name_2\">{{\n 'Crm.ContactMessage.LastName' | transloco\n }}</label>\n <input type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"last_name\"\n [ngClass]=\"{ 'is-invalid': submitted && f['last_name'].errors }\" id=\"input_last_name_2\" name=\"input_last_name_2\"/>\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"crm-contact-info-location\">{{\n 'Crm.AccountMessage.Location' | transloco\n }}</label>\n <input ngx-gp-autocomplete\n id=\"crm-contact-info-location\"\n name=\"location\"\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 @if (countries$ | async; as countries) {\n <div class=\"mb-3\">\n <span id=\"crm-contact-info-country-label\">{{ 'Crm.AccountMessage.Country' | transloco\n }}<span class=\"text-danger required-icon\">*</span>\n </span>\n <p-select\n [attr.aria-labelledby]=\"'crm-contact-info-country-label'\"\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-select>\n </div>\n }\n <div class=\"mb-3 ui-fluid skills-modal\">\n <span class=\"label mb-2 d-block\" id=\"crm-contact-info-account-label\">{{ 'Crm.ContactMessage.Account' | transloco }}\n </span>\n <p-autoComplete appendTo=\"body\"\n [attr.aria-labelledby]=\"'crm-contact-info-account-label'\"\n [suggestions]=\"filteredAccounts\"\n formControlName=\"crm_account_id\"\n dataKey=\"id\"\n optionLabel=\"name\"\n [dropdown]=\"true\"\n (completeMethod)=\"search($event)\"\n styleClass=\"w-100\"\n [inputStyleClass]=\"\n (f['crm_account_id'].touched || submitted) && f['crm_account_id'].errors\n ? 'invalid-field'\n : ''\n \"\n placeholder=\"Search accounts\"\n [multiple]=\"false\">\n </p-autoComplete>\n @if ((f['crm_account_id'].touched || submitted) && f['crm_account_id'].errors) {\n <span class=\"text-danger\">account is required</span>\n }\n </div>\n <div class=\"mb-3\">\n <span class=\"label mb-0 d-block\" id=\"crm-contact-info-email-label\">{{ 'Crm.ContactMessage.Email' | transloco }}</span>\n <input type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n [attr.aria-labelledby]=\"'crm-contact-info-email-label'\"\n formControlName=\"email\"\n [ngClass]=\"{ 'is-invalid': submitted && f['email'].errors }\" id=\"input_email_4\" name=\"input_email_4\"/>\n </div>\n <div class=\"mb-3\">\n <span class=\"label mb-0 d-block\" id=\"crm-contact-info-linkedin-label\">{{\n 'Crm.ContactMessage.LinkedInUrl' | transloco\n }}</span>\n <input\n type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n [attr.aria-labelledby]=\"'crm-contact-info-linkedin-label'\"\n formControlName=\"linkedin_url\"\n [ngClass]=\"{ 'is-invalid': submitted && f['linkedin_url'].errors }\" id=\"input_linkedin_url_5\" name=\"input_linkedin_url_5\"/>\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"input_headline_6\">{{\n 'Crm.ContactMessage.Headline' | transloco\n }}</label>\n <input type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"headline\"\n [ngClass]=\"{ 'is-invalid': submitted && f['headline'].errors }\" id=\"input_headline_6\" name=\"input_headline_6\"/>\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"input_tel_7\">{{ 'Crm.ContactMessage.Tel' | transloco }}</label>\n <input type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"tel\" id=\"input_tel_7\" name=\"input_tel_7\"/>\n </div>\n <div class=\"mb-3\">\n <span class=\"label mb-0 d-block\" id=\"crm-contact-info-potential-label\">{{\n 'Crm.ContactMessage.Potential' | transloco\n }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-contact-info-potential-label'\"\n formControlName=\"potential\"\n [options]=\"potentials\"\n [placeholder]=\"'Select Potential'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['potential'].errors }\">\n </p-select>\n </div>\n <div class=\"mb-3\">\n <span class=\"label mb-0 d-block\" id=\"crm-contact-info-labels-label\">{{ 'Crm.ContactMessage.Labels' | transloco }} </span>\n <p-multiSelect inputId=\"crm-contact-info-labels\"\n [options]=\"labels\"\n [attr.aria-labelledby]=\"'crm-contact-info-labels-label'\"\n formControlName=\"labels\"\n appendTo=\"body\"></p-multiSelect>\n </div>\n <div class=\"text-end form-action-buttons\">\n <input type=\"button\"\n class=\"btn btn-outline-default\"\n (click)=\"isFormEdit = !isFormEdit; getUserInfo()\"\n value=\"Cancel\" />\n <input type=\"button\"\n class=\"btn btn-primary ms-3\"\n value=\"Submit\"\n (click)=\"updateContactInfo()\" />\n </div>\n </form>\n }\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 <label for=\"crm-contact-info-comment\" class=\"visually-hidden\">Note</label>\n <textarea id=\"crm-contact-info-comment\"\n name=\"comment\"\n class=\"form-control\"\n formControlName=\"comment\"\n rows=\"6\"></textarea>\n @if (\n actionControls.get('comment').touched &&\n actionControls.get('comment').invalid\n ) {\n <p class=\"text-danger\"\n >\n Note Required\n </p>\n }\n @if (actions.length) {\n <div\n class=\"d-block clear-both pt-3\">\n @for (action of actions; track action.id; let i = $index) {\n @if (action.visible) {\n <button\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 }\n }\n @if (submitAction && actionFormControls['crm_action_id'].invalid) {\n <div class=\"text-danger\"\n >\n Please select an action\n </div>\n }\n <div class=\"row mt-3 align-items-center g-2\">\n <div class=\"col-12 col-sm-3\">\n <label for=\"crm-contact-info-when\" class=\"visually-hidden\">Date</label>\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"crm-contact-info-when\"\n name=\"when\"\n placeholder=\"dd-mmm-yyyy\"\n formControlName=\"when\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (click)=\"d.toggle()\" />\n </div>\n </div>\n <div class=\"col-auto pe-0 completed-toggle\">\n <div class=\"d-flex align-items-center h-100\">\n <ui-switch\n [checkedLabel]=\"'Crm.Actions.Completed' | transloco\"\n [uncheckedLabel]=\"'Crm.Actions.Completed' | transloco\"\n [ariaLabel]=\"'Crm.Actions.Completed' | transloco\"\n [pTooltip]=\"'Crm.Actions.Tooltip.Completed' | transloco\"\n [appendTo]=\"'body'\"\n tooltipPosition=\"top\"\n formControlName=\"completed\"\n name=\"completed\">\n </ui-switch>\n </div>\n </div>\n <div class=\"col-12 col-sm-auto ms-sm-auto d-flex align-items-center gap-2 mt-2 mt-sm-0\">\n <a class=\"btn btn-outline-primary\"\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\">Submit Note</button>\n </div>\n </div>\n </div>\n }\n @if (buttonDisable) {\n <div\n class=\"no-actions pt-4\">\n <pw-no-data [withImage]=\"true\" [message]=\"\n 'Crm.ContactMessage.NoActionsInContactInfoMessage' | transloco\n \">\n <span><a [routerLink]=\"[\n '/' +\n subscription?.slug +\n routers.configurations +\n 'actions'\n ]\">Take me to the actions configuration section.</a></span>\n </pw-no-data>\n </div>\n }\n </form>\n @if (!isLoaded) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n }\n @if (!contactComments?.length && isLoaded) {\n <div\n class=\"no-actions pt-3\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoActionsMessage' | transloco\">\n </pw-no-data>\n </div>\n }\n @if (contactComments.length) {\n <div\n id=\"timeline\"\n class=\"pt-3 clear-both timeline-center timeline-wrapper\">\n <ul class=\"timeline\">\n <li class=\"timeline-line\"></li>\n </ul>\n <ul class=\"timeline\">\n <li class=\"timeline-line\"></li>\n @for (\n item of contactComments; track\n item.id; let i = $index; let odd = $odd; let even = $even) {\n <li class=\"timeline-item\"\n [ngClass]=\"{ 'mt-5': odd }\"\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 card pb-0 position-static\">\n <div class=\"card-header\">\n <div class=\"mb-0 clearfix\">\n <textarea type=\"text\"\n [id]=\"'crm-contact-timeline-comment-' + item.id\"\n name=\"comment\"\n class=\"comment-field form-control p-0\"\n [(ngModel)]=\"item.comment\">{{ item.comment }}</textarea>\n @if (!showFullComment || item.id !== commentId) {\n <p class=\"float-start mb-0\"\n >\n {{ item.comment | slice: 0:170\n }}@if (item.comment.length > 170) {\n <a\n class=\"text-secondary\"\n (click)=\"\n showFullComment = true; commentId = item.id\n \">...show more</a>\n }\n </p>\n }\n @if (showFullComment && item.id === commentId) {\n <p class=\"float-start mb-0\"\n >\n {{ item.comment }}\n @if (\n item.comment.length > 170 && showFullComment\n ) {\n <a\n (click)=\"showFullComment = false\"\n class=\"text-secondary\">...show less</a>\n }\n </p>\n }\n @if (userId === item.owner_id || hasAccess) {\n <button class=\"btn btn-md edit-btn float-end py-0\"\n (click)=\"showEditControls($event)\"\n >\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></i>\n </button>\n }\n </div>\n <div class=\"card-subtitle text-muted my-0 clearfix\">\n <div class=\"float-start owner-meta\">\n By {{ item.owner.first_name + ' ' + item.owner.last_name }} on\n @if (!updating || actionId !== item.id) {\n <span class=\"font-small-3\">{{ item.when }}</span>\n }\n @if (updating && actionId === item.id) {\n <input\n [id]=\"'crm-contact-info-when-' + item.id\"\n name=\"when\"\n placeholder=\"dd-mmm-yyyy\"\n [value]=\"item.when\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (focus)=\"d.toggle()\"\n (dateSelect)=\"onDateSelect($event, item)\"\n aria-label=\"Date\" />\n }\n </div>\n @if (userId === item.owner_id || hasAccess) {\n <button type=\" button\"\n class=\"btn btn-sm float-end when-btn py-0\"\n (click)=\"showDatePickerUpdate(item.id)\">\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></i>\n </button>\n }\n </div>\n <div class=\"action-row\">\n <span class=\"badge bg-primary\">{{\n item?.crm_action?.name\n }}</span>\n @if (\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n ) {\n <span\n class=\"badge bg-success ms-2\">Open</span>\n }\n @if (!item.cancelled && !item.completed) {\n <p [class.text-danger]=\"!item.color\"\n class=\"due-status mb-0\">\n {{ item.due }}\n </p>\n }\n <span class=\"action-icons\">\n @if (\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n ) {\n <a\n ngbTooltip=\"Set as completed\"\n aria-label=\"Set as completed\"\n class=\"me-3 ms-3\"\n href=\"#\"\n (click)=\"\n $event.preventDefault();\n setAsCompletedOrUncompleted(\n item.id,\n item,\n item.completed\n )\n \">\n <i class=\"fa fa-tasks completed\" aria-hidden=\"true\"></i>\n </a>\n }\n @if (\n !item.cancelled &&\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n ) {\n <a\n ngbTooltip=\"Set as cancelled\"\n aria-label=\"Set as cancelled\"\n href=\"#\"\n (click)=\"$event.preventDefault(); setAsCancelled(item.id, item)\">\n <i\n class=\"fa fa-times delete-icon\"\n aria-hidden=\"true\"\n ></i>\n </a>\n }\n @if (\n item.completed &&\n (userId === item.owner_id || hasAccess)\n ) {\n <a\n ngbTooltip=\"Set as UnCompleted\"\n aria-label=\"Set as UnCompleted\"\n href=\"#\"\n (click)=\"\n $event.preventDefault();\n setAsCompletedOrUncompleted(\n item.id,\n item,\n item.completed\n )\n \"\n class=\"ms-2\">\n <i class=\"far fa-window-close\" aria-hidden=\"true\"></i>\n </a>\n }\n </span>\n </div>\n <div class=\"control-btns mt-3 text-end\">\n <button type=\"button\"\n class=\"btn btn-sm btn-outline-default me-2\"\n (click)=\"showEditControls(undefined)\">\n Cancel\n </button>\n <button class=\"btn btn-sm btn-primary\"\n type=\"button\"\n (click)=\"updateComment(item)\">\n Submit\n </button>\n </div>\n </div>\n </div>\n </li>\n }\n </ul>\n </div>\n }\n </ng-template>\n </li>\n <li [ngbNavItem]=\"2\">\n <a ngbNavLink>Versioning</a>\n <ng-template ngbNavContent>\n @for (version of contactVersioning; track version.item_id) {\n <div>\n <p>\n <strong>Event: </strong>{{ version.event }} | <strong>Author: </strong>@if (version?.author) {\n <a\n [routerLink]=\"['/members', version?.author?.slug]\">{{ version?.author | ifNameNullShowEmail }}</a>\n }\n | <strong>Created at: </strong>{{ version.created_at | dateFormat: 'datetime' }}<br />\n <strong>Object: </strong>{{ version.object | json }}\n </p>\n <hr />\n </div>\n }\n @if (contactVersioning?.length === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoVersionsMessage' | transloco\">\n </pw-no-data>\n </div>\n }\n </ng-template>\n </li>\n <li [ngbNavItem]=\"3\">\n <a ngbNavLink>Files</a>\n <ng-template ngbNavContent>\n <pw-smart-crm-company-files [contactId]=\"contactId\"\n [accountId]=\"accountId\">\n </pw-smart-crm-company-files>\n </ng-template>\n </li>\n </ul>\n <div [ngbNavOutlet]=\"nav\"></div>\n </div>\n </div>\n </div>\n}\n</div>\n\n<ng-template #content\n let-modal>\n <div class=\"modal-header\">\n <h3 class=\"modal-title mb-0 p-0\">{{ 'Upload File' | transloco }}</h3>\n <button type=\"button\"\n class=\"btn-close float-end\"\n aria-label=\"Close\"\n (click)=\"modal.dismiss()\">\n\n </button>\n </div>\n <div class=\"modal-body\">\n <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n <div class=\"row p-2\">\n <div class=\"col-12\">\n <div class=\"upload-box\">\n <div class=\"upload-box-content\">\n <div class=\"drop-container\"\n ngFileDrop\n [options]=\"options\"\n (uploadOutput)=\"onUploadOutput($event)\"\n [uploadInput]=\"uploadInput\">\n <p>\n Drag files here or\n <label class=\"upload-button\" for=\"contact-info-file-upload\">\n <input type=\"file\"\n id=\"contact-info-file-upload\"\n name=\"contact-info-file-upload\"\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 @for (f of files; track f.name; let i = $index) {\n <div class=\"upload-item\"\n >\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 @if (!f['uploaded']) {\n <span>{{ f.progress?.data?.percentage - 1 }}%\n </span>\n }\n @if (f['uploaded']) {\n <span>100 %</span>\n }\n @if (!f['uploaded']) {\n <span>Uploading...</span>\n }\n @if (f['uploaded']) {\n <span>Done</span>\n }\n </span>\n @if (f.progress?.data?.percentage !== 0 && !f['uploaded']) {\n <span class=\"speed-and-eta-text\"\n >\n <span>{{ f.progress?.data?.speedHuman }} </span>\n <span>ETA {{ f.progress?.data?.etaHuman }}</span>\n </span>\n }\n </div>\n </div>\n </div>\n }\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)}.timeline-card.card{border:1px solid #e2e5ea;border-radius:10px;box-shadow:0 1px 2px #1018280f}.timeline-card.card .card-header{padding:14px 16px 6px;background:transparent;border-bottom:0}.timeline-card.card .card-header p.float-start{font-size:14px;line-height:1.5}.timeline-card.card .due-status.text-danger{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:9999px;background:#fbecea;color:#b23a2c!important;font-size:12px;font-weight:600;line-height:1.2;border:1px solid #f3d4cf}.timeline-card.card .due-status.text-danger:before{content:\"\";width:6px;height:6px;border-radius:50%;background:#c0392b}.timeline-card.card .owner-meta{color:#5a6473;font-size:12px;font-weight:500}.timeline-card.card .owner-meta .font-small-3{color:#5a6473}.timeline-card.card .action-owner{display:inline-flex;align-items:center;gap:5px;margin-top:10px;color:#5a6473!important;font-size:12px;text-decoration:none}.timeline-card.card .action-owner i{font-size:11px;color:#a8afbc}.timeline-card.card .action-owner:hover{color:var(--first, #1769e1)!important}.timeline-card.card .badge{margin-top:10px;padding:4px 10px;border-radius:9999px;font-size:12px;font-weight:600;letter-spacing:0}.timeline-card.card .badge.bg-primary{background-color:#f1f3f6!important;color:#3d4654!important;border:1px solid #e2e5ea}.timeline-card.card .badge.bg-success{display:inline-flex;align-items:center;gap:6px;background-color:#e7f5ee!important;color:#1f7a47!important;border:1px solid #c9e9d6}.timeline-card.card .badge.bg-success:before{content:\"\";width:6px;height:6px;border-radius:50%;background:#1f9d57}.timeline-card.card .action-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}.timeline-card.card .action-row .badge,.timeline-card.card .action-row .due-status{margin:0!important}.timeline-card.card .action-icons{display:inline-flex;align-items:center;gap:14px;margin-left:auto}.timeline-card.card .action-icons a{margin:0!important}.timeline-card.card .edit-icon{color:#7c8696;transition:color .15s ease}.timeline-card.card .edit-btn:hover .edit-icon,.timeline-card.card .when-btn:hover .edit-icon{color:var(--first, #1769e1)}.timeline-card.card .completed{color:#1f9d57}.timeline-card.card .delete-icon{color:#c0392b}.timeline-badge .bg-red.bg-lighten-1{background-color:#fbeae8!important}.timeline-badge .bg-red.bg-lighten-1 .timeline-year,.timeline-badge .bg-red.bg-lighten-1 .date-year{color:#c0392b!important}.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}.user-info .about-readview{padding:4px 8px 8px}.user-info .about-readview .row{--bs-gutter-x: 1rem}.user-info .about-readview .readview-section{display:block;margin:24px 0 14px;padding-top:18px;border-top:1px solid #e2e5ea;color:#5a6473;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}.user-info .about-readview .readview-section:first-of-type{margin-top:4px;padding-top:0;border-top:0}.user-info .about-readview .readview-field{margin-bottom:20px}.user-info .about-readview .label{display:block;margin-bottom:4px;color:#7c8696;font-size:12px;font-weight:500;text-transform:none}.user-info .about-readview .readview-value{max-width:100%;margin:0;color:#272e38;font-size:14px;font-weight:500;line-height:1.4;word-break:break-word}.user-info .about-readview a.readview-value{color:var(--first, #1769e1);text-decoration:none}.user-info .about-readview a.readview-value:hover{text-decoration:underline}.user-info .about-readview .badge{font-weight:500}.control-btns{display:none}.comment-field{border:0;border-bottom:1px solid rgb(242,242,242);color:#1769e1;display:none;font-size:15px;min-height:100px;padding:2px 5px!important}.comment-field:focus{border:1px solid rgb(23,105,225)!important;border-bottom:0;box-shadow:none}p{max-width:85%;white-space:pre-wrap}.show-controls .comment-field,.show-controls .control-btns{display:block}.show-controls p,.show-controls .edit-btn{display:none}select{appearance:none}textarea{resize:none}.clear-both{clear:both}.isDisabled input[type=text],.isDisabled input,.isDisabled textarea,.isDisabled p-dropdown,.isDisabled p-select,.isDisabled p-autocomplete,.isDisabled select{pointer-events:none}.timeline-card.card{min-height:auto}.completed-toggle ::ng-deep .switch-label-checked,.completed-toggle ::ng-deep .switch-label-unchecked{font-size:11px!important;letter-spacing:.3px;text-transform:none}@media(max-width:575.98px){.completed-toggle{padding-top:10px}}.when-btn:focus{border:0;box-shadow:none}.no-actions{clear:both}::ng-deep body .invalid-field{border:1px solid rgb(255,88,107)!important}.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: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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$2.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: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: 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: i6.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i9$1.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i9.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i11.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo", "motionOptions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: i12.ClearBitIconComponent, selector: "pw-clearbit-icon", inputs: ["src", "altText", "name", "size", "iconClass"] }, { kind: "component", type: i12.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i15.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "directive", type: i13$1.NgFileDropDirective, selector: "[ngFileDrop]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "directive", type: i13$1.NgFileSelectDirective, selector: "[ngFileSelect]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { 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: "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: i17.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i17.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
|
|
3304
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: SmartCrmContactInfoComponent, isStandalone: false, selector: "pw-smart-crm-contact-info", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12 mb-0\">\n <div class=\"me-auto mb-0\">\n <h2 class=\"mb-0\">\n <a 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 Contact Info\n </h2>\n </div>\n <a class=\"btn btn-sm btn-outline-primary float-end mb-3\"\n data-cy=\"add-opportunities\"\n (click)=\"navigateToOpportunities()\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n </a>\n </div>\n @if (!isDataLoaded) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner> </p-progressSpinner>\n </div>\n }\n @if (isDataLoaded) {\n <div>\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 <pw-clearbit-icon [name]=\"data | ifNameNullShowEmail\"\n altText=\"Contact\"\n [size]=\"100\"\n iconClass=\"mb-3\"></pw-clearbit-icon>\n </a>\n </div>\n <div class=\"mb-4 d-flex justify-content-between align-items-center\">\n <h4 class=\"d-inline-block\">\n About @if (data?.id) {\n <span>{{ data | ifNameNullShowEmail }}</span>\n }\n </h4>\n @if (isFormEdit) {\n <a href=\"#\"\n class=\"btn btn-sm btn-outline-primary float-end\"\n (click)=\"$event.preventDefault(); isFormEdit = !isFormEdit\">Edit</a>\n }\n </div>\n @if (isFormEdit) {\n <div class=\"about-readview\">\n @if (data?.first_name || data?.last_name || data?.headline) {\n <h3 class=\"readview-section\">{{ 'Crm.ContactMessage.Section.Identity' | transloco }}</h3>\n <div class=\"row\">\n @if (data?.first_name) {\n <div class=\"col-6 readview-field\">\n <span class=\"label\">{{ 'Crm.ContactMessage.FirstName' | transloco }}</span>\n <p class=\"readview-value\">{{ data.first_name }}</p>\n </div>\n }\n @if (data?.last_name) {\n <div class=\"col-6 readview-field\">\n <span class=\"label\">{{ 'Crm.ContactMessage.LastName' | transloco }}</span>\n <p class=\"readview-value\">{{ data.last_name }}</p>\n </div>\n }\n @if (data?.headline) {\n <div class=\"col-12 readview-field\">\n <span class=\"label\">{{ 'Crm.ContactMessage.Headline' | transloco }}</span>\n <p class=\"readview-value\">{{ data.headline }}</p>\n </div>\n }\n </div>\n }\n @if (\n data?.email || data?.tel || data?.crm_account_id ||\n data?.linkedin_url || f['location'].value || f['country'].value\n ) {\n <h3 class=\"readview-section\">{{ 'Crm.ContactMessage.Section.Contact' | transloco }}</h3>\n <div class=\"row\">\n @if (data?.email) {\n <div class=\"col-12 readview-field\">\n <span class=\"label\">{{ 'Crm.ContactMessage.Email' | transloco }}</span>\n <a class=\"readview-value\" href=\"mailTo:{{ data.email }}\">{{ data.email }}</a>\n </div>\n }\n @if (data?.crm_account_id) {\n <div class=\"col-12 readview-field\">\n <span class=\"label\">{{ 'Crm.ContactMessage.Account' | transloco }}</span>\n <a class=\"readview-value\"\n [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, data.crm_account_id]\"\n >{{ f['crm_account_id'].value?.name }}</a>\n </div>\n }\n @if (data?.linkedin_url) {\n <div class=\"col-12 readview-field\">\n <span class=\"label\">{{ 'Crm.ContactMessage.LinkedInUrl' | transloco }}</span>\n <a class=\"readview-value\" [href]=\"data.linkedin_url\" target=\"blank\">{{ data.linkedin_url }}</a>\n </div>\n }\n @if (f['location'].value) {\n <div class=\"col-12 readview-field\">\n <span class=\"label\">{{ 'Crm.AccountMessage.Location' | transloco }}</span>\n <p class=\"readview-value\">{{ f['location'].value }}</p>\n </div>\n }\n @if (f['country'].value) {\n <div class=\"col-6 readview-field\">\n <span class=\"label\">{{ 'Crm.AccountMessage.Country' | transloco }}</span>\n @if (countries$ | async; as countries) {\n <p class=\"readview-value\">{{ labelFor(countries, f['country'].value, 'code', 'name') || f['country'].value }}</p>\n }\n </div>\n }\n @if (data?.tel) {\n <div class=\"col-6 readview-field\">\n <span class=\"label\">{{ 'Crm.ContactMessage.Tel' | transloco }}</span>\n <p class=\"readview-value\">{{ data.tel }}</p>\n </div>\n }\n </div>\n }\n @if (data?.potential || data?.labels?.length) {\n <h3 class=\"readview-section\">{{ 'Crm.ContactMessage.Section.Classification' | transloco }}</h3>\n <div class=\"row\">\n @if (data?.potential) {\n <div class=\"col-6 readview-field\">\n <span class=\"label\">{{ 'Crm.ContactMessage.Potential' | transloco }}</span>\n <p class=\"readview-value text-capitalize\">{{ data.potential }}</p>\n </div>\n }\n @if (data?.labels?.length) {\n <div class=\"col-12 readview-field\">\n <span class=\"label\">{{ 'Crm.ContactMessage.Labels' | transloco }}</span>\n <div class=\"readview-value\">\n @for (label of data.labels; track label) {\n <span class=\"badge bg-secondary me-1 mb-1\">{{ label }}</span>\n }\n </div>\n </div>\n }\n </div>\n }\n </div>\n } @else {\n <form [formGroup]=\"aboutControls\">\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"input_first_name_1\">{{\n 'Crm.ContactMessage.FirstName' | transloco\n }}</label>\n <input type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"first_name\"\n [ngClass]=\"{ 'is-invalid': submitted && f['first_name'].errors }\" id=\"input_first_name_1\" name=\"input_first_name_1\"/>\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"input_last_name_2\">{{\n 'Crm.ContactMessage.LastName' | transloco\n }}</label>\n <input type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"last_name\"\n [ngClass]=\"{ 'is-invalid': submitted && f['last_name'].errors }\" id=\"input_last_name_2\" name=\"input_last_name_2\"/>\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"crm-contact-info-location\">{{\n 'Crm.AccountMessage.Location' | transloco\n }}</label>\n <input ngx-gp-autocomplete\n id=\"crm-contact-info-location\"\n name=\"location\"\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 @if (countries$ | async; as countries) {\n <div class=\"mb-3\">\n <span id=\"crm-contact-info-country-label\">{{ 'Crm.AccountMessage.Country' | transloco\n }}<span class=\"text-danger required-icon\">*</span>\n </span>\n <p-select\n [attr.aria-labelledby]=\"'crm-contact-info-country-label'\"\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-select>\n </div>\n }\n <div class=\"mb-3 ui-fluid skills-modal\">\n <span class=\"label mb-2 d-block\" id=\"crm-contact-info-account-label\">{{ 'Crm.ContactMessage.Account' | transloco }}\n </span>\n <p-autoComplete appendTo=\"body\"\n [attr.aria-labelledby]=\"'crm-contact-info-account-label'\"\n [suggestions]=\"filteredAccounts\"\n formControlName=\"crm_account_id\"\n dataKey=\"id\"\n optionLabel=\"name\"\n [dropdown]=\"true\"\n (completeMethod)=\"search($event)\"\n styleClass=\"w-100\"\n [inputStyleClass]=\"\n (f['crm_account_id'].touched || submitted) && f['crm_account_id'].errors\n ? 'invalid-field'\n : ''\n \"\n placeholder=\"Search accounts\"\n [multiple]=\"false\">\n </p-autoComplete>\n @if ((f['crm_account_id'].touched || submitted) && f['crm_account_id'].errors) {\n <span class=\"text-danger\">account is required</span>\n }\n </div>\n <div class=\"mb-3\">\n <span class=\"label mb-0 d-block\" id=\"crm-contact-info-email-label\">{{ 'Crm.ContactMessage.Email' | transloco }}</span>\n <input type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n [attr.aria-labelledby]=\"'crm-contact-info-email-label'\"\n formControlName=\"email\"\n [ngClass]=\"{ 'is-invalid': submitted && f['email'].errors }\" id=\"input_email_4\" name=\"input_email_4\"/>\n </div>\n <div class=\"mb-3\">\n <span class=\"label mb-0 d-block\" id=\"crm-contact-info-linkedin-label\">{{\n 'Crm.ContactMessage.LinkedInUrl' | transloco\n }}</span>\n <input\n type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n [attr.aria-labelledby]=\"'crm-contact-info-linkedin-label'\"\n formControlName=\"linkedin_url\"\n [ngClass]=\"{ 'is-invalid': submitted && f['linkedin_url'].errors }\" id=\"input_linkedin_url_5\" name=\"input_linkedin_url_5\"/>\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"input_headline_6\">{{\n 'Crm.ContactMessage.Headline' | transloco\n }}</label>\n <input type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"headline\"\n [ngClass]=\"{ 'is-invalid': submitted && f['headline'].errors }\" id=\"input_headline_6\" name=\"input_headline_6\"/>\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"input_tel_7\">{{ 'Crm.ContactMessage.Tel' | transloco }}</label>\n <input type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"tel\" id=\"input_tel_7\" name=\"input_tel_7\"/>\n </div>\n <div class=\"mb-3\">\n <span class=\"label mb-0 d-block\" id=\"crm-contact-info-potential-label\">{{\n 'Crm.ContactMessage.Potential' | transloco\n }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-contact-info-potential-label'\"\n formControlName=\"potential\"\n [options]=\"potentials\"\n [placeholder]=\"'Select Potential'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['potential'].errors }\">\n </p-select>\n </div>\n <div class=\"mb-3\">\n <span class=\"label mb-0 d-block\" id=\"crm-contact-info-labels-label\">{{ 'Crm.ContactMessage.Labels' | transloco }} </span>\n <p-multiSelect inputId=\"crm-contact-info-labels\"\n [options]=\"labels\"\n [attr.aria-labelledby]=\"'crm-contact-info-labels-label'\"\n formControlName=\"labels\"\n appendTo=\"body\"></p-multiSelect>\n </div>\n <div class=\"text-end form-action-buttons\">\n <input type=\"button\"\n class=\"btn btn-outline-default\"\n (click)=\"isFormEdit = !isFormEdit; getUserInfo()\"\n value=\"Cancel\" />\n <input type=\"button\"\n class=\"btn btn-primary ms-3\"\n value=\"Submit\"\n (click)=\"updateContactInfo()\" />\n </div>\n </form>\n }\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 <label for=\"crm-contact-info-comment\" class=\"visually-hidden\">Note</label>\n <textarea id=\"crm-contact-info-comment\"\n name=\"comment\"\n class=\"form-control\"\n formControlName=\"comment\"\n rows=\"6\"></textarea>\n @if (\n actionControls.get('comment').touched &&\n actionControls.get('comment').invalid\n ) {\n <p class=\"text-danger\"\n >\n Note Required\n </p>\n }\n @if (actions.length) {\n <div\n class=\"d-block clear-both pt-3\">\n @for (action of actions; track action.id; let i = $index) {\n @if (action.visible) {\n <button\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 }\n }\n @if (submitAction && actionFormControls['crm_action_id'].invalid) {\n <div class=\"text-danger\"\n >\n Please select an action\n </div>\n }\n <div class=\"row mt-3 align-items-center g-2\">\n <div class=\"col-12 col-sm-3\">\n <label for=\"crm-contact-info-when\" class=\"visually-hidden\">Date</label>\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"crm-contact-info-when\"\n name=\"when\"\n placeholder=\"dd-mmm-yyyy\"\n formControlName=\"when\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (click)=\"d.toggle()\" />\n </div>\n </div>\n <div class=\"col-auto pe-0 completed-toggle\">\n <div class=\"d-flex align-items-center h-100\">\n <ui-switch\n [checkedLabel]=\"'Crm.Actions.Completed' | transloco\"\n [uncheckedLabel]=\"'Crm.Actions.Completed' | transloco\"\n [ariaLabel]=\"'Crm.Actions.Completed' | transloco\"\n [pTooltip]=\"'Crm.Actions.Tooltip.Completed' | transloco\"\n [appendTo]=\"'body'\"\n tooltipPosition=\"top\"\n formControlName=\"completed\"\n name=\"completed\">\n </ui-switch>\n </div>\n </div>\n <div class=\"col-12 d-flex justify-content-end align-items-center gap-2 mt-2\">\n <a class=\"btn btn-outline-primary\"\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\">Submit Note</button>\n </div>\n </div>\n </div>\n }\n @if (buttonDisable) {\n <div\n class=\"no-actions pt-4\">\n <pw-no-data [withImage]=\"true\" [message]=\"\n 'Crm.ContactMessage.NoActionsInContactInfoMessage' | transloco\n \">\n <span><a [routerLink]=\"[\n '/' +\n subscription?.slug +\n routers.configurations +\n 'actions'\n ]\">Take me to the actions configuration section.</a></span>\n </pw-no-data>\n </div>\n }\n </form>\n @if (!isLoaded) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n }\n @if (!contactComments?.length && isLoaded) {\n <div\n class=\"no-actions pt-3\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoActionsMessage' | transloco\">\n </pw-no-data>\n </div>\n }\n @if (contactComments.length) {\n <div\n id=\"timeline\"\n class=\"pt-3 clear-both timeline-center timeline-wrapper\">\n <ul class=\"timeline\">\n <li class=\"timeline-line\"></li>\n </ul>\n <ul class=\"timeline\">\n <li class=\"timeline-line\"></li>\n @for (\n item of contactComments; track\n item.id; let i = $index; let odd = $odd; let even = $even) {\n <li class=\"timeline-item\"\n [ngClass]=\"{ 'mt-5': odd }\"\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 card pb-0 position-static\">\n <div class=\"card-header\">\n <div class=\"mb-0 clearfix\">\n <textarea type=\"text\"\n [id]=\"'crm-contact-timeline-comment-' + item.id\"\n name=\"comment\"\n class=\"comment-field form-control p-0\"\n [(ngModel)]=\"item.comment\">{{ item.comment }}</textarea>\n @if (!showFullComment || item.id !== commentId) {\n <p class=\"float-start mb-0\"\n >\n {{ item.comment | slice: 0:170\n }}@if (item.comment.length > 170) {\n <a\n class=\"text-secondary\"\n (click)=\"\n showFullComment = true; commentId = item.id\n \">...show more</a>\n }\n </p>\n }\n @if (showFullComment && item.id === commentId) {\n <p class=\"float-start mb-0\"\n >\n {{ item.comment }}\n @if (\n item.comment.length > 170 && showFullComment\n ) {\n <a\n (click)=\"showFullComment = false\"\n class=\"text-secondary\">...show less</a>\n }\n </p>\n }\n @if (userId === item.owner_id || hasAccess) {\n <button class=\"btn btn-md edit-btn float-end py-0\"\n (click)=\"showEditControls($event)\"\n >\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></i>\n </button>\n }\n </div>\n <div class=\"card-subtitle text-muted my-0 clearfix\">\n <div class=\"float-start owner-meta\">\n By {{ item.owner.first_name + ' ' + item.owner.last_name }} on\n @if (!updating || actionId !== item.id) {\n <span class=\"font-small-3\">{{ item.when }}</span>\n }\n @if (updating && actionId === item.id) {\n <input\n [id]=\"'crm-contact-info-when-' + item.id\"\n name=\"when\"\n placeholder=\"dd-mmm-yyyy\"\n [value]=\"item.when\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (focus)=\"d.toggle()\"\n (dateSelect)=\"onDateSelect($event, item)\"\n aria-label=\"Date\" />\n }\n </div>\n @if (userId === item.owner_id || hasAccess) {\n <button type=\" button\"\n class=\"btn btn-sm float-end when-btn py-0\"\n (click)=\"showDatePickerUpdate(item.id)\">\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></i>\n </button>\n }\n </div>\n <div class=\"action-row\">\n <span class=\"badge bg-primary\">{{\n item?.crm_action?.name\n }}</span>\n @if (\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n ) {\n <span\n class=\"badge bg-success ms-2\">Open</span>\n }\n @if (!item.cancelled && !item.completed) {\n <p [class.text-danger]=\"!item.color\"\n class=\"due-status mb-0\">\n {{ item.due }}\n </p>\n }\n <span class=\"action-icons\">\n @if (\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n ) {\n <a\n ngbTooltip=\"Set as completed\"\n aria-label=\"Set as completed\"\n class=\"me-3 ms-3\"\n href=\"#\"\n (click)=\"\n $event.preventDefault();\n setAsCompletedOrUncompleted(\n item.id,\n item,\n item.completed\n )\n \">\n <i class=\"fa fa-tasks completed\" aria-hidden=\"true\"></i>\n </a>\n }\n @if (\n !item.cancelled &&\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n ) {\n <a\n ngbTooltip=\"Set as cancelled\"\n aria-label=\"Set as cancelled\"\n href=\"#\"\n (click)=\"$event.preventDefault(); setAsCancelled(item.id, item)\">\n <i\n class=\"fa fa-times delete-icon\"\n aria-hidden=\"true\"\n ></i>\n </a>\n }\n @if (\n item.completed &&\n (userId === item.owner_id || hasAccess)\n ) {\n <a\n ngbTooltip=\"Set as UnCompleted\"\n aria-label=\"Set as UnCompleted\"\n href=\"#\"\n (click)=\"\n $event.preventDefault();\n setAsCompletedOrUncompleted(\n item.id,\n item,\n item.completed\n )\n \"\n class=\"ms-2\">\n <i class=\"far fa-window-close\" aria-hidden=\"true\"></i>\n </a>\n }\n </span>\n </div>\n <div class=\"control-btns mt-3 text-end\">\n <button type=\"button\"\n class=\"btn btn-sm btn-outline-default me-2\"\n (click)=\"showEditControls(undefined)\">\n Cancel\n </button>\n <button class=\"btn btn-sm btn-primary\"\n type=\"button\"\n (click)=\"updateComment(item)\">\n Submit\n </button>\n </div>\n </div>\n </div>\n </li>\n }\n </ul>\n </div>\n }\n </ng-template>\n </li>\n <li [ngbNavItem]=\"2\">\n <a ngbNavLink>Versioning</a>\n <ng-template ngbNavContent>\n @for (version of contactVersioning; track version.item_id) {\n <div>\n <p>\n <strong>Event: </strong>{{ version.event }} | <strong>Author: </strong>@if (version?.author) {\n <a\n [routerLink]=\"['/members', version?.author?.slug]\">{{ version?.author | ifNameNullShowEmail }}</a>\n }\n | <strong>Created at: </strong>{{ version.created_at | dateFormat: 'datetime' }}<br />\n <strong>Object: </strong>{{ version.object | json }}\n </p>\n <hr />\n </div>\n }\n @if (contactVersioning?.length === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoVersionsMessage' | transloco\">\n </pw-no-data>\n </div>\n }\n </ng-template>\n </li>\n <li [ngbNavItem]=\"3\">\n <a ngbNavLink>Files</a>\n <ng-template ngbNavContent>\n <pw-smart-crm-company-files [contactId]=\"contactId\"\n [accountId]=\"accountId\">\n </pw-smart-crm-company-files>\n </ng-template>\n </li>\n </ul>\n <div [ngbNavOutlet]=\"nav\"></div>\n </div>\n </div>\n </div>\n}\n</div>\n\n<ng-template #content\n let-modal>\n <div class=\"modal-header\">\n <h3 class=\"modal-title mb-0 p-0\">{{ 'Upload File' | transloco }}</h3>\n <button type=\"button\"\n class=\"btn-close float-end\"\n aria-label=\"Close\"\n (click)=\"modal.dismiss()\">\n\n </button>\n </div>\n <div class=\"modal-body\">\n <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n <div class=\"row p-2\">\n <div class=\"col-12\">\n <div class=\"upload-box\">\n <div class=\"upload-box-content\">\n <div class=\"drop-container\"\n ngFileDrop\n [options]=\"options\"\n (uploadOutput)=\"onUploadOutput($event)\"\n [uploadInput]=\"uploadInput\">\n <p>\n Drag files here or\n <label class=\"upload-button\" for=\"contact-info-file-upload\">\n <input type=\"file\"\n id=\"contact-info-file-upload\"\n name=\"contact-info-file-upload\"\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 @for (f of files; track f.name; let i = $index) {\n <div class=\"upload-item\"\n >\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 @if (!f['uploaded']) {\n <span>{{ f.progress?.data?.percentage - 1 }}%\n </span>\n }\n @if (f['uploaded']) {\n <span>100 %</span>\n }\n @if (!f['uploaded']) {\n <span>Uploading...</span>\n }\n @if (f['uploaded']) {\n <span>Done</span>\n }\n </span>\n @if (f.progress?.data?.percentage !== 0 && !f['uploaded']) {\n <span class=\"speed-and-eta-text\"\n >\n <span>{{ f.progress?.data?.speedHuman }} </span>\n <span>ETA {{ f.progress?.data?.etaHuman }}</span>\n </span>\n }\n </div>\n </div>\n </div>\n }\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)}.timeline-card.card{border:1px solid #e2e5ea;border-radius:10px;box-shadow:0 1px 2px #1018280f}.timeline-card.card .card-header{padding:14px 16px 6px;background:transparent;border-bottom:0}.timeline-card.card .card-header p.float-start{font-size:14px;line-height:1.5}.timeline-card.card .due-status.text-danger{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:9999px;background:#fbecea;color:#b23a2c!important;font-size:12px;font-weight:600;line-height:1.2;border:1px solid #f3d4cf}.timeline-card.card .due-status.text-danger:before{content:\"\";width:6px;height:6px;border-radius:50%;background:#c0392b}.timeline-card.card .owner-meta{color:#5a6473;font-size:12px;font-weight:500}.timeline-card.card .owner-meta .font-small-3{color:#5a6473}.timeline-card.card .action-owner{display:inline-flex;align-items:center;gap:5px;margin-top:10px;color:#5a6473!important;font-size:12px;text-decoration:none}.timeline-card.card .action-owner i{font-size:11px;color:#a8afbc}.timeline-card.card .action-owner:hover{color:var(--first, #1769e1)!important}.timeline-card.card .badge{margin-top:10px;padding:4px 10px;border-radius:9999px;font-size:12px;font-weight:600;letter-spacing:0}.timeline-card.card .badge.bg-primary{background-color:#f1f3f6!important;color:#3d4654!important;border:1px solid #e2e5ea}.timeline-card.card .badge.bg-success{display:inline-flex;align-items:center;gap:6px;background-color:#e7f5ee!important;color:#1f7a47!important;border:1px solid #c9e9d6}.timeline-card.card .badge.bg-success:before{content:\"\";width:6px;height:6px;border-radius:50%;background:#1f9d57}.timeline-card.card .action-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}.timeline-card.card .action-row .badge,.timeline-card.card .action-row .due-status{margin:0!important}.timeline-card.card .action-icons{display:inline-flex;align-items:center;gap:14px;margin-left:auto}.timeline-card.card .action-icons a{margin:0!important}.timeline-card.card .edit-icon{color:#7c8696;transition:color .15s ease}.timeline-card.card .edit-btn:hover .edit-icon,.timeline-card.card .when-btn:hover .edit-icon{color:var(--first, #1769e1)}.timeline-card.card .completed{color:#1f9d57}.timeline-card.card .delete-icon{color:#c0392b}.timeline-badge .bg-red.bg-lighten-1{background-color:#fbeae8!important}.timeline-badge .bg-red.bg-lighten-1 .timeline-year,.timeline-badge .bg-red.bg-lighten-1 .date-year{color:#c0392b!important}.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}.user-info .about-readview{padding:4px 8px 8px}.user-info .about-readview .row{--bs-gutter-x: 1rem}.user-info .about-readview .readview-section{display:block;margin:24px 0 14px;padding-top:18px;border-top:1px solid #e2e5ea;color:#5a6473;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}.user-info .about-readview .readview-section:first-of-type{margin-top:4px;padding-top:0;border-top:0}.user-info .about-readview .readview-field{margin-bottom:20px}.user-info .about-readview .label{display:block;margin-bottom:4px;color:#7c8696;font-size:12px;font-weight:500;text-transform:none}.user-info .about-readview .readview-value{max-width:100%;margin:0;color:#272e38;font-size:14px;font-weight:500;line-height:1.4;word-break:break-word}.user-info .about-readview a.readview-value{color:var(--first, #1769e1);text-decoration:none}.user-info .about-readview a.readview-value:hover{text-decoration:underline}.user-info .about-readview .badge{font-weight:500}.control-btns{display:none}.comment-field{border:0;border-bottom:1px solid rgb(242,242,242);color:#1769e1;display:none;font-size:15px;min-height:100px;padding:2px 5px!important}.comment-field:focus{border:1px solid rgb(23,105,225)!important;border-bottom:0;box-shadow:none}p{max-width:85%;white-space:pre-wrap}.show-controls .comment-field,.show-controls .control-btns{display:block}.show-controls p,.show-controls .edit-btn{display:none}select{appearance:none}textarea{resize:none}.clear-both{clear:both}.isDisabled input[type=text],.isDisabled input,.isDisabled textarea,.isDisabled p-dropdown,.isDisabled p-select,.isDisabled p-autocomplete,.isDisabled select{pointer-events:none}.timeline-card.card{min-height:auto}.completed-toggle ::ng-deep .switch-label-checked,.completed-toggle ::ng-deep .switch-label-unchecked{font-size:11px!important;letter-spacing:.3px;text-transform:none}@media(max-width:575.98px){.completed-toggle{padding-top:10px}}.when-btn:focus{border:0;box-shadow:none}.no-actions{clear:both}::ng-deep body .invalid-field{border:1px solid rgb(255,88,107)!important}.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: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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$2.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: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: 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: i6.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i9$1.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i9.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i11.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo", "motionOptions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: i12.ClearBitIconComponent, selector: "pw-clearbit-icon", inputs: ["src", "altText", "name", "size", "iconClass"] }, { kind: "component", type: i12.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i15.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "directive", type: i13$1.NgFileDropDirective, selector: "[ngFileDrop]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "directive", type: i13$1.NgFileSelectDirective, selector: "[ngFileSelect]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { 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: "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: i17.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i17.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
|
|
3305
3305
|
}
|
|
3306
3306
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SmartCrmContactInfoComponent, decorators: [{
|
|
3307
3307
|
type: Component,
|
|
3308
|
-
args: [{ selector: 'pw-smart-crm-contact-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 Contact Info\n </h2>\n </div>\n <a class=\"btn btn-sm btn-outline-primary float-end mb-3\"\n data-cy=\"add-opportunities\"\n (click)=\"navigateToOpportunities()\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n </a>\n </div>\n @if (!isDataLoaded) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner> </p-progressSpinner>\n </div>\n }\n @if (isDataLoaded) {\n <div>\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 <pw-clearbit-icon [name]=\"data | ifNameNullShowEmail\"\n altText=\"Contact\"\n [size]=\"100\"\n iconClass=\"mb-3\"></pw-clearbit-icon>\n </a>\n </div>\n <div class=\"mb-4 d-flex justify-content-between align-items-center\">\n <h4 class=\"d-inline-block\">\n About @if (data?.id) {\n <span>{{ data | ifNameNullShowEmail }}</span>\n }\n </h4>\n @if (isFormEdit) {\n <a href=\"#\"\n class=\"btn btn-sm btn-outline-primary float-end\"\n (click)=\"$event.preventDefault(); isFormEdit = !isFormEdit\">Edit</a>\n }\n </div>\n @if (isFormEdit) {\n <div class=\"about-readview\">\n @if (data?.first_name || data?.last_name || data?.headline) {\n <h3 class=\"readview-section\">{{ 'Crm.ContactMessage.Section.Identity' | transloco }}</h3>\n <div class=\"row\">\n @if (data?.first_name) {\n <div class=\"col-6 readview-field\">\n <span class=\"label\">{{ 'Crm.ContactMessage.FirstName' | transloco }}</span>\n <p class=\"readview-value\">{{ data.first_name }}</p>\n </div>\n }\n @if (data?.last_name) {\n <div class=\"col-6 readview-field\">\n <span class=\"label\">{{ 'Crm.ContactMessage.LastName' | transloco }}</span>\n <p class=\"readview-value\">{{ data.last_name }}</p>\n </div>\n }\n @if (data?.headline) {\n <div class=\"col-12 readview-field\">\n <span class=\"label\">{{ 'Crm.ContactMessage.Headline' | transloco }}</span>\n <p class=\"readview-value\">{{ data.headline }}</p>\n </div>\n }\n </div>\n }\n @if (\n data?.email || data?.tel || data?.crm_account_id ||\n data?.linkedin_url || f['location'].value || f['country'].value\n ) {\n <h3 class=\"readview-section\">{{ 'Crm.ContactMessage.Section.Contact' | transloco }}</h3>\n <div class=\"row\">\n @if (data?.email) {\n <div class=\"col-12 readview-field\">\n <span class=\"label\">{{ 'Crm.ContactMessage.Email' | transloco }}</span>\n <a class=\"readview-value\" href=\"mailTo:{{ data.email }}\">{{ data.email }}</a>\n </div>\n }\n @if (data?.crm_account_id) {\n <div class=\"col-12 readview-field\">\n <span class=\"label\">{{ 'Crm.ContactMessage.Account' | transloco }}</span>\n <a class=\"readview-value\"\n [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, data.crm_account_id]\"\n >{{ f['crm_account_id'].value?.name }}</a>\n </div>\n }\n @if (data?.linkedin_url) {\n <div class=\"col-12 readview-field\">\n <span class=\"label\">{{ 'Crm.ContactMessage.LinkedInUrl' | transloco }}</span>\n <a class=\"readview-value\" [href]=\"data.linkedin_url\" target=\"blank\">{{ data.linkedin_url }}</a>\n </div>\n }\n @if (f['location'].value) {\n <div class=\"col-12 readview-field\">\n <span class=\"label\">{{ 'Crm.AccountMessage.Location' | transloco }}</span>\n <p class=\"readview-value\">{{ f['location'].value }}</p>\n </div>\n }\n @if (f['country'].value) {\n <div class=\"col-6 readview-field\">\n <span class=\"label\">{{ 'Crm.AccountMessage.Country' | transloco }}</span>\n @if (countries$ | async; as countries) {\n <p class=\"readview-value\">{{ labelFor(countries, f['country'].value, 'code', 'name') || f['country'].value }}</p>\n }\n </div>\n }\n @if (data?.tel) {\n <div class=\"col-6 readview-field\">\n <span class=\"label\">{{ 'Crm.ContactMessage.Tel' | transloco }}</span>\n <p class=\"readview-value\">{{ data.tel }}</p>\n </div>\n }\n </div>\n }\n @if (data?.potential || data?.labels?.length) {\n <h3 class=\"readview-section\">{{ 'Crm.ContactMessage.Section.Classification' | transloco }}</h3>\n <div class=\"row\">\n @if (data?.potential) {\n <div class=\"col-6 readview-field\">\n <span class=\"label\">{{ 'Crm.ContactMessage.Potential' | transloco }}</span>\n <p class=\"readview-value text-capitalize\">{{ data.potential }}</p>\n </div>\n }\n @if (data?.labels?.length) {\n <div class=\"col-12 readview-field\">\n <span class=\"label\">{{ 'Crm.ContactMessage.Labels' | transloco }}</span>\n <div class=\"readview-value\">\n @for (label of data.labels; track label) {\n <span class=\"badge bg-secondary me-1 mb-1\">{{ label }}</span>\n }\n </div>\n </div>\n }\n </div>\n }\n </div>\n } @else {\n <form [formGroup]=\"aboutControls\">\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"input_first_name_1\">{{\n 'Crm.ContactMessage.FirstName' | transloco\n }}</label>\n <input type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"first_name\"\n [ngClass]=\"{ 'is-invalid': submitted && f['first_name'].errors }\" id=\"input_first_name_1\" name=\"input_first_name_1\"/>\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"input_last_name_2\">{{\n 'Crm.ContactMessage.LastName' | transloco\n }}</label>\n <input type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"last_name\"\n [ngClass]=\"{ 'is-invalid': submitted && f['last_name'].errors }\" id=\"input_last_name_2\" name=\"input_last_name_2\"/>\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"crm-contact-info-location\">{{\n 'Crm.AccountMessage.Location' | transloco\n }}</label>\n <input ngx-gp-autocomplete\n id=\"crm-contact-info-location\"\n name=\"location\"\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 @if (countries$ | async; as countries) {\n <div class=\"mb-3\">\n <span id=\"crm-contact-info-country-label\">{{ 'Crm.AccountMessage.Country' | transloco\n }}<span class=\"text-danger required-icon\">*</span>\n </span>\n <p-select\n [attr.aria-labelledby]=\"'crm-contact-info-country-label'\"\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-select>\n </div>\n }\n <div class=\"mb-3 ui-fluid skills-modal\">\n <span class=\"label mb-2 d-block\" id=\"crm-contact-info-account-label\">{{ 'Crm.ContactMessage.Account' | transloco }}\n </span>\n <p-autoComplete appendTo=\"body\"\n [attr.aria-labelledby]=\"'crm-contact-info-account-label'\"\n [suggestions]=\"filteredAccounts\"\n formControlName=\"crm_account_id\"\n dataKey=\"id\"\n optionLabel=\"name\"\n [dropdown]=\"true\"\n (completeMethod)=\"search($event)\"\n styleClass=\"w-100\"\n [inputStyleClass]=\"\n (f['crm_account_id'].touched || submitted) && f['crm_account_id'].errors\n ? 'invalid-field'\n : ''\n \"\n placeholder=\"Search accounts\"\n [multiple]=\"false\">\n </p-autoComplete>\n @if ((f['crm_account_id'].touched || submitted) && f['crm_account_id'].errors) {\n <span class=\"text-danger\">account is required</span>\n }\n </div>\n <div class=\"mb-3\">\n <span class=\"label mb-0 d-block\" id=\"crm-contact-info-email-label\">{{ 'Crm.ContactMessage.Email' | transloco }}</span>\n <input type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n [attr.aria-labelledby]=\"'crm-contact-info-email-label'\"\n formControlName=\"email\"\n [ngClass]=\"{ 'is-invalid': submitted && f['email'].errors }\" id=\"input_email_4\" name=\"input_email_4\"/>\n </div>\n <div class=\"mb-3\">\n <span class=\"label mb-0 d-block\" id=\"crm-contact-info-linkedin-label\">{{\n 'Crm.ContactMessage.LinkedInUrl' | transloco\n }}</span>\n <input\n type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n [attr.aria-labelledby]=\"'crm-contact-info-linkedin-label'\"\n formControlName=\"linkedin_url\"\n [ngClass]=\"{ 'is-invalid': submitted && f['linkedin_url'].errors }\" id=\"input_linkedin_url_5\" name=\"input_linkedin_url_5\"/>\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"input_headline_6\">{{\n 'Crm.ContactMessage.Headline' | transloco\n }}</label>\n <input type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"headline\"\n [ngClass]=\"{ 'is-invalid': submitted && f['headline'].errors }\" id=\"input_headline_6\" name=\"input_headline_6\"/>\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"input_tel_7\">{{ 'Crm.ContactMessage.Tel' | transloco }}</label>\n <input type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"tel\" id=\"input_tel_7\" name=\"input_tel_7\"/>\n </div>\n <div class=\"mb-3\">\n <span class=\"label mb-0 d-block\" id=\"crm-contact-info-potential-label\">{{\n 'Crm.ContactMessage.Potential' | transloco\n }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-contact-info-potential-label'\"\n formControlName=\"potential\"\n [options]=\"potentials\"\n [placeholder]=\"'Select Potential'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['potential'].errors }\">\n </p-select>\n </div>\n <div class=\"mb-3\">\n <span class=\"label mb-0 d-block\" id=\"crm-contact-info-labels-label\">{{ 'Crm.ContactMessage.Labels' | transloco }} </span>\n <p-multiSelect inputId=\"crm-contact-info-labels\"\n [options]=\"labels\"\n [attr.aria-labelledby]=\"'crm-contact-info-labels-label'\"\n formControlName=\"labels\"\n appendTo=\"body\"></p-multiSelect>\n </div>\n <div class=\"text-end form-action-buttons\">\n <input type=\"button\"\n class=\"btn btn-outline-default\"\n (click)=\"isFormEdit = !isFormEdit; getUserInfo()\"\n value=\"Cancel\" />\n <input type=\"button\"\n class=\"btn btn-primary ms-3\"\n value=\"Submit\"\n (click)=\"updateContactInfo()\" />\n </div>\n </form>\n }\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 <label for=\"crm-contact-info-comment\" class=\"visually-hidden\">Note</label>\n <textarea id=\"crm-contact-info-comment\"\n name=\"comment\"\n class=\"form-control\"\n formControlName=\"comment\"\n rows=\"6\"></textarea>\n @if (\n actionControls.get('comment').touched &&\n actionControls.get('comment').invalid\n ) {\n <p class=\"text-danger\"\n >\n Note Required\n </p>\n }\n @if (actions.length) {\n <div\n class=\"d-block clear-both pt-3\">\n @for (action of actions; track action.id; let i = $index) {\n @if (action.visible) {\n <button\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 }\n }\n @if (submitAction && actionFormControls['crm_action_id'].invalid) {\n <div class=\"text-danger\"\n >\n Please select an action\n </div>\n }\n <div class=\"row mt-3 align-items-center g-2\">\n <div class=\"col-12 col-sm-3\">\n <label for=\"crm-contact-info-when\" class=\"visually-hidden\">Date</label>\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"crm-contact-info-when\"\n name=\"when\"\n placeholder=\"dd-mmm-yyyy\"\n formControlName=\"when\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (click)=\"d.toggle()\" />\n </div>\n </div>\n <div class=\"col-auto pe-0 completed-toggle\">\n <div class=\"d-flex align-items-center h-100\">\n <ui-switch\n [checkedLabel]=\"'Crm.Actions.Completed' | transloco\"\n [uncheckedLabel]=\"'Crm.Actions.Completed' | transloco\"\n [ariaLabel]=\"'Crm.Actions.Completed' | transloco\"\n [pTooltip]=\"'Crm.Actions.Tooltip.Completed' | transloco\"\n [appendTo]=\"'body'\"\n tooltipPosition=\"top\"\n formControlName=\"completed\"\n name=\"completed\">\n </ui-switch>\n </div>\n </div>\n <div class=\"col-12 col-sm-auto ms-sm-auto d-flex align-items-center gap-2 mt-2 mt-sm-0\">\n <a class=\"btn btn-outline-primary\"\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\">Submit Note</button>\n </div>\n </div>\n </div>\n }\n @if (buttonDisable) {\n <div\n class=\"no-actions pt-4\">\n <pw-no-data [withImage]=\"true\" [message]=\"\n 'Crm.ContactMessage.NoActionsInContactInfoMessage' | transloco\n \">\n <span><a [routerLink]=\"[\n '/' +\n subscription?.slug +\n routers.configurations +\n 'actions'\n ]\">Take me to the actions configuration section.</a></span>\n </pw-no-data>\n </div>\n }\n </form>\n @if (!isLoaded) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n }\n @if (!contactComments?.length && isLoaded) {\n <div\n class=\"no-actions pt-3\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoActionsMessage' | transloco\">\n </pw-no-data>\n </div>\n }\n @if (contactComments.length) {\n <div\n id=\"timeline\"\n class=\"pt-3 clear-both timeline-center timeline-wrapper\">\n <ul class=\"timeline\">\n <li class=\"timeline-line\"></li>\n </ul>\n <ul class=\"timeline\">\n <li class=\"timeline-line\"></li>\n @for (\n item of contactComments; track\n item.id; let i = $index; let odd = $odd; let even = $even) {\n <li class=\"timeline-item\"\n [ngClass]=\"{ 'mt-5': odd }\"\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 card pb-0 position-static\">\n <div class=\"card-header\">\n <div class=\"mb-0 clearfix\">\n <textarea type=\"text\"\n [id]=\"'crm-contact-timeline-comment-' + item.id\"\n name=\"comment\"\n class=\"comment-field form-control p-0\"\n [(ngModel)]=\"item.comment\">{{ item.comment }}</textarea>\n @if (!showFullComment || item.id !== commentId) {\n <p class=\"float-start mb-0\"\n >\n {{ item.comment | slice: 0:170\n }}@if (item.comment.length > 170) {\n <a\n class=\"text-secondary\"\n (click)=\"\n showFullComment = true; commentId = item.id\n \">...show more</a>\n }\n </p>\n }\n @if (showFullComment && item.id === commentId) {\n <p class=\"float-start mb-0\"\n >\n {{ item.comment }}\n @if (\n item.comment.length > 170 && showFullComment\n ) {\n <a\n (click)=\"showFullComment = false\"\n class=\"text-secondary\">...show less</a>\n }\n </p>\n }\n @if (userId === item.owner_id || hasAccess) {\n <button class=\"btn btn-md edit-btn float-end py-0\"\n (click)=\"showEditControls($event)\"\n >\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></i>\n </button>\n }\n </div>\n <div class=\"card-subtitle text-muted my-0 clearfix\">\n <div class=\"float-start owner-meta\">\n By {{ item.owner.first_name + ' ' + item.owner.last_name }} on\n @if (!updating || actionId !== item.id) {\n <span class=\"font-small-3\">{{ item.when }}</span>\n }\n @if (updating && actionId === item.id) {\n <input\n [id]=\"'crm-contact-info-when-' + item.id\"\n name=\"when\"\n placeholder=\"dd-mmm-yyyy\"\n [value]=\"item.when\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (focus)=\"d.toggle()\"\n (dateSelect)=\"onDateSelect($event, item)\"\n aria-label=\"Date\" />\n }\n </div>\n @if (userId === item.owner_id || hasAccess) {\n <button type=\" button\"\n class=\"btn btn-sm float-end when-btn py-0\"\n (click)=\"showDatePickerUpdate(item.id)\">\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></i>\n </button>\n }\n </div>\n <div class=\"action-row\">\n <span class=\"badge bg-primary\">{{\n item?.crm_action?.name\n }}</span>\n @if (\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n ) {\n <span\n class=\"badge bg-success ms-2\">Open</span>\n }\n @if (!item.cancelled && !item.completed) {\n <p [class.text-danger]=\"!item.color\"\n class=\"due-status mb-0\">\n {{ item.due }}\n </p>\n }\n <span class=\"action-icons\">\n @if (\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n ) {\n <a\n ngbTooltip=\"Set as completed\"\n aria-label=\"Set as completed\"\n class=\"me-3 ms-3\"\n href=\"#\"\n (click)=\"\n $event.preventDefault();\n setAsCompletedOrUncompleted(\n item.id,\n item,\n item.completed\n )\n \">\n <i class=\"fa fa-tasks completed\" aria-hidden=\"true\"></i>\n </a>\n }\n @if (\n !item.cancelled &&\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n ) {\n <a\n ngbTooltip=\"Set as cancelled\"\n aria-label=\"Set as cancelled\"\n href=\"#\"\n (click)=\"$event.preventDefault(); setAsCancelled(item.id, item)\">\n <i\n class=\"fa fa-times delete-icon\"\n aria-hidden=\"true\"\n ></i>\n </a>\n }\n @if (\n item.completed &&\n (userId === item.owner_id || hasAccess)\n ) {\n <a\n ngbTooltip=\"Set as UnCompleted\"\n aria-label=\"Set as UnCompleted\"\n href=\"#\"\n (click)=\"\n $event.preventDefault();\n setAsCompletedOrUncompleted(\n item.id,\n item,\n item.completed\n )\n \"\n class=\"ms-2\">\n <i class=\"far fa-window-close\" aria-hidden=\"true\"></i>\n </a>\n }\n </span>\n </div>\n <div class=\"control-btns mt-3 text-end\">\n <button type=\"button\"\n class=\"btn btn-sm btn-outline-default me-2\"\n (click)=\"showEditControls(undefined)\">\n Cancel\n </button>\n <button class=\"btn btn-sm btn-primary\"\n type=\"button\"\n (click)=\"updateComment(item)\">\n Submit\n </button>\n </div>\n </div>\n </div>\n </li>\n }\n </ul>\n </div>\n }\n </ng-template>\n </li>\n <li [ngbNavItem]=\"2\">\n <a ngbNavLink>Versioning</a>\n <ng-template ngbNavContent>\n @for (version of contactVersioning; track version.item_id) {\n <div>\n <p>\n <strong>Event: </strong>{{ version.event }} | <strong>Author: </strong>@if (version?.author) {\n <a\n [routerLink]=\"['/members', version?.author?.slug]\">{{ version?.author | ifNameNullShowEmail }}</a>\n }\n | <strong>Created at: </strong>{{ version.created_at | dateFormat: 'datetime' }}<br />\n <strong>Object: </strong>{{ version.object | json }}\n </p>\n <hr />\n </div>\n }\n @if (contactVersioning?.length === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoVersionsMessage' | transloco\">\n </pw-no-data>\n </div>\n }\n </ng-template>\n </li>\n <li [ngbNavItem]=\"3\">\n <a ngbNavLink>Files</a>\n <ng-template ngbNavContent>\n <pw-smart-crm-company-files [contactId]=\"contactId\"\n [accountId]=\"accountId\">\n </pw-smart-crm-company-files>\n </ng-template>\n </li>\n </ul>\n <div [ngbNavOutlet]=\"nav\"></div>\n </div>\n </div>\n </div>\n}\n</div>\n\n<ng-template #content\n let-modal>\n <div class=\"modal-header\">\n <h3 class=\"modal-title mb-0 p-0\">{{ 'Upload File' | transloco }}</h3>\n <button type=\"button\"\n class=\"btn-close float-end\"\n aria-label=\"Close\"\n (click)=\"modal.dismiss()\">\n\n </button>\n </div>\n <div class=\"modal-body\">\n <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n <div class=\"row p-2\">\n <div class=\"col-12\">\n <div class=\"upload-box\">\n <div class=\"upload-box-content\">\n <div class=\"drop-container\"\n ngFileDrop\n [options]=\"options\"\n (uploadOutput)=\"onUploadOutput($event)\"\n [uploadInput]=\"uploadInput\">\n <p>\n Drag files here or\n <label class=\"upload-button\" for=\"contact-info-file-upload\">\n <input type=\"file\"\n id=\"contact-info-file-upload\"\n name=\"contact-info-file-upload\"\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 @for (f of files; track f.name; let i = $index) {\n <div class=\"upload-item\"\n >\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 @if (!f['uploaded']) {\n <span>{{ f.progress?.data?.percentage - 1 }}%\n </span>\n }\n @if (f['uploaded']) {\n <span>100 %</span>\n }\n @if (!f['uploaded']) {\n <span>Uploading...</span>\n }\n @if (f['uploaded']) {\n <span>Done</span>\n }\n </span>\n @if (f.progress?.data?.percentage !== 0 && !f['uploaded']) {\n <span class=\"speed-and-eta-text\"\n >\n <span>{{ f.progress?.data?.speedHuman }} </span>\n <span>ETA {{ f.progress?.data?.etaHuman }}</span>\n </span>\n }\n </div>\n </div>\n </div>\n }\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)}.timeline-card.card{border:1px solid #e2e5ea;border-radius:10px;box-shadow:0 1px 2px #1018280f}.timeline-card.card .card-header{padding:14px 16px 6px;background:transparent;border-bottom:0}.timeline-card.card .card-header p.float-start{font-size:14px;line-height:1.5}.timeline-card.card .due-status.text-danger{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:9999px;background:#fbecea;color:#b23a2c!important;font-size:12px;font-weight:600;line-height:1.2;border:1px solid #f3d4cf}.timeline-card.card .due-status.text-danger:before{content:\"\";width:6px;height:6px;border-radius:50%;background:#c0392b}.timeline-card.card .owner-meta{color:#5a6473;font-size:12px;font-weight:500}.timeline-card.card .owner-meta .font-small-3{color:#5a6473}.timeline-card.card .action-owner{display:inline-flex;align-items:center;gap:5px;margin-top:10px;color:#5a6473!important;font-size:12px;text-decoration:none}.timeline-card.card .action-owner i{font-size:11px;color:#a8afbc}.timeline-card.card .action-owner:hover{color:var(--first, #1769e1)!important}.timeline-card.card .badge{margin-top:10px;padding:4px 10px;border-radius:9999px;font-size:12px;font-weight:600;letter-spacing:0}.timeline-card.card .badge.bg-primary{background-color:#f1f3f6!important;color:#3d4654!important;border:1px solid #e2e5ea}.timeline-card.card .badge.bg-success{display:inline-flex;align-items:center;gap:6px;background-color:#e7f5ee!important;color:#1f7a47!important;border:1px solid #c9e9d6}.timeline-card.card .badge.bg-success:before{content:\"\";width:6px;height:6px;border-radius:50%;background:#1f9d57}.timeline-card.card .action-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}.timeline-card.card .action-row .badge,.timeline-card.card .action-row .due-status{margin:0!important}.timeline-card.card .action-icons{display:inline-flex;align-items:center;gap:14px;margin-left:auto}.timeline-card.card .action-icons a{margin:0!important}.timeline-card.card .edit-icon{color:#7c8696;transition:color .15s ease}.timeline-card.card .edit-btn:hover .edit-icon,.timeline-card.card .when-btn:hover .edit-icon{color:var(--first, #1769e1)}.timeline-card.card .completed{color:#1f9d57}.timeline-card.card .delete-icon{color:#c0392b}.timeline-badge .bg-red.bg-lighten-1{background-color:#fbeae8!important}.timeline-badge .bg-red.bg-lighten-1 .timeline-year,.timeline-badge .bg-red.bg-lighten-1 .date-year{color:#c0392b!important}.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}.user-info .about-readview{padding:4px 8px 8px}.user-info .about-readview .row{--bs-gutter-x: 1rem}.user-info .about-readview .readview-section{display:block;margin:24px 0 14px;padding-top:18px;border-top:1px solid #e2e5ea;color:#5a6473;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}.user-info .about-readview .readview-section:first-of-type{margin-top:4px;padding-top:0;border-top:0}.user-info .about-readview .readview-field{margin-bottom:20px}.user-info .about-readview .label{display:block;margin-bottom:4px;color:#7c8696;font-size:12px;font-weight:500;text-transform:none}.user-info .about-readview .readview-value{max-width:100%;margin:0;color:#272e38;font-size:14px;font-weight:500;line-height:1.4;word-break:break-word}.user-info .about-readview a.readview-value{color:var(--first, #1769e1);text-decoration:none}.user-info .about-readview a.readview-value:hover{text-decoration:underline}.user-info .about-readview .badge{font-weight:500}.control-btns{display:none}.comment-field{border:0;border-bottom:1px solid rgb(242,242,242);color:#1769e1;display:none;font-size:15px;min-height:100px;padding:2px 5px!important}.comment-field:focus{border:1px solid rgb(23,105,225)!important;border-bottom:0;box-shadow:none}p{max-width:85%;white-space:pre-wrap}.show-controls .comment-field,.show-controls .control-btns{display:block}.show-controls p,.show-controls .edit-btn{display:none}select{appearance:none}textarea{resize:none}.clear-both{clear:both}.isDisabled input[type=text],.isDisabled input,.isDisabled textarea,.isDisabled p-dropdown,.isDisabled p-select,.isDisabled p-autocomplete,.isDisabled select{pointer-events:none}.timeline-card.card{min-height:auto}.completed-toggle ::ng-deep .switch-label-checked,.completed-toggle ::ng-deep .switch-label-unchecked{font-size:11px!important;letter-spacing:.3px;text-transform:none}@media(max-width:575.98px){.completed-toggle{padding-top:10px}}.when-btn:focus{border:0;box-shadow:none}.no-actions{clear:both}::ng-deep body .invalid-field{border:1px solid rgb(255,88,107)!important}.action-btn.active{color:#fff!important;background-color:var(--first)}.form-action-buttons{margin-bottom:14px;margin-top:15px}\n"] }]
|
|
3308
|
+
args: [{ selector: 'pw-smart-crm-contact-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 Contact Info\n </h2>\n </div>\n <a class=\"btn btn-sm btn-outline-primary float-end mb-3\"\n data-cy=\"add-opportunities\"\n (click)=\"navigateToOpportunities()\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n </a>\n </div>\n @if (!isDataLoaded) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner> </p-progressSpinner>\n </div>\n }\n @if (isDataLoaded) {\n <div>\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 <pw-clearbit-icon [name]=\"data | ifNameNullShowEmail\"\n altText=\"Contact\"\n [size]=\"100\"\n iconClass=\"mb-3\"></pw-clearbit-icon>\n </a>\n </div>\n <div class=\"mb-4 d-flex justify-content-between align-items-center\">\n <h4 class=\"d-inline-block\">\n About @if (data?.id) {\n <span>{{ data | ifNameNullShowEmail }}</span>\n }\n </h4>\n @if (isFormEdit) {\n <a href=\"#\"\n class=\"btn btn-sm btn-outline-primary float-end\"\n (click)=\"$event.preventDefault(); isFormEdit = !isFormEdit\">Edit</a>\n }\n </div>\n @if (isFormEdit) {\n <div class=\"about-readview\">\n @if (data?.first_name || data?.last_name || data?.headline) {\n <h3 class=\"readview-section\">{{ 'Crm.ContactMessage.Section.Identity' | transloco }}</h3>\n <div class=\"row\">\n @if (data?.first_name) {\n <div class=\"col-6 readview-field\">\n <span class=\"label\">{{ 'Crm.ContactMessage.FirstName' | transloco }}</span>\n <p class=\"readview-value\">{{ data.first_name }}</p>\n </div>\n }\n @if (data?.last_name) {\n <div class=\"col-6 readview-field\">\n <span class=\"label\">{{ 'Crm.ContactMessage.LastName' | transloco }}</span>\n <p class=\"readview-value\">{{ data.last_name }}</p>\n </div>\n }\n @if (data?.headline) {\n <div class=\"col-12 readview-field\">\n <span class=\"label\">{{ 'Crm.ContactMessage.Headline' | transloco }}</span>\n <p class=\"readview-value\">{{ data.headline }}</p>\n </div>\n }\n </div>\n }\n @if (\n data?.email || data?.tel || data?.crm_account_id ||\n data?.linkedin_url || f['location'].value || f['country'].value\n ) {\n <h3 class=\"readview-section\">{{ 'Crm.ContactMessage.Section.Contact' | transloco }}</h3>\n <div class=\"row\">\n @if (data?.email) {\n <div class=\"col-12 readview-field\">\n <span class=\"label\">{{ 'Crm.ContactMessage.Email' | transloco }}</span>\n <a class=\"readview-value\" href=\"mailTo:{{ data.email }}\">{{ data.email }}</a>\n </div>\n }\n @if (data?.crm_account_id) {\n <div class=\"col-12 readview-field\">\n <span class=\"label\">{{ 'Crm.ContactMessage.Account' | transloco }}</span>\n <a class=\"readview-value\"\n [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, data.crm_account_id]\"\n >{{ f['crm_account_id'].value?.name }}</a>\n </div>\n }\n @if (data?.linkedin_url) {\n <div class=\"col-12 readview-field\">\n <span class=\"label\">{{ 'Crm.ContactMessage.LinkedInUrl' | transloco }}</span>\n <a class=\"readview-value\" [href]=\"data.linkedin_url\" target=\"blank\">{{ data.linkedin_url }}</a>\n </div>\n }\n @if (f['location'].value) {\n <div class=\"col-12 readview-field\">\n <span class=\"label\">{{ 'Crm.AccountMessage.Location' | transloco }}</span>\n <p class=\"readview-value\">{{ f['location'].value }}</p>\n </div>\n }\n @if (f['country'].value) {\n <div class=\"col-6 readview-field\">\n <span class=\"label\">{{ 'Crm.AccountMessage.Country' | transloco }}</span>\n @if (countries$ | async; as countries) {\n <p class=\"readview-value\">{{ labelFor(countries, f['country'].value, 'code', 'name') || f['country'].value }}</p>\n }\n </div>\n }\n @if (data?.tel) {\n <div class=\"col-6 readview-field\">\n <span class=\"label\">{{ 'Crm.ContactMessage.Tel' | transloco }}</span>\n <p class=\"readview-value\">{{ data.tel }}</p>\n </div>\n }\n </div>\n }\n @if (data?.potential || data?.labels?.length) {\n <h3 class=\"readview-section\">{{ 'Crm.ContactMessage.Section.Classification' | transloco }}</h3>\n <div class=\"row\">\n @if (data?.potential) {\n <div class=\"col-6 readview-field\">\n <span class=\"label\">{{ 'Crm.ContactMessage.Potential' | transloco }}</span>\n <p class=\"readview-value text-capitalize\">{{ data.potential }}</p>\n </div>\n }\n @if (data?.labels?.length) {\n <div class=\"col-12 readview-field\">\n <span class=\"label\">{{ 'Crm.ContactMessage.Labels' | transloco }}</span>\n <div class=\"readview-value\">\n @for (label of data.labels; track label) {\n <span class=\"badge bg-secondary me-1 mb-1\">{{ label }}</span>\n }\n </div>\n </div>\n }\n </div>\n }\n </div>\n } @else {\n <form [formGroup]=\"aboutControls\">\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"input_first_name_1\">{{\n 'Crm.ContactMessage.FirstName' | transloco\n }}</label>\n <input type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"first_name\"\n [ngClass]=\"{ 'is-invalid': submitted && f['first_name'].errors }\" id=\"input_first_name_1\" name=\"input_first_name_1\"/>\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"input_last_name_2\">{{\n 'Crm.ContactMessage.LastName' | transloco\n }}</label>\n <input type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"last_name\"\n [ngClass]=\"{ 'is-invalid': submitted && f['last_name'].errors }\" id=\"input_last_name_2\" name=\"input_last_name_2\"/>\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"crm-contact-info-location\">{{\n 'Crm.AccountMessage.Location' | transloco\n }}</label>\n <input ngx-gp-autocomplete\n id=\"crm-contact-info-location\"\n name=\"location\"\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 @if (countries$ | async; as countries) {\n <div class=\"mb-3\">\n <span id=\"crm-contact-info-country-label\">{{ 'Crm.AccountMessage.Country' | transloco\n }}<span class=\"text-danger required-icon\">*</span>\n </span>\n <p-select\n [attr.aria-labelledby]=\"'crm-contact-info-country-label'\"\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-select>\n </div>\n }\n <div class=\"mb-3 ui-fluid skills-modal\">\n <span class=\"label mb-2 d-block\" id=\"crm-contact-info-account-label\">{{ 'Crm.ContactMessage.Account' | transloco }}\n </span>\n <p-autoComplete appendTo=\"body\"\n [attr.aria-labelledby]=\"'crm-contact-info-account-label'\"\n [suggestions]=\"filteredAccounts\"\n formControlName=\"crm_account_id\"\n dataKey=\"id\"\n optionLabel=\"name\"\n [dropdown]=\"true\"\n (completeMethod)=\"search($event)\"\n styleClass=\"w-100\"\n [inputStyleClass]=\"\n (f['crm_account_id'].touched || submitted) && f['crm_account_id'].errors\n ? 'invalid-field'\n : ''\n \"\n placeholder=\"Search accounts\"\n [multiple]=\"false\">\n </p-autoComplete>\n @if ((f['crm_account_id'].touched || submitted) && f['crm_account_id'].errors) {\n <span class=\"text-danger\">account is required</span>\n }\n </div>\n <div class=\"mb-3\">\n <span class=\"label mb-0 d-block\" id=\"crm-contact-info-email-label\">{{ 'Crm.ContactMessage.Email' | transloco }}</span>\n <input type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n [attr.aria-labelledby]=\"'crm-contact-info-email-label'\"\n formControlName=\"email\"\n [ngClass]=\"{ 'is-invalid': submitted && f['email'].errors }\" id=\"input_email_4\" name=\"input_email_4\"/>\n </div>\n <div class=\"mb-3\">\n <span class=\"label mb-0 d-block\" id=\"crm-contact-info-linkedin-label\">{{\n 'Crm.ContactMessage.LinkedInUrl' | transloco\n }}</span>\n <input\n type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n [attr.aria-labelledby]=\"'crm-contact-info-linkedin-label'\"\n formControlName=\"linkedin_url\"\n [ngClass]=\"{ 'is-invalid': submitted && f['linkedin_url'].errors }\" id=\"input_linkedin_url_5\" name=\"input_linkedin_url_5\"/>\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"input_headline_6\">{{\n 'Crm.ContactMessage.Headline' | transloco\n }}</label>\n <input type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"headline\"\n [ngClass]=\"{ 'is-invalid': submitted && f['headline'].errors }\" id=\"input_headline_6\" name=\"input_headline_6\"/>\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"input_tel_7\">{{ 'Crm.ContactMessage.Tel' | transloco }}</label>\n <input type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"tel\" id=\"input_tel_7\" name=\"input_tel_7\"/>\n </div>\n <div class=\"mb-3\">\n <span class=\"label mb-0 d-block\" id=\"crm-contact-info-potential-label\">{{\n 'Crm.ContactMessage.Potential' | transloco\n }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-contact-info-potential-label'\"\n formControlName=\"potential\"\n [options]=\"potentials\"\n [placeholder]=\"'Select Potential'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['potential'].errors }\">\n </p-select>\n </div>\n <div class=\"mb-3\">\n <span class=\"label mb-0 d-block\" id=\"crm-contact-info-labels-label\">{{ 'Crm.ContactMessage.Labels' | transloco }} </span>\n <p-multiSelect inputId=\"crm-contact-info-labels\"\n [options]=\"labels\"\n [attr.aria-labelledby]=\"'crm-contact-info-labels-label'\"\n formControlName=\"labels\"\n appendTo=\"body\"></p-multiSelect>\n </div>\n <div class=\"text-end form-action-buttons\">\n <input type=\"button\"\n class=\"btn btn-outline-default\"\n (click)=\"isFormEdit = !isFormEdit; getUserInfo()\"\n value=\"Cancel\" />\n <input type=\"button\"\n class=\"btn btn-primary ms-3\"\n value=\"Submit\"\n (click)=\"updateContactInfo()\" />\n </div>\n </form>\n }\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 <label for=\"crm-contact-info-comment\" class=\"visually-hidden\">Note</label>\n <textarea id=\"crm-contact-info-comment\"\n name=\"comment\"\n class=\"form-control\"\n formControlName=\"comment\"\n rows=\"6\"></textarea>\n @if (\n actionControls.get('comment').touched &&\n actionControls.get('comment').invalid\n ) {\n <p class=\"text-danger\"\n >\n Note Required\n </p>\n }\n @if (actions.length) {\n <div\n class=\"d-block clear-both pt-3\">\n @for (action of actions; track action.id; let i = $index) {\n @if (action.visible) {\n <button\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 }\n }\n @if (submitAction && actionFormControls['crm_action_id'].invalid) {\n <div class=\"text-danger\"\n >\n Please select an action\n </div>\n }\n <div class=\"row mt-3 align-items-center g-2\">\n <div class=\"col-12 col-sm-3\">\n <label for=\"crm-contact-info-when\" class=\"visually-hidden\">Date</label>\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"crm-contact-info-when\"\n name=\"when\"\n placeholder=\"dd-mmm-yyyy\"\n formControlName=\"when\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (click)=\"d.toggle()\" />\n </div>\n </div>\n <div class=\"col-auto pe-0 completed-toggle\">\n <div class=\"d-flex align-items-center h-100\">\n <ui-switch\n [checkedLabel]=\"'Crm.Actions.Completed' | transloco\"\n [uncheckedLabel]=\"'Crm.Actions.Completed' | transloco\"\n [ariaLabel]=\"'Crm.Actions.Completed' | transloco\"\n [pTooltip]=\"'Crm.Actions.Tooltip.Completed' | transloco\"\n [appendTo]=\"'body'\"\n tooltipPosition=\"top\"\n formControlName=\"completed\"\n name=\"completed\">\n </ui-switch>\n </div>\n </div>\n <div class=\"col-12 d-flex justify-content-end align-items-center gap-2 mt-2\">\n <a class=\"btn btn-outline-primary\"\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\">Submit Note</button>\n </div>\n </div>\n </div>\n }\n @if (buttonDisable) {\n <div\n class=\"no-actions pt-4\">\n <pw-no-data [withImage]=\"true\" [message]=\"\n 'Crm.ContactMessage.NoActionsInContactInfoMessage' | transloco\n \">\n <span><a [routerLink]=\"[\n '/' +\n subscription?.slug +\n routers.configurations +\n 'actions'\n ]\">Take me to the actions configuration section.</a></span>\n </pw-no-data>\n </div>\n }\n </form>\n @if (!isLoaded) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n }\n @if (!contactComments?.length && isLoaded) {\n <div\n class=\"no-actions pt-3\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoActionsMessage' | transloco\">\n </pw-no-data>\n </div>\n }\n @if (contactComments.length) {\n <div\n id=\"timeline\"\n class=\"pt-3 clear-both timeline-center timeline-wrapper\">\n <ul class=\"timeline\">\n <li class=\"timeline-line\"></li>\n </ul>\n <ul class=\"timeline\">\n <li class=\"timeline-line\"></li>\n @for (\n item of contactComments; track\n item.id; let i = $index; let odd = $odd; let even = $even) {\n <li class=\"timeline-item\"\n [ngClass]=\"{ 'mt-5': odd }\"\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 card pb-0 position-static\">\n <div class=\"card-header\">\n <div class=\"mb-0 clearfix\">\n <textarea type=\"text\"\n [id]=\"'crm-contact-timeline-comment-' + item.id\"\n name=\"comment\"\n class=\"comment-field form-control p-0\"\n [(ngModel)]=\"item.comment\">{{ item.comment }}</textarea>\n @if (!showFullComment || item.id !== commentId) {\n <p class=\"float-start mb-0\"\n >\n {{ item.comment | slice: 0:170\n }}@if (item.comment.length > 170) {\n <a\n class=\"text-secondary\"\n (click)=\"\n showFullComment = true; commentId = item.id\n \">...show more</a>\n }\n </p>\n }\n @if (showFullComment && item.id === commentId) {\n <p class=\"float-start mb-0\"\n >\n {{ item.comment }}\n @if (\n item.comment.length > 170 && showFullComment\n ) {\n <a\n (click)=\"showFullComment = false\"\n class=\"text-secondary\">...show less</a>\n }\n </p>\n }\n @if (userId === item.owner_id || hasAccess) {\n <button class=\"btn btn-md edit-btn float-end py-0\"\n (click)=\"showEditControls($event)\"\n >\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></i>\n </button>\n }\n </div>\n <div class=\"card-subtitle text-muted my-0 clearfix\">\n <div class=\"float-start owner-meta\">\n By {{ item.owner.first_name + ' ' + item.owner.last_name }} on\n @if (!updating || actionId !== item.id) {\n <span class=\"font-small-3\">{{ item.when }}</span>\n }\n @if (updating && actionId === item.id) {\n <input\n [id]=\"'crm-contact-info-when-' + item.id\"\n name=\"when\"\n placeholder=\"dd-mmm-yyyy\"\n [value]=\"item.when\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (focus)=\"d.toggle()\"\n (dateSelect)=\"onDateSelect($event, item)\"\n aria-label=\"Date\" />\n }\n </div>\n @if (userId === item.owner_id || hasAccess) {\n <button type=\" button\"\n class=\"btn btn-sm float-end when-btn py-0\"\n (click)=\"showDatePickerUpdate(item.id)\">\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></i>\n </button>\n }\n </div>\n <div class=\"action-row\">\n <span class=\"badge bg-primary\">{{\n item?.crm_action?.name\n }}</span>\n @if (\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n ) {\n <span\n class=\"badge bg-success ms-2\">Open</span>\n }\n @if (!item.cancelled && !item.completed) {\n <p [class.text-danger]=\"!item.color\"\n class=\"due-status mb-0\">\n {{ item.due }}\n </p>\n }\n <span class=\"action-icons\">\n @if (\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n ) {\n <a\n ngbTooltip=\"Set as completed\"\n aria-label=\"Set as completed\"\n class=\"me-3 ms-3\"\n href=\"#\"\n (click)=\"\n $event.preventDefault();\n setAsCompletedOrUncompleted(\n item.id,\n item,\n item.completed\n )\n \">\n <i class=\"fa fa-tasks completed\" aria-hidden=\"true\"></i>\n </a>\n }\n @if (\n !item.cancelled &&\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n ) {\n <a\n ngbTooltip=\"Set as cancelled\"\n aria-label=\"Set as cancelled\"\n href=\"#\"\n (click)=\"$event.preventDefault(); setAsCancelled(item.id, item)\">\n <i\n class=\"fa fa-times delete-icon\"\n aria-hidden=\"true\"\n ></i>\n </a>\n }\n @if (\n item.completed &&\n (userId === item.owner_id || hasAccess)\n ) {\n <a\n ngbTooltip=\"Set as UnCompleted\"\n aria-label=\"Set as UnCompleted\"\n href=\"#\"\n (click)=\"\n $event.preventDefault();\n setAsCompletedOrUncompleted(\n item.id,\n item,\n item.completed\n )\n \"\n class=\"ms-2\">\n <i class=\"far fa-window-close\" aria-hidden=\"true\"></i>\n </a>\n }\n </span>\n </div>\n <div class=\"control-btns mt-3 text-end\">\n <button type=\"button\"\n class=\"btn btn-sm btn-outline-default me-2\"\n (click)=\"showEditControls(undefined)\">\n Cancel\n </button>\n <button class=\"btn btn-sm btn-primary\"\n type=\"button\"\n (click)=\"updateComment(item)\">\n Submit\n </button>\n </div>\n </div>\n </div>\n </li>\n }\n </ul>\n </div>\n }\n </ng-template>\n </li>\n <li [ngbNavItem]=\"2\">\n <a ngbNavLink>Versioning</a>\n <ng-template ngbNavContent>\n @for (version of contactVersioning; track version.item_id) {\n <div>\n <p>\n <strong>Event: </strong>{{ version.event }} | <strong>Author: </strong>@if (version?.author) {\n <a\n [routerLink]=\"['/members', version?.author?.slug]\">{{ version?.author | ifNameNullShowEmail }}</a>\n }\n | <strong>Created at: </strong>{{ version.created_at | dateFormat: 'datetime' }}<br />\n <strong>Object: </strong>{{ version.object | json }}\n </p>\n <hr />\n </div>\n }\n @if (contactVersioning?.length === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoVersionsMessage' | transloco\">\n </pw-no-data>\n </div>\n }\n </ng-template>\n </li>\n <li [ngbNavItem]=\"3\">\n <a ngbNavLink>Files</a>\n <ng-template ngbNavContent>\n <pw-smart-crm-company-files [contactId]=\"contactId\"\n [accountId]=\"accountId\">\n </pw-smart-crm-company-files>\n </ng-template>\n </li>\n </ul>\n <div [ngbNavOutlet]=\"nav\"></div>\n </div>\n </div>\n </div>\n}\n</div>\n\n<ng-template #content\n let-modal>\n <div class=\"modal-header\">\n <h3 class=\"modal-title mb-0 p-0\">{{ 'Upload File' | transloco }}</h3>\n <button type=\"button\"\n class=\"btn-close float-end\"\n aria-label=\"Close\"\n (click)=\"modal.dismiss()\">\n\n </button>\n </div>\n <div class=\"modal-body\">\n <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n <div class=\"row p-2\">\n <div class=\"col-12\">\n <div class=\"upload-box\">\n <div class=\"upload-box-content\">\n <div class=\"drop-container\"\n ngFileDrop\n [options]=\"options\"\n (uploadOutput)=\"onUploadOutput($event)\"\n [uploadInput]=\"uploadInput\">\n <p>\n Drag files here or\n <label class=\"upload-button\" for=\"contact-info-file-upload\">\n <input type=\"file\"\n id=\"contact-info-file-upload\"\n name=\"contact-info-file-upload\"\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 @for (f of files; track f.name; let i = $index) {\n <div class=\"upload-item\"\n >\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 @if (!f['uploaded']) {\n <span>{{ f.progress?.data?.percentage - 1 }}%\n </span>\n }\n @if (f['uploaded']) {\n <span>100 %</span>\n }\n @if (!f['uploaded']) {\n <span>Uploading...</span>\n }\n @if (f['uploaded']) {\n <span>Done</span>\n }\n </span>\n @if (f.progress?.data?.percentage !== 0 && !f['uploaded']) {\n <span class=\"speed-and-eta-text\"\n >\n <span>{{ f.progress?.data?.speedHuman }} </span>\n <span>ETA {{ f.progress?.data?.etaHuman }}</span>\n </span>\n }\n </div>\n </div>\n </div>\n }\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)}.timeline-card.card{border:1px solid #e2e5ea;border-radius:10px;box-shadow:0 1px 2px #1018280f}.timeline-card.card .card-header{padding:14px 16px 6px;background:transparent;border-bottom:0}.timeline-card.card .card-header p.float-start{font-size:14px;line-height:1.5}.timeline-card.card .due-status.text-danger{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:9999px;background:#fbecea;color:#b23a2c!important;font-size:12px;font-weight:600;line-height:1.2;border:1px solid #f3d4cf}.timeline-card.card .due-status.text-danger:before{content:\"\";width:6px;height:6px;border-radius:50%;background:#c0392b}.timeline-card.card .owner-meta{color:#5a6473;font-size:12px;font-weight:500}.timeline-card.card .owner-meta .font-small-3{color:#5a6473}.timeline-card.card .action-owner{display:inline-flex;align-items:center;gap:5px;margin-top:10px;color:#5a6473!important;font-size:12px;text-decoration:none}.timeline-card.card .action-owner i{font-size:11px;color:#a8afbc}.timeline-card.card .action-owner:hover{color:var(--first, #1769e1)!important}.timeline-card.card .badge{margin-top:10px;padding:4px 10px;border-radius:9999px;font-size:12px;font-weight:600;letter-spacing:0}.timeline-card.card .badge.bg-primary{background-color:#f1f3f6!important;color:#3d4654!important;border:1px solid #e2e5ea}.timeline-card.card .badge.bg-success{display:inline-flex;align-items:center;gap:6px;background-color:#e7f5ee!important;color:#1f7a47!important;border:1px solid #c9e9d6}.timeline-card.card .badge.bg-success:before{content:\"\";width:6px;height:6px;border-radius:50%;background:#1f9d57}.timeline-card.card .action-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}.timeline-card.card .action-row .badge,.timeline-card.card .action-row .due-status{margin:0!important}.timeline-card.card .action-icons{display:inline-flex;align-items:center;gap:14px;margin-left:auto}.timeline-card.card .action-icons a{margin:0!important}.timeline-card.card .edit-icon{color:#7c8696;transition:color .15s ease}.timeline-card.card .edit-btn:hover .edit-icon,.timeline-card.card .when-btn:hover .edit-icon{color:var(--first, #1769e1)}.timeline-card.card .completed{color:#1f9d57}.timeline-card.card .delete-icon{color:#c0392b}.timeline-badge .bg-red.bg-lighten-1{background-color:#fbeae8!important}.timeline-badge .bg-red.bg-lighten-1 .timeline-year,.timeline-badge .bg-red.bg-lighten-1 .date-year{color:#c0392b!important}.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}.user-info .about-readview{padding:4px 8px 8px}.user-info .about-readview .row{--bs-gutter-x: 1rem}.user-info .about-readview .readview-section{display:block;margin:24px 0 14px;padding-top:18px;border-top:1px solid #e2e5ea;color:#5a6473;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}.user-info .about-readview .readview-section:first-of-type{margin-top:4px;padding-top:0;border-top:0}.user-info .about-readview .readview-field{margin-bottom:20px}.user-info .about-readview .label{display:block;margin-bottom:4px;color:#7c8696;font-size:12px;font-weight:500;text-transform:none}.user-info .about-readview .readview-value{max-width:100%;margin:0;color:#272e38;font-size:14px;font-weight:500;line-height:1.4;word-break:break-word}.user-info .about-readview a.readview-value{color:var(--first, #1769e1);text-decoration:none}.user-info .about-readview a.readview-value:hover{text-decoration:underline}.user-info .about-readview .badge{font-weight:500}.control-btns{display:none}.comment-field{border:0;border-bottom:1px solid rgb(242,242,242);color:#1769e1;display:none;font-size:15px;min-height:100px;padding:2px 5px!important}.comment-field:focus{border:1px solid rgb(23,105,225)!important;border-bottom:0;box-shadow:none}p{max-width:85%;white-space:pre-wrap}.show-controls .comment-field,.show-controls .control-btns{display:block}.show-controls p,.show-controls .edit-btn{display:none}select{appearance:none}textarea{resize:none}.clear-both{clear:both}.isDisabled input[type=text],.isDisabled input,.isDisabled textarea,.isDisabled p-dropdown,.isDisabled p-select,.isDisabled p-autocomplete,.isDisabled select{pointer-events:none}.timeline-card.card{min-height:auto}.completed-toggle ::ng-deep .switch-label-checked,.completed-toggle ::ng-deep .switch-label-unchecked{font-size:11px!important;letter-spacing:.3px;text-transform:none}@media(max-width:575.98px){.completed-toggle{padding-top:10px}}.when-btn:focus{border:0;box-shadow:none}.no-actions{clear:both}::ng-deep body .invalid-field{border:1px solid rgb(255,88,107)!important}.action-btn.active{color:#fff!important;background-color:var(--first)}.form-action-buttons{margin-bottom:14px;margin-top:15px}\n"] }]
|
|
3309
3309
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: i1.CrmService }, { type: i2$2.NgbCalendar }, { type: i2$2.NgbModal }, { type: i2.AuthService }, { type: i2.GeoService }, { type: i0.ChangeDetectorRef }, { type: Document, decorators: [{
|
|
3310
3310
|
type: Inject,
|
|
3311
3311
|
args: [DOCUMENT]
|