@posiwise/smart-crm 0.0.24 → 0.0.25

package/fesm2022/posiwise-smart-crm.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { Component, EventEmitter, Input, Inject, ChangeDetectionStrategy, NgModule } from '@angular/core';
 import * as i3 from '@angular/forms';
-import { UntypedFormBuilder, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { UntypedFormBuilder, Validators, UntypedFormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i1 from '@posiwise/smart-crm-shared';
 import { CRM_ACCOUNT_FILES_PATH, CRM_PERMISSIONS, CRM_KEYS } from '@posiwise/smart-crm-shared';
 import { PAGE_SIZE, DOCUMENT_TYPE_EXT, TOKEN_HEADER_KEY } from '@posiwise/common-utilities';
@@ -45,7 +45,7 @@ import * as i9$2 from 'primeng/multiselect';
 import * as i8$2 from 'primeng/dropdown';
 import { DropdownModule } from 'primeng/dropdown';
 import { __decorate, __metadata } from 'tslib';
-import { ValidateForm } from '@posiwise/utils';
+import { ValidateForm, QuillHelper } from '@posiwise/utils';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import * as i10$1 from 'primeng/tooltip';
@@ -3378,6 +3378,18 @@ class SmartCrmLeadsDetailsComponent extends AppBaseComponent {
                     this.form.get('crm_account_id').patchValue(account);
                 }
             });
+            if (this.form.invalid) {
+                this.markAllAsTouched(this.form);
+            }
+        });
+    }
+    markAllAsTouched(formGroup) {
+        Object.keys(formGroup.controls).forEach(controlName => {
+            const control = formGroup.controls[controlName];
+            control.markAsTouched(); // Mark each control as touched
+            if (control instanceof UntypedFormGroup) {
+                this.markAllAsTouched(control); // Recursively mark nested form groups
+            }
         });
     }
     /** Function to execute on form submission */
@@ -3682,6 +3694,8 @@ class SmartCrmCommunicationsDetailsComponent extends AppBaseComponent {
         this.allCommunications = [];
         this.isLoading = true;
         this.userNameSyntax = '{{ @user.share_name }}';
+        QuillHelper.init();
+        this.editorConfig = QuillHelper.getEditorConfig();
         this.form = AppSmartCrm.getMarketingForm();
     }
     ngOnInit() {
@@ -3891,7 +3905,7 @@ class SmartCrmCommunicationsDetailsComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmCommunicationsDetailsComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }, { token: i2.CommonService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmCommunicationsDetailsComponent, selector: "pw-smart-crm-communications-details", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 d-flex\">\n    <a href=\"javascript:void(0)\"\n      (click)=\"back()\"\n      class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n    <h3 class=\"m-subheader__title m-subheader__title--separator\">\n      <span>{{ data?.id ? 'Edit' : 'Create new' }} marketing email</span>\n    </h3>\n  </div>\n</div>\n<ng-container>\n  <div class=\"container-fluid pw-tab\">\n    <div class=\"p-2 mt-3\">\n      <p class=\"my-3\">\n        You can insert the user name by adding the following syntax in the body or title:\n        {{ userNameSyntax }}\n      </p>\n      <div class=\"w-100 text-center mt-3\"\n        *ngIf=\"isLoading\">\n        <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n      </div>\n      <form [formGroup]=\"form\"\n        *ngIf=\"!isLoading\"\n        (ngSubmit)=\"onSave()\">\n        <div class=\"row mb-3\">\n          <div class=\"col-12 col-md-12\">\n            <pw-input-container [label]=\"'Crm.CommunicationsMessage.Title' | transloco\"\n              name=\"title\"\n              [showTooltip]=\"true\"\n              [tooltipText]=\"'Crm.CommunicationsMessage.Tooltip.Title' | transloco\"\n              errorMsg=\"Please enter subject\">\n              <input type=\"text\"\n                class=\"form-control\"\n                formControlName=\"title\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\" />\n            </pw-input-container>\n          </div>\n\n          <div class=\"col-12 col-md-12\">\n            <pw-input-container [label]=\"'Crm.CommunicationsMessage.Body' | transloco\"\n              [showTooltip]=\"true\"\n              [tooltipText]=\"'Crm.CommunicationsMessage.Tooltip.Body' | transloco\"\n              name=\"body\"\n              errorMsg=\"Please enter body\">\n              <quill-editor [styles]=\"{ height: '220px' }\"\n                class=\"w-100\"\n                formControlName=\"body\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['body'].errors }\">\n              </quill-editor>\n            </pw-input-container>\n          </div>\n\n          <div class=\"col-12 col-md-2\">\n            <div class=\"mb-3\">\n              <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.SendAt' | transloco\n                                }}<span class=\"text-danger required-icon\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Crm.CommunicationsMessage.Tooltip.SendAt' | transloco\n                                }}</span></label>\n              <div class=\"input-group\">\n                <input class=\"form-control\"\n                  placeholder=\"dd-mmm-yyyy\"\n                  formControlName=\"send_at\"\n                  ngbDatepicker\n                  #c=\"ngbDatepicker\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['send_at'].errors }\" />\n                <div class=\"input-group-append\">\n                  <button class=\"btn btn-primary\"\n                    (click)=\"c.toggle()\"\n                    type=\"button\">\n                    <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"col-12 col-md-2\">\n            <div class=\"mb-3\">\n              <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.SendUntil' | transloco\n                                }}<span class=\"text-danger required-icon\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Crm.CommunicationsMessage.Tooltip.SendUntil' | transloco\n                                }}</span></label>\n              <div class=\"input-group\">\n                <input class=\"form-control\"\n                  placeholder=\"dd-mmm-yyyy\"\n                  formControlName=\"send_until\"\n                  ngbDatepicker\n                  #d=\"ngbDatepicker\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['send_until'].errors }\" />\n                <div class=\"input-group-append\">\n                  <button class=\"btn btn-primary\"\n                    (click)=\"d.toggle()\"\n                    type=\"button\">\n                    <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"col-12 col-md-3\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.PreviousNewsletter' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.PreviousNewsletter' | transloco\n                            }}</span></label>\n              <select class=\"form-select\"\n                formControlName=\"previous_newsletter_id\"\n                (change)=\"onNewsletterSelect($event)\"\n                [ngClass]=\"{\n                                    'is-invalid': submitted && f['previous_newsletter_id'].errors\n                                }\">\n                <option value=\"\">select previous newsletter</option>\n                <option *ngFor=\"let option of allCommunications\"\n                  [value]=\"option.id\">\n                  {{ option.title }}\n                </option>\n              </select>\n          </div>\n\n          <div class=\"col-12 col-sm-2\"\n            *ngIf=\"daysToNewsletterField\">\n            <pw-input-container [label]=\"\n                                'Crm.CommunicationsMessage.DaysToWaitFromPreviousNewsletter'\n                                    | transloco\n                            \"\n              [showTooltip]=\"true\"\n              [tooltipText]=\"\n                                'Crm.CommunicationsMessage.Tooltip.DaysToWaitFromPreviousNewsletter'\n                                    | transloco\n                            \"\n              name=\"days_to_wait_from_previous_newsletter\"\n              errorMsg=\"Please enter days to wait from previous newsletter\">\n              <input type=\"number\"\n                class=\"form-control\"\n                formControlName=\"days_to_wait_from_previous_newsletter\"\n                [ngClass]=\"{\n                                    'is-invalid':\n                                        submitted && f['days_to_wait_from_previous_newsletter'].errors\n                                }\" />\n            </pw-input-container>\n          </div>\n\n          <div class=\"col-12 col-md-1\">\n            <div class=\"mb-3\">\n              <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.ShouldDeliver' | transloco\n                                }}<span class=\"text-danger required-icon\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Crm.CommunicationsMessage.Tooltip.IsPushed' | transloco\n                                }}</span>\n              </label>\n              <ui-switch class=\"d-block\"\n                formControlName=\"is_pushed\"\n                (change)=\"onChange($event, 'is_pushed')\"\n                name=\"is_pushed\">\n              </ui-switch>\n            </div>\n          </div>\n\n          <div class=\"col-12 col-md-2\">\n            <div class=\"mb-3\">\n              <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.CanReply' | transloco\n                                }}<span class=\"text-danger required-icon\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Crm.CommunicationsMessage.Tooltip.CanReply' | transloco\n                                }}</span>\n              </label>\n              <ui-switch class=\"d-block\"\n                formControlName=\"can_reply\"\n                name=\"can_reply\">\n              </ui-switch>\n            </div>\n          </div>\n        </div>\n\n        <h3>Decide who will receive the email</h3>\n\n        <div class=\"row mb-3\">\n          <div class=\"col-12 col-md-4\">\n            <div class=\"mb-3\">\n              <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.Location' | transloco\n                                }}<span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Crm.CommunicationsMessage.Tooltip.Location' | transloco\n                                }}</span></label>\n              <input ngx-gp-autocomplete\n                class=\"form-control\"\n                #places=\"ngx-places\"\n                formControlName=\"location\"\n                (onAddressChange)=\"handleAddressChange($event)\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['location'].errors }\" />\n            </div>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.Products' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.Products' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"crmProduct\"\n              [showHeader]=\"true\"\n              [showToggleAll]=\"true\"\n              formControlName=\"product_ids\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.Features' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.Features' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"featureKeys\"\n              [showHeader]=\"true\"\n              [showToggleAll]=\"true\"\n              formControlName=\"feature_keys\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.ContactPotential' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.ContactPotential' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"potentials\"\n              formControlName=\"contact_potential\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.ContactLabel' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.ContactLabel' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"labels\"\n              formControlName=\"contact_label\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.ContactSource' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.ContactSource' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"contactSource\"\n              formControlName=\"contact_source\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.AccountPriority' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.AccountPriority' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"priority\"\n              formControlName=\"account_priority\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.AccountStatus' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.AccountStatus' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"status\"\n              formControlName=\"account_status\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.AccountSource' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.AccountSource' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"source\"\n              formControlName=\"account_source\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.AccountSize' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.AccountSize' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"organizationSizes\"\n              formControlName=\"account_size\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <!-- Only new contacts -->\n          <div class=\"col-md-3\">\n            <div class=\"mb-3\">\n              <label class=\"info-circle mb-2\">{{ 'Crm.CommunicationsMessage.OnlyNewContacts' | transloco\n                                }}<span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Crm.CommunicationsMessage.Tooltip.OnlyNewContacts' | transloco\n                                }}</span>\n              </label>\n              <ui-switch class=\"d-block\"\n                formControlName=\"only_new_contacts\"\n                name=\"only_new_contacts\"\n                [ngClass]=\"{\n                        'is-invalid': submitted && f['only_new_contacts'].errors\n                    }\">\n              </ui-switch>\n            </div>\n          </div>\n        </div>\n        <div class=\"row\">\n          <div class=\"col-12 text-end mt-3\">\n            <button type=\"button\"\n              class=\"btn btn-outline-default me-2\"\n              (click)=\"back()\">\n              {{ 'Button.Cancel' | transloco }}\n            </button>\n            <button type=\"submit\"\n              [buttonBusy]=\"buttonBusy\"\n              class=\"btn btn-primary\"\n              [disabled]=\"!form.valid\"\n            >\n              {{ 'Button.Submit' | transloco }}\n            </button>\n          </div>\n        </div>\n      </form>\n    </div>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4$1.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "directive", type: i5.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "directive", type: i9.NgxGpAutocompleteDirective, selector: "[ngx-gp-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "component", type: i9$2.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i9$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i11.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText"] }, { kind: "component", type: i12$2.QuillEditorComponent, selector: "quill-editor" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmCommunicationsDetailsComponent, selector: "pw-smart-crm-communications-details", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 d-flex\">\n    <a href=\"javascript:void(0)\"\n      (click)=\"back()\"\n      class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n    <h3 class=\"m-subheader__title m-subheader__title--separator\">\n      <span>{{ data?.id ? 'Edit' : 'Create new' }} marketing email</span>\n    </h3>\n  </div>\n</div>\n<ng-container>\n  <div class=\"container-fluid pw-tab\">\n    <div class=\"p-2 mt-3\">\n      <p class=\"my-3\">\n        You can insert the user name by adding the following syntax in the body or title:\n        {{ userNameSyntax }}\n      </p>\n      <div class=\"w-100 text-center mt-3\"\n        *ngIf=\"isLoading\">\n        <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n      </div>\n      <form [formGroup]=\"form\"\n        *ngIf=\"!isLoading\"\n        (ngSubmit)=\"onSave()\">\n        <div class=\"row mb-3\">\n          <div class=\"col-12 col-md-12\">\n            <pw-input-container [label]=\"'Crm.CommunicationsMessage.Title' | transloco\"\n              name=\"title\"\n              [showTooltip]=\"true\"\n              [tooltipText]=\"'Crm.CommunicationsMessage.Tooltip.Title' | transloco\"\n              errorMsg=\"Please enter subject\">\n              <input type=\"text\"\n                class=\"form-control\"\n                formControlName=\"title\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\" />\n            </pw-input-container>\n          </div>\n\n          <div class=\"col-12 col-md-12\">\n            <pw-input-container [label]=\"'Crm.CommunicationsMessage.Body' | transloco\"\n              [showTooltip]=\"true\"\n              [tooltipText]=\"'Crm.CommunicationsMessage.Tooltip.Body' | transloco\"\n              name=\"body\"\n              errorMsg=\"Please enter body\">\n              <quill-editor [styles]=\"{ height: '220px' }\"\n              class=\"quillEditor\" [modules]=\"editorConfig\"\n                class=\"w-100\"\n                formControlName=\"body\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['body'].errors }\">\n              </quill-editor>\n            </pw-input-container>\n          </div>\n\n          <div class=\"col-12 col-md-2\">\n            <div class=\"mb-3\">\n              <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.SendAt' | transloco\n                                }}<span class=\"text-danger required-icon\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Crm.CommunicationsMessage.Tooltip.SendAt' | transloco\n                                }}</span></label>\n              <div class=\"input-group\">\n                <input class=\"form-control\"\n                  placeholder=\"dd-mmm-yyyy\"\n                  formControlName=\"send_at\"\n                  ngbDatepicker\n                  #c=\"ngbDatepicker\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['send_at'].errors }\" />\n                <div class=\"input-group-append\">\n                  <button class=\"btn btn-primary\"\n                    (click)=\"c.toggle()\"\n                    type=\"button\">\n                    <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"col-12 col-md-2\">\n            <div class=\"mb-3\">\n              <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.SendUntil' | transloco\n                                }}<span class=\"text-danger required-icon\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Crm.CommunicationsMessage.Tooltip.SendUntil' | transloco\n                                }}</span></label>\n              <div class=\"input-group\">\n                <input class=\"form-control\"\n                  placeholder=\"dd-mmm-yyyy\"\n                  formControlName=\"send_until\"\n                  ngbDatepicker\n                  #d=\"ngbDatepicker\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['send_until'].errors }\" />\n                <div class=\"input-group-append\">\n                  <button class=\"btn btn-primary\"\n                    (click)=\"d.toggle()\"\n                    type=\"button\">\n                    <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"col-12 col-md-3\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.PreviousNewsletter' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.PreviousNewsletter' | transloco\n                            }}</span></label>\n              <select class=\"form-select\"\n                formControlName=\"previous_newsletter_id\"\n                (change)=\"onNewsletterSelect($event)\"\n                [ngClass]=\"{\n                                    'is-invalid': submitted && f['previous_newsletter_id'].errors\n                                }\">\n                <option value=\"\">select previous newsletter</option>\n                <option *ngFor=\"let option of allCommunications\"\n                  [value]=\"option.id\">\n                  {{ option.title }}\n                </option>\n              </select>\n          </div>\n\n          <div class=\"col-12 col-sm-2\"\n            *ngIf=\"daysToNewsletterField\">\n            <pw-input-container [label]=\"\n                                'Crm.CommunicationsMessage.DaysToWaitFromPreviousNewsletter'\n                                    | transloco\n                            \"\n              [showTooltip]=\"true\"\n              [tooltipText]=\"\n                                'Crm.CommunicationsMessage.Tooltip.DaysToWaitFromPreviousNewsletter'\n                                    | transloco\n                            \"\n              name=\"days_to_wait_from_previous_newsletter\"\n              errorMsg=\"Please enter days to wait from previous newsletter\">\n              <input type=\"number\"\n                class=\"form-control\"\n                formControlName=\"days_to_wait_from_previous_newsletter\"\n                [ngClass]=\"{\n                                    'is-invalid':\n                                        submitted && f['days_to_wait_from_previous_newsletter'].errors\n                                }\" />\n            </pw-input-container>\n          </div>\n\n          <div class=\"col-12 col-md-1\">\n            <div class=\"mb-3\">\n              <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.ShouldDeliver' | transloco\n                                }}<span class=\"text-danger required-icon\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Crm.CommunicationsMessage.Tooltip.IsPushed' | transloco\n                                }}</span>\n              </label>\n              <ui-switch class=\"d-block\"\n                formControlName=\"is_pushed\"\n                (change)=\"onChange($event, 'is_pushed')\"\n                name=\"is_pushed\">\n              </ui-switch>\n            </div>\n          </div>\n\n          <div class=\"col-12 col-md-2\">\n            <div class=\"mb-3\">\n              <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.CanReply' | transloco\n                                }}<span class=\"text-danger required-icon\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Crm.CommunicationsMessage.Tooltip.CanReply' | transloco\n                                }}</span>\n              </label>\n              <ui-switch class=\"d-block\"\n                formControlName=\"can_reply\"\n                name=\"can_reply\">\n              </ui-switch>\n            </div>\n          </div>\n        </div>\n\n        <h3>Decide who will receive the email</h3>\n\n        <div class=\"row mb-3\">\n          <div class=\"col-12 col-md-4\">\n            <div class=\"mb-3\">\n              <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.Location' | transloco\n                                }}<span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Crm.CommunicationsMessage.Tooltip.Location' | transloco\n                                }}</span></label>\n              <input ngx-gp-autocomplete\n                class=\"form-control\"\n                #places=\"ngx-places\"\n                formControlName=\"location\"\n                (onAddressChange)=\"handleAddressChange($event)\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['location'].errors }\" />\n            </div>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.Products' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.Products' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"crmProduct\"\n              [showHeader]=\"true\"\n              [showToggleAll]=\"true\"\n              formControlName=\"product_ids\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.Features' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.Features' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"featureKeys\"\n              [showHeader]=\"true\"\n              [showToggleAll]=\"true\"\n              formControlName=\"feature_keys\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.ContactPotential' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.ContactPotential' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"potentials\"\n              formControlName=\"contact_potential\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.ContactLabel' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.ContactLabel' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"labels\"\n              formControlName=\"contact_label\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.ContactSource' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.ContactSource' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"contactSource\"\n              formControlName=\"contact_source\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.AccountPriority' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.AccountPriority' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"priority\"\n              formControlName=\"account_priority\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.AccountStatus' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.AccountStatus' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"status\"\n              formControlName=\"account_status\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.AccountSource' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.AccountSource' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"source\"\n              formControlName=\"account_source\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.AccountSize' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.AccountSize' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"organizationSizes\"\n              formControlName=\"account_size\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <!-- Only new contacts -->\n          <div class=\"col-md-3\">\n            <div class=\"mb-3\">\n              <label class=\"info-circle mb-2\">{{ 'Crm.CommunicationsMessage.OnlyNewContacts' | transloco\n                                }}<span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Crm.CommunicationsMessage.Tooltip.OnlyNewContacts' | transloco\n                                }}</span>\n              </label>\n              <ui-switch class=\"d-block\"\n                formControlName=\"only_new_contacts\"\n                name=\"only_new_contacts\"\n                [ngClass]=\"{\n                        'is-invalid': submitted && f['only_new_contacts'].errors\n                    }\">\n              </ui-switch>\n            </div>\n          </div>\n        </div>\n        <div class=\"row\">\n          <div class=\"col-12 text-end mt-3\">\n            <button type=\"button\"\n              class=\"btn btn-outline-default me-2\"\n              (click)=\"back()\">\n              {{ 'Button.Cancel' | transloco }}\n            </button>\n            <button type=\"submit\"\n              [buttonBusy]=\"buttonBusy\"\n              class=\"btn btn-primary\"\n              [disabled]=\"!form.valid\"\n            >\n              {{ 'Button.Submit' | transloco }}\n            </button>\n          </div>\n        </div>\n      </form>\n    </div>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4$1.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "directive", type: i5.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "directive", type: i9.NgxGpAutocompleteDirective, selector: "[ngx-gp-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "component", type: i9$2.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i9$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i11.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText"] }, { kind: "component", type: i12$2.QuillEditorComponent, selector: "quill-editor" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
 }
 __decorate([
     ValidateForm('form'),
@@ -3901,7 +3915,7 @@ __decorate([
 ], SmartCrmCommunicationsDetailsComponent.prototype, "onSave", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmCommunicationsDetailsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-smart-crm-communications-details', template: "<div class=\"row\">\n  <div class=\"col-12 d-flex\">\n    <a href=\"javascript:void(0)\"\n      (click)=\"back()\"\n      class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n    <h3 class=\"m-subheader__title m-subheader__title--separator\">\n      <span>{{ data?.id ? 'Edit' : 'Create new' }} marketing email</span>\n    </h3>\n  </div>\n</div>\n<ng-container>\n  <div class=\"container-fluid pw-tab\">\n    <div class=\"p-2 mt-3\">\n      <p class=\"my-3\">\n        You can insert the user name by adding the following syntax in the body or title:\n        {{ userNameSyntax }}\n      </p>\n      <div class=\"w-100 text-center mt-3\"\n        *ngIf=\"isLoading\">\n        <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n      </div>\n      <form [formGroup]=\"form\"\n        *ngIf=\"!isLoading\"\n        (ngSubmit)=\"onSave()\">\n        <div class=\"row mb-3\">\n          <div class=\"col-12 col-md-12\">\n            <pw-input-container [label]=\"'Crm.CommunicationsMessage.Title' | transloco\"\n              name=\"title\"\n              [showTooltip]=\"true\"\n              [tooltipText]=\"'Crm.CommunicationsMessage.Tooltip.Title' | transloco\"\n              errorMsg=\"Please enter subject\">\n              <input type=\"text\"\n                class=\"form-control\"\n                formControlName=\"title\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\" />\n            </pw-input-container>\n          </div>\n\n          <div class=\"col-12 col-md-12\">\n            <pw-input-container [label]=\"'Crm.CommunicationsMessage.Body' | transloco\"\n              [showTooltip]=\"true\"\n              [tooltipText]=\"'Crm.CommunicationsMessage.Tooltip.Body' | transloco\"\n              name=\"body\"\n              errorMsg=\"Please enter body\">\n              <quill-editor [styles]=\"{ height: '220px' }\"\n                class=\"w-100\"\n                formControlName=\"body\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['body'].errors }\">\n              </quill-editor>\n            </pw-input-container>\n          </div>\n\n          <div class=\"col-12 col-md-2\">\n            <div class=\"mb-3\">\n              <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.SendAt' | transloco\n                                }}<span class=\"text-danger required-icon\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Crm.CommunicationsMessage.Tooltip.SendAt' | transloco\n                                }}</span></label>\n              <div class=\"input-group\">\n                <input class=\"form-control\"\n                  placeholder=\"dd-mmm-yyyy\"\n                  formControlName=\"send_at\"\n                  ngbDatepicker\n                  #c=\"ngbDatepicker\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['send_at'].errors }\" />\n                <div class=\"input-group-append\">\n                  <button class=\"btn btn-primary\"\n                    (click)=\"c.toggle()\"\n                    type=\"button\">\n                    <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"col-12 col-md-2\">\n            <div class=\"mb-3\">\n              <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.SendUntil' | transloco\n                                }}<span class=\"text-danger required-icon\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Crm.CommunicationsMessage.Tooltip.SendUntil' | transloco\n                                }}</span></label>\n              <div class=\"input-group\">\n                <input class=\"form-control\"\n                  placeholder=\"dd-mmm-yyyy\"\n                  formControlName=\"send_until\"\n                  ngbDatepicker\n                  #d=\"ngbDatepicker\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['send_until'].errors }\" />\n                <div class=\"input-group-append\">\n                  <button class=\"btn btn-primary\"\n                    (click)=\"d.toggle()\"\n                    type=\"button\">\n                    <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"col-12 col-md-3\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.PreviousNewsletter' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.PreviousNewsletter' | transloco\n                            }}</span></label>\n              <select class=\"form-select\"\n                formControlName=\"previous_newsletter_id\"\n                (change)=\"onNewsletterSelect($event)\"\n                [ngClass]=\"{\n                                    'is-invalid': submitted && f['previous_newsletter_id'].errors\n                                }\">\n                <option value=\"\">select previous newsletter</option>\n                <option *ngFor=\"let option of allCommunications\"\n                  [value]=\"option.id\">\n                  {{ option.title }}\n                </option>\n              </select>\n          </div>\n\n          <div class=\"col-12 col-sm-2\"\n            *ngIf=\"daysToNewsletterField\">\n            <pw-input-container [label]=\"\n                                'Crm.CommunicationsMessage.DaysToWaitFromPreviousNewsletter'\n                                    | transloco\n                            \"\n              [showTooltip]=\"true\"\n              [tooltipText]=\"\n                                'Crm.CommunicationsMessage.Tooltip.DaysToWaitFromPreviousNewsletter'\n                                    | transloco\n                            \"\n              name=\"days_to_wait_from_previous_newsletter\"\n              errorMsg=\"Please enter days to wait from previous newsletter\">\n              <input type=\"number\"\n                class=\"form-control\"\n                formControlName=\"days_to_wait_from_previous_newsletter\"\n                [ngClass]=\"{\n                                    'is-invalid':\n                                        submitted && f['days_to_wait_from_previous_newsletter'].errors\n                                }\" />\n            </pw-input-container>\n          </div>\n\n          <div class=\"col-12 col-md-1\">\n            <div class=\"mb-3\">\n              <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.ShouldDeliver' | transloco\n                                }}<span class=\"text-danger required-icon\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Crm.CommunicationsMessage.Tooltip.IsPushed' | transloco\n                                }}</span>\n              </label>\n              <ui-switch class=\"d-block\"\n                formControlName=\"is_pushed\"\n                (change)=\"onChange($event, 'is_pushed')\"\n                name=\"is_pushed\">\n              </ui-switch>\n            </div>\n          </div>\n\n          <div class=\"col-12 col-md-2\">\n            <div class=\"mb-3\">\n              <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.CanReply' | transloco\n                                }}<span class=\"text-danger required-icon\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Crm.CommunicationsMessage.Tooltip.CanReply' | transloco\n                                }}</span>\n              </label>\n              <ui-switch class=\"d-block\"\n                formControlName=\"can_reply\"\n                name=\"can_reply\">\n              </ui-switch>\n            </div>\n          </div>\n        </div>\n\n        <h3>Decide who will receive the email</h3>\n\n        <div class=\"row mb-3\">\n          <div class=\"col-12 col-md-4\">\n            <div class=\"mb-3\">\n              <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.Location' | transloco\n                                }}<span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Crm.CommunicationsMessage.Tooltip.Location' | transloco\n                                }}</span></label>\n              <input ngx-gp-autocomplete\n                class=\"form-control\"\n                #places=\"ngx-places\"\n                formControlName=\"location\"\n                (onAddressChange)=\"handleAddressChange($event)\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['location'].errors }\" />\n            </div>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.Products' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.Products' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"crmProduct\"\n              [showHeader]=\"true\"\n              [showToggleAll]=\"true\"\n              formControlName=\"product_ids\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.Features' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.Features' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"featureKeys\"\n              [showHeader]=\"true\"\n              [showToggleAll]=\"true\"\n              formControlName=\"feature_keys\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.ContactPotential' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.ContactPotential' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"potentials\"\n              formControlName=\"contact_potential\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.ContactLabel' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.ContactLabel' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"labels\"\n              formControlName=\"contact_label\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.ContactSource' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.ContactSource' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"contactSource\"\n              formControlName=\"contact_source\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.AccountPriority' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.AccountPriority' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"priority\"\n              formControlName=\"account_priority\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.AccountStatus' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.AccountStatus' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"status\"\n              formControlName=\"account_status\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.AccountSource' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.AccountSource' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"source\"\n              formControlName=\"account_source\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.AccountSize' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.AccountSize' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"organizationSizes\"\n              formControlName=\"account_size\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <!-- Only new contacts -->\n          <div class=\"col-md-3\">\n            <div class=\"mb-3\">\n              <label class=\"info-circle mb-2\">{{ 'Crm.CommunicationsMessage.OnlyNewContacts' | transloco\n                                }}<span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Crm.CommunicationsMessage.Tooltip.OnlyNewContacts' | transloco\n                                }}</span>\n              </label>\n              <ui-switch class=\"d-block\"\n                formControlName=\"only_new_contacts\"\n                name=\"only_new_contacts\"\n                [ngClass]=\"{\n                        'is-invalid': submitted && f['only_new_contacts'].errors\n                    }\">\n              </ui-switch>\n            </div>\n          </div>\n        </div>\n        <div class=\"row\">\n          <div class=\"col-12 text-end mt-3\">\n            <button type=\"button\"\n              class=\"btn btn-outline-default me-2\"\n              (click)=\"back()\">\n              {{ 'Button.Cancel' | transloco }}\n            </button>\n            <button type=\"submit\"\n              [buttonBusy]=\"buttonBusy\"\n              class=\"btn btn-primary\"\n              [disabled]=\"!form.valid\"\n            >\n              {{ 'Button.Submit' | transloco }}\n            </button>\n          </div>\n        </div>\n      </form>\n    </div>\n  </div>\n</ng-container>\n" }]
+            args: [{ selector: 'pw-smart-crm-communications-details', template: "<div class=\"row\">\n  <div class=\"col-12 d-flex\">\n    <a href=\"javascript:void(0)\"\n      (click)=\"back()\"\n      class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n    <h3 class=\"m-subheader__title m-subheader__title--separator\">\n      <span>{{ data?.id ? 'Edit' : 'Create new' }} marketing email</span>\n    </h3>\n  </div>\n</div>\n<ng-container>\n  <div class=\"container-fluid pw-tab\">\n    <div class=\"p-2 mt-3\">\n      <p class=\"my-3\">\n        You can insert the user name by adding the following syntax in the body or title:\n        {{ userNameSyntax }}\n      </p>\n      <div class=\"w-100 text-center mt-3\"\n        *ngIf=\"isLoading\">\n        <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n      </div>\n      <form [formGroup]=\"form\"\n        *ngIf=\"!isLoading\"\n        (ngSubmit)=\"onSave()\">\n        <div class=\"row mb-3\">\n          <div class=\"col-12 col-md-12\">\n            <pw-input-container [label]=\"'Crm.CommunicationsMessage.Title' | transloco\"\n              name=\"title\"\n              [showTooltip]=\"true\"\n              [tooltipText]=\"'Crm.CommunicationsMessage.Tooltip.Title' | transloco\"\n              errorMsg=\"Please enter subject\">\n              <input type=\"text\"\n                class=\"form-control\"\n                formControlName=\"title\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\" />\n            </pw-input-container>\n          </div>\n\n          <div class=\"col-12 col-md-12\">\n            <pw-input-container [label]=\"'Crm.CommunicationsMessage.Body' | transloco\"\n              [showTooltip]=\"true\"\n              [tooltipText]=\"'Crm.CommunicationsMessage.Tooltip.Body' | transloco\"\n              name=\"body\"\n              errorMsg=\"Please enter body\">\n              <quill-editor [styles]=\"{ height: '220px' }\"\n              class=\"quillEditor\" [modules]=\"editorConfig\"\n                class=\"w-100\"\n                formControlName=\"body\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['body'].errors }\">\n              </quill-editor>\n            </pw-input-container>\n          </div>\n\n          <div class=\"col-12 col-md-2\">\n            <div class=\"mb-3\">\n              <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.SendAt' | transloco\n                                }}<span class=\"text-danger required-icon\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Crm.CommunicationsMessage.Tooltip.SendAt' | transloco\n                                }}</span></label>\n              <div class=\"input-group\">\n                <input class=\"form-control\"\n                  placeholder=\"dd-mmm-yyyy\"\n                  formControlName=\"send_at\"\n                  ngbDatepicker\n                  #c=\"ngbDatepicker\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['send_at'].errors }\" />\n                <div class=\"input-group-append\">\n                  <button class=\"btn btn-primary\"\n                    (click)=\"c.toggle()\"\n                    type=\"button\">\n                    <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"col-12 col-md-2\">\n            <div class=\"mb-3\">\n              <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.SendUntil' | transloco\n                                }}<span class=\"text-danger required-icon\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Crm.CommunicationsMessage.Tooltip.SendUntil' | transloco\n                                }}</span></label>\n              <div class=\"input-group\">\n                <input class=\"form-control\"\n                  placeholder=\"dd-mmm-yyyy\"\n                  formControlName=\"send_until\"\n                  ngbDatepicker\n                  #d=\"ngbDatepicker\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['send_until'].errors }\" />\n                <div class=\"input-group-append\">\n                  <button class=\"btn btn-primary\"\n                    (click)=\"d.toggle()\"\n                    type=\"button\">\n                    <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"col-12 col-md-3\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.PreviousNewsletter' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.PreviousNewsletter' | transloco\n                            }}</span></label>\n              <select class=\"form-select\"\n                formControlName=\"previous_newsletter_id\"\n                (change)=\"onNewsletterSelect($event)\"\n                [ngClass]=\"{\n                                    'is-invalid': submitted && f['previous_newsletter_id'].errors\n                                }\">\n                <option value=\"\">select previous newsletter</option>\n                <option *ngFor=\"let option of allCommunications\"\n                  [value]=\"option.id\">\n                  {{ option.title }}\n                </option>\n              </select>\n          </div>\n\n          <div class=\"col-12 col-sm-2\"\n            *ngIf=\"daysToNewsletterField\">\n            <pw-input-container [label]=\"\n                                'Crm.CommunicationsMessage.DaysToWaitFromPreviousNewsletter'\n                                    | transloco\n                            \"\n              [showTooltip]=\"true\"\n              [tooltipText]=\"\n                                'Crm.CommunicationsMessage.Tooltip.DaysToWaitFromPreviousNewsletter'\n                                    | transloco\n                            \"\n              name=\"days_to_wait_from_previous_newsletter\"\n              errorMsg=\"Please enter days to wait from previous newsletter\">\n              <input type=\"number\"\n                class=\"form-control\"\n                formControlName=\"days_to_wait_from_previous_newsletter\"\n                [ngClass]=\"{\n                                    'is-invalid':\n                                        submitted && f['days_to_wait_from_previous_newsletter'].errors\n                                }\" />\n            </pw-input-container>\n          </div>\n\n          <div class=\"col-12 col-md-1\">\n            <div class=\"mb-3\">\n              <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.ShouldDeliver' | transloco\n                                }}<span class=\"text-danger required-icon\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Crm.CommunicationsMessage.Tooltip.IsPushed' | transloco\n                                }}</span>\n              </label>\n              <ui-switch class=\"d-block\"\n                formControlName=\"is_pushed\"\n                (change)=\"onChange($event, 'is_pushed')\"\n                name=\"is_pushed\">\n              </ui-switch>\n            </div>\n          </div>\n\n          <div class=\"col-12 col-md-2\">\n            <div class=\"mb-3\">\n              <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.CanReply' | transloco\n                                }}<span class=\"text-danger required-icon\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Crm.CommunicationsMessage.Tooltip.CanReply' | transloco\n                                }}</span>\n              </label>\n              <ui-switch class=\"d-block\"\n                formControlName=\"can_reply\"\n                name=\"can_reply\">\n              </ui-switch>\n            </div>\n          </div>\n        </div>\n\n        <h3>Decide who will receive the email</h3>\n\n        <div class=\"row mb-3\">\n          <div class=\"col-12 col-md-4\">\n            <div class=\"mb-3\">\n              <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.Location' | transloco\n                                }}<span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Crm.CommunicationsMessage.Tooltip.Location' | transloco\n                                }}</span></label>\n              <input ngx-gp-autocomplete\n                class=\"form-control\"\n                #places=\"ngx-places\"\n                formControlName=\"location\"\n                (onAddressChange)=\"handleAddressChange($event)\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['location'].errors }\" />\n            </div>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.Products' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.Products' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"crmProduct\"\n              [showHeader]=\"true\"\n              [showToggleAll]=\"true\"\n              formControlName=\"product_ids\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.Features' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.Features' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"featureKeys\"\n              [showHeader]=\"true\"\n              [showToggleAll]=\"true\"\n              formControlName=\"feature_keys\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.ContactPotential' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.ContactPotential' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"potentials\"\n              formControlName=\"contact_potential\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.ContactLabel' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.ContactLabel' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"labels\"\n              formControlName=\"contact_label\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.ContactSource' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.ContactSource' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"contactSource\"\n              formControlName=\"contact_source\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.AccountPriority' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.AccountPriority' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"priority\"\n              formControlName=\"account_priority\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.AccountStatus' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.AccountStatus' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"status\"\n              formControlName=\"account_status\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.AccountSource' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.AccountSource' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"source\"\n              formControlName=\"account_source\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.AccountSize' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.AccountSize' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"organizationSizes\"\n              formControlName=\"account_size\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <!-- Only new contacts -->\n          <div class=\"col-md-3\">\n            <div class=\"mb-3\">\n              <label class=\"info-circle mb-2\">{{ 'Crm.CommunicationsMessage.OnlyNewContacts' | transloco\n                                }}<span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Crm.CommunicationsMessage.Tooltip.OnlyNewContacts' | transloco\n                                }}</span>\n              </label>\n              <ui-switch class=\"d-block\"\n                formControlName=\"only_new_contacts\"\n                name=\"only_new_contacts\"\n                [ngClass]=\"{\n                        'is-invalid': submitted && f['only_new_contacts'].errors\n                    }\">\n              </ui-switch>\n            </div>\n          </div>\n        </div>\n        <div class=\"row\">\n          <div class=\"col-12 text-end mt-3\">\n            <button type=\"button\"\n              class=\"btn btn-outline-default me-2\"\n              (click)=\"back()\">\n              {{ 'Button.Cancel' | transloco }}\n            </button>\n            <button type=\"submit\"\n              [buttonBusy]=\"buttonBusy\"\n              class=\"btn btn-primary\"\n              [disabled]=\"!form.valid\"\n            >\n              {{ 'Button.Submit' | transloco }}\n            </button>\n          </div>\n        </div>\n      </form>\n    </div>\n  </div>\n</ng-container>\n" }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1.CrmService }, { type: i2.CommonService }], propDecorators: { onSave: [] } });
 
 class SmartCrmCommunicationsComponent extends AppBaseComponent {