@osovitny/anatoly 2.15.5 → 2.15.6

package/fesm2015/osovitny-anatoly.mjs

@@ -24,13 +24,13 @@ import * as i1$6 from '@fortawesome/angular-fontawesome';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import * as i1$7 from '@progress/kendo-angular-pager';
 import { PagerModule } from '@progress/kendo-angular-pager';
-import * as i1$8 from '@angular/forms';
+import * as i2 from '@angular/forms';
 import { FormControl, Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
-import * as i1$9 from 'angular-froala-wysiwyg';
+import * as i1$8 from 'angular-froala-wysiwyg';
 import { FroalaEditorModule, FroalaViewModule } from 'angular-froala-wysiwyg';
-import * as i2 from '@progress/kendo-angular-dialog';
+import * as i2$1 from '@progress/kendo-angular-dialog';
 import { DialogsModule } from '@progress/kendo-angular-dialog';
-import * as i6 from 'ngx-captcha';
+import * as i1$9 from 'ngx-captcha';
 import { NgxCaptchaModule } from 'ngx-captcha';
 import { faCheckCircle, faCircleXmark, faDatabase, faCopy } from '@fortawesome/free-solid-svg-icons';
 import { ButtonsModule } from '@progress/kendo-angular-buttons';
@@ -3126,11 +3126,11 @@ Copy2ClipboardComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Cop
 </file>
 */
 const _c0$9 = [[["mex-card-header"]], [["mex-card-body"]], "*", [["mex-card-footer"]]];
-const _c1$1 = ["mex-card-header", "mex-card-body", "*", "mex-card-footer"];
+const _c1 = ["mex-card-header", "mex-card-body", "*", "mex-card-footer"];
 class CardComponent {
 }
 CardComponent.ɵfac = function CardComponent_Factory(t) { return new (t || CardComponent)(); };
-CardComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CardComponent, selectors: [["anatoly-card"]], inputs: { classes: "classes" }, ngContentSelectors: _c1$1, decls: 5, vars: 3, template: function CardComponent_Template(rf, ctx) {
+CardComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CardComponent, selectors: [["anatoly-card"]], inputs: { classes: "classes" }, ngContentSelectors: _c1, decls: 5, vars: 3, template: function CardComponent_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵprojectionDef(_c0$9);
             i0.ɵɵelementStart(0, "div");
@@ -3692,7 +3692,7 @@ class NativeElementDirective {
         this.control.control.nativeElement = this.el.nativeElement;
     }
 }
-NativeElementDirective.ɵfac = function NativeElementDirective_Factory(t) { return new (t || NativeElementDirective)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i1$8.NgControl)); };
+NativeElementDirective.ɵfac = function NativeElementDirective_Factory(t) { return new (t || NativeElementDirective)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i2.NgControl)); };
 NativeElementDirective.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: NativeElementDirective, selectors: [["", "formControl", ""], ["", "formControlName", ""]] });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NativeElementDirective, [{
@@ -3700,7 +3700,7 @@ NativeElementDirective.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: Nati
             args: [{
                     selector: '[formControl], [formControlName]'
                 }]
-        }], function () { return [{ type: i0.ElementRef }, { type: i1$8.NgControl }]; }, null);
+        }], function () { return [{ type: i0.ElementRef }, { type: i2.NgControl }]; }, null);
 })();
 
 /*
@@ -3938,7 +3938,7 @@ FormsHtmlEditorComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Fo
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("formGroup", ctx.formGroup)("formSubmitted", ctx.formSubmitted)("controlName", ctx.editorFormKey)("controlTitle", ctx.editorLabelText);
         }
-    }, dependencies: [i1$5.NgClass, i1$8.DefaultValueAccessor, i1$8.NgControlStatus, i1$8.NgControlStatusGroup, i1$8.FormGroupDirective, i1$8.FormControlName, i1$9.FroalaEditorDirective, NativeElementDirective, ItemValidationSummaryComponent], encapsulation: 2 });
+    }, dependencies: [i1$5.NgClass, i2.DefaultValueAccessor, i2.NgControlStatus, i2.NgControlStatusGroup, i2.FormGroupDirective, i2.FormControlName, i1$8.FroalaEditorDirective, NativeElementDirective, ItemValidationSummaryComponent], encapsulation: 2 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FormsHtmlEditorComponent, [{
             type: Component,
@@ -4000,7 +4000,7 @@ HtmlEditorComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HtmlEdi
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("froalaEditor", ctx.options);
         }
-    }, dependencies: [i1$9.FroalaEditorDirective], encapsulation: 2 });
+    }, dependencies: [i1$8.FroalaEditorDirective], encapsulation: 2 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HtmlEditorComponent, [{
             type: Component,
@@ -4356,18 +4356,17 @@ FormValidationSummaryComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ ty
   Copyright (c) 2017-2022 Osovitny Inc. All rights reserved.
 </file>
 */
-const _c0$4 = ["recaptcha"];
 function ContactUsForm_option_12_Template(rf, ctx) {
     if (rf & 1) {
-        i0.ɵɵelementStart(0, "option", 30);
+        i0.ɵɵelementStart(0, "option", 28);
         i0.ɵɵtext(1);
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
-        const topic_r4 = ctx.$implicit;
-        i0.ɵɵproperty("value", topic_r4.value);
+        const topic_r3 = ctx.$implicit;
+        i0.ɵɵproperty("value", topic_r3.value);
         i0.ɵɵadvance(1);
-        i0.ɵɵtextInterpolate1("", topic_r4.value, " ");
+        i0.ɵɵtextInterpolate1("", topic_r3.value, " ");
     }
 }
 function ContactUsForm_p_23_Template(rf, ctx) {
@@ -4377,21 +4376,22 @@ function ContactUsForm_p_23_Template(rf, ctx) {
         i0.ɵɵelementEnd();
     }
 }
-function ContactUsForm_button_42_Template(rf, ctx) {
+function ContactUsForm_button_38_Template(rf, ctx) {
     if (rf & 1) {
-        i0.ɵɵelementStart(0, "button", 31);
+        i0.ɵɵelementStart(0, "button", 29);
         i0.ɵɵtext(1, " Submit ");
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
-        const ctx_r3 = i0.ɵɵnextContext();
-        i0.ɵɵclassProp("btn-primary", !ctx_r3.formGroup.invalid);
+        const ctx_r2 = i0.ɵɵnextContext();
+        i0.ɵɵclassProp("btn-primary", !ctx_r2.formGroup.invalid);
     }
 }
-const _c1 = function (a0) { return { "has-error": a0 }; };
+const _c0$4 = function (a0) { return { "has-error": a0 }; };
 class ContactUsForm extends BaseEditComponent {
-    constructor(fb, appContext, api, notificationService) {
+    constructor(reCaptcha, fb, appContext, api, notificationService) {
         super();
+        this.reCaptcha = reCaptcha;
         this.fb = fb;
         this.appContext = appContext;
         this.api = api;
@@ -4417,7 +4417,6 @@ class ContactUsForm extends BaseEditComponent {
     }
     createFormGroup() {
         this.formGroup = this.fb.group({
-            captcha: new FormControl(null, [Validators.required]),
             name: new FormControl('', [Validators.required]),
             email: new FormControl('', [Validators.required]),
             topic: new FormControl('', [Validators.required]),
@@ -4427,7 +4426,7 @@ class ContactUsForm extends BaseEditComponent {
     }
     setContext(context) {
         this.isUserSignedIn = context.isUserSignedIn;
-        this.siteKey = context.reCaptchaSiteKey;
+        this.reCaptchaSiteKey = context.reCaptchaSiteKeyV3;
         this.selectedTopic = this.topicList[3].value;
         this.setFormValue('topic', this.selectedTopic);
         if (this.isUserSignedIn) {
@@ -4442,20 +4441,20 @@ class ContactUsForm extends BaseEditComponent {
         this.formSubmitted = true;
         if (!this.isValid())
             return;
-        const captcha = this.getFormValue('captcha');
         const name = this.getFormValue('name');
         const email = this.getFormValue('email');
         const topic = this.selectedTopic;
         const subject = this.getFormValue('subject');
         const message = this.getFormValue('message');
-        this.api.sendContactUs(captcha, name, email, topic, subject, message, () => {
-            this.formSubmitted = false;
-            this.notificationService.success('Message has been sent successfully');
-            this.formGroup.reset();
-            this.recaptcha.resetCaptcha();
-            this.submit.emit();
-        }, () => {
-            this.notificationService.error();
+        this.reCaptcha.execute(this.reCaptchaSiteKey, 'ContactUs', (token) => {
+            this.api.sendContactUs(token, name, email, topic, subject, message, () => {
+                this.formSubmitted = false;
+                this.notificationService.success('Message has been sent successfully');
+                this.formGroup.reset();
+                this.submit.emit();
+            }, () => {
+                this.notificationService.error();
+            });
         });
     }
     //Events
@@ -4466,16 +4465,8 @@ class ContactUsForm extends BaseEditComponent {
         this.selectedTopic = event.target.value;
     }
 }
-ContactUsForm.ɵfac = function ContactUsForm_Factory(t) { return new (t || ContactUsForm)(i0.ɵɵdirectiveInject(i1$8.FormBuilder), i0.ɵɵdirectiveInject(AppContextService), i0.ɵɵdirectiveInject(EmailsApiService), i0.ɵɵdirectiveInject(NotificationService)); };
-ContactUsForm.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ContactUsForm, selectors: [["anatoly-forms-contactus-form"]], viewQuery: function ContactUsForm_Query(rf, ctx) {
-        if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$4, 5);
-        }
-        if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.recaptcha = _t.first);
-        }
-    }, inputs: { showActionButtons: "showActionButtons" }, outputs: { submit: "submit" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 43, vars: 32, consts: [["novalidate", "", 3, "formGroup", "ngSubmit"], [3, "formGroup", "visible"], [1, "contact-us"], [1, "row"], [1, "form-fields", "col-6"], [1, "form-topic", 3, "ngClass"], [1, "form-select-wrapper"], [1, "assistive-text"], ["formControlName", "topic", 1, "form-select", 3, "change"], [3, "value", 4, "ngFor", "ngForOf"], ["controlName", "topic", "controlTitle", "topic", 3, "formGroup", "formSubmitted"], [1, "form-name", 3, "ngClass"], ["formControlName", "name", "placeholder", "Name *", "type", "text", 1, "form-control"], ["controlName", "name", "controlTitle", "name", 3, "formGroup", "formSubmitted"], [1, "form-email", 3, "ngClass"], ["formControlName", "email", "placeholder", "E-mail *", "type", "text", 1, "form-control"], [4, "ngIf"], ["controlName", "email", "controlTitle", "email", 3, "formGroup", "formSubmitted"], [1, "form-subject", 3, "ngClass"], ["formControlName", "subject", "placeholder", "Subject *", "type", "text", 1, "form-control"], ["controlName", "subject", "controlTitle", "subject", 3, "formGroup", "formSubmitted"], [1, "col-6"], [1, "form-message", 3, "ngClass"], ["formControlName", "message", "name", "message", "placeholder", "Message  *", "rows", "4", "type", "text"], ["controlName", "message", "controlTitle", "message", 3, "formGroup", "formSubmitted"], [1, "row", "form-footer"], [2, "transform", "scale(0.8)", "transform-origin", "0"], ["formControlName", "captcha", 3, "siteKey"], ["recaptcha", ""], ["class", "btn btn-success float-right m-t-20", "type", "submit", 3, "btn-primary", 4, "ngIf"], [3, "value"], ["type", "submit", 1, "btn", "btn-success", "float-right", "m-t-20"]], template: function ContactUsForm_Template(rf, ctx) {
+ContactUsForm.ɵfac = function ContactUsForm_Factory(t) { return new (t || ContactUsForm)(i0.ɵɵdirectiveInject(i1$9.ReCaptchaV3Service), i0.ɵɵdirectiveInject(i2.FormBuilder), i0.ɵɵdirectiveInject(AppContextService), i0.ɵɵdirectiveInject(EmailsApiService), i0.ɵɵdirectiveInject(NotificationService)); };
+ContactUsForm.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ContactUsForm, selectors: [["anatoly-forms-contactus-form"]], inputs: { showActionButtons: "showActionButtons" }, outputs: { submit: "submit" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 39, vars: 31, consts: [["novalidate", "", 3, "formGroup", "ngSubmit"], [3, "formGroup", "visible"], [1, "contact-us"], [1, "row"], [1, "form-fields", "col-6"], [1, "form-topic", 3, "ngClass"], [1, "form-select-wrapper"], [1, "assistive-text"], ["formControlName", "topic", 1, "form-select", 3, "change"], [3, "value", 4, "ngFor", "ngForOf"], ["controlName", "topic", "controlTitle", "topic", 3, "formGroup", "formSubmitted"], [1, "form-name", 3, "ngClass"], ["formControlName", "name", "placeholder", "Name *", "type", "text", 1, "form-control"], ["controlName", "name", "controlTitle", "name", 3, "formGroup", "formSubmitted"], [1, "form-email", 3, "ngClass"], ["formControlName", "email", "placeholder", "E-mail *", "type", "text", 1, "form-control"], [4, "ngIf"], ["controlName", "email", "controlTitle", "email", 3, "formGroup", "formSubmitted"], [1, "form-subject", 3, "ngClass"], ["formControlName", "subject", "placeholder", "Subject *", "type", "text", 1, "form-control"], ["controlName", "subject", "controlTitle", "subject", 3, "formGroup", "formSubmitted"], [1, "col-6"], [1, "form-message", 3, "ngClass"], ["formControlName", "message", "name", "message", "placeholder", "Message  *", "rows", "4", "type", "text"], ["controlName", "message", "controlTitle", "message", 3, "formGroup", "formSubmitted"], [1, "row", "form-footer"], [1, "col"], ["class", "btn btn-success", "type", "submit", 3, "btn-primary", 4, "ngIf"], [3, "value"], ["type", "submit", 1, "btn", "btn-success"]], template: function ContactUsForm_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵelementStart(0, "form", 0);
             i0.ɵɵlistener("ngSubmit", function ContactUsForm_Template_form_ngSubmit_0_listener() { return ctx.onSubmit(); });
@@ -4514,11 +4505,8 @@ ContactUsForm.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ContactUsForm
             i0.ɵɵelementEnd();
             i0.ɵɵelement(34, "textarea", 23)(35, "anatoly-item-validation-summary", 24);
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(36, "div", 25)(37, "div", 21)(38, "div", 26);
-            i0.ɵɵelement(39, "ngx-recaptcha2", 27, 28);
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(41, "div", 21);
-            i0.ɵɵtemplate(42, ContactUsForm_button_42_Template, 2, 2, "button", 29);
+            i0.ɵɵelementStart(36, "div", 25)(37, "div", 26);
+            i0.ɵɵtemplate(38, ContactUsForm_button_38_Template, 2, 2, "button", 27);
             i0.ɵɵelementEnd()()()();
         }
         if (rf & 2) {
@@ -4526,46 +4514,41 @@ ContactUsForm.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ContactUsForm
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("formGroup", ctx.formGroup)("visible", ctx.formSubmitted && ctx.formGroup.invalid);
             i0.ɵɵadvance(6);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(22, _c1, ctx.isControlInvalid("topic")));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(21, _c0$4, ctx.isControlInvalid("topic")));
             i0.ɵɵadvance(5);
             i0.ɵɵproperty("ngForOf", ctx.topicList);
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("formGroup", ctx.formGroup)("formSubmitted", ctx.formSubmitted);
             i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(24, _c1, ctx.isControlInvalid("name")));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(23, _c0$4, ctx.isControlInvalid("name")));
             i0.ɵɵadvance(4);
             i0.ɵɵproperty("formGroup", ctx.formGroup)("formSubmitted", ctx.formSubmitted);
             i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(26, _c1, ctx.isControlInvalid("email")));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(25, _c0$4, ctx.isControlInvalid("email")));
             i0.ɵɵadvance(4);
             i0.ɵɵproperty("ngIf", !ctx.isUserSignedIn);
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("formGroup", ctx.formGroup)("formSubmitted", ctx.formSubmitted);
             i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(28, _c1, ctx.isControlInvalid("subject")));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(27, _c0$4, ctx.isControlInvalid("subject")));
             i0.ɵɵadvance(4);
             i0.ɵɵproperty("formGroup", ctx.formGroup)("formSubmitted", ctx.formSubmitted);
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(30, _c1, ctx.isControlInvalid("message")));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(29, _c0$4, ctx.isControlInvalid("message")));
             i0.ɵɵadvance(4);
             i0.ɵɵproperty("formGroup", ctx.formGroup)("formSubmitted", ctx.formSubmitted);
-            i0.ɵɵadvance(4);
-            i0.ɵɵproperty("siteKey", ctx.siteKey);
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngIf", ctx.showActionButtons);
         }
-    }, dependencies: [i1$5.NgClass, i1$5.NgForOf, i1$5.NgIf, i1$8.ɵNgNoValidate, i1$8.NgSelectOption, i1$8.ɵNgSelectMultipleOption, i1$8.DefaultValueAccessor, i1$8.SelectControlValueAccessor, i1$8.NgControlStatus, i1$8.NgControlStatusGroup, i1$8.FormGroupDirective, i1$8.FormControlName, i6.ReCaptcha2Component, NativeElementDirective, FormValidationSummaryComponent, ItemValidationSummaryComponent], encapsulation: 2 });
+    }, dependencies: [i1$5.NgClass, i1$5.NgForOf, i1$5.NgIf, i2.ɵNgNoValidate, i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.DefaultValueAccessor, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.NgControlStatusGroup, i2.FormGroupDirective, i2.FormControlName, NativeElementDirective, FormValidationSummaryComponent, ItemValidationSummaryComponent], encapsulation: 2 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ContactUsForm, [{
             type: Component,
-            args: [{ selector: 'anatoly-forms-contactus-form', template: "<form (ngSubmit)='onSubmit()' [formGroup]='formGroup' novalidate>\r\n  <anatoly-form-validation-summary [formGroup]='formGroup'\r\n                                   [visible]='formSubmitted && formGroup.invalid'></anatoly-form-validation-summary>\r\n\r\n  <div class='contact-us'>\r\n    <div class=\"row\">\r\n      <div class='form-fields col-6'>\r\n        <p>What can we help you with?</p>\r\n        <div [ngClass]=\"{'has-error': isControlInvalid('topic') }\" class='form-topic'>\r\n          <div class='form-select-wrapper'>\r\n            <label class='assistive-text'>Topic *</label>\r\n            <select (change)='onTopicChange($event)' class='form-select' formControlName='topic'>\r\n              <option *ngFor='let topic of topicList' [value]='topic.value'>{{ topic.value }} </option>\r\n            </select>\r\n            <anatoly-item-validation-summary [formGroup]='formGroup'\r\n                                             [formSubmitted]='formSubmitted'\r\n                                             controlName='topic'\r\n                                             controlTitle='topic'>\r\n            </anatoly-item-validation-summary>\r\n          </div>\r\n        </div>\r\n        <div [ngClass]=\"{'has-error': isControlInvalid('name') }\" class='form-name'>\r\n          <label class='assistive-text'>Name *</label>\r\n          <input class='form-control' formControlName='name' placeholder='Name *' type='text'>\r\n          <anatoly-item-validation-summary [formGroup]='formGroup'\r\n                                           [formSubmitted]='formSubmitted'\r\n                                           controlName='name'\r\n                                           controlTitle='name'>\r\n          </anatoly-item-validation-summary>\r\n        </div>\r\n        <div [ngClass]=\"{'has-error': isControlInvalid('email') }\" class='form-email'>\r\n          <label class='assistive-text'>E-mail * </label>\r\n          <input class='form-control' formControlName='email' placeholder='E-mail *' type='text' />\r\n          <p *ngIf='!isUserSignedIn'>Please indicate the email used for your MailEx login if you already have an account</p>\r\n          <anatoly-item-validation-summary [formGroup]='formGroup'\r\n                                           [formSubmitted]='formSubmitted'\r\n                                           controlName='email'\r\n                                           controlTitle='email'>\r\n          </anatoly-item-validation-summary>\r\n        </div>\r\n        <div [ngClass]=\"{'has-error': isControlInvalid('subject') }\" class='form-subject'>\r\n          <label class='assistive-text'>Subject *</label>\r\n          <input class='form-control' formControlName='subject' placeholder='Subject *' type='text' />\r\n          <anatoly-item-validation-summary [formGroup]='formGroup'\r\n                                           [formSubmitted]='formSubmitted'\r\n                                           controlName='subject'\r\n                                           controlTitle='subject'>\r\n          </anatoly-item-validation-summary>\r\n        </div>\r\n\r\n      </div>\r\n      <div class='col-6'>\r\n        <div [ngClass]=\"{'has-error': isControlInvalid('message') }\" class='form-message'>\r\n          <label class='assistive-text'>Message *</label>\r\n          <textarea formControlName='message' name='message' placeholder='Message  *' rows='4'\r\n                    type='text'></textarea>\r\n          <anatoly-item-validation-summary [formGroup]='formGroup'\r\n                                           [formSubmitted]='formSubmitted'\r\n                                           controlName='message'\r\n                                           controlTitle='message'>\r\n          </anatoly-item-validation-summary>\r\n        </div>\r\n      </div>\r\n    </div>\r\n      <div class=\"row form-footer\">\r\n        <div class=\"col-6\">\r\n          <div style='transform:scale(0.8);transform-origin:0;'>\r\n            <ngx-recaptcha2 #recaptcha [siteKey]='siteKey' formControlName='captcha'></ngx-recaptcha2>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-6\">\r\n          <button *ngIf='showActionButtons'\r\n                  [class.btn-primary]='!formGroup.invalid'\r\n                  class='btn btn-success float-right m-t-20'\r\n                  type='submit'>\r\n            Submit\r\n          </button>\r\n        </div>\r\n    </div>\r\n  </div>\r\n</form>\r\n" }]
-        }], function () { return [{ type: i1$8.FormBuilder }, { type: AppContextService }, { type: EmailsApiService }, { type: NotificationService }]; }, { showActionButtons: [{
+            args: [{ selector: 'anatoly-forms-contactus-form', template: "<form (ngSubmit)='onSubmit()' [formGroup]='formGroup' novalidate>\r\n  <anatoly-form-validation-summary [formGroup]='formGroup'\r\n                                   [visible]='formSubmitted && formGroup.invalid'></anatoly-form-validation-summary>\r\n\r\n  <div class='contact-us'>\r\n    <div class=\"row\">\r\n      <div class='form-fields col-6'>\r\n        <p>What can we help you with?</p>\r\n        <div [ngClass]=\"{'has-error': isControlInvalid('topic') }\" class='form-topic'>\r\n          <div class='form-select-wrapper'>\r\n            <label class='assistive-text'>Topic *</label>\r\n            <select (change)='onTopicChange($event)' class='form-select' formControlName='topic'>\r\n              <option *ngFor='let topic of topicList' [value]='topic.value'>{{ topic.value }} </option>\r\n            </select>\r\n            <anatoly-item-validation-summary [formGroup]='formGroup'\r\n                                             [formSubmitted]='formSubmitted'\r\n                                             controlName='topic'\r\n                                             controlTitle='topic'>\r\n            </anatoly-item-validation-summary>\r\n          </div>\r\n        </div>\r\n        <div [ngClass]=\"{'has-error': isControlInvalid('name') }\" class='form-name'>\r\n          <label class='assistive-text'>Name *</label>\r\n          <input class='form-control' formControlName='name' placeholder='Name *' type='text'>\r\n          <anatoly-item-validation-summary [formGroup]='formGroup'\r\n                                           [formSubmitted]='formSubmitted'\r\n                                           controlName='name'\r\n                                           controlTitle='name'>\r\n          </anatoly-item-validation-summary>\r\n        </div>\r\n        <div [ngClass]=\"{'has-error': isControlInvalid('email') }\" class='form-email'>\r\n          <label class='assistive-text'>E-mail * </label>\r\n          <input class='form-control' formControlName='email' placeholder='E-mail *' type='text' />\r\n          <p *ngIf='!isUserSignedIn'>Please indicate the email used for your MailEx login if you already have an account</p>\r\n          <anatoly-item-validation-summary [formGroup]='formGroup'\r\n                                           [formSubmitted]='formSubmitted'\r\n                                           controlName='email'\r\n                                           controlTitle='email'>\r\n          </anatoly-item-validation-summary>\r\n        </div>\r\n        <div [ngClass]=\"{'has-error': isControlInvalid('subject') }\" class='form-subject'>\r\n          <label class='assistive-text'>Subject *</label>\r\n          <input class='form-control' formControlName='subject' placeholder='Subject *' type='text' />\r\n          <anatoly-item-validation-summary [formGroup]='formGroup'\r\n                                           [formSubmitted]='formSubmitted'\r\n                                           controlName='subject'\r\n                                           controlTitle='subject'>\r\n          </anatoly-item-validation-summary>\r\n        </div>\r\n\r\n      </div>\r\n      <div class='col-6'>\r\n        <div [ngClass]=\"{'has-error': isControlInvalid('message') }\" class='form-message'>\r\n          <label class='assistive-text'>Message *</label>\r\n          <textarea formControlName='message' name='message' placeholder='Message  *' rows='4'\r\n                    type='text'></textarea>\r\n          <anatoly-item-validation-summary [formGroup]='formGroup'\r\n                                           [formSubmitted]='formSubmitted'\r\n                                           controlName='message'\r\n                                           controlTitle='message'>\r\n          </anatoly-item-validation-summary>\r\n        </div>\r\n      </div>\r\n    </div>\r\n      <div class=\"row form-footer\">\r\n        <div class=\"col\">\r\n          <button *ngIf='showActionButtons'\r\n                  [class.btn-primary]='!formGroup.invalid'\r\n                  class='btn btn-success'\r\n                  type='submit'>\r\n            Submit\r\n          </button>\r\n        </div>\r\n    </div>\r\n  </div>\r\n</form>\r\n" }]
+        }], function () { return [{ type: i1$9.ReCaptchaV3Service }, { type: i2.FormBuilder }, { type: AppContextService }, { type: EmailsApiService }, { type: NotificationService }]; }, { showActionButtons: [{
                 type: Input
             }], submit: [{
                 type: Output
-            }], recaptcha: [{
-                type: ViewChild,
-                args: ['recaptcha']
             }] });
 })();
 
@@ -4640,7 +4623,7 @@ ContactUsDialog.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ContactUsDi
         if (rf & 2) {
             i0.ɵɵproperty("ngIf", ctx.isOpen);
         }
-    }, dependencies: [i1$5.NgIf, i2.DialogComponent, i2.DialogActionsComponent, ContactUsForm], encapsulation: 2 });
+    }, dependencies: [i1$5.NgIf, i2$1.DialogComponent, i2$1.DialogActionsComponent, ContactUsForm], encapsulation: 2 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ContactUsDialog, [{
             type: Component,
@@ -4899,7 +4882,7 @@ class AddressComponent extends BaseEditComponent {
         this.change.emit(usState);
     }
 }
-AddressComponent.ɵfac = function AddressComponent_Factory(t) { return new (t || AddressComponent)(i0.ɵɵdirectiveInject(i1$8.FormBuilder), i0.ɵɵdirectiveInject(CoreApiService)); };
+AddressComponent.ɵfac = function AddressComponent_Factory(t) { return new (t || AddressComponent)(i0.ɵɵdirectiveInject(i2.FormBuilder), i0.ɵɵdirectiveInject(CoreApiService)); };
 AddressComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AddressComponent, selectors: [["anatoly-forms-address"]], inputs: { title: "title", isTitleVisible: "isTitleVisible", isRequired: "isRequired", address: "address" }, outputs: { change: "change" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 29, vars: 29, consts: [["classes", "card-primary card-outline"], [3, "title", 4, "ngIf"], [1, "row", 3, "formGroup"], [1, "form-group", "col-12", 3, "ngClass"], [1, "col-form-label", "required"], ["type", "text", "formControlName", "address_street", "placeholder", "Street Address", 1, "form-control"], ["controlName", "address_street", "controlTitle", "Street", 3, "formGroup", "formSubmitted"], ["type", "text", "formControlName", "address_street2", "placeholder", "Apartment, suite, unit, building, floor, etc.", 1, "form-control"], ["controlName", "address_street2", "controlTitle", "Street2", 3, "formGroup", "formSubmitted"], [1, "form-group", "col-3", 3, "ngClass"], ["type", "text", "formControlName", "address_city", "placeholder", "City", 1, "form-control"], ["controlName", "address_city", "controlTitle", "City", 3, "formGroup", "formSubmitted"], ["class", "form-group col-3", 3, "ngClass", 4, "ngIf"], ["type", "text", "formControlName", "address_zipcode", "placeholder", "zipcode", 1, "form-control"], ["controlName", "address_zipcode", "controlTitle", "zipcode", 3, "formGroup", "formSubmitted"], ["formControlName", "address_country", "data-placeholder", "Select a Country", 1, "form-control", 3, "change"], [3, "value", 4, "ngFor", "ngForOf"], ["controlName", "address_country", "controlTitle", "Country", 3, "formGroup", "formSubmitted"], [3, "title"], ["formControlName", "address_stateOrRegion", 1, "form-control", 3, "change"], ["controlName", "address_stateOrRegion", "controlTitle", "State", 3, "formGroup", "formSubmitted"], [3, "value"]], template: function AddressComponent_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵelementStart(0, "anatoly-card", 0);
@@ -4963,12 +4946,12 @@ AddressComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AddressCom
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("formGroup", ctx.formGroup)("formSubmitted", ctx.formSubmitted);
         }
-    }, dependencies: [i1$5.NgClass, i1$5.NgForOf, i1$5.NgIf, i1$8.NgSelectOption, i1$8.ɵNgSelectMultipleOption, i1$8.DefaultValueAccessor, i1$8.SelectControlValueAccessor, i1$8.NgControlStatus, i1$8.NgControlStatusGroup, i1$8.FormGroupDirective, i1$8.FormControlName, CardComponent, CardHeaderComponent, CardBodyComponent, NativeElementDirective, ItemValidationSummaryComponent], encapsulation: 2 });
+    }, dependencies: [i1$5.NgClass, i1$5.NgForOf, i1$5.NgIf, i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.DefaultValueAccessor, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.NgControlStatusGroup, i2.FormGroupDirective, i2.FormControlName, CardComponent, CardHeaderComponent, CardBodyComponent, NativeElementDirective, ItemValidationSummaryComponent], encapsulation: 2 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AddressComponent, [{
             type: Component,
             args: [{ selector: 'anatoly-forms-address', template: "<anatoly-card classes='card-primary card-outline'>\r\n  <anatoly-card-header *ngIf='isTitleVisible' [title]='title'></anatoly-card-header>\r\n  <anatoly-card-body>\r\n    <div class='row' [formGroup]='formGroup'>\r\n      <div class='form-group col-12' [ngClass]=\"{'has-error': isControlInvalid('address_street')}\" >\r\n        <label class='col-form-label required'>Street Address</label>\r\n        <input type='text' class='form-control' formControlName='address_street' placeholder='Street Address'>\r\n        <anatoly-item-validation-summary controlName='address_street'\r\n                                         controlTitle='Street'\r\n                                         [formGroup]='formGroup'\r\n                                         [formSubmitted]='formSubmitted'>\r\n        </anatoly-item-validation-summary>\r\n      </div>\r\n\r\n      <div class='form-group col-12' [ngClass]=\"{'has-error': isControlInvalid('address_street2')}\" >\r\n        <input type='text' class='form-control' formControlName='address_street2' placeholder='Apartment, suite, unit, building, floor, etc.'>\r\n        <anatoly-item-validation-summary controlName='address_street2'\r\n                                         controlTitle='Street2'\r\n                                         [formGroup]='formGroup'\r\n                                         [formSubmitted]='formSubmitted'>\r\n        </anatoly-item-validation-summary>\r\n      </div>\r\n\r\n      <div class='form-group col-3' [ngClass]=\"{'has-error': isControlInvalid('address_city')}\">\r\n        <label class='col-form-label required'>City</label>\r\n        <input type='text' class='form-control' formControlName='address_city' placeholder='City'>\r\n        <anatoly-item-validation-summary controlName='address_city'\r\n                                         controlTitle='City'\r\n                                         [formGroup]='formGroup'\r\n                                         [formSubmitted]='formSubmitted'>\r\n        </anatoly-item-validation-summary>\r\n      </div>\r\n\r\n      <div class='form-group col-3' *ngIf=\"formGroup.value.address_country == 'US'\" [ngClass]=\"{'has-error': isControlInvalid('address_stateOrRegion')}\">\r\n        <label class='col-form-label required'>State</label>\r\n        <select class='form-control' (change)='onUSStateChange($event)' formControlName='address_stateOrRegion'>\r\n          <option *ngFor='let state of usStateData' [value]='state.code'>{{state.name}}</option>\r\n        </select>\r\n        <anatoly-item-validation-summary controlName='address_stateOrRegion'\r\n                                         controlTitle='State'\r\n                                         [formGroup]='formGroup'\r\n                                         [formSubmitted]='formSubmitted'>\r\n        </anatoly-item-validation-summary>\r\n      </div>\r\n\r\n      <div class='form-group col-3' [ngClass]=\"{'has-error': isControlInvalid('address_zipcode')}\" >\r\n        <label class='col-form-label required'>zipcode</label>\r\n        <input type='text' class='form-control' formControlName='address_zipcode' placeholder='zipcode'>\r\n        <anatoly-item-validation-summary controlName='address_zipcode'\r\n                                         controlTitle='zipcode'\r\n                                         [formGroup]='formGroup'\r\n                                         [formSubmitted]='formSubmitted'>\r\n        </anatoly-item-validation-summary>\r\n      </div>\r\n\r\n      <div class='form-group col-3' [ngClass]=\"{'has-error': isControlInvalid('address_country')}\">\r\n        <label class='col-form-label required'>Country</label>\r\n        <select class='form-control' (change)='onCountryChange($event)' formControlName='address_country' data-placeholder='Select a Country'>\r\n          <option *ngFor='let country of countryData' [value]='country.code'>{{country.name}}</option>\r\n        </select>\r\n        <anatoly-item-validation-summary controlName='address_country'\r\n                                         controlTitle='Country'\r\n                                         [formGroup]='formGroup'\r\n                                         [formSubmitted]='formSubmitted'>\r\n        </anatoly-item-validation-summary>\r\n      </div>\r\n    </div>\r\n  </anatoly-card-body>\r\n</anatoly-card>\r\n" }]
-        }], function () { return [{ type: i1$8.FormBuilder }, { type: CoreApiService }]; }, { title: [{
+        }], function () { return [{ type: i2.FormBuilder }, { type: CoreApiService }]; }, { title: [{
                 type: Input
             }], isTitleVisible: [{
                 type: Input
@@ -5057,7 +5040,7 @@ class CompanyComponent extends BaseEditComponent {
         return JSON.stringify(data);
     }
 }
-CompanyComponent.ɵfac = function CompanyComponent_Factory(t) { return new (t || CompanyComponent)(i0.ɵɵdirectiveInject(i1$8.FormBuilder)); };
+CompanyComponent.ɵfac = function CompanyComponent_Factory(t) { return new (t || CompanyComponent)(i0.ɵɵdirectiveInject(i2.FormBuilder)); };
 CompanyComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CompanyComponent, selectors: [["anatoly-forms-company"]], inputs: { title: "title", isTitleVisible: "isTitleVisible", company: "company" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 24, vars: 22, consts: [["classes", "card-primary card-outline"], [3, "title", 4, "ngIf"], [1, "row", 3, "formGroup"], [1, "form-group", "col-6", 3, "ngClass"], [1, "col-form-label"], ["type", "text", "formControlName", "company_name", "placeholder", "Company Name", 1, "form-control"], ["controlName", "company_name", "controlTitle", "Company Name", 3, "formGroup", "formSubmitted"], ["type", "tel", "formControlName", "company_phone", "placeholder", "Company Phone", 1, "form-control"], ["controlName", "company_phone", "controlTitle", "Company Phone", 3, "formGroup", "formSubmitted"], ["type", "email", "formControlName", "company_email", "placeholder", "Company Email", 1, "form-control"], ["controlName", "company_email", "controlTitle", "Company Email", 3, "formGroup", "formSubmitted"], ["type", "url", "placeholder", "https://example.com", "pattern", "https://.*", "size", "30", "formControlName", "company_websiteUrl", 1, "form-control"], ["controlName", "company_websiteUrl", "controlTitle", "Company website url", 3, "formGroup", "formSubmitted"], [3, "title"]], template: function CompanyComponent_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵelementStart(0, "anatoly-card", 0);
@@ -5105,12 +5088,12 @@ CompanyComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CompanyCom
             i0.ɵɵadvance(4);
             i0.ɵɵproperty("formGroup", ctx.formGroup)("formSubmitted", ctx.formSubmitted);
         }
-    }, dependencies: [i1$5.NgClass, i1$5.NgIf, i1$8.DefaultValueAccessor, i1$8.NgControlStatus, i1$8.NgControlStatusGroup, i1$8.PatternValidator, i1$8.FormGroupDirective, i1$8.FormControlName, CardComponent, CardHeaderComponent, CardBodyComponent, NativeElementDirective, ItemValidationSummaryComponent], encapsulation: 2 });
+    }, dependencies: [i1$5.NgClass, i1$5.NgIf, i2.DefaultValueAccessor, i2.NgControlStatus, i2.NgControlStatusGroup, i2.PatternValidator, i2.FormGroupDirective, i2.FormControlName, CardComponent, CardHeaderComponent, CardBodyComponent, NativeElementDirective, ItemValidationSummaryComponent], encapsulation: 2 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CompanyComponent, [{
             type: Component,
             args: [{ selector: 'anatoly-forms-company', template: "<anatoly-card classes='card-primary card-outline'>\r\n  <anatoly-card-header *ngIf='isTitleVisible' [title]='title'></anatoly-card-header>\r\n  <anatoly-card-body>\r\n    <div  [formGroup]='formGroup'  class='row'>\r\n      <div class='form-group col-6' [ngClass]=\"{'has-error': isControlInvalid('company_name') }\">\r\n        <label class='col-form-label'>Name</label>\r\n        <input type='text' class='form-control' formControlName='company_name' placeholder='Company Name'>\r\n        <anatoly-item-validation-summary controlName='company_name'\r\n                                         controlTitle='Company Name'\r\n                                         [formGroup]='formGroup'\r\n                                         [formSubmitted]='formSubmitted'>\r\n        </anatoly-item-validation-summary>\r\n      </div>\r\n      <div class='form-group col-6' [ngClass]=\"{'has-error': isControlInvalid('company_phone') }\">\r\n        <label class='col-form-label'>Phone</label>\r\n        <input type='tel' class='form-control' formControlName='company_phone' placeholder='Company Phone'>\r\n        <anatoly-item-validation-summary controlName='company_phone'\r\n                                         controlTitle='Company Phone'\r\n                                         [formGroup]='formGroup'\r\n                                         [formSubmitted]='formSubmitted'>\r\n        </anatoly-item-validation-summary>\r\n      </div>\r\n      <div class='form-group col-6' [ngClass]=\"{'has-error': isControlInvalid('company_email') }\">\r\n        <label class='col-form-label'>Email</label>\r\n        <input type='email' class='form-control' formControlName='company_email' placeholder='Company Email'>\r\n        <anatoly-item-validation-summary controlName='company_email'\r\n                                         controlTitle='Company Email'\r\n                                         [formGroup]='formGroup'\r\n                                         [formSubmitted]='formSubmitted'>\r\n        </anatoly-item-validation-summary>\r\n      </div>\r\n      <div class='form-group col-6' [ngClass]=\"{'has-error': isControlInvalid('company_websiteUrl') }\">\r\n        <label class='col-form-label'>Website Url</label>\r\n        <input type='url' placeholder='https://example.com' pattern='https://.*' size='30'\r\n               class='form-control' formControlName='company_websiteUrl'>\r\n        <anatoly-item-validation-summary controlName='company_websiteUrl'\r\n                                         controlTitle='Company website url'\r\n                                         [formGroup]='formGroup'\r\n                                         [formSubmitted]='formSubmitted'>\r\n        </anatoly-item-validation-summary>\r\n      </div>\r\n\r\n    </div>\r\n  </anatoly-card-body>\r\n</anatoly-card>\r\n" }]
-        }], function () { return [{ type: i1$8.FormBuilder }]; }, { title: [{
+        }], function () { return [{ type: i2.FormBuilder }]; }, { title: [{
                 type: Input
             }], isTitleVisible: [{
                 type: Input
@@ -5230,7 +5213,7 @@ UrlSlugComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UrlSlugCom
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngIf", ctx.isGoButtonVisible);
         }
-    }, dependencies: [i1$5.NgClass, i1$5.NgIf, i1$8.DefaultValueAccessor, i1$8.NgControlStatus, i1$8.NgControlStatusGroup, i1$8.FormGroupDirective, i1$8.FormControlName, NativeElementDirective, ItemValidationSummaryComponent], encapsulation: 2 });
+    }, dependencies: [i1$5.NgClass, i1$5.NgIf, i2.DefaultValueAccessor, i2.NgControlStatus, i2.NgControlStatusGroup, i2.FormGroupDirective, i2.FormControlName, NativeElementDirective, ItemValidationSummaryComponent], encapsulation: 2 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UrlSlugComponent, [{
             type: Component,
@@ -5340,7 +5323,7 @@ TimezoneDropdownlist.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Timezo
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngForOf", ctx.timezoneListItems);
         }
-    }, dependencies: [i1$5.NgForOf, i1$5.NgIf, i1$8.NgSelectOption, i1$8.ɵNgSelectMultipleOption, i1$8.SelectControlValueAccessor, i1$8.NgControlStatus, i1$8.NgControlStatusGroup, i1$8.FormGroupDirective, i1$8.FormControlName, NativeElementDirective], encapsulation: 2 });
+    }, dependencies: [i1$5.NgForOf, i1$5.NgIf, i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.NgControlStatusGroup, i2.FormGroupDirective, i2.FormControlName, NativeElementDirective], encapsulation: 2 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TimezoneDropdownlist, [{
             type: Component,
@@ -5887,7 +5870,7 @@ AnatolyUIModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonMo
             FormsModule,
             NgxCaptchaModule,
             FaModule,
-            KendoModule, i1$9.FroalaEditorModule, i1$9.FroalaViewModule], exports: [BuyAccessButtonComponent,
+            KendoModule, i1$8.FroalaEditorModule, i1$8.FroalaViewModule], exports: [BuyAccessButtonComponent,
             SubscribePlanButtonComponent,
             CheckIconComponent,
             DatapagerComponent,