@osovitny/anatoly 3.17.25 → 3.17.27

package/fesm2022/osovitny-anatoly.mjs

@@ -3605,10 +3605,19 @@ class ComponentBase {
         this.isDevMode = IsDevMode;
     }
     ngOnInit() {
+        this.setDefaults();
     }
     ngOnDestroy() {
         this.subs.unsubscribe();
     }
+    setDefaults() {
+        this.applicationType = 1;
+    }
+    setValues() {
+        if (AppSettings) {
+            this.applicationType = AppSettings.id;
+        }
+    }
     getEntityId() {
         return QSUtils.getValueByName("id");
     }
@@ -5032,6 +5041,290 @@ class NativeElementDirective {
             }]
     }], () => [{ type: i0.ElementRef }, { type: i2.NgControl }], null); })();
 
+/*
+<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:
+    @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$9 = a0 => ({ "has-error": a0 });
+class UrlSlugComponent extends EditComponentBase {
+    constructor() {
+        super();
+        this.firstValue = true;
+        this.isGoButtonVisible = true;
+        //Outputs
+        this.generated = new EventEmitter();
+        this.title = 'Permalink';
+    }
+    ngOnInit() {
+        this.startWatching();
+    }
+    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:
@@ -5233,12 +5526,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);
@@ -5280,10 +5573,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);
@@ -5317,10 +5610,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);
@@ -5351,10 +5644,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);
@@ -5486,230 +5779,62 @@ class HtmlEditorComponentBase extends EditComponentBase {
             that.froalaEditorInitialized = true;
             that.onInitialized();
         }, 300);
-    }
-    onInitialized() {
-        let actions = this.afterInitializedActions;
-        // Clear actions
-        this.afterInitializedActions = [];
-        if (actions) {
-            for (let i = 0; i < actions.length; i++) {
-                actions[i]();
-            }
-        }
-    }
-    getEditor() {
-        if (this.froalaEditor)
-            return this.froalaEditor.getEditor();
-        return null;
-    }
-    // Public Funcs
-    doAfterInitialized(action) {
-        const that = this;
-        if (!this.froalaEditorInitialized) {
-            this.afterInitializedActions.push(() => {
-                action(that);
-            });
-        }
-        else {
-            action(that);
-        }
-    }
-    initializeControl(control) {
-        this.froalaEditor = control;
-        this.froalaEditor.initialize();
-    }
-    setUploadParams(uploadType, uploadParentId) {
-        this.doAfterInitialized(function (that) {
-            const editor = that.getEditor();
-            if (typeof editor == "undefined" || editor == null) {
-                return;
-            }
-            editor.opts.imageUploadParams.uploadType = uploadType;
-            editor.opts.imageUploadParams.uploadParentId = uploadParentId;
-        });
-    }
-    static { this.ɵfac = function HtmlEditorComponentBase_Factory(t) { return new (t || HtmlEditorComponentBase)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HtmlEditorComponentBase, selectors: [["ng-component"]], inputs: { editorLabelText: "editorLabelText", editorOptions: "editorOptions" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 0, vars: 0, template: function HtmlEditorComponentBase_Template(rf, ctx) { }, encapsulation: 2 }); }
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HtmlEditorComponentBase, [{
-        type: Component,
-        args: [{
-                template: "",
-            }]
-    }], () => [], { editorLabelText: [{
-            type: Input
-        }], editorOptions: [{
-            type: Input
-        }] }); })();
-(() => { (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));
+    }
+    onInitialized() {
+        let actions = this.afterInitializedActions;
+        // Clear actions
+        this.afterInitializedActions = [];
+        if (actions) {
+            for (let i = 0; i < actions.length; i++) {
+                actions[i]();
             }
-        });
-        return messages;
+        }
     }
-    getValidationMessages(control, title) {
-        let messages = [];
-        let thing;
-        if (title) {
-            thing = title;
+    getEditor() {
+        if (this.froalaEditor)
+            return this.froalaEditor.getEditor();
+        return null;
+    }
+    // Public Funcs
+    doAfterInitialized(action) {
+        const that = this;
+        if (!this.froalaEditorInitialized) {
+            this.afterInitializedActions.push(() => {
+                action(that);
+            });
         }
         else {
-            thing = this.getControlTitle(control, null);
-            if (!thing) {
-                thing = control.path;
-            }
+            action(that);
         }
-        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;
-                    }
-                }
+    }
+    initializeControl(control) {
+        this.froalaEditor = control;
+        this.froalaEditor.initialize();
+    }
+    setUploadParams(uploadType, uploadParentId) {
+        this.doAfterInitialized(function (that) {
+            const editor = that.getEditor();
+            if (typeof editor == "undefined" || editor == null) {
+                return;
             }
-        }
-        return messages;
+            editor.opts.imageUploadParams.uploadType = uploadType;
+            editor.opts.imageUploadParams.uploadParentId = uploadParentId;
+        });
     }
-    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 }); }
+    static { this.ɵfac = function HtmlEditorComponentBase_Factory(t) { return new (t || HtmlEditorComponentBase)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HtmlEditorComponentBase, selectors: [["ng-component"]], inputs: { editorLabelText: "editorLabelText", editorOptions: "editorOptions" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 0, vars: 0, template: function HtmlEditorComponentBase_Template(rf, ctx) { }, encapsulation: 2 }); }
 }
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ValidationSummaryComponent, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HtmlEditorComponentBase, [{
         type: Component,
         args: [{
-                template: ''
+                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 }); })();
+    }], () => [], { editorLabelText: [{
+            type: Input
+        }], editorOptions: [{
+            type: Input
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(HtmlEditorComponentBase, { className: "HtmlEditorComponentBase", filePath: "lib\\ui\\components\\html-editor\\base-html-editor.component.ts", lineNumber: 31 }); })();
 
 /*
 <file>
@@ -5727,7 +5852,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();
@@ -5749,7 +5874,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();
@@ -5964,7 +6089,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();
@@ -6088,27 +6213,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);
@@ -6141,7 +6266,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);
@@ -6178,7 +6303,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);
@@ -6310,7 +6435,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);
@@ -6324,7 +6449,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();
@@ -6466,25 +6591,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();
@@ -6523,7 +6648,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() {
@@ -6603,19 +6728,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 }); }
@@ -6628,122 +6753,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:
@@ -7532,6 +7541,7 @@ const COMPONENTS = [
     PageSpinnerComponent,
     LoadingComponent,
     Copy2ClipboardComponent,
+    UrlSlugComponent,
     //Dropdownlists
     CountryDropdownlist,
     TimezoneDropdownlist,
@@ -7551,7 +7561,6 @@ const COMPONENTS = [
     //Forms
     AddressComponent,
     CompanyComponent,
-    UrlSlugComponent,
     ContactUsForm,
     //Pipes
     SafeHtmlPipe,
@@ -7605,6 +7614,7 @@ class AnatolyUIModule {
         PageSpinnerComponent,
         LoadingComponent,
         Copy2ClipboardComponent,
+        UrlSlugComponent,
         //Dropdownlists
         CountryDropdownlist,
         TimezoneDropdownlist,
@@ -7624,7 +7634,6 @@ class AnatolyUIModule {
         //Forms
         AddressComponent,
         CompanyComponent,
-        UrlSlugComponent,
         ContactUsForm,
         //Pipes
         SafeHtmlPipe,
@@ -7650,6 +7659,7 @@ class AnatolyUIModule {
         PageSpinnerComponent,
         LoadingComponent,
         Copy2ClipboardComponent,
+        UrlSlugComponent,
         //Dropdownlists
         CountryDropdownlist,
         TimezoneDropdownlist,
@@ -7669,7 +7679,6 @@ class AnatolyUIModule {
         //Forms
         AddressComponent,
         CompanyComponent,
-        UrlSlugComponent,
         ContactUsForm,
         //Pipes
         SafeHtmlPipe,