@osovitny/anatoly 2.14.75 → 2.14.77

package/fesm2020/osovitny-anatoly.mjs

@@ -20,16 +20,21 @@ import * as i1$2 from 'ngx-toastr';
 import * as i1$4 from '@angular/platform-browser';
 import * as i2 from '@fortawesome/angular-fontawesome';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import * as i1$6 from '@angular/forms';
+import * as i1$6 from '@progress/kendo-angular-pager';
+import { PagerModule } from '@progress/kendo-angular-pager';
+import * as i1$7 from '@angular/forms';
 import { FormControl, Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
-import * as i1$7 from 'angular-froala-wysiwyg';
+import * as i1$8 from 'angular-froala-wysiwyg';
 import { FroalaEditorModule, FroalaViewModule } from 'angular-froala-wysiwyg';
-import * as i1$8 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 { NgxCaptchaModule } from 'ngx-captcha';
-import { ButtonsModule } from '@progress/kendo-angular-buttons';
 import { faCheckCircle, faCircleXmark, faDatabase } from '@fortawesome/free-solid-svg-icons';
+import { ButtonsModule } from '@progress/kendo-angular-buttons';
+import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
+import { InputsModule } from '@progress/kendo-angular-inputs';
+import { TreeViewModule } from '@progress/kendo-angular-treeview';
 
 /*
 <file>
@@ -2427,6 +2432,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
                 type: Input
             }] } });
 
+/*
+<file>
+  Project:
+    @osovitny/anatoly
+
+  Authors:
+    Vadim Osovitny vadim@osovitny.com
+    Anatoly Osovitny anatoly@osovitny.com
+
+  Created:
+    28 Aug 2022
+
+  Copyright (c) 2016-2022 Osovitny Inc. All rights reserved.
+</file>
+*/
+class DatapagerComponent {
+    constructor() {
+        //Inputs
+        this.totalItems = 0;
+        this.pageSize = 0;
+        this.skipItems = 0;
+        //Outputs
+        this.pageChange = new EventEmitter();
+    }
+    //Events
+    onPageChange(e) {
+        this.pageChange.emit(e);
+    }
+}
+DatapagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DatapagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DatapagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: DatapagerComponent, selector: "anatoly-datapager", inputs: { totalItems: "totalItems", pageSize: "pageSize", skipItems: "skipItems" }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<kendo-datapager [total]='totalItems'\r\n                 [pageSize]='pageSize'\r\n                 [skip]='skipItems'\r\n                 (pageChange)='onPageChange($event)'>\r\n</kendo-datapager>", dependencies: [{ kind: "component", type: i1$6.PagerComponent, selector: "kendo-datapager", inputs: ["total", "skip", "pageSize", "buttonCount", "info", "type", "pageSizeValues", "previousNext"], outputs: ["pageChange", "pageSizeChange"], exportAs: ["kendoDataPager"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DatapagerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'anatoly-datapager', template: "<kendo-datapager [total]='totalItems'\r\n                 [pageSize]='pageSize'\r\n                 [skip]='skipItems'\r\n                 (pageChange)='onPageChange($event)'>\r\n</kendo-datapager>" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { totalItems: [{
+                type: Input
+            }], pageSize: [{
+                type: Input
+            }], skipItems: [{
+                type: Input
+            }], pageChange: [{
+                type: Output
+            }] } });
+
 /*
 <file>
   Project:
@@ -3140,14 +3189,14 @@ class NativeElementDirective {
         this.control.control.nativeElement = this.el.nativeElement;
     }
 }
-NativeElementDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: NativeElementDirective, deps: [{ token: i0.ElementRef }, { token: i1$6.NgControl }], target: i0.ɵɵFactoryTarget.Directive });
+NativeElementDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: NativeElementDirective, deps: [{ token: i0.ElementRef }, { token: i1$7.NgControl }], target: i0.ɵɵFactoryTarget.Directive });
 NativeElementDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.6", type: NativeElementDirective, selector: "[formControl], [formControlName]", ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: NativeElementDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[formControl], [formControlName]'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$6.NgControl }]; } });
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$7.NgControl }]; } });
 
 /*
 <file>
@@ -3327,7 +3376,7 @@ class FormsHtmlEditorComponent extends BaseHtmlEditorComponent {
     }
 }
 FormsHtmlEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: FormsHtmlEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FormsHtmlEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: FormsHtmlEditorComponent, selector: "anatoly-forms-html-editor", inputs: { editorFormKey: "editorFormKey" }, usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"formGroup\" [ngClass]=\"{'has-error': isControlInvalid(editorFormKey) }\" class=\"form-group\" >\r\n    <label class=\"col-form-label\">{{ editorLabelText }}</label>\r\n    <textarea [formControlName]=\"editorFormKey\" [froalaEditor]=\"options\" (froalaInit)=\"initializeControl($event)\"></textarea>\r\n    <anatoly-item-validation-summary [formGroup]=\"formGroup\"\r\n                                     [formSubmitted]=\"formSubmitted\"\r\n                                     [controlName]=\"editorFormKey\"\r\n                                     [controlTitle]=\"editorLabelText\">\r\n    </anatoly-item-validation-summary>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$6.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: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$7.FroalaEditorDirective, selector: "[froalaEditor]", inputs: ["froalaEditor", "froalaModel"], outputs: ["froalaModelChange", "froalaInit"], exportAs: ["froalaEditor"] }, { kind: "directive", type: NativeElementDirective, selector: "[formControl], [formControlName]" }, { kind: "component", type: ItemValidationSummaryComponent, selector: "anatoly-item-validation-summary", inputs: ["controlName", "controlTitle"] }] });
+FormsHtmlEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: FormsHtmlEditorComponent, selector: "anatoly-forms-html-editor", inputs: { editorFormKey: "editorFormKey" }, usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"formGroup\" [ngClass]=\"{'has-error': isControlInvalid(editorFormKey) }\" class=\"form-group\" >\r\n    <label class=\"col-form-label\">{{ editorLabelText }}</label>\r\n    <textarea [formControlName]=\"editorFormKey\" [froalaEditor]=\"options\" (froalaInit)=\"initializeControl($event)\"></textarea>\r\n    <anatoly-item-validation-summary [formGroup]=\"formGroup\"\r\n                                     [formSubmitted]=\"formSubmitted\"\r\n                                     [controlName]=\"editorFormKey\"\r\n                                     [controlTitle]=\"editorLabelText\">\r\n    </anatoly-item-validation-summary>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$7.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: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$7.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$7.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$8.FroalaEditorDirective, selector: "[froalaEditor]", inputs: ["froalaEditor", "froalaModel"], outputs: ["froalaModelChange", "froalaInit"], exportAs: ["froalaEditor"] }, { kind: "directive", type: NativeElementDirective, selector: "[formControl], [formControlName]" }, { kind: "component", type: ItemValidationSummaryComponent, selector: "anatoly-item-validation-summary", inputs: ["controlName", "controlTitle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: FormsHtmlEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: "anatoly-forms-html-editor", template: "<div [formGroup]=\"formGroup\" [ngClass]=\"{'has-error': isControlInvalid(editorFormKey) }\" class=\"form-group\" >\r\n    <label class=\"col-form-label\">{{ editorLabelText }}</label>\r\n    <textarea [formControlName]=\"editorFormKey\" [froalaEditor]=\"options\" (froalaInit)=\"initializeControl($event)\"></textarea>\r\n    <anatoly-item-validation-summary [formGroup]=\"formGroup\"\r\n                                     [formSubmitted]=\"formSubmitted\"\r\n                                     [controlName]=\"editorFormKey\"\r\n                                     [controlTitle]=\"editorLabelText\">\r\n    </anatoly-item-validation-summary>\r\n</div>\r\n" }]
@@ -3372,7 +3421,7 @@ class HtmlEditorComponent extends BaseHtmlEditorComponent {
     }
 }
 HtmlEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: HtmlEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-HtmlEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: HtmlEditorComponent, selector: "anatoly-html-editor", usesInheritance: true, ngImport: i0, template: "<div class=\"form-group\">\r\n  <label class=\"col-form-label\">{{ editorLabelText }}</label>\r\n  <textarea [froalaEditor]=\"options\" (froalaInit)=\"initializeControl($event)\"></textarea>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1$7.FroalaEditorDirective, selector: "[froalaEditor]", inputs: ["froalaEditor", "froalaModel"], outputs: ["froalaModelChange", "froalaInit"], exportAs: ["froalaEditor"] }] });
+HtmlEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: HtmlEditorComponent, selector: "anatoly-html-editor", usesInheritance: true, ngImport: i0, template: "<div class=\"form-group\">\r\n  <label class=\"col-form-label\">{{ editorLabelText }}</label>\r\n  <textarea [froalaEditor]=\"options\" (froalaInit)=\"initializeControl($event)\"></textarea>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1$8.FroalaEditorDirective, selector: "[froalaEditor]", inputs: ["froalaEditor", "froalaModel"], outputs: ["froalaModelChange", "froalaInit"], exportAs: ["froalaEditor"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: HtmlEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: "anatoly-html-editor", template: "<div class=\"form-group\">\r\n  <label class=\"col-form-label\">{{ editorLabelText }}</label>\r\n  <textarea [froalaEditor]=\"options\" (froalaInit)=\"initializeControl($event)\"></textarea>\r\n</div>\r\n" }]
@@ -3482,6 +3531,10 @@ class BaseList extends BaseComponent {
         this.currentFilter = filter;
         this.loadPageOne();
     }
+    //Tos
+    toIndex(index) {
+        return ((this.currentPage - 1) * this.pageSize) + index + 1;
+    }
     //Events
     onPageChange(e) {
         this.pageSize = e.take;
@@ -3751,12 +3804,12 @@ class ContactUsForm extends BaseEditComponent {
         this.selectedTopic = event.target.value;
     }
 }
-ContactUsForm.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ContactUsForm, deps: [{ token: i1$6.FormBuilder }, { token: AppContextService }, { token: EmailsApiService }, { token: NotificationService }], target: i0.ɵɵFactoryTarget.Component });
-ContactUsForm.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ContactUsForm, selector: "anatoly-forms-contactus-form", inputs: { showActionButtons: "showActionButtons" }, outputs: { submit: "submit" }, viewQueries: [{ propertyName: "recaptcha", first: true, predicate: ["recaptcha"], descendants: true }], usesInheritance: true, ngImport: i0, 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", dependencies: [{ kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$6.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: i1$6.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.ReCaptcha2Component, selector: "ngx-recaptcha2", inputs: ["theme", "size", "hl"] }, { kind: "directive", type: NativeElementDirective, selector: "[formControl], [formControlName]" }, { kind: "component", type: FormValidationSummaryComponent, selector: "anatoly-form-validation-summary", inputs: ["visible", "customerrors", "viewtype"] }, { kind: "component", type: ItemValidationSummaryComponent, selector: "anatoly-item-validation-summary", inputs: ["controlName", "controlTitle"] }] });
+ContactUsForm.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ContactUsForm, deps: [{ token: i1$7.FormBuilder }, { token: AppContextService }, { token: EmailsApiService }, { token: NotificationService }], target: i0.ɵɵFactoryTarget.Component });
+ContactUsForm.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ContactUsForm, selector: "anatoly-forms-contactus-form", inputs: { showActionButtons: "showActionButtons" }, outputs: { submit: "submit" }, viewQueries: [{ propertyName: "recaptcha", first: true, predicate: ["recaptcha"], descendants: true }], usesInheritance: true, ngImport: i0, 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", dependencies: [{ kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$7.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$7.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$7.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: i1$7.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$7.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$7.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.ReCaptcha2Component, selector: "ngx-recaptcha2", inputs: ["theme", "size", "hl"] }, { kind: "directive", type: NativeElementDirective, selector: "[formControl], [formControlName]" }, { kind: "component", type: FormValidationSummaryComponent, selector: "anatoly-form-validation-summary", inputs: ["visible", "customerrors", "viewtype"] }, { kind: "component", type: ItemValidationSummaryComponent, selector: "anatoly-item-validation-summary", inputs: ["controlName", "controlTitle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ContactUsForm, decorators: [{
             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" }]
-        }], ctorParameters: function () { return [{ type: i1$6.FormBuilder }, { type: AppContextService }, { type: EmailsApiService }, { type: NotificationService }]; }, propDecorators: { showActionButtons: [{
+        }], ctorParameters: function () { return [{ type: i1$7.FormBuilder }, { type: AppContextService }, { type: EmailsApiService }, { type: NotificationService }]; }, propDecorators: { showActionButtons: [{
                 type: Input
             }], submit: [{
                 type: Output
@@ -3796,7 +3849,7 @@ class ContactUsDialog extends BaseDialog {
     }
 }
 ContactUsDialog.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ContactUsDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ContactUsDialog.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ContactUsDialog, selector: "anatoly-contactus-dialog", viewQueries: [{ propertyName: "contactUsForm", first: true, predicate: ["contactusform"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<kendo-dialog (close)='onClose()' *ngIf='isOpen' [width]='800' title='Contact Us' class=\"k-dialog-wrapper\">\r\n  <div class=\"k-content k-window-content k-dialog-content\">\r\n    <anatoly-forms-contactus-form #contactusform [showActionButtons]='false' (submit)='onSubmit()'>\r\n    </anatoly-forms-contactus-form>\r\n  </div>\r\n  <kendo-dialog-actions class=\"k-dialog-buttongroup k-actions k-actions-stretched\">\r\n    <button (click)='onSubmitFire()' class='btn btn-success' type='button'>Submit</button>\r\n    <button (click)='onClose()' class='btn btn-danger' type='button'>Cancel</button>\r\n  </kendo-dialog-actions>\r\n</kendo-dialog>\r\n", dependencies: [{ kind: "component", type: i1$8.DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { kind: "component", type: i1$8.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ContactUsForm, selector: "anatoly-forms-contactus-form", inputs: ["showActionButtons"], outputs: ["submit"] }] });
+ContactUsDialog.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ContactUsDialog, selector: "anatoly-contactus-dialog", viewQueries: [{ propertyName: "contactUsForm", first: true, predicate: ["contactusform"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<kendo-dialog (close)='onClose()' *ngIf='isOpen' [width]='800' title='Contact Us' class=\"k-dialog-wrapper\">\r\n  <div class=\"k-content k-window-content k-dialog-content\">\r\n    <anatoly-forms-contactus-form #contactusform [showActionButtons]='false' (submit)='onSubmit()'>\r\n    </anatoly-forms-contactus-form>\r\n  </div>\r\n  <kendo-dialog-actions class=\"k-dialog-buttongroup k-actions k-actions-stretched\">\r\n    <button (click)='onSubmitFire()' class='btn btn-success' type='button'>Submit</button>\r\n    <button (click)='onClose()' class='btn btn-danger' type='button'>Cancel</button>\r\n  </kendo-dialog-actions>\r\n</kendo-dialog>\r\n", dependencies: [{ kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { kind: "component", type: i2$1.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { kind: "component", type: ContactUsForm, selector: "anatoly-forms-contactus-form", inputs: ["showActionButtons"], outputs: ["submit"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ContactUsDialog, decorators: [{
             type: Component,
             args: [{ selector: 'anatoly-contactus-dialog', template: "<kendo-dialog (close)='onClose()' *ngIf='isOpen' [width]='800' title='Contact Us' class=\"k-dialog-wrapper\">\r\n  <div class=\"k-content k-window-content k-dialog-content\">\r\n    <anatoly-forms-contactus-form #contactusform [showActionButtons]='false' (submit)='onSubmit()'>\r\n    </anatoly-forms-contactus-form>\r\n  </div>\r\n  <kendo-dialog-actions class=\"k-dialog-buttongroup k-actions k-actions-stretched\">\r\n    <button (click)='onSubmitFire()' class='btn btn-success' type='button'>Submit</button>\r\n    <button (click)='onClose()' class='btn btn-danger' type='button'>Cancel</button>\r\n  </kendo-dialog-actions>\r\n</kendo-dialog>\r\n" }]
@@ -3942,12 +3995,12 @@ class AddressComponent extends BaseEditComponent {
         this.change.emit(usState);
     }
 }
-AddressComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: AddressComponent, deps: [{ token: i1$6.FormBuilder }, { token: CoreApiService }], target: i0.ɵɵFactoryTarget.Component });
-AddressComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: AddressComponent, selector: "anatoly-forms-address", inputs: { title: "title", isTitleVisible: "isTitleVisible", isRequired: "isRequired", address: "address" }, outputs: { change: "change" }, usesInheritance: true, ngImport: i0, template: "<anatoly-card [class]=\"'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", dependencies: [{ kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$6.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: i1$6.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CardComponent, selector: "anatoly-card", inputs: ["class"] }, { kind: "component", type: CardHeaderComponent, selector: "anatoly-card-header", inputs: ["class", "title"] }, { kind: "component", type: CardBodyComponent, selector: "anatoly-card-body", inputs: ["class"] }, { kind: "directive", type: NativeElementDirective, selector: "[formControl], [formControlName]" }, { kind: "component", type: ItemValidationSummaryComponent, selector: "anatoly-item-validation-summary", inputs: ["controlName", "controlTitle"] }] });
+AddressComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: AddressComponent, deps: [{ token: i1$7.FormBuilder }, { token: CoreApiService }], target: i0.ɵɵFactoryTarget.Component });
+AddressComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: AddressComponent, selector: "anatoly-forms-address", inputs: { title: "title", isTitleVisible: "isTitleVisible", isRequired: "isRequired", address: "address" }, outputs: { change: "change" }, usesInheritance: true, ngImport: i0, template: "<anatoly-card [class]=\"'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", dependencies: [{ kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$7.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$7.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$7.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: i1$7.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$7.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$7.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CardComponent, selector: "anatoly-card", inputs: ["class"] }, { kind: "component", type: CardHeaderComponent, selector: "anatoly-card-header", inputs: ["class", "title"] }, { kind: "component", type: CardBodyComponent, selector: "anatoly-card-body", inputs: ["class"] }, { kind: "directive", type: NativeElementDirective, selector: "[formControl], [formControlName]" }, { kind: "component", type: ItemValidationSummaryComponent, selector: "anatoly-item-validation-summary", inputs: ["controlName", "controlTitle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: AddressComponent, decorators: [{
             type: Component,
             args: [{ selector: 'anatoly-forms-address', template: "<anatoly-card [class]=\"'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" }]
-        }], ctorParameters: function () { return [{ type: i1$6.FormBuilder }, { type: CoreApiService }]; }, propDecorators: { title: [{
+        }], ctorParameters: function () { return [{ type: i1$7.FormBuilder }, { type: CoreApiService }]; }, propDecorators: { title: [{
                 type: Input
             }], isTitleVisible: [{
                 type: Input
@@ -4025,12 +4078,12 @@ class CompanyComponent extends BaseEditComponent {
         return JSON.stringify(data);
     }
 }
-CompanyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: CompanyComponent, deps: [{ token: i1$6.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-CompanyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: CompanyComponent, selector: "anatoly-forms-company", inputs: { title: "title", isTitleVisible: "isTitleVisible", company: "company" }, usesInheritance: true, ngImport: i0, template: "<anatoly-card [class]=\"'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", dependencies: [{ kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$6.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: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$6.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CardComponent, selector: "anatoly-card", inputs: ["class"] }, { kind: "component", type: CardHeaderComponent, selector: "anatoly-card-header", inputs: ["class", "title"] }, { kind: "component", type: CardBodyComponent, selector: "anatoly-card-body", inputs: ["class"] }, { kind: "directive", type: NativeElementDirective, selector: "[formControl], [formControlName]" }, { kind: "component", type: ItemValidationSummaryComponent, selector: "anatoly-item-validation-summary", inputs: ["controlName", "controlTitle"] }] });
+CompanyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: CompanyComponent, deps: [{ token: i1$7.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+CompanyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: CompanyComponent, selector: "anatoly-forms-company", inputs: { title: "title", isTitleVisible: "isTitleVisible", company: "company" }, usesInheritance: true, ngImport: i0, template: "<anatoly-card [class]=\"'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", dependencies: [{ kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$7.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: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$7.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$7.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$7.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CardComponent, selector: "anatoly-card", inputs: ["class"] }, { kind: "component", type: CardHeaderComponent, selector: "anatoly-card-header", inputs: ["class", "title"] }, { kind: "component", type: CardBodyComponent, selector: "anatoly-card-body", inputs: ["class"] }, { kind: "directive", type: NativeElementDirective, selector: "[formControl], [formControlName]" }, { kind: "component", type: ItemValidationSummaryComponent, selector: "anatoly-item-validation-summary", inputs: ["controlName", "controlTitle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: CompanyComponent, decorators: [{
             type: Component,
             args: [{ selector: 'anatoly-forms-company', template: "<anatoly-card [class]=\"'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" }]
-        }], ctorParameters: function () { return [{ type: i1$6.FormBuilder }]; }, propDecorators: { title: [{
+        }], ctorParameters: function () { return [{ type: i1$7.FormBuilder }]; }, propDecorators: { title: [{
                 type: Input
             }], isTitleVisible: [{
                 type: Input
@@ -4096,7 +4149,7 @@ class UrlSlugComponent extends BaseEditComponent {
     }
 }
 UrlSlugComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: UrlSlugComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-UrlSlugComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: UrlSlugComponent, selector: "anatoly-forms-urlslug", inputs: { title: "title", isTitleVisible: "isTitleVisible", controlName: "controlName", controlTitle: "controlTitle", class: "class", watchedControlName: "watchedControlName", urlPrefix: "urlPrefix", isGoButtonVisible: "isGoButtonVisible" }, outputs: { generating: "generating" }, usesInheritance: true, ngImport: i0, template: "<div [formGroup]='formGroup' [ngClass]=\"{'has-error': isControlInvalid(controlName)}\"\r\n  class=\"permalink form-group {{class}}\">\r\n  <div class=\"d-flex align-items-end\">\r\n\r\n    <div class=\"form-group\">\r\n      <label *ngIf='isTitleVisible' class='col-form-label'>\r\n        {{ title }}\r\n        <span class=\"urlPrefix\">\r\n          {{ urlPrefix }}\r\n        </span>\r\n      </label>\r\n    </div>\r\n    <div class='form-group flex-fill'>\r\n      <input [formControlName]='controlName' type='text' placeholder='Type url slug here' (focusout)='onUrlSlugChange()'\r\n        class='form-control' />\r\n    </div>\r\n    <div class=\"form-group flex-shrink-1\" *ngIf=\"isGoButtonVisible\">\r\n      <a href=\"{{urlPrefix}}{{hrefGo}}\" target=\"_blank\" class=\"btn btn-primary\">Go</a>\r\n    </div>\r\n    <anatoly-item-validation-summary [formGroup]='formGroup' [formSubmitted]='formSubmitted' [controlName]='controlName'\r\n      [controlTitle]='controlTitle'>\r\n    </anatoly-item-validation-summary>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$6.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: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NativeElementDirective, selector: "[formControl], [formControlName]" }, { kind: "component", type: ItemValidationSummaryComponent, selector: "anatoly-item-validation-summary", inputs: ["controlName", "controlTitle"] }] });
+UrlSlugComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: UrlSlugComponent, selector: "anatoly-forms-urlslug", inputs: { title: "title", isTitleVisible: "isTitleVisible", controlName: "controlName", controlTitle: "controlTitle", class: "class", watchedControlName: "watchedControlName", urlPrefix: "urlPrefix", isGoButtonVisible: "isGoButtonVisible" }, outputs: { generating: "generating" }, usesInheritance: true, ngImport: i0, template: "<div [formGroup]='formGroup' [ngClass]=\"{'has-error': isControlInvalid(controlName)}\"\r\n  class=\"permalink form-group {{class}}\">\r\n  <div class=\"d-flex align-items-end\">\r\n\r\n    <div class=\"form-group\">\r\n      <label *ngIf='isTitleVisible' class='col-form-label'>\r\n        {{ title }}\r\n        <span class=\"urlPrefix\">\r\n          {{ urlPrefix }}\r\n        </span>\r\n      </label>\r\n    </div>\r\n    <div class='form-group flex-fill'>\r\n      <input [formControlName]='controlName' type='text' placeholder='Type url slug here' (focusout)='onUrlSlugChange()'\r\n        class='form-control' />\r\n    </div>\r\n    <div class=\"form-group flex-shrink-1\" *ngIf=\"isGoButtonVisible\">\r\n      <a href=\"{{urlPrefix}}{{hrefGo}}\" target=\"_blank\" class=\"btn btn-primary\">Go</a>\r\n    </div>\r\n    <anatoly-item-validation-summary [formGroup]='formGroup' [formSubmitted]='formSubmitted' [controlName]='controlName'\r\n      [controlTitle]='controlTitle'>\r\n    </anatoly-item-validation-summary>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$7.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: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$7.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$7.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NativeElementDirective, selector: "[formControl], [formControlName]" }, { kind: "component", type: ItemValidationSummaryComponent, selector: "anatoly-item-validation-summary", inputs: ["controlName", "controlTitle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: UrlSlugComponent, decorators: [{
             type: Component,
             args: [{ selector: 'anatoly-forms-urlslug', template: "<div [formGroup]='formGroup' [ngClass]=\"{'has-error': isControlInvalid(controlName)}\"\r\n  class=\"permalink form-group {{class}}\">\r\n  <div class=\"d-flex align-items-end\">\r\n\r\n    <div class=\"form-group\">\r\n      <label *ngIf='isTitleVisible' class='col-form-label'>\r\n        {{ title }}\r\n        <span class=\"urlPrefix\">\r\n          {{ urlPrefix }}\r\n        </span>\r\n      </label>\r\n    </div>\r\n    <div class='form-group flex-fill'>\r\n      <input [formControlName]='controlName' type='text' placeholder='Type url slug here' (focusout)='onUrlSlugChange()'\r\n        class='form-control' />\r\n    </div>\r\n    <div class=\"form-group flex-shrink-1\" *ngIf=\"isGoButtonVisible\">\r\n      <a href=\"{{urlPrefix}}{{hrefGo}}\" target=\"_blank\" class=\"btn btn-primary\">Go</a>\r\n    </div>\r\n    <anatoly-item-validation-summary [formGroup]='formGroup' [formSubmitted]='formSubmitted' [controlName]='controlName'\r\n      [controlTitle]='controlTitle'>\r\n    </anatoly-item-validation-summary>\r\n  </div>\r\n</div>\r\n" }]
@@ -4166,7 +4219,7 @@ class TimezoneDropdownlist extends BaseEditComponent {
     }
 }
 TimezoneDropdownlist.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: TimezoneDropdownlist, deps: [{ token: CoreApiService }, { token: AppContextService }], target: i0.ɵɵFactoryTarget.Component });
-TimezoneDropdownlist.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: TimezoneDropdownlist, selector: "anatoly-forms-timezone-dropdownlist", inputs: { title: "title", isTitleVisible: "isTitleVisible", controlName: "controlName", controlTitle: "controlTitle" }, usesInheritance: true, ngImport: i0, template: "<div [formGroup]='formGroup' class='form-group'>\r\n  <label *ngIf='isTitleVisible' class='col-form-label'>Timezone</label>\r\n  <select [formControlName]='controlName' class='form-control'>\r\n    <option *ngFor='let timezone of timezoneListItems'\r\n            [value]='timezone.code'>\r\n      ({{timezone.offset}})  {{timezone.name}}\r\n    </option>\r\n  </select>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1$5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$6.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NativeElementDirective, selector: "[formControl], [formControlName]" }] });
+TimezoneDropdownlist.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: TimezoneDropdownlist, selector: "anatoly-forms-timezone-dropdownlist", inputs: { title: "title", isTitleVisible: "isTitleVisible", controlName: "controlName", controlTitle: "controlTitle" }, usesInheritance: true, ngImport: i0, template: "<div [formGroup]='formGroup' class='form-group'>\r\n  <label *ngIf='isTitleVisible' class='col-form-label'>Timezone</label>\r\n  <select [formControlName]='controlName' class='form-control'>\r\n    <option *ngFor='let timezone of timezoneListItems'\r\n            [value]='timezone.code'>\r\n      ({{timezone.offset}})  {{timezone.name}}\r\n    </option>\r\n  </select>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1$5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$7.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$7.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$7.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$7.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$7.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NativeElementDirective, selector: "[formControl], [formControlName]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: TimezoneDropdownlist, decorators: [{
             type: Component,
             args: [{ selector: 'anatoly-forms-timezone-dropdownlist', template: "<div [formGroup]='formGroup' class='form-group'>\r\n  <label *ngIf='isTitleVisible' class='col-form-label'>Timezone</label>\r\n  <select [formControlName]='controlName' class='form-control'>\r\n    <option *ngFor='let timezone of timezoneListItems'\r\n            [value]='timezone.code'>\r\n      ({{timezone.offset}})  {{timezone.name}}\r\n    </option>\r\n  </select>\r\n</div>\r\n" }]
@@ -4469,6 +4522,71 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i2.FaIconLibrary }]; } });
 
+/*
+<file>
+  Project:
+    @osovitny/anatoly
+
+  Authors:
+    Vadim Osovitny vadim@osovitny.com
+    Anatoly Osovitny anatoly@osovitny.com
+
+  Created:
+    28 Aug 2022
+
+  Copyright (c) 2016-2022 Osovitny Inc. All rights reserved.
+</file>
+*/
+class KendoModule {
+}
+KendoModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: KendoModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+KendoModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.6", ngImport: i0, type: KendoModule, imports: [CommonModule,
+        ButtonsModule,
+        DialogsModule,
+        DropDownsModule,
+        InputsModule,
+        PagerModule,
+        TreeViewModule], exports: [ButtonsModule,
+        DialogsModule,
+        DropDownsModule,
+        InputsModule,
+        PagerModule,
+        TreeViewModule] });
+KendoModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: KendoModule, imports: [CommonModule,
+        ButtonsModule,
+        DialogsModule,
+        DropDownsModule,
+        InputsModule,
+        PagerModule,
+        TreeViewModule, ButtonsModule,
+        DialogsModule,
+        DropDownsModule,
+        InputsModule,
+        PagerModule,
+        TreeViewModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: KendoModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        ButtonsModule,
+                        DialogsModule,
+                        DropDownsModule,
+                        InputsModule,
+                        PagerModule,
+                        TreeViewModule
+                    ],
+                    exports: [
+                        ButtonsModule,
+                        DialogsModule,
+                        DropDownsModule,
+                        InputsModule,
+                        PagerModule,
+                        TreeViewModule
+                    ]
+                }]
+        }] });
+
 /*
 <file>
   Project:
@@ -4490,6 +4608,7 @@ const COMPONENTS = [
     BuyAccessButtonComponent,
     SubscribePlanButtonComponent,
     CheckIconComponent,
+    DatapagerComponent,
     SignInButtonComponent,
     SignUpButtonComponent,
     SignOutButtonComponent,
@@ -4528,6 +4647,7 @@ AnatolyUIModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version:
 AnatolyUIModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.6", ngImport: i0, type: AnatolyUIModule, declarations: [BuyAccessButtonComponent,
         SubscribePlanButtonComponent,
         CheckIconComponent,
+        DatapagerComponent,
         SignInButtonComponent,
         SignUpButtonComponent,
         SignOutButtonComponent,
@@ -4558,15 +4678,15 @@ AnatolyUIModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version
         FileSizePipe,
         //Validation
         FormValidationSummaryComponent,
-        ItemValidationSummaryComponent], imports: [DialogsModule,
-        ButtonsModule,
-        CommonModule,
+        ItemValidationSummaryComponent], imports: [CommonModule,
         ReactiveFormsModule,
         FormsModule,
         NgxCaptchaModule,
-        FaModule, i1$7.FroalaEditorModule, i1$7.FroalaViewModule], exports: [BuyAccessButtonComponent,
+        FaModule,
+        KendoModule, i1$8.FroalaEditorModule, i1$8.FroalaViewModule], exports: [BuyAccessButtonComponent,
         SubscribePlanButtonComponent,
         CheckIconComponent,
+        DatapagerComponent,
         SignInButtonComponent,
         SignUpButtonComponent,
         SignOutButtonComponent,
@@ -4598,26 +4718,24 @@ AnatolyUIModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version
         //Validation
         FormValidationSummaryComponent,
         ItemValidationSummaryComponent] });
-AnatolyUIModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: AnatolyUIModule, imports: [DialogsModule,
-        ButtonsModule,
-        CommonModule,
+AnatolyUIModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: AnatolyUIModule, imports: [CommonModule,
         ReactiveFormsModule,
         FormsModule,
         NgxCaptchaModule,
         FaModule,
+        KendoModule,
         FroalaEditorModuleWithProviders,
         FroalaViewModuleWithProviders] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: AnatolyUIModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
-                        DialogsModule,
-                        ButtonsModule,
                         CommonModule,
                         ReactiveFormsModule,
                         FormsModule,
                         NgxCaptchaModule,
                         FaModule,
+                        KendoModule,
                         FroalaEditorModuleWithProviders,
                         FroalaViewModuleWithProviders,
                     ],
@@ -4638,5 +4756,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AddressComponent, Alerts, AnatolyCoreModule, AnatolyDataModule, AnatolyHttpInterceptor, AnatolyUIModule, AppContextService, AppCoreSettings, BaseApiService, BaseComponent, BaseDialog, BaseEditComponent, BaseGoService, BaseGridEditService, BaseGridReadService, BaseHtmlEditorComponent, BaseList, BasePage, BasePagedPage, BuyAccessButtonComponent, CardBodyComponent, CardComponent, CardFooterComponent, CardHeaderComponent, CheckIconComponent, CompanyComponent, ContactUsDialog, ContactUsForm, Convert, CoreApiService, DOM, DefaultEditorOptions, DigitalMarketingService, EmailsApiService, FaModule, FileSizePipe, FormValidationSummaryComponent, FormsHtmlEditorComponent, FroalaEditorModuleWithProviders, FroalaViewModuleWithProviders, GlobalErrorHandler, GoogleAnalyticsService, Guid, HtmlEditorComponent, IdleService, InjectorInstance, ItemValidationSummaryComponent, LoadingComponent, LoadingService, LocalStorageService, LocalizationInjectorInstance, LocalizationModule, LocalizationService, LocalizationSettingsModule, LocalizePipe, LoggingService, NativeElementDirective, NodataComponent, NotificationService, NotificationsApiService, PageSpinnerComponent, ReplaceTextPipe, SafeHtmlPipe, SessionStorageService, SignInButtonComponent, SignOutButtonComponent, SignUpButtonComponent, Subs, SubscribePlanButtonComponent, TimezoneDropdownlist, TranslateModuleAtRoot, UrlSlugComponent, Urls, Utils, ValidationSummaryComponent, customTranslateLoaderFactory, localizationInitializerFactory, throwIfAlreadyLoaded };
+export { AddressComponent, Alerts, AnatolyCoreModule, AnatolyDataModule, AnatolyHttpInterceptor, AnatolyUIModule, AppContextService, AppCoreSettings, BaseApiService, BaseComponent, BaseDialog, BaseEditComponent, BaseGoService, BaseGridEditService, BaseGridReadService, BaseHtmlEditorComponent, BaseList, BasePage, BasePagedPage, BuyAccessButtonComponent, CardBodyComponent, CardComponent, CardFooterComponent, CardHeaderComponent, CheckIconComponent, CompanyComponent, ContactUsDialog, ContactUsForm, Convert, CoreApiService, DOM, DatapagerComponent, DefaultEditorOptions, DigitalMarketingService, EmailsApiService, FaModule, FileSizePipe, FormValidationSummaryComponent, FormsHtmlEditorComponent, FroalaEditorModuleWithProviders, FroalaViewModuleWithProviders, GlobalErrorHandler, GoogleAnalyticsService, Guid, HtmlEditorComponent, IdleService, InjectorInstance, ItemValidationSummaryComponent, LoadingComponent, LoadingService, LocalStorageService, LocalizationInjectorInstance, LocalizationModule, LocalizationService, LocalizationSettingsModule, LocalizePipe, LoggingService, NativeElementDirective, NodataComponent, NotificationService, NotificationsApiService, PageSpinnerComponent, ReplaceTextPipe, SafeHtmlPipe, SessionStorageService, SignInButtonComponent, SignOutButtonComponent, SignUpButtonComponent, Subs, SubscribePlanButtonComponent, TimezoneDropdownlist, TranslateModuleAtRoot, UrlSlugComponent, Urls, Utils, ValidationSummaryComponent, customTranslateLoaderFactory, localizationInitializerFactory, throwIfAlreadyLoaded };
 //# sourceMappingURL=osovitny-anatoly.mjs.map