@osovitny/anatoly 3.16.81 → 3.16.83

package/fesm2022/osovitny-anatoly.mjs

@@ -4927,6 +4927,39 @@ 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) => {
@@ -4934,18 +4967,27 @@ class ValidationSummaryComponent extends EditComponentBase {
             if (control.controls != null) {
                 Object.keys(control.controls).forEach((k) => {
                     var child = control.controls[k];
-                    this.getValidationMessages(child, this.getControlName(child, k)).forEach((m) => messages.push(m));
+                    this.getValidationMessages(child, this.getControlTitle(child, k)).forEach((m) => messages.push(m));
                 });
             }
             else {
-                this.getValidationMessages(control, this.getControlName(control, k)).forEach((m) => messages.push(m));
+                this.getValidationMessages(control, this.getControlTitle(control, k)).forEach((m) => messages.push(m));
             }
         });
         return messages;
     }
-    getValidationMessages(state, thingName) {
-        let thing = state.path || thingName;
+    getValidationMessages(state, title) {
         let messages = [];
+        let thing;
+        if (title) {
+            thing = title;
+        }
+        else {
+            thing = this.getControlTitle(state, null);
+            if (!thing) {
+                thing = state.path;
+            }
+        }
         if (state.errors) {
             for (let errorName in state.errors) {
                 if (state.errors.hasOwnProperty(errorName)) {
@@ -4974,48 +5016,6 @@ class ValidationSummaryComponent extends EditComponentBase {
         }
         return messages;
     }
-    /**
-     * Get Control Name
-     * @param control
-     * @param thingName
-     */
-    getControlName(control, thingName) {
-        let value = this.getControlTitle(control);
-        return value ? value : thingName;
-    }
-    /**
-     * Retrieve tilte of control
-     * @param control
-     */
-    getControlTitle(control) {
-        if (control?.nativeElement) {
-            let controlTitle = this.getTitleAttribute(control.nativeElement);
-            return controlTitle;
-        }
-        return undefined;
-    }
-    /**
-     * Return title attribute of form control
-     */
-    getTitleAttribute(nativeElement) {
-        let title;
-        switch (nativeElement.tagName) {
-            // For Kendo time and date picker element title is assigned to the 4th child control.
-            case "KENDO-TIMEPICKER":
-            case "KENDO-DATEPICKER":
-                title =
-                    nativeElement.children[0]?.children[0]?.children[0]?.children[0]?.getAttribute("title");
-                break;
-            // For Kendo numaric element title is assigned to the 2nd child control.
-            case "KENDO-NUMERICTEXTBOX":
-                title = nativeElement.children[0]?.children[0]?.getAttribute("title");
-                break;
-            default:
-                title = nativeElement.getAttribute("title");
-                break;
-        }
-        return title;
-    }
     static ɵfac = function ValidationSummaryComponent_Factory(t) { return new (t || ValidationSummaryComponent)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ValidationSummaryComponent, selectors: [["ng-component"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 0, vars: 0, template: function ValidationSummaryComponent_Template(rf, ctx) { }, encapsulation: 2 });
 }
@@ -5058,24 +5058,21 @@ function ItemValidationSummaryComponent_ul_0_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngForOf", ctx_r0.getValidationMessages(ctx_r0.formGroup.get(ctx_r0.formControlName), ctx_r0.formControlTitle));
+    i0.ɵɵproperty("ngForOf", ctx_r0.getValidationMessages(ctx_r0.formGroup.get(ctx_r0.controlName)));
 } }
 class ItemValidationSummaryComponent extends ValidationSummaryComponent {
-    formControlName;
-    formControlTitle;
+    controlName;
     static ɵfac = /*@__PURE__*/ function () { let ɵItemValidationSummaryComponent_BaseFactory; return function ItemValidationSummaryComponent_Factory(t) { return (ɵItemValidationSummaryComponent_BaseFactory || (ɵItemValidationSummaryComponent_BaseFactory = i0.ɵɵgetInheritedFactory(ItemValidationSummaryComponent)))(t || ItemValidationSummaryComponent); }; }();
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ItemValidationSummaryComponent, selectors: [["anatoly-item-validation-summary"]], inputs: { formControlName: "formControlName", formControlTitle: "formControlTitle" }, 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) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ItemValidationSummaryComponent, selectors: [["anatoly-item-validation-summary"]], inputs: { controlName: "controlName" }, 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.formControlName));
+            i0.ɵɵproperty("ngIf", ctx.isControlInvalid(ctx.controlName));
         } }, dependencies: [i1$2.NgForOf, i1$2.NgIf], encapsulation: 2 });
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ItemValidationSummaryComponent, [{
         type: Component,
-        args: [{ selector: "anatoly-item-validation-summary", template: "<ul class=\"list-unstyled\" *ngIf=\"isControlInvalid(formControlName)\">\r\n  <li *ngFor=\"let error of getValidationMessages(formGroup.get(formControlName), formControlTitle)\">\r\n    <span class=\"help-block\">{{ error }}</span>\r\n  </li>\r\n</ul>\r\n\r\n" }]
-    }], null, { formControlName: [{
-            type: Input
-        }], formControlTitle: [{
+        args: [{ selector: "anatoly-item-validation-summary", template: "<ul class=\"list-unstyled\" *ngIf=\"isControlInvalid(controlName)\">\r\n  <li *ngFor=\"let error of getValidationMessages(formGroup.get(controlName))\">\r\n    <span class=\"help-block\">{{ error }}</span>\r\n  </li>\r\n</ul>\r\n\r\n" }]
+    }], null, { controlName: [{
             type: Input
         }] }); })();
 
@@ -5107,7 +5104,7 @@ class FormsHtmlEditorComponent extends HtmlEditorComponentBase {
         });
     }
     static ɵfac = function FormsHtmlEditorComponent_Factory(t) { return new (t || FormsHtmlEditorComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FormsHtmlEditorComponent, selectors: [["anatoly-forms-html-editor"]], inputs: { editorFormKey: "editorFormKey" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 11, consts: [[1, "form-group", 3, "formGroup", "ngClass"], [1, "col-form-label"], [3, "formControlName", "froalaEditor", "froalaInit"], [3, "formGroup", "formSubmitted", "formControlName", "formControlTitle"]], template: function FormsHtmlEditorComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FormsHtmlEditorComponent, selectors: [["anatoly-forms-html-editor"]], inputs: { editorFormKey: "editorFormKey" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 10, consts: [[1, "form-group", 3, "formGroup", "ngClass"], [1, "col-form-label"], [3, "formControlName", "froalaEditor", "froalaInit"], [3, "formGroup", "formSubmitted", "controlName"]], template: function FormsHtmlEditorComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "label", 1);
             i0.ɵɵtext(2);
             i0.ɵɵelementEnd();
@@ -5117,18 +5114,18 @@ 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(9, _c0$5, ctx.isControlInvalid(ctx.editorFormKey)));
+            i0.ɵɵproperty("formGroup", ctx.formGroup)("ngClass", i0.ɵɵpureFunction1(8, _c0$5, ctx.isControlInvalid(ctx.editorFormKey)));
             i0.ɵɵadvance(2);
             i0.ɵɵtextInterpolate(ctx.editorLabelText);
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("formControlName", ctx.editorFormKey)("froalaEditor", ctx.options);
             i0.ɵɵadvance(1);
-            i0.ɵɵproperty("formGroup", ctx.formGroup)("formSubmitted", ctx.formSubmitted)("formControlName", ctx.editorFormKey)("formControlTitle", ctx.editorLabelText);
+            i0.ɵɵproperty("formGroup", ctx.formGroup)("formSubmitted", ctx.formSubmitted)("controlName", ctx.editorFormKey);
         } }, dependencies: [i1$2.NgClass, i2.DefaultValueAccessor, i2.NgControlStatus, i2.NgControlStatusGroup, i2.FormGroupDirective, i2.FormControlName, i3.FroalaEditorDirective, NativeElementDirective, ItemValidationSummaryComponent], encapsulation: 2 });
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FormsHtmlEditorComponent, [{
         type: Component,
-        args: [{ selector: "anatoly-forms-html-editor", template: "<div [formGroup]=\"formGroup\" [ngClass]=\"{'has-error': isControlInvalid(editorFormKey) }\" class=\"form-group\" >\r\n    <label class=\"col-form-label\">{{ editorLabelText }}</label>\r\n    <textarea [formControlName]=\"editorFormKey\" [froalaEditor]=\"options\" (froalaInit)=\"initializeControl($event)\"></textarea>\r\n    <anatoly-item-validation-summary [formGroup]=\"formGroup\"\r\n                                     [formSubmitted]=\"formSubmitted\"\r\n                                     [formControlName]=\"editorFormKey\"\r\n                                     [formControlTitle]=\"editorLabelText\">\r\n    </anatoly-item-validation-summary>\r\n</div>\r\n" }]
+        args: [{ selector: "anatoly-forms-html-editor", template: "<div [formGroup]=\"formGroup\" [ngClass]=\"{'has-error': isControlInvalid(editorFormKey) }\" class=\"form-group\" >\r\n    <label class=\"col-form-label\">{{ editorLabelText }}</label>\r\n    <textarea [formControlName]=\"editorFormKey\" [froalaEditor]=\"options\" (froalaInit)=\"initializeControl($event)\"></textarea>\r\n    <anatoly-item-validation-summary [formGroup]=\"formGroup\"\r\n                                     [formSubmitted]=\"formSubmitted\"\r\n                                     [controlName]=\"editorFormKey\">\r\n    </anatoly-item-validation-summary>\r\n</div>\r\n" }]
     }], function () { return []; }, { editorFormKey: [{
             type: Input
         }] }); })();
@@ -6060,18 +6057,13 @@ class UrlSlugComponent extends EditComponentBase {
     //Inputs
     title = 'Permalink:';
     isTitleVisible = true;
-    class;
-    watchedControlName;
     urlPrefix;
     isGoButtonVisible = true;
     //Validation
-    formControlName;
-    formControlTitle;
+    controlName;
+    watchedControlName;
     //Outputs
     generating = new EventEmitter();
-    constructor() {
-        super();
-    }
     ngOnInit() {
         this.startWatching();
     }
@@ -6079,7 +6071,7 @@ class UrlSlugComponent extends EditComponentBase {
         let slugedText = Utils.slugify(text);
         let event = { urlSlug: slugedText };
         this.generating.emit(event);
-        this.setFormValue(this.formControlName, event.urlSlug);
+        this.setFormValue(this.controlName, event.urlSlug);
     }
     startWatching() {
         this.subs.sink = this.formGroup.get(this.watchedControlName).valueChanges.subscribe({
@@ -6091,7 +6083,7 @@ class UrlSlugComponent extends EditComponentBase {
                 this.generateUrlSlug(value);
             }
         });
-        this.subs.sink = this.formGroup.get(this.formControlName).valueChanges.subscribe({
+        this.subs.sink = this.formGroup.get(this.controlName).valueChanges.subscribe({
             next: (value) => {
                 this.hrefGo = value;
             }
@@ -6099,11 +6091,11 @@ class UrlSlugComponent extends EditComponentBase {
     }
     //Events
     onUrlSlugChange() {
-        let text = this.getFormValue(this.formControlName);
+        let text = this.getFormValue(this.controlName);
         this.generateUrlSlug(text);
     }
-    static ɵfac = function UrlSlugComponent_Factory(t) { return new (t || UrlSlugComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UrlSlugComponent, selectors: [["anatoly-forms-urlslug"]], inputs: { title: "title", isTitleVisible: "isTitleVisible", class: "class", watchedControlName: "watchedControlName", urlPrefix: "urlPrefix", isGoButtonVisible: "isGoButtonVisible", formControlName: "formControlName", formControlTitle: "formControlTitle" }, outputs: { generating: "generating" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 7, vars: 14, consts: [[3, "formGroup", "ngClass"], [1, "d-flex", "align-items-end"], [3, "formGroup", "formSubmitted", "formControlName", "formControlTitle"], [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) {
+    static ɵfac = /*@__PURE__*/ function () { let ɵUrlSlugComponent_BaseFactory; return function UrlSlugComponent_Factory(t) { return (ɵUrlSlugComponent_BaseFactory || (ɵUrlSlugComponent_BaseFactory = i0.ɵɵgetInheritedFactory(UrlSlugComponent)))(t || UrlSlugComponent); }; }();
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UrlSlugComponent, selectors: [["anatoly-forms-urlslug"]], inputs: { title: "title", isTitleVisible: "isTitleVisible", urlPrefix: "urlPrefix", isGoButtonVisible: "isGoButtonVisible", controlName: "controlName", 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);
@@ -6114,36 +6106,32 @@ class UrlSlugComponent extends EditComponentBase {
             i0.ɵɵtemplate(6, UrlSlugComponent_div_6_Template, 3, 2, "div", 6);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
-            i0.ɵɵclassMapInterpolate1("permalink form-group ", ctx.class, "");
-            i0.ɵɵproperty("formGroup", ctx.formGroup)("ngClass", i0.ɵɵpureFunction1(12, _c0, ctx.isControlInvalid(ctx.formControlName)));
+            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.formControlName)("formControlTitle", ctx.formControlTitle);
+            i0.ɵɵproperty("formGroup", ctx.formGroup)("formSubmitted", ctx.formSubmitted)("formControlName", ctx.controlName);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.isTitleVisible);
             i0.ɵɵadvance(1);
-            i0.ɵɵproperty("formControlName", ctx.formControlName);
+            i0.ɵɵproperty("formControlName", ctx.controlName);
             i0.ɵɵadvance(1);
             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 });
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UrlSlugComponent, [{
         type: Component,
-        args: [{ selector: 'anatoly-forms-urlslug', template: "<div [formGroup]='formGroup' [ngClass]=\"{'has-error': isControlInvalid(formControlName)}\"\r\n  class=\"permalink form-group {{class}}\">\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]='formControlName'\r\n      [formControlTitle]='formControlTitle'>\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' class='form-control' placeholder='Type url slug here'\r\n        [formControlName]='formControlName' (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" }]
-    }], function () { return []; }, { title: [{
+        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" }]
+    }], null, { title: [{
             type: Input
         }], isTitleVisible: [{
             type: Input
-        }], class: [{
-            type: Input
-        }], watchedControlName: [{
-            type: Input
         }], urlPrefix: [{
             type: Input
         }], isGoButtonVisible: [{
             type: Input
-        }], formControlName: [{
+        }], controlName: [{
             type: Input
-        }], formControlTitle: [{
+        }], watchedControlName: [{
             type: Input
         }], generating: [{
             type: Output