@osovitny/anatoly 3.17.24 → 3.17.26

package/fesm2022/osovitny-anatoly.mjs

@@ -1336,8 +1336,7 @@ class AuthService extends ApiServiceBase {
         /*
           https://learn.microsoft.com/en-us/entra/identity-platform/msal-js-sso
         */
-        let sso = location.search.indexOf("action=sso") > -1;
-        if (sso) {
+        if (QSUtils.isSSOinProgress()) {
             let login = QSUtils.getValueByName("login");
             let sid = QSUtils.getValueByName("sid");
             let ssoSilentRequest;
@@ -3201,6 +3200,9 @@ class QSUtils {
         catch (e) {
         }
     }
+    static isSSOinProgress() {
+        return location.search.indexOf("action=sso") > -1;
+    }
     static clearSSO() {
         try {
             if (location.href.indexOf("?action=sso") > -1) {
@@ -5040,79 +5042,115 @@ class NativeElementDirective {
     Anatoly Osovitny anatoly@osovitny.com
 
   Created:
-    2 Feb 2024
+    8 Dec 2017
 
-  Copyright (c) 2017-2022 Osovitny Inc. All rights reserved.
+  Copyright (c) 2016-2022 Osovitny Inc. All rights reserved.
 </file>
 */
 //Node
-function CountryDropdownlist_div_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div");
-} }
-function CountryDropdownlist_div_1_label_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "label", 6);
-    i0.ɵɵtext(1, "Country");
-    i0.ɵɵelementEnd();
-} }
-function CountryDropdownlist_div_1_option_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 7);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const item_r4 = ctx.$implicit;
-    i0.ɵɵproperty("value", item_r4.code);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", item_r4.name, " ");
-} }
-function CountryDropdownlist_div_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 2);
-    i0.ɵɵtemplate(1, CountryDropdownlist_div_1_label_1_Template, 2, 0, "label", 3);
-    i0.ɵɵelementStart(2, "select", 4);
-    i0.ɵɵtemplate(3, CountryDropdownlist_div_1_option_3_Template, 2, 2, "option", 5);
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("formGroup", ctx_r1.formGroup);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.isTitleVisible);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("formControlName", ctx_r1.controlName);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngForOf", ctx_r1.items);
-} }
-class CountryDropdownlist extends EditComponentBase {
-    constructor(api, appContext) {
+class ValidationSummaryComponent extends EditComponentBase {
+    constructor() {
         super();
-        this.api = api;
-        this.appContext = appContext;
-        this.title = 'Country';
     }
-    ngOnInit() {
-        this.setValues();
+    getControlTitle(control, name) {
+        if (control?.nativeElement) {
+            let value = this.getTitleAttribute(control.nativeElement);
+            return value ? value : name;
+        }
+        return undefined;
     }
-    setValues() {
-        this.api.getCountriesJsonFile(data => {
-            this.items = data.reverse();
+    getTitleAttribute(nativeElement) {
+        let title;
+        let element;
+        let tagName = nativeElement.tagName;
+        switch (tagName) {
+            // For Kendo time and date picker element title is assigned to the 4th child control.
+            case "KENDO-TIMEPICKER":
+            case "KENDO-DATEPICKER":
+                element = nativeElement.children[0]?.children[0]?.children[0]?.children[0];
+                break;
+            // For Kendo numaric element title is assigned to the 2nd child control.
+            case "KENDO-NUMERICTEXTBOX":
+                element = nativeElement.children[0]?.children[0];
+                break;
+            default:
+                element = nativeElement;
+                break;
+        }
+        if (element) {
+            title = element.getAttribute("formControlTitle");
+            if (!title) {
+                title = element.getAttribute("title");
+            }
+        }
+        return title;
+    }
+    getFormValidationMessages() {
+        let messages = [];
+        Object.keys(this.formGroup.controls).forEach((k) => {
+            let control = this.formGroup.controls[k];
+            if (control.controls != null) {
+                Object.keys(control.controls).forEach((k) => {
+                    var child = control.controls[k];
+                    this.getValidationMessages(child, this.getControlTitle(child, k)).forEach((m) => messages.push(m));
+                });
+            }
+            else {
+                this.getValidationMessages(control, this.getControlTitle(control, k)).forEach((m) => messages.push(m));
+            }
         });
-        if (this.isNgModelBased) {
+        return messages;
+    }
+    getValidationMessages(control, title) {
+        let messages = [];
+        let thing;
+        if (title) {
+            thing = title;
         }
         else {
+            thing = this.getControlTitle(control, null);
+            if (!thing) {
+                thing = control.path;
+            }
+        }
+        if (control.errors) {
+            for (let errorName in control.errors) {
+                if (control.errors.hasOwnProperty(errorName)) {
+                    switch (errorName) {
+                        case "required":
+                            messages.push(`${thing} is required`);
+                            break;
+                        case "minlength":
+                            messages.push(`${thing} must be at least ${control.errors["minlength"].requiredLength} characters`);
+                            break;
+                        case "pattern":
+                            messages.push(`${thing} contains illegal characters`);
+                            break;
+                        case "format":
+                            messages.push(`${thing} format mismatch`);
+                            break;
+                        case "maxlength":
+                            messages.push(`${thing} must have maximum ${control.errors["maxlength"].requiredLength} characters`);
+                            break;
+                        case "specialcharacters":
+                            messages.push(`${thing} contains special characters`);
+                            break;
+                    }
+                }
+            }
         }
+        return messages;
     }
-    static { this.ɵfac = function CountryDropdownlist_Factory(t) { return new (t || CountryDropdownlist)(i0.ɵɵdirectiveInject(CoreApiService), i0.ɵɵdirectiveInject(AppContextService)); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CountryDropdownlist, selectors: [["anatoly-country-dropdownlist"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 2, vars: 2, consts: [[4, "ngIf"], [3, "formGroup", 4, "ngIf"], [3, "formGroup"], ["class", "col-form-label", 4, "ngIf"], [1, "form-select", 3, "formControlName"], [3, "value", 4, "ngFor", "ngForOf"], [1, "col-form-label"], [3, "value"]], template: function CountryDropdownlist_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵtemplate(0, CountryDropdownlist_div_0_Template, 1, 0, "div", 0)(1, CountryDropdownlist_div_1_Template, 4, 4, "div", 1);
-        } if (rf & 2) {
-            i0.ɵɵproperty("ngIf", ctx.isNgModelBased);
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", !ctx.isNgModelBased);
-        } }, dependencies: [i1$2.NgForOf, i1$2.NgIf, i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.NgControlStatusGroup, i2.FormGroupDirective, i2.FormControlName, NativeElementDirective], encapsulation: 2 }); }
+    static { this.ɵfac = function ValidationSummaryComponent_Factory(t) { return new (t || ValidationSummaryComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ValidationSummaryComponent, selectors: [["ng-component"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 0, vars: 0, template: function ValidationSummaryComponent_Template(rf, ctx) { }, encapsulation: 2 }); }
 }
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CountryDropdownlist, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ValidationSummaryComponent, [{
         type: Component,
-        args: [{ selector: 'anatoly-country-dropdownlist', template: "<div *ngIf='isNgModelBased'>\r\n</div>\r\n\r\n<div *ngIf='!isNgModelBased' [formGroup]='formGroup'>\r\n  <label *ngIf='isTitleVisible' class='col-form-label'>Country</label>\r\n  <select [formControlName]='controlName' class='form-select'>\r\n    <option *ngFor='let item of items' [value]='item.code'>\r\n      {{ item.name }}\r\n    </option>\r\n  </select>\r\n</div>\r\n" }]
-    }], () => [{ type: CoreApiService }, { type: AppContextService }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CountryDropdownlist, { className: "CountryDropdownlist", filePath: "lib\\ui\\components\\dropdownlists\\country\\country.dropdownlist.ts", lineNumber: 29 }); })();
+        args: [{
+                template: ''
+            }]
+    }], () => [], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ValidationSummaryComponent, { className: "ValidationSummaryComponent", filePath: "lib\\ui\\validation\\validation-summary.component.ts", lineNumber: 27 }); })();
 
 /*
 <file>
@@ -5124,60 +5162,308 @@ class CountryDropdownlist extends EditComponentBase {
     Anatoly Osovitny anatoly@osovitny.com
 
   Created:
-    02 Aug 2022
+    6 Dec 2017
 
-  Copyright (c) 2017-2022 Osovitny Inc. All rights reserved.
+  Copyright (c) 2016-2022 Osovitny Inc. All rights reserved.
 </file>
 */
 //Node
-function TimezoneDropdownlist_div_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div");
+function ItemValidationSummaryComponent_ul_0_li_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "li")(1, "span", 3);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const error_r2 = ctx.$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(error_r2);
 } }
-function TimezoneDropdownlist_div_1_label_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "label", 6);
-    i0.ɵɵtext(1, "Timezone");
+function ItemValidationSummaryComponent_ul_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "ul", 1);
+    i0.ɵɵtemplate(1, ItemValidationSummaryComponent_ul_0_li_1_Template, 3, 1, "li", 2);
     i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngForOf", ctx_r0.getValidationMessages(ctx_r0.formGroup.controls[ctx_r0.controlName]));
 } }
-function TimezoneDropdownlist_div_1_option_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 7);
+class ItemValidationSummaryComponent extends ValidationSummaryComponent {
+    static { this.ɵfac = /*@__PURE__*/ (() => { let ɵItemValidationSummaryComponent_BaseFactory; return function ItemValidationSummaryComponent_Factory(t) { return (ɵItemValidationSummaryComponent_BaseFactory || (ɵItemValidationSummaryComponent_BaseFactory = i0.ɵɵgetInheritedFactory(ItemValidationSummaryComponent)))(t || ItemValidationSummaryComponent); }; })(); }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ItemValidationSummaryComponent, selectors: [["anatoly-item-validation-summary"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 1, vars: 1, consts: [["class", "list-unstyled", 4, "ngIf"], [1, "list-unstyled"], [4, "ngFor", "ngForOf"], [1, "help-block"]], template: function ItemValidationSummaryComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵtemplate(0, ItemValidationSummaryComponent_ul_0_Template, 2, 1, "ul", 0);
+        } if (rf & 2) {
+            i0.ɵɵproperty("ngIf", ctx.isControlInvalid(ctx.controlName));
+        } }, dependencies: [i1$2.NgForOf, i1$2.NgIf], encapsulation: 2 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ItemValidationSummaryComponent, [{
+        type: Component,
+        args: [{ selector: "anatoly-item-validation-summary", template: "<ul class=\"list-unstyled\" *ngIf=\"isControlInvalid(controlName)\">\r\n  <li *ngFor=\"let error of getValidationMessages(formGroup.controls[controlName])\">\r\n    <span class=\"help-block\">{{ error }}</span>\r\n  </li>\r\n</ul>\r\n\r\n" }]
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ItemValidationSummaryComponent, { className: "ItemValidationSummaryComponent", filePath: "lib\\ui\\validation\\item-validation-summary.component.ts", lineNumber: 27 }); })();
+
+/*
+<file>
+  Project:
+    @osovitny/anatoly
+
+  Authors:
+    Vadim Osovitny vadim@osovitny.com
+    Anatoly Osovitny anatoly@osovitny.com
+
+  Created:
+    02 Aug 2022
+
+  Copyright (c) 2017-2022 Osovitny Inc. All rights reserved.
+</file>
+*/
+//Node
+function UrlSlugComponent_label_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "label", 7);
     i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(2, "span", 8);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const item_r4 = ctx.$implicit;
-    i0.ɵɵproperty("value", item_r4.code);
+    const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate2(" (", item_r4.offset, ") ", item_r4.name, " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.title, " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r0.urlPrefix);
 } }
-function TimezoneDropdownlist_div_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 2);
-    i0.ɵɵtemplate(1, TimezoneDropdownlist_div_1_label_1_Template, 2, 0, "label", 3);
-    i0.ɵɵelementStart(2, "select", 4);
-    i0.ɵɵtemplate(3, TimezoneDropdownlist_div_1_option_3_Template, 2, 3, "option", 5);
+function UrlSlugComponent_div_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 9)(1, "a", 10);
+    i0.ɵɵtext(2, "Go");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("formGroup", ctx_r1.formGroup);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.isTitleVisible);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("formControlName", ctx_r1.controlName);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngForOf", ctx_r1.items);
+    i0.ɵɵpropertyInterpolate2("href", "", ctx_r1.urlPrefix, "", ctx_r1.hrefGo, "", i0.ɵɵsanitizeUrl);
 } }
-class TimezoneDropdownlist extends EditComponentBase {
-    constructor(api, appContext) {
+const _c0$9 = a0 => ({ "has-error": a0 });
+class UrlSlugComponent extends EditComponentBase {
+    constructor() {
         super();
-        this.api = api;
-        this.appContext = appContext;
-        this.title = 'Timezone';
+        this.firstValue = true;
+        this.isGoButtonVisible = true;
+        //Outputs
+        this.generated = new EventEmitter();
+        this.title = 'Permalink';
     }
     ngOnInit() {
-        this.setValues();
+        this.startWatching();
     }
-    setValues() {
-        this.api.getTimezonesJsonFile(data => {
-            this.items = data.reverse();
-        });
+    generateUrlSlug(text) {
+        let slugedText = Utils.slugify(text);
+        let event = { urlSlug: slugedText };
+        this.generated.emit(event);
+        this.setFormValue(this.controlName, event.urlSlug);
+    }
+    startWatching() {
+        this.subs.sink = this.formGroup.get(this.watchedControlName).valueChanges.subscribe({
+            next: (value) => {
+                if (this.firstValue) {
+                    this.firstValue = false;
+                    return;
+                }
+                this.generateUrlSlug(value);
+            }
+        });
+        this.subs.sink = this.formGroup.get(this.controlName).valueChanges.subscribe({
+            next: (value) => {
+                this.hrefGo = value;
+            }
+        });
+    }
+    //Events
+    onUrlSlugChange() {
+        let text = this.getFormValue(this.controlName);
+        this.generateUrlSlug(text);
+    }
+    static { this.ɵfac = function UrlSlugComponent_Factory(t) { return new (t || UrlSlugComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UrlSlugComponent, selectors: [["anatoly-urlslug"]], inputs: { urlPrefix: "urlPrefix", isGoButtonVisible: "isGoButtonVisible", watchedControlName: "watchedControlName" }, outputs: { generated: "generated" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 7, vars: 13, consts: [[3, "formGroup", "ngClass"], [1, "d-flex", "align-items-end"], [3, "formGroup", "formSubmitted", "formControlName"], [1, "form-group"], ["class", "col-form-label", 4, "ngIf"], ["type", "text", "placeholder", "Type url slug here", 1, "form-control", 3, "formControlName", "focusout"], ["class", "form-group flex-shrink-1", 4, "ngIf"], [1, "col-form-label"], [1, "urlPrefix"], [1, "form-group", "flex-shrink-1"], ["target", "_blank", 1, "btn", "btn-primary", 3, "href"]], template: function UrlSlugComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
+            i0.ɵɵelement(2, "anatoly-item-validation-summary", 2);
+            i0.ɵɵelementStart(3, "div", 3);
+            i0.ɵɵtemplate(4, UrlSlugComponent_label_4_Template, 4, 2, "label", 4);
+            i0.ɵɵelementStart(5, "input", 5);
+            i0.ɵɵlistener("focusout", function UrlSlugComponent_Template_input_focusout_5_listener() { return ctx.onUrlSlugChange(); });
+            i0.ɵɵelementEnd()();
+            i0.ɵɵtemplate(6, UrlSlugComponent_div_6_Template, 3, 2, "div", 6);
+            i0.ɵɵelementEnd()();
+        } if (rf & 2) {
+            i0.ɵɵclassMapInterpolate1("permalink form-group ", ctx.classes, "");
+            i0.ɵɵproperty("formGroup", ctx.formGroup)("ngClass", i0.ɵɵpureFunction1(11, _c0$9, ctx.isControlInvalid(ctx.controlName)));
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("formGroup", ctx.formGroup)("formSubmitted", ctx.formSubmitted)("formControlName", ctx.controlName);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngIf", ctx.isTitleVisible);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("formControlName", ctx.controlName);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.isGoButtonVisible);
+        } }, dependencies: [i1$2.NgClass, i1$2.NgIf, i2.DefaultValueAccessor, i2.NgControlStatus, i2.NgControlStatusGroup, i2.FormGroupDirective, i2.FormControlName, NativeElementDirective, ItemValidationSummaryComponent], encapsulation: 2 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UrlSlugComponent, [{
+        type: Component,
+        args: [{ selector: 'anatoly-urlslug', template: "<div [formGroup]='formGroup' [ngClass]=\"{'has-error': isControlInvalid(controlName)}\"\r\n  class=\"permalink form-group {{ classes }}\">\r\n  <div class=\"d-flex align-items-end\">\r\n    <anatoly-item-validation-summary\r\n      [formGroup]='formGroup'\r\n      [formSubmitted]='formSubmitted'\r\n      [formControlName]='controlName'>\r\n    </anatoly-item-validation-summary>\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\">{{ urlPrefix }}</span>\r\n      </label>\r\n      <input type='text'\r\n             class='form-control'\r\n             placeholder='Type url slug here'\r\n             [formControlName]='controlName'\r\n             (focusout)='onUrlSlugChange()' />\r\n    </div>\r\n\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  </div>\r\n</div>\r\n" }]
+    }], () => [], { urlPrefix: [{
+            type: Input
+        }], isGoButtonVisible: [{
+            type: Input
+        }], watchedControlName: [{
+            type: Input
+        }], generated: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UrlSlugComponent, { className: "UrlSlugComponent", filePath: "lib\\ui\\components\\urlslug\\urlslug.component.ts", lineNumber: 28 }); })();
+
+/*
+<file>
+  Project:
+    @osovitny/anatoly
+
+  Authors:
+    Vadim Osovitny vadim@osovitny.com
+    Anatoly Osovitny anatoly@osovitny.com
+
+  Created:
+    2 Feb 2024
+
+  Copyright (c) 2017-2022 Osovitny Inc. All rights reserved.
+</file>
+*/
+//Node
+function CountryDropdownlist_div_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div");
+} }
+function CountryDropdownlist_div_1_label_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "label", 6);
+    i0.ɵɵtext(1, "Country");
+    i0.ɵɵelementEnd();
+} }
+function CountryDropdownlist_div_1_option_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 7);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r4 = ctx.$implicit;
+    i0.ɵɵproperty("value", item_r4.code);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", item_r4.name, " ");
+} }
+function CountryDropdownlist_div_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 2);
+    i0.ɵɵtemplate(1, CountryDropdownlist_div_1_label_1_Template, 2, 0, "label", 3);
+    i0.ɵɵelementStart(2, "select", 4);
+    i0.ɵɵtemplate(3, CountryDropdownlist_div_1_option_3_Template, 2, 2, "option", 5);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("formGroup", ctx_r1.formGroup);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.isTitleVisible);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("formControlName", ctx_r1.controlName);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngForOf", ctx_r1.items);
+} }
+class CountryDropdownlist extends EditComponentBase {
+    constructor(api, appContext) {
+        super();
+        this.api = api;
+        this.appContext = appContext;
+        this.title = 'Country';
+    }
+    ngOnInit() {
+        this.setValues();
+    }
+    setValues() {
+        this.api.getCountriesJsonFile(data => {
+            this.items = data.reverse();
+        });
+        if (this.isNgModelBased) {
+        }
+        else {
+        }
+    }
+    static { this.ɵfac = function CountryDropdownlist_Factory(t) { return new (t || CountryDropdownlist)(i0.ɵɵdirectiveInject(CoreApiService), i0.ɵɵdirectiveInject(AppContextService)); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CountryDropdownlist, selectors: [["anatoly-country-dropdownlist"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 2, vars: 2, consts: [[4, "ngIf"], [3, "formGroup", 4, "ngIf"], [3, "formGroup"], ["class", "col-form-label", 4, "ngIf"], [1, "form-select", 3, "formControlName"], [3, "value", 4, "ngFor", "ngForOf"], [1, "col-form-label"], [3, "value"]], template: function CountryDropdownlist_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵtemplate(0, CountryDropdownlist_div_0_Template, 1, 0, "div", 0)(1, CountryDropdownlist_div_1_Template, 4, 4, "div", 1);
+        } if (rf & 2) {
+            i0.ɵɵproperty("ngIf", ctx.isNgModelBased);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", !ctx.isNgModelBased);
+        } }, dependencies: [i1$2.NgForOf, i1$2.NgIf, i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.NgControlStatusGroup, i2.FormGroupDirective, i2.FormControlName, NativeElementDirective], encapsulation: 2 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CountryDropdownlist, [{
+        type: Component,
+        args: [{ selector: 'anatoly-country-dropdownlist', template: "<div *ngIf='isNgModelBased'>\r\n</div>\r\n\r\n<div *ngIf='!isNgModelBased' [formGroup]='formGroup'>\r\n  <label *ngIf='isTitleVisible' class='col-form-label'>Country</label>\r\n  <select [formControlName]='controlName' class='form-select'>\r\n    <option *ngFor='let item of items' [value]='item.code'>\r\n      {{ item.name }}\r\n    </option>\r\n  </select>\r\n</div>\r\n" }]
+    }], () => [{ type: CoreApiService }, { type: AppContextService }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CountryDropdownlist, { className: "CountryDropdownlist", filePath: "lib\\ui\\components\\dropdownlists\\country\\country.dropdownlist.ts", lineNumber: 29 }); })();
+
+/*
+<file>
+  Project:
+    @osovitny/anatoly
+
+  Authors:
+    Vadim Osovitny vadim@osovitny.com
+    Anatoly Osovitny anatoly@osovitny.com
+
+  Created:
+    02 Aug 2022
+
+  Copyright (c) 2017-2022 Osovitny Inc. All rights reserved.
+</file>
+*/
+//Node
+function TimezoneDropdownlist_div_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div");
+} }
+function TimezoneDropdownlist_div_1_label_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "label", 6);
+    i0.ɵɵtext(1, "Timezone");
+    i0.ɵɵelementEnd();
+} }
+function TimezoneDropdownlist_div_1_option_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 7);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r4 = ctx.$implicit;
+    i0.ɵɵproperty("value", item_r4.code);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate2(" (", item_r4.offset, ") ", item_r4.name, " ");
+} }
+function TimezoneDropdownlist_div_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 2);
+    i0.ɵɵtemplate(1, TimezoneDropdownlist_div_1_label_1_Template, 2, 0, "label", 3);
+    i0.ɵɵelementStart(2, "select", 4);
+    i0.ɵɵtemplate(3, TimezoneDropdownlist_div_1_option_3_Template, 2, 3, "option", 5);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("formGroup", ctx_r1.formGroup);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.isTitleVisible);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("formControlName", ctx_r1.controlName);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngForOf", ctx_r1.items);
+} }
+class TimezoneDropdownlist extends EditComponentBase {
+    constructor(api, appContext) {
+        super();
+        this.api = api;
+        this.appContext = appContext;
+        this.title = 'Timezone';
+    }
+    ngOnInit() {
+        this.setValues();
+    }
+    setValues() {
+        this.api.getTimezonesJsonFile(data => {
+            this.items = data.reverse();
+        });
         if (this.isNgModelBased) {
         }
         else {
@@ -5231,12 +5517,12 @@ class TimezoneDropdownlist extends EditComponentBase {
 </file>
 */
 //Node
-const _c0$9 = [[["mex-card-header"]], [["mex-card-body"]], "*", [["mex-card-footer"]]];
+const _c0$8 = [[["mex-card-header"]], [["mex-card-body"]], "*", [["mex-card-footer"]]];
 const _c1 = ["mex-card-header", "mex-card-body", "*", "mex-card-footer"];
 class CardComponent extends ComponentBase {
     static { this.ɵfac = /*@__PURE__*/ (() => { let ɵCardComponent_BaseFactory; return function CardComponent_Factory(t) { return (ɵCardComponent_BaseFactory || (ɵCardComponent_BaseFactory = i0.ɵɵgetInheritedFactory(CardComponent)))(t || CardComponent); }; })(); }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CardComponent, selectors: [["anatoly-card"]], features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c1, decls: 5, vars: 3, template: function CardComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵprojectionDef(_c0$9);
+            i0.ɵɵprojectionDef(_c0$8);
             i0.ɵɵelementStart(0, "div");
             i0.ɵɵprojection(1);
             i0.ɵɵprojection(2, 1);
@@ -5278,10 +5564,10 @@ function CardHeaderComponent_h3_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r0.title);
 } }
-const _c0$8 = ["*"];
+const _c0$7 = ["*"];
 class CardHeaderComponent extends ComponentBase {
     static { this.ɵfac = /*@__PURE__*/ (() => { let ɵCardHeaderComponent_BaseFactory; return function CardHeaderComponent_Factory(t) { return (ɵCardHeaderComponent_BaseFactory || (ɵCardHeaderComponent_BaseFactory = i0.ɵɵgetInheritedFactory(CardHeaderComponent)))(t || CardHeaderComponent); }; })(); }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CardHeaderComponent, selectors: [["anatoly-card-header"]], features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$8, decls: 3, vars: 4, consts: [["class", "card-title", 4, "ngIf"], [1, "card-title"]], template: function CardHeaderComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CardHeaderComponent, selectors: [["anatoly-card-header"]], features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$7, decls: 3, vars: 4, consts: [["class", "card-title", 4, "ngIf"], [1, "card-title"]], template: function CardHeaderComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "div");
             i0.ɵɵtemplate(1, CardHeaderComponent_h3_1_Template, 2, 1, "h3", 0);
@@ -5315,10 +5601,10 @@ class CardHeaderComponent extends ComponentBase {
 </file>
 */
 //Node
-const _c0$7 = ["*"];
+const _c0$6 = ["*"];
 class CardBodyComponent extends ComponentBase {
     static { this.ɵfac = /*@__PURE__*/ (() => { let ɵCardBodyComponent_BaseFactory; return function CardBodyComponent_Factory(t) { return (ɵCardBodyComponent_BaseFactory || (ɵCardBodyComponent_BaseFactory = i0.ɵɵgetInheritedFactory(CardBodyComponent)))(t || CardBodyComponent); }; })(); }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CardBodyComponent, selectors: [["anatoly-card-body"]], features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$7, decls: 2, vars: 3, template: function CardBodyComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CardBodyComponent, selectors: [["anatoly-card-body"]], features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$6, decls: 2, vars: 3, template: function CardBodyComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "div");
             i0.ɵɵprojection(1);
@@ -5349,10 +5635,10 @@ class CardBodyComponent extends ComponentBase {
 </file>
 */
 //Node
-const _c0$6 = ["*"];
+const _c0$5 = ["*"];
 class CardFooterComponent extends ComponentBase {
     static { this.ɵfac = /*@__PURE__*/ (() => { let ɵCardFooterComponent_BaseFactory; return function CardFooterComponent_Factory(t) { return (ɵCardFooterComponent_BaseFactory || (ɵCardFooterComponent_BaseFactory = i0.ɵɵgetInheritedFactory(CardFooterComponent)))(t || CardFooterComponent); }; })(); }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CardFooterComponent, selectors: [["anatoly-card-footer"]], features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$6, decls: 2, vars: 3, template: function CardFooterComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CardFooterComponent, selectors: [["anatoly-card-footer"]], features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$5, decls: 2, vars: 3, template: function CardFooterComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "div");
             i0.ɵɵprojection(1);
@@ -5541,174 +5827,6 @@ class HtmlEditorComponentBase extends EditComponentBase {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(HtmlEditorComponentBase, { className: "HtmlEditorComponentBase", filePath: "lib\\ui\\components\\html-editor\\base-html-editor.component.ts", lineNumber: 31 }); })();
 
-/*
-<file>
-  Project:
-    @osovitny/anatoly
-
-  Authors:
-    Vadim Osovitny vadim@osovitny.com
-    Anatoly Osovitny anatoly@osovitny.com
-
-  Created:
-    8 Dec 2017
-
-  Copyright (c) 2016-2022 Osovitny Inc. All rights reserved.
-</file>
-*/
-//Node
-class ValidationSummaryComponent extends EditComponentBase {
-    constructor() {
-        super();
-    }
-    getControlTitle(control, name) {
-        if (control?.nativeElement) {
-            let value = this.getTitleAttribute(control.nativeElement);
-            return value ? value : name;
-        }
-        return undefined;
-    }
-    getTitleAttribute(nativeElement) {
-        let title;
-        let element;
-        let tagName = nativeElement.tagName;
-        switch (tagName) {
-            // For Kendo time and date picker element title is assigned to the 4th child control.
-            case "KENDO-TIMEPICKER":
-            case "KENDO-DATEPICKER":
-                element = nativeElement.children[0]?.children[0]?.children[0]?.children[0];
-                break;
-            // For Kendo numaric element title is assigned to the 2nd child control.
-            case "KENDO-NUMERICTEXTBOX":
-                element = nativeElement.children[0]?.children[0];
-                break;
-            default:
-                element = nativeElement;
-                break;
-        }
-        if (element) {
-            title = element.getAttribute("formControlTitle");
-            if (!title) {
-                title = element.getAttribute("title");
-            }
-        }
-        return title;
-    }
-    getFormValidationMessages() {
-        let messages = [];
-        Object.keys(this.formGroup.controls).forEach((k) => {
-            let control = this.formGroup.controls[k];
-            if (control.controls != null) {
-                Object.keys(control.controls).forEach((k) => {
-                    var child = control.controls[k];
-                    this.getValidationMessages(child, this.getControlTitle(child, k)).forEach((m) => messages.push(m));
-                });
-            }
-            else {
-                this.getValidationMessages(control, this.getControlTitle(control, k)).forEach((m) => messages.push(m));
-            }
-        });
-        return messages;
-    }
-    getValidationMessages(control, title) {
-        let messages = [];
-        let thing;
-        if (title) {
-            thing = title;
-        }
-        else {
-            thing = this.getControlTitle(control, null);
-            if (!thing) {
-                thing = control.path;
-            }
-        }
-        if (control.errors) {
-            for (let errorName in control.errors) {
-                if (control.errors.hasOwnProperty(errorName)) {
-                    switch (errorName) {
-                        case "required":
-                            messages.push(`${thing} is required`);
-                            break;
-                        case "minlength":
-                            messages.push(`${thing} must be at least ${control.errors["minlength"].requiredLength} characters`);
-                            break;
-                        case "pattern":
-                            messages.push(`${thing} contains illegal characters`);
-                            break;
-                        case "format":
-                            messages.push(`${thing} format mismatch`);
-                            break;
-                        case "maxlength":
-                            messages.push(`${thing} must have maximum ${control.errors["maxlength"].requiredLength} characters`);
-                            break;
-                        case "specialcharacters":
-                            messages.push(`${thing} contains special characters`);
-                            break;
-                    }
-                }
-            }
-        }
-        return messages;
-    }
-    static { this.ɵfac = function ValidationSummaryComponent_Factory(t) { return new (t || ValidationSummaryComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ValidationSummaryComponent, selectors: [["ng-component"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 0, vars: 0, template: function ValidationSummaryComponent_Template(rf, ctx) { }, encapsulation: 2 }); }
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ValidationSummaryComponent, [{
-        type: Component,
-        args: [{
-                template: ''
-            }]
-    }], () => [], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ValidationSummaryComponent, { className: "ValidationSummaryComponent", filePath: "lib\\ui\\validation\\validation-summary.component.ts", lineNumber: 27 }); })();
-
-/*
-<file>
-  Project:
-    @osovitny/anatoly
-
-  Authors:
-    Vadim Osovitny vadim@osovitny.com
-    Anatoly Osovitny anatoly@osovitny.com
-
-  Created:
-    6 Dec 2017
-
-  Copyright (c) 2016-2022 Osovitny Inc. All rights reserved.
-</file>
-*/
-//Node
-function ItemValidationSummaryComponent_ul_0_li_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "li")(1, "span", 3);
-    i0.ɵɵtext(2);
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const error_r2 = ctx.$implicit;
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(error_r2);
-} }
-function ItemValidationSummaryComponent_ul_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "ul", 1);
-    i0.ɵɵtemplate(1, ItemValidationSummaryComponent_ul_0_li_1_Template, 3, 1, "li", 2);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngForOf", ctx_r0.getValidationMessages(ctx_r0.formGroup.controls[ctx_r0.controlName]));
-} }
-class ItemValidationSummaryComponent extends ValidationSummaryComponent {
-    static { this.ɵfac = /*@__PURE__*/ (() => { let ɵItemValidationSummaryComponent_BaseFactory; return function ItemValidationSummaryComponent_Factory(t) { return (ɵItemValidationSummaryComponent_BaseFactory || (ɵItemValidationSummaryComponent_BaseFactory = i0.ɵɵgetInheritedFactory(ItemValidationSummaryComponent)))(t || ItemValidationSummaryComponent); }; })(); }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ItemValidationSummaryComponent, selectors: [["anatoly-item-validation-summary"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 1, vars: 1, consts: [["class", "list-unstyled", 4, "ngIf"], [1, "list-unstyled"], [4, "ngFor", "ngForOf"], [1, "help-block"]], template: function ItemValidationSummaryComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵtemplate(0, ItemValidationSummaryComponent_ul_0_Template, 2, 1, "ul", 0);
-        } if (rf & 2) {
-            i0.ɵɵproperty("ngIf", ctx.isControlInvalid(ctx.controlName));
-        } }, dependencies: [i1$2.NgForOf, i1$2.NgIf], encapsulation: 2 }); }
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ItemValidationSummaryComponent, [{
-        type: Component,
-        args: [{ selector: "anatoly-item-validation-summary", template: "<ul class=\"list-unstyled\" *ngIf=\"isControlInvalid(controlName)\">\r\n  <li *ngFor=\"let error of getValidationMessages(formGroup.controls[controlName])\">\r\n    <span class=\"help-block\">{{ error }}</span>\r\n  </li>\r\n</ul>\r\n\r\n" }]
-    }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ItemValidationSummaryComponent, { className: "ItemValidationSummaryComponent", filePath: "lib\\ui\\validation\\item-validation-summary.component.ts", lineNumber: 27 }); })();
-
 /*
 <file>
   Project:
@@ -5725,7 +5843,7 @@ class ItemValidationSummaryComponent extends ValidationSummaryComponent {
 </file>
 */
 //Node
-const _c0$5 = a0 => ({ "has-error": a0 });
+const _c0$4 = a0 => ({ "has-error": a0 });
 class FormsHtmlEditorComponent extends HtmlEditorComponentBase {
     constructor() {
         super();
@@ -5747,7 +5865,7 @@ class FormsHtmlEditorComponent extends HtmlEditorComponentBase {
             i0.ɵɵelement(4, "anatoly-item-validation-summary", 3);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
-            i0.ɵɵproperty("formGroup", ctx.formGroup)("ngClass", i0.ɵɵpureFunction1(8, _c0$5, ctx.isControlInvalid(ctx.editorFormKey)));
+            i0.ɵɵproperty("formGroup", ctx.formGroup)("ngClass", i0.ɵɵpureFunction1(8, _c0$4, ctx.isControlInvalid(ctx.editorFormKey)));
             i0.ɵɵadvance(2);
             i0.ɵɵtextInterpolate(ctx.editorLabelText);
             i0.ɵɵadvance();
@@ -5962,7 +6080,7 @@ function ContactUsForm_button_38_Template(rf, ctx) { if (rf & 1) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵclassProp("btn-primary", !ctx_r2.formGroup.invalid);
 } }
-const _c0$4 = a0 => ({ "has-error": a0 });
+const _c0$3 = a0 => ({ "has-error": a0 });
 class ContactUsForm extends EditComponentBase {
     constructor(reCaptcha, fb, appContext, api, notificationService) {
         super();
@@ -6086,27 +6204,27 @@ class ContactUsForm extends EditComponentBase {
             i0.ɵɵadvance();
             i0.ɵɵproperty("formGroup", ctx.formGroup)("visible", ctx.formSubmitted && ctx.formGroup.invalid);
             i0.ɵɵadvance(6);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(21, _c0$4, ctx.isControlInvalid("topic")));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(21, _c0$3, ctx.isControlInvalid("topic")));
             i0.ɵɵadvance(5);
             i0.ɵɵproperty("ngForOf", ctx.topicList);
             i0.ɵɵadvance();
             i0.ɵɵproperty("formGroup", ctx.formGroup)("formSubmitted", ctx.formSubmitted);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(23, _c0$4, ctx.isControlInvalid("name")));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(23, _c0$3, ctx.isControlInvalid("name")));
             i0.ɵɵadvance(4);
             i0.ɵɵproperty("formGroup", ctx.formGroup)("formSubmitted", ctx.formSubmitted);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(25, _c0$4, ctx.isControlInvalid("email")));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(25, _c0$3, ctx.isControlInvalid("email")));
             i0.ɵɵadvance(4);
             i0.ɵɵproperty("ngIf", !ctx.isUserSignedIn);
             i0.ɵɵadvance();
             i0.ɵɵproperty("formGroup", ctx.formGroup)("formSubmitted", ctx.formSubmitted);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(27, _c0$4, ctx.isControlInvalid("subject")));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(27, _c0$3, ctx.isControlInvalid("subject")));
             i0.ɵɵadvance(4);
             i0.ɵɵproperty("formGroup", ctx.formGroup)("formSubmitted", ctx.formSubmitted);
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(29, _c0$4, ctx.isControlInvalid("message")));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(29, _c0$3, ctx.isControlInvalid("message")));
             i0.ɵɵadvance(4);
             i0.ɵɵproperty("formGroup", ctx.formGroup)("formSubmitted", ctx.formSubmitted);
             i0.ɵɵadvance(3);
@@ -6139,7 +6257,7 @@ class ContactUsForm extends EditComponentBase {
 </file>
 */
 //Node
-const _c0$3 = ["contactusform"];
+const _c0$2 = ["contactusform"];
 function ContactUsDialog_kendo_dialog_0_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "kendo-dialog", 1);
@@ -6176,7 +6294,7 @@ class ContactUsDialog extends DialogBase {
     }
     static { this.ɵfac = function ContactUsDialog_Factory(t) { return new (t || ContactUsDialog)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ContactUsDialog, selectors: [["anatoly-contactus-dialog"]], viewQuery: function ContactUsDialog_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$3, 5);
+            i0.ɵɵviewQuery(_c0$2, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.contactUsForm = _t.first);
@@ -6308,7 +6426,7 @@ function AddressComponent_div_17_option_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(state_r4.name);
 } }
-const _c0$2 = a0 => ({ "has-error": a0 });
+const _c0$1 = a0 => ({ "has-error": a0 });
 function AddressComponent_div_17_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 9)(1, "label", 4);
@@ -6322,7 +6440,7 @@ function AddressComponent_div_17_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(4, _c0$2, ctx_r1.isControlInvalid("address_stateOrRegion")));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(4, _c0$1, ctx_r1.isControlInvalid("address_stateOrRegion")));
     i0.ɵɵadvance(4);
     i0.ɵɵproperty("ngForOf", ctx_r1.usStateData);
     i0.ɵɵadvance();
@@ -6464,25 +6582,25 @@ class AddressComponent extends EditComponentBase {
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("formGroup", ctx.formGroup);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(19, _c0$2, ctx.isControlInvalid("address_street")));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(19, _c0$1, ctx.isControlInvalid("address_street")));
             i0.ɵɵadvance(4);
             i0.ɵɵproperty("formGroup", ctx.formGroup)("formSubmitted", ctx.formSubmitted);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(21, _c0$2, ctx.isControlInvalid("address_street2")));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(21, _c0$1, ctx.isControlInvalid("address_street2")));
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("formGroup", ctx.formGroup)("formSubmitted", ctx.formSubmitted);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(23, _c0$2, ctx.isControlInvalid("address_city")));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(23, _c0$1, ctx.isControlInvalid("address_city")));
             i0.ɵɵadvance(4);
             i0.ɵɵproperty("formGroup", ctx.formGroup)("formSubmitted", ctx.formSubmitted);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.formGroup.value.address_country == "US");
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(25, _c0$2, ctx.isControlInvalid("address_zipcode")));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(25, _c0$1, ctx.isControlInvalid("address_zipcode")));
             i0.ɵɵadvance(4);
             i0.ɵɵproperty("formGroup", ctx.formGroup)("formSubmitted", ctx.formSubmitted);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(27, _c0$2, ctx.isControlInvalid("address_country")));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(27, _c0$1, ctx.isControlInvalid("address_country")));
             i0.ɵɵadvance(4);
             i0.ɵɵproperty("ngForOf", ctx.countryData);
             i0.ɵɵadvance();
@@ -6521,7 +6639,7 @@ function CompanyComponent_anatoly_card_header_1_Template(rf, ctx) { if (rf & 1)
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("title", ctx_r0.title);
 } }
-const _c0$1 = a0 => ({ "has-error": a0 });
+const _c0 = a0 => ({ "has-error": a0 });
 class CompanyComponent extends EditComponentBase {
     //Inputs
     get company() {
@@ -6601,19 +6719,19 @@ class CompanyComponent extends EditComponentBase {
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("formGroup", ctx.formGroup);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(14, _c0$1, ctx.isControlInvalid("company_name")));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(14, _c0, ctx.isControlInvalid("company_name")));
             i0.ɵɵadvance(4);
             i0.ɵɵproperty("formGroup", ctx.formGroup)("formSubmitted", ctx.formSubmitted);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(16, _c0$1, ctx.isControlInvalid("company_phone")));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(16, _c0, ctx.isControlInvalid("company_phone")));
             i0.ɵɵadvance(4);
             i0.ɵɵproperty("formGroup", ctx.formGroup)("formSubmitted", ctx.formSubmitted);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(18, _c0$1, ctx.isControlInvalid("company_email")));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(18, _c0, ctx.isControlInvalid("company_email")));
             i0.ɵɵadvance(4);
             i0.ɵɵproperty("formGroup", ctx.formGroup)("formSubmitted", ctx.formSubmitted);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(20, _c0$1, ctx.isControlInvalid("company_websiteUrl")));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(20, _c0, ctx.isControlInvalid("company_websiteUrl")));
             i0.ɵɵadvance(4);
             i0.ɵɵproperty("formGroup", ctx.formGroup)("formSubmitted", ctx.formSubmitted);
         } }, dependencies: [i1$2.NgClass, i1$2.NgIf, i2.DefaultValueAccessor, i2.NgControlStatus, i2.NgControlStatusGroup, i2.PatternValidator, i2.FormGroupDirective, i2.FormControlName, CardComponent, CardHeaderComponent, CardBodyComponent, NativeElementDirective, ItemValidationSummaryComponent], encapsulation: 2 }); }
@@ -6626,122 +6744,6 @@ class CompanyComponent extends EditComponentBase {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CompanyComponent, { className: "CompanyComponent", filePath: "lib\\ui\\forms\\components\\company\\company.component.ts", lineNumber: 28 }); })();
 
-/*
-<file>
-  Project:
-    @osovitny/anatoly
-
-  Authors:
-    Vadim Osovitny vadim@osovitny.com
-    Anatoly Osovitny anatoly@osovitny.com
-
-  Created:
-    02 Aug 2022
-
-  Copyright (c) 2017-2022 Osovitny Inc. All rights reserved.
-</file>
-*/
-//Node
-function UrlSlugComponent_label_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "label", 7);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementStart(2, "span", 8);
-    i0.ɵɵtext(3);
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r0.title, " ");
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r0.urlPrefix);
-} }
-function UrlSlugComponent_div_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 9)(1, "a", 10);
-    i0.ɵɵtext(2, "Go");
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
-    i0.ɵɵpropertyInterpolate2("href", "", ctx_r1.urlPrefix, "", ctx_r1.hrefGo, "", i0.ɵɵsanitizeUrl);
-} }
-const _c0 = a0 => ({ "has-error": a0 });
-class UrlSlugComponent extends EditComponentBase {
-    constructor() {
-        super();
-        this.firstValue = true;
-        this.isGoButtonVisible = true;
-        //Outputs
-        this.generating = new EventEmitter();
-        this.title = 'Permalink';
-    }
-    ngOnInit() {
-        this.startWatching();
-    }
-    generateUrlSlug(text) {
-        let slugedText = Utils.slugify(text);
-        let event = { urlSlug: slugedText };
-        this.generating.emit(event);
-        this.setFormValue(this.controlName, event.urlSlug);
-    }
-    startWatching() {
-        this.subs.sink = this.formGroup.get(this.watchedControlName).valueChanges.subscribe({
-            next: (value) => {
-                if (this.firstValue) {
-                    this.firstValue = false;
-                    return;
-                }
-                this.generateUrlSlug(value);
-            }
-        });
-        this.subs.sink = this.formGroup.get(this.controlName).valueChanges.subscribe({
-            next: (value) => {
-                this.hrefGo = value;
-            }
-        });
-    }
-    //Events
-    onUrlSlugChange() {
-        let text = this.getFormValue(this.controlName);
-        this.generateUrlSlug(text);
-    }
-    static { this.ɵfac = function UrlSlugComponent_Factory(t) { return new (t || UrlSlugComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UrlSlugComponent, selectors: [["anatoly-forms-urlslug"]], inputs: { urlPrefix: "urlPrefix", isGoButtonVisible: "isGoButtonVisible", watchedControlName: "watchedControlName" }, outputs: { generating: "generating" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 7, vars: 13, consts: [[3, "formGroup", "ngClass"], [1, "d-flex", "align-items-end"], [3, "formGroup", "formSubmitted", "formControlName"], [1, "form-group"], ["class", "col-form-label", 4, "ngIf"], ["type", "text", "placeholder", "Type url slug here", 1, "form-control", 3, "formControlName", "focusout"], ["class", "form-group flex-shrink-1", 4, "ngIf"], [1, "col-form-label"], [1, "urlPrefix"], [1, "form-group", "flex-shrink-1"], ["target", "_blank", 1, "btn", "btn-primary", 3, "href"]], template: function UrlSlugComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
-            i0.ɵɵelement(2, "anatoly-item-validation-summary", 2);
-            i0.ɵɵelementStart(3, "div", 3);
-            i0.ɵɵtemplate(4, UrlSlugComponent_label_4_Template, 4, 2, "label", 4);
-            i0.ɵɵelementStart(5, "input", 5);
-            i0.ɵɵlistener("focusout", function UrlSlugComponent_Template_input_focusout_5_listener() { return ctx.onUrlSlugChange(); });
-            i0.ɵɵelementEnd()();
-            i0.ɵɵtemplate(6, UrlSlugComponent_div_6_Template, 3, 2, "div", 6);
-            i0.ɵɵelementEnd()();
-        } if (rf & 2) {
-            i0.ɵɵclassMapInterpolate1("permalink form-group ", ctx.classes, "");
-            i0.ɵɵproperty("formGroup", ctx.formGroup)("ngClass", i0.ɵɵpureFunction1(11, _c0, ctx.isControlInvalid(ctx.controlName)));
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("formGroup", ctx.formGroup)("formSubmitted", ctx.formSubmitted)("formControlName", ctx.controlName);
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngIf", ctx.isTitleVisible);
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("formControlName", ctx.controlName);
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.isGoButtonVisible);
-        } }, dependencies: [i1$2.NgClass, i1$2.NgIf, i2.DefaultValueAccessor, i2.NgControlStatus, i2.NgControlStatusGroup, i2.FormGroupDirective, i2.FormControlName, NativeElementDirective, ItemValidationSummaryComponent], encapsulation: 2 }); }
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UrlSlugComponent, [{
-        type: Component,
-        args: [{ selector: 'anatoly-forms-urlslug', template: "<div [formGroup]='formGroup' [ngClass]=\"{'has-error': isControlInvalid(controlName)}\"\r\n  class=\"permalink form-group {{ classes }}\">\r\n  <div class=\"d-flex align-items-end\">\r\n    <anatoly-item-validation-summary\r\n      [formGroup]='formGroup'\r\n      [formSubmitted]='formSubmitted'\r\n      [formControlName]='controlName'>\r\n    </anatoly-item-validation-summary>\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\">{{ urlPrefix }}</span>\r\n      </label>\r\n      <input type='text'\r\n             class='form-control'\r\n             placeholder='Type url slug here'\r\n             [formControlName]='controlName'\r\n             (focusout)='onUrlSlugChange()' />\r\n    </div>\r\n\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  </div>\r\n</div>\r\n" }]
-    }], () => [], { urlPrefix: [{
-            type: Input
-        }], isGoButtonVisible: [{
-            type: Input
-        }], watchedControlName: [{
-            type: Input
-        }], generating: [{
-            type: Output
-        }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UrlSlugComponent, { className: "UrlSlugComponent", filePath: "lib\\ui\\forms\\components\\urlslug\\urlslug.component.ts", lineNumber: 28 }); })();
-
 /*
 <file>
   Project:
@@ -7530,6 +7532,7 @@ const COMPONENTS = [
     PageSpinnerComponent,
     LoadingComponent,
     Copy2ClipboardComponent,
+    UrlSlugComponent,
     //Dropdownlists
     CountryDropdownlist,
     TimezoneDropdownlist,
@@ -7549,7 +7552,6 @@ const COMPONENTS = [
     //Forms
     AddressComponent,
     CompanyComponent,
-    UrlSlugComponent,
     ContactUsForm,
     //Pipes
     SafeHtmlPipe,
@@ -7603,6 +7605,7 @@ class AnatolyUIModule {
         PageSpinnerComponent,
         LoadingComponent,
         Copy2ClipboardComponent,
+        UrlSlugComponent,
         //Dropdownlists
         CountryDropdownlist,
         TimezoneDropdownlist,
@@ -7622,7 +7625,6 @@ class AnatolyUIModule {
         //Forms
         AddressComponent,
         CompanyComponent,
-        UrlSlugComponent,
         ContactUsForm,
         //Pipes
         SafeHtmlPipe,
@@ -7648,6 +7650,7 @@ class AnatolyUIModule {
         PageSpinnerComponent,
         LoadingComponent,
         Copy2ClipboardComponent,
+        UrlSlugComponent,
         //Dropdownlists
         CountryDropdownlist,
         TimezoneDropdownlist,
@@ -7667,7 +7670,6 @@ class AnatolyUIModule {
         //Forms
         AddressComponent,
         CompanyComponent,
-        UrlSlugComponent,
         ContactUsForm,
         //Pipes
         SafeHtmlPipe,