@lagoshny/ngx-validation-messages 21.0.3 → 21.1.0

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 21.1.0 (2026-04-21)
+#### Separated material and standalone components
+Separated material and standalone components to allow use lib without material.
+Added docs how to use lib with i18n validation messages.
+
+Break changes:
+- Extracted directive `ngxValidationMessages` to use with material ui `mat-error` component. Now you need to import additionally `NgxMatValidationMessagesDirective` to use `ngxValidationMessages`.
+
 ## 21.0.3 (2025-12-21)
 #### Updated lib to standalone
 Added test configuration.

package/README.md

@@ -50,6 +50,7 @@ This library allows you to decrease boilerplate code when handling validations e
     2. [Form driven approach (reactive)](#2-form-driven-approach-reactive)
     3. [Without component as error container](#3-use-without-component-as-error-container)
     4. [With material ui components using mat-error component](#4-with-material-ui-components-using-mat-error-component)
+    5. [I18n with Transloco](#5-i18n-with-transloco)
 3. [How it works?](#How-it-works?)        
 4. [Advanced configuration](#Advanced-configuration)
     1. [Override configured validation messages](#Override-configured-validation-messages)
@@ -277,7 +278,13 @@ If you need simple to display error message in common style as it does `ngx-vali
  ````
 
 #### 4. With material ui components using mat-error component
-It's simple to use `ngx-validation-messages` with material ui `mat-error` component, to do this you need to put `ngxValidationMessages` directive to `mat-error` component like this:
+Import directive:
+
+```typescript
+import { NgxMatValidationMessagesDirective } from '@lagoshny/ngx-validation-messages';
+```
+
+And use it with `mat-error`:
 
   ````html
   <form [formGroup]="taskForm">
@@ -293,21 +300,71 @@ It's simple to use `ngx-validation-messages` with material ui `mat-error` compon
 
 After that if `FormControl` with name `email` will be invalid, then configured error messages for validators applied to `email` will be shown in material ui style.
 
-Also you can override configured error messages for concrete case in standard way:
+#### 5. I18n with Transloco
+You can use i18n with Transloco to provide localized messages for validation errors.
+
+Define `ValidationI18nService` to provide localized messages and update the lib configuration after change the language:
+
+```ts
+export const validationMessageKeys: Readonly<Record<string, string>> = {
+  required: 'validation.required',
+  email: 'validation.email'
+};
+
+@Injectable({ providedIn: 'root' })
+export class ValidationI18nService {
+  private readonly transloco = inject(TranslocoService);
+  private readonly destroyRef = inject(DestroyRef);
+  private readonly ngxConfig = inject<NgxValidationMessagesConfig>(NGX_VALIDATION_MESSAGES_CONFIG);
+
+  constructor() {
+    this.transloco.langChanges$
+      .pipe(
+        startWith(this.transloco.getActiveLang()),
+        distinctUntilChanged(),
+        switchMap((lang) => this.transloco.load(lang).pipe(map(() => lang))),
+        takeUntilDestroyed(this.destroyRef),
+      )
+      .subscribe((lang) => this.apply(lang));
+  }
+
+  private apply(lang: string): void {
+    for (const [validator, key] of Object.entries(validationMessageKeys)) {
+      this.ngxConfig.messages[validator] = this.transloco.translate(key, {}, lang);
+    }
+  }
+}
+```
 
-  ````html
-    <mat-form-field>
-        <input matInput
-               formControlName="email">
-        <mat-error ngxValidationMessages [for]="taskForm.get('email')">
-            <ngx-custom-message forValidator="required">Your new message</ngx-custom-message>
-        </mat-error>
-    </mat-form-field>
- ````
+And update application configuration:
+
+```ts
+export const validationConfig: NgxValidationMessagesConfig = {
+  messages: {},
+};
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideTransloco({
+      config: {
+        availableLangs: ['en', 'de'],
+        defaultLang: 'en',
+      },
+      loader: TranslocoHttpLoader,
+    }),
+    provideNgxValidationMessages(validationConfig),
+    provideEnvironmentInitializer(() => {
+      inject(ValidationI18nService);
+    }),
+  ],
+};
+```
+
+See more about i18n with Transloco in [ngx-transloco](https://github.com/ngneat/transloco).
 
 ## How it works?
 
-In both cases `NgxValidationMessagesComponent` will get validation messages for each applied to form control validator from passed configuration object to `provideNgxValidationMessages` 
+In both cases `NgxValidationMessagesComponent` and `NgxMatValidationMessagesDirective` will get validation messages for each applied to form control validator from passed configuration object to `provideNgxValidationMessages` 
 
 For example, if you pass configuration like this:
 

package/fesm2022/lagoshny-ngx-validation-messages.mjs

@@ -1,9 +1,7 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, ViewChild, Input, Component, Directive, Inject, Injectable, ContentChildren } from '@angular/core';
-import * as i2 from '@angular/common';
+import { InjectionToken, ViewChild, Input, Component, inject, Injectable, Directive, ContentChildren, ElementRef, Renderer2 } from '@angular/core';
+import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i3 from '@angular/material/form-field';
-import { MatFormFieldModule } from '@angular/material/form-field';
 
 const NGX_VALIDATION_MESSAGES_CONFIG = new InjectionToken('NgxValidationMessagesConfig');
 const DEFAULT_CONFIG = {
@@ -25,13 +23,13 @@ class NgxCustomMessageComponent {
      * Contains overridden message for validator.
      */
     message;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: NgxCustomMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.2", type: NgxCustomMessageComponent, isStandalone: true, selector: "ngx-custom-message", inputs: { validatorName: ["forValidator", "validatorName"] }, viewQueries: [{ propertyName: "message", first: true, predicate: ["message"], descendants: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NgxCustomMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: NgxCustomMessageComponent, isStandalone: true, selector: "ngx-custom-message", inputs: { validatorName: ["forValidator", "validatorName"] }, viewQueries: [{ propertyName: "message", first: true, predicate: ["message"], descendants: true }], ngImport: i0, template: `
     <div #message>
       <ng-content></ng-content>
     </div>`, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: NgxCustomMessageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NgxCustomMessageComponent, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
@@ -50,57 +48,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
                 args: ['message']
             }] } });
 
-/**
- * Allows to specify custom validator message to override default message.
- *
- * It's alternative for {@link NgxCustomMessageComponent}.
- * If you want to use standard html tags to define custom message, use this directive on html tag within
- * {@link NgxValidationMessagesComponent} specifying validator name as directive parameter,
- * otherwise use {@link NgxCustomMessageComponent}.
- */
-class NgxValidatorNameDirective {
-    elem;
-    /**
-     * The name of the validator for which you want to override the message.
-     */
-    validatorName;
-    /**
-     * Contains overridden message for validator.
-     */
-    message;
-    constructor(elem) {
-        this.elem = elem;
-    }
-    ngAfterViewInit() {
-        this.message = this.elem.nativeElement.innerText;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: NgxValidatorNameDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: NgxValidatorNameDirective, isStandalone: true, selector: "[ngxValidatorName]", inputs: { validatorName: "validatorName" }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: NgxValidatorNameDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    standalone: true,
-                    selector: '[ngxValidatorName]'
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { validatorName: [{
-                type: Input
-            }] } });
-
 /**
  * Service allows getting validation messages from client's settings.
  * Injecting {@link NgxValidationMessagesConfig} to get client's configuration with validation messages.
  */
 class NgxValidationMessagesService {
-    messagesConfig;
     static SERVER_ERRORS = 'serverErrors';
     /**
      * Regular expression to find params placeholder '#[paramName]'.
      */
     paramsRegExp = new RegExp(/#[[a-zA-Z_\\-]*]/);
-    constructor(messagesConfig) {
-        this.messagesConfig = messagesConfig;
-    }
+    messagesConfig = inject(NGX_VALIDATION_MESSAGES_CONFIG);
     /**
      * Get validation message for specified validator.
      *
@@ -149,31 +107,58 @@ class NgxValidationMessagesService {
             return '';
         }, obj) ?? '';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: NgxValidationMessagesService, deps: [{ token: NGX_VALIDATION_MESSAGES_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: NgxValidationMessagesService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NgxValidationMessagesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NgxValidationMessagesService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: NgxValidationMessagesService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NgxValidationMessagesService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [NGX_VALIDATION_MESSAGES_CONFIG]
-                }] }] });
+        }] });
 
 /**
- * Component for displaying validation messages, supports child components of type {@link NgxCustomMessageComponent}
- * and html elements with directive {@link NgxValidatorNameDirective} to override validation messages.
+ * Allows to specify custom validator message to override default message.
+ *
+ * It's alternative for {@link NgxCustomMessageComponent}.
+ * If you want to use standard html tags to define custom message, use this directive on html tag within
+ * {@link NgxValidationMessagesComponent} specifying validator name as directive parameter,
+ * otherwise use {@link NgxCustomMessageComponent}.
  */
-class NgxValidationMessagesComponent {
-    ngxValidationConfig;
-    ngxValidationMessagesService;
-    directiveElementRef;
+class NgxValidatorNameDirective {
+    elem;
+    /**
+     * The name of the validator for which you want to override the message.
+     */
+    validatorName;
+    /**
+     * Contains overridden message for validator.
+     */
+    message;
+    constructor(elem) {
+        this.elem = elem;
+    }
+    ngAfterViewInit() {
+        this.message = this.elem.nativeElement.innerText;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NgxValidatorNameDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: NgxValidatorNameDirective, isStandalone: true, selector: "[ngxValidatorName]", inputs: { validatorName: "validatorName" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NgxValidatorNameDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[ngxValidatorName]'
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { validatorName: [{
+                type: Input
+            }] } });
+
+class NgxValidationMessagesBase {
     /**
      * Form control for which need to show validation messages.
      */
-    formControl;
+    formControl = null;
     /**
      * Contains {@link NgxCustomMessageComponent} if present.
      */
@@ -182,30 +167,18 @@ class NgxValidationMessagesComponent {
      * Contains {@link NgxValidatorNameDirective} if present.
      */
     customMsgDirective;
-    isMaterialError = false;
     /**
      * Key to get default validation message.
      */
     defaultError = 'error';
-    materialErrorElement = 'MAT-ERROR';
-    constructor(ngxValidationConfig, ngxValidationMessagesService, directiveElementRef) {
-        this.ngxValidationConfig = ngxValidationConfig;
-        this.ngxValidationMessagesService = ngxValidationMessagesService;
-        this.directiveElementRef = directiveElementRef;
-    }
-    ngAfterViewInit() {
-        if (this.directiveElementRef && this.directiveElementRef.nativeElement
-            && this.directiveElementRef.nativeElement.nodeName) {
-            this.isMaterialError = this.materialErrorElement.toLocaleUpperCase()
-                === this.directiveElementRef.nativeElement.nodeName.toLocaleUpperCase();
-        }
-    }
+    ngxValidationConfig = inject(NGX_VALIDATION_MESSAGES_CONFIG);
+    ngxValidationMessagesService = inject(NgxValidationMessagesService);
     /**
      * Get all validation messages for specified form control.
      */
     get errorMessages() {
         const result = [];
-        if (!this.formControl || !this.formControl.errors) {
+        if (!this.formControl?.errors || !(this.formControl.touched || this.formControl.dirty)) {
             return result;
         }
         if (this.customMsgComponent && this.customMsgComponent.length > 0) {
@@ -234,7 +207,7 @@ class NgxValidationMessagesComponent {
     }
     processingCustomMessages(customMessage) {
         customMessage.forEach((msg) => {
-            if (!this.formControl.errors[msg.validatorName]) {
+            if (this.formControl == null || !this.formControl?.errors || !this.formControl.errors[msg.validatorName]) {
                 return;
             }
             let message = (msg instanceof NgxCustomMessageComponent)
@@ -245,19 +218,12 @@ class NgxValidationMessagesComponent {
                 : this.formControl.errors[msg.validatorName] = { customMessage: message };
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: NgxValidationMessagesComponent, deps: [{ token: NGX_VALIDATION_MESSAGES_CONFIG }, { token: NgxValidationMessagesService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: NgxValidationMessagesComponent, isStandalone: true, selector: "ngx-validation-messages, [ngxValidationMessages]", inputs: { formControl: ["for", "formControl"] }, queries: [{ propertyName: "customMsgComponent", predicate: NgxCustomMessageComponent }, { propertyName: "customMsgDirective", predicate: NgxValidatorNameDirective }], ngImport: i0, template: "<!--To show error messages standalone without component-->\n@if (!formControl && customMsgComponent.length == 0 && customMsgDirective.length == 0) {\n  <div\n    [ngClass]=\"ngxValidationConfig?.validationMessagesStyle?.blockClassNames || 'ngx_vm__def_error_block'\">\n    <span [ngClass]=\"ngxValidationConfig?.validationMessagesStyle?.textClassNames || 'ngx_vm__def_error_text'\">\n      <ng-content></ng-content>\n    </span>\n  </div>\n}\n\n@if (errorMessages.length > 0) {\n  <!--To show error messages in material ui style-->\n  @if (isMaterialError) {\n    @for (message of errorMessages; track message) {\n      <mat-error>{{ message }}</mat-error>\n    }\n  } @else {\n    <div [ngClass]=\"ngxValidationConfig?.validationMessagesStyle?.blockClassNames || 'ngx_vm__def_error_block'\">\n      @for (message of errorMessages; track message) {\n        <div>\n          <span [ngClass]=\"ngxValidationConfig?.validationMessagesStyle?.textClassNames || 'ngx_vm__def_error_text'\">\n            {{ message }}\n          </span>\n        </div>\n      }\n    </div>\n  }\n  <!--To show error messages in user style-->\n}\n", styles: [".ngx_vm__def_error_block{position:relative;display:inline-block;width:100%;margin-bottom:10px;margin-top:2px;padding:8px;border-radius:0;background:#c51244;box-shadow:1px 1px 1px #aaa;opacity:.8}.ngx_vm__def_error_text{color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NgxValidationMessagesBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: NgxValidationMessagesBase, isStandalone: true, inputs: { formControl: ["for", "formControl"] }, queries: [{ propertyName: "customMsgComponent", predicate: NgxCustomMessageComponent }, { propertyName: "customMsgDirective", predicate: NgxValidatorNameDirective }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: NgxValidationMessagesComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, selector: 'ngx-validation-messages, [ngxValidationMessages]', imports: [
-                        CommonModule,
-                        MatFormFieldModule,
-                    ], template: "<!--To show error messages standalone without component-->\n@if (!formControl && customMsgComponent.length == 0 && customMsgDirective.length == 0) {\n  <div\n    [ngClass]=\"ngxValidationConfig?.validationMessagesStyle?.blockClassNames || 'ngx_vm__def_error_block'\">\n    <span [ngClass]=\"ngxValidationConfig?.validationMessagesStyle?.textClassNames || 'ngx_vm__def_error_text'\">\n      <ng-content></ng-content>\n    </span>\n  </div>\n}\n\n@if (errorMessages.length > 0) {\n  <!--To show error messages in material ui style-->\n  @if (isMaterialError) {\n    @for (message of errorMessages; track message) {\n      <mat-error>{{ message }}</mat-error>\n    }\n  } @else {\n    <div [ngClass]=\"ngxValidationConfig?.validationMessagesStyle?.blockClassNames || 'ngx_vm__def_error_block'\">\n      @for (message of errorMessages; track message) {\n        <div>\n          <span [ngClass]=\"ngxValidationConfig?.validationMessagesStyle?.textClassNames || 'ngx_vm__def_error_text'\">\n            {{ message }}\n          </span>\n        </div>\n      }\n    </div>\n  }\n  <!--To show error messages in user style-->\n}\n", styles: [".ngx_vm__def_error_block{position:relative;display:inline-block;width:100%;margin-bottom:10px;margin-top:2px;padding:8px;border-radius:0;background:#c51244;box-shadow:1px 1px 1px #aaa;opacity:.8}.ngx_vm__def_error_text{color:#fff}\n"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [NGX_VALIDATION_MESSAGES_CONFIG]
-                }] }, { type: NgxValidationMessagesService }, { type: i0.ElementRef }], propDecorators: { formControl: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NgxValidationMessagesBase, decorators: [{
+            type: Directive
+        }], propDecorators: { formControl: [{
                 type: Input,
                 args: ['for']
             }], customMsgComponent: [{
@@ -268,6 +234,113 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
                 args: [NgxValidatorNameDirective]
             }] } });
 
+/**
+ * Attribute directive for Material form fields.
+ * Usage: <mat-error ngxValidationMessages [for]="form.get('email')"></mat-error>
+ */
+class NgxMatValidationMessagesDirective extends NgxValidationMessagesBase {
+    hostElementRef = inject((ElementRef));
+    renderer = inject(Renderer2);
+    renderedMessages = [];
+    dynamicMessageElements = [];
+    ngDoCheck() {
+        if (!this.formControl) {
+            this.resetRenderedMessages();
+            return;
+        }
+        const currentMessages = this.errorMessages;
+        if (this.isEqualMessageSet(this.renderedMessages, currentMessages)) {
+            return;
+        }
+        this.renderedMessages = [...currentMessages];
+        this.renderMessages(currentMessages);
+    }
+    ngOnDestroy() {
+        this.resetRenderedMessages();
+    }
+    renderMessages(messages) {
+        const hostElement = this.hostElementRef.nativeElement;
+        this.renderer.setProperty(hostElement, 'textContent', messages[0] ?? '');
+        this.syncAdditionalMessageElements(messages.slice(1));
+    }
+    syncAdditionalMessageElements(messages) {
+        while (this.dynamicMessageElements.length < messages.length) {
+            this.dynamicMessageElements.push(this.createDynamicMatErrorElement());
+        }
+        while (this.dynamicMessageElements.length > messages.length) {
+            const errorElement = this.dynamicMessageElements.pop();
+            if (errorElement?.parentNode) {
+                this.renderer.removeChild(errorElement.parentNode, errorElement);
+            }
+        }
+        const hostElement = this.hostElementRef.nativeElement;
+        const parentElement = hostElement.parentNode;
+        let previousNode = hostElement;
+        this.dynamicMessageElements.forEach((errorElement, index) => {
+            this.renderer.setProperty(errorElement, 'textContent', messages[index]);
+            if (!parentElement) {
+                return;
+            }
+            this.renderer.insertBefore(parentElement, errorElement, previousNode.nextSibling);
+            previousNode = errorElement;
+        });
+    }
+    createDynamicMatErrorElement() {
+        const errorElement = this.renderer.createElement('mat-error');
+        const hostClasses = this.hostElementRef.nativeElement.className;
+        if (hostClasses) {
+            this.renderer.setAttribute(errorElement, 'class', hostClasses);
+        }
+        return errorElement;
+    }
+    destroyDynamicMessageElements() {
+        this.dynamicMessageElements.forEach((errorElement) => {
+            if (errorElement.parentNode) {
+                this.renderer.removeChild(errorElement.parentNode, errorElement);
+            }
+        });
+        this.dynamicMessageElements = [];
+    }
+    resetRenderedMessages() {
+        if (this.renderedMessages.length === 0 && this.dynamicMessageElements.length === 0) {
+            return;
+        }
+        this.renderedMessages = [];
+        this.renderer.setProperty(this.hostElementRef.nativeElement, 'textContent', '');
+        this.destroyDynamicMessageElements();
+    }
+    isEqualMessageSet(previous, current) {
+        if (previous.length !== current.length) {
+            return false;
+        }
+        return previous.every((message, index) => message === current[index]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NgxMatValidationMessagesDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: NgxMatValidationMessagesDirective, isStandalone: true, selector: "mat-error[ngxValidationMessages]", usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NgxMatValidationMessagesDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: 'mat-error[ngxValidationMessages]'
+                }]
+        }] });
+
+/**
+ * Component for displaying validation messages, supports child components of type {@link NgxCustomMessageComponent}
+ * and html elements with directive {@link NgxValidatorNameDirective} to override validation messages.
+ */
+class NgxValidationMessagesComponent extends NgxValidationMessagesBase {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NgxValidationMessagesComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: NgxValidationMessagesComponent, isStandalone: true, selector: "ngx-validation-messages", usesInheritance: true, ngImport: i0, template: "<!--To show error messages standalone without component-->\n@if (!formControl && customMsgComponent.length == 0 && customMsgDirective.length == 0) {\n  <div\n    [ngClass]=\"ngxValidationConfig?.validationMessagesStyle?.blockClassNames || 'ngx_vm__def_error_block'\">\n    <span [ngClass]=\"ngxValidationConfig?.validationMessagesStyle?.textClassNames || 'ngx_vm__def_error_text'\">\n      <ng-content></ng-content>\n    </span>\n  </div>\n}\n\n@if (errorMessages.length > 0) {\n  <div [ngClass]=\"ngxValidationConfig?.validationMessagesStyle?.blockClassNames || 'ngx_vm__def_error_block'\">\n    @for (message of errorMessages; track message) {\n      <div>\n          <span [ngClass]=\"ngxValidationConfig?.validationMessagesStyle?.textClassNames || 'ngx_vm__def_error_text'\">\n            {{ message }}\n          </span>\n      </div>\n    }\n  </div>\n}\n", styles: [".ngx_vm__def_error_block{position:relative;display:inline-block;width:100%;margin-bottom:10px;margin-top:2px;padding:8px;border-radius:0;background:#c51244;box-shadow:1px 1px 1px #aaa;opacity:.8}.ngx_vm__def_error_text{color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NgxValidationMessagesComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'ngx-validation-messages', imports: [
+                        CommonModule,
+                    ], template: "<!--To show error messages standalone without component-->\n@if (!formControl && customMsgComponent.length == 0 && customMsgDirective.length == 0) {\n  <div\n    [ngClass]=\"ngxValidationConfig?.validationMessagesStyle?.blockClassNames || 'ngx_vm__def_error_block'\">\n    <span [ngClass]=\"ngxValidationConfig?.validationMessagesStyle?.textClassNames || 'ngx_vm__def_error_text'\">\n      <ng-content></ng-content>\n    </span>\n  </div>\n}\n\n@if (errorMessages.length > 0) {\n  <div [ngClass]=\"ngxValidationConfig?.validationMessagesStyle?.blockClassNames || 'ngx_vm__def_error_block'\">\n    @for (message of errorMessages; track message) {\n      <div>\n          <span [ngClass]=\"ngxValidationConfig?.validationMessagesStyle?.textClassNames || 'ngx_vm__def_error_text'\">\n            {{ message }}\n          </span>\n      </div>\n    }\n  </div>\n}\n", styles: [".ngx_vm__def_error_block{position:relative;display:inline-block;width:100%;margin-bottom:10px;margin-top:2px;padding:8px;border-radius:0;background:#c51244;box-shadow:1px 1px 1px #aaa;opacity:.8}.ngx_vm__def_error_text{color:#fff}\n"] }]
+        }] });
+
 function provideNgxValidationMessages(config) {
     return [
         {
@@ -293,5 +366,5 @@ function provideNgxValidationMessagesTesting(config) {
  * Generated bundle index. Do not edit.
  */
 
-export { NGX_VALIDATION_MESSAGES_CONFIG, NgxCustomMessageComponent, NgxValidationMessagesComponent, NgxValidatorNameDirective, provideNgxValidationMessages, provideNgxValidationMessagesTesting };
+export { NGX_VALIDATION_MESSAGES_CONFIG, NgxCustomMessageComponent, NgxMatValidationMessagesDirective, NgxValidationMessagesComponent, NgxValidatorNameDirective, provideNgxValidationMessages, provideNgxValidationMessagesTesting };
 //# sourceMappingURL=lagoshny-ngx-validation-messages.mjs.map

package/fesm2022/lagoshny-ngx-validation-messages.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"lagoshny-ngx-validation-messages.mjs","sources":["../../../projects/ngx-validation-messages/src/lib/interface/ngx-validation-messages.config.ts","../../../projects/ngx-validation-messages/src/lib/components/ngx-custom-message/ngx-custom-message.component.ts","../../../projects/ngx-validation-messages/src/lib/directivies/ngx-validator-name.directive.ts","../../../projects/ngx-validation-messages/src/lib/service/ngx-validation-messages.service.ts","../../../projects/ngx-validation-messages/src/lib/components/ngx-validation-messages/ngx-validation-messages.component.ts","../../../projects/ngx-validation-messages/src/lib/components/ngx-validation-messages/ngx-validation-messages.component.html","../../../projects/ngx-validation-messages/src/lib/ngx-validation-messages.providers.ts","../../../projects/ngx-validation-messages/src/public-api.ts","../../../projects/ngx-validation-messages/src/lagoshny-ngx-validation-messages.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\n\nexport const NGX_VALIDATION_MESSAGES_CONFIG: InjectionToken<NgxValidationMessagesConfig>\n  = new InjectionToken<NgxValidationMessagesConfig>('NgxValidationMessagesConfig');\n\nexport interface NgxValidationMessagesConfig {\n\n  /**\n   * Object contains validation messages in validatorName: validatorMessage format.\n   */\n  messages: {\n    [validatorName: string]: string;\n  };\n\n  /**\n   * Define custom styles to display validation messages.\n   */\n  validationMessagesStyle?: {\n    blockClassNames?: string;\n    textClassNames?: string;\n  };\n\n}\n\nexport const DEFAULT_CONFIG: NgxValidationMessagesConfig = {\n  messages: {}\n}\n","import { Component, ElementRef, Input, ViewChild } from '@angular/core';\n\n\n/**\n * Component allows specifying custom validation message for the specified\n * validator to override default message.\n *\n * Use this component as child in {@link NgxValidationMessagesComponent}.\n */\n@Component({\n  standalone: true,\n  selector: 'ngx-custom-message',\n    template: `\n    <div #message>\n      <ng-content></ng-content>\n    </div>`,\n    imports: []\n})\nexport class NgxCustomMessageComponent {\n\n  /**\n   * The name of the validator for which you want to override the message.\n   */\n  @Input('forValidator')\n  public validatorName: string | undefined;\n\n  /**\n   * Contains overridden message for validator.\n   */\n  @ViewChild('message')\n  public message: ElementRef | undefined;\n\n}\n","import { AfterViewInit, Directive, ElementRef, Input } from '@angular/core';\n\n/**\n * Allows to specify custom validator message to override default message.\n *\n * It's alternative for {@link NgxCustomMessageComponent}.\n * If you want to use standard html tags to define custom message, use this directive on html tag within\n * {@link NgxValidationMessagesComponent} specifying validator name as directive parameter,\n * otherwise use {@link NgxCustomMessageComponent}.\n */\n@Directive({\n  standalone: true,\n  selector: '[ngxValidatorName]'\n})\nexport class NgxValidatorNameDirective implements AfterViewInit {\n\n  /**\n   * The name of the validator for which you want to override the message.\n   */\n  @Input()\n  public validatorName: string | undefined;\n\n  /**\n   * Contains overridden message for validator.\n   */\n  public message: string | undefined;\n\n  constructor(private elem: ElementRef) {\n  }\n\n  public ngAfterViewInit(): void {\n    this.message = this.elem.nativeElement.innerText;\n  }\n\n}\n","import { Inject, Injectable } from '@angular/core';\nimport {\n  NGX_VALIDATION_MESSAGES_CONFIG,\n  NgxValidationMessagesConfig\n} from '../interface/ngx-validation-messages.config';\n\n/**\n * Service allows getting validation messages from client's settings.\n * Injecting {@link NgxValidationMessagesConfig} to get client's configuration with validation messages.\n */\n@Injectable({\n  providedIn: 'root',\n})\nexport class NgxValidationMessagesService {\n\n  public static SERVER_ERRORS = 'serverErrors';\n\n  /**\n   * Regular expression to find params placeholder '#[paramName]'.\n   */\n  private paramsRegExp = new RegExp(/#[[a-zA-Z_\\\\-]*]/);\n\n  constructor(@Inject(NGX_VALIDATION_MESSAGES_CONFIG) private messagesConfig: NgxValidationMessagesConfig) {\n  }\n\n  /**\n   * Get validation message for specified validator.\n   *\n   * @param validatorName for which to get message\n   * @param params passed from validator for more detailed validation message\n   *\n   * @returns string validation message\n   */\n  public getValidatorErrorMessages(validatorName: string, params?: object): string {\n    const validationMessages = this.messagesConfig.messages;\n    const validationMessage: string = validationMessages[validatorName];\n\n    if (!validationMessage) {\n      throw new Error('Validation message for validator: ' + validatorName\n        + ' cannot be found, please check validation message key for validator it is case sensitive.');\n    }\n\n    if (params) {\n      return this.expandParameterizedTemplateMessage(validationMessage, params);\n    }\n\n    return validationMessage;\n  }\n\n  public expandParameterizedTemplateMessage(msg: string, params: object): string {\n    while (this.paramsRegExp.test(msg)) {\n      const foundParams = this.paramsRegExp.exec(msg);\n      foundParams?.forEach(value => {\n        const paramPlaceholder = value;\n        value = value.replace('#[', '').replace(']', '');\n        msg = msg.replace(paramPlaceholder, this.getParameter(params, value));\n      });\n    }\n\n    return msg;\n  }\n\n  /**\n   * A utilitarian method to get a property from an object.\n   * if there is no property, an empty string is returned.\n   *\n   * @param obj from which the property must be obtained\n   * @param prop property name\n   *\n   * @return property value or empty string\n   */\n  private getParameter(obj: unknown, prop: string): string {\n    return prop.split('.').reduce((acc: unknown, key: string) => {\n      if (acc != null && typeof acc === 'object') {\n        return (acc as Record<string, unknown>)[key];\n      }\n      return '';\n    }, obj) as string ?? '';\n  }\n\n  // public static applyServerError(control: AbstractControl | null, serverError: ServerError): void {\n  //   if (!control) {\n  //     return;\n  //   }\n  //   if (control.getError(NgxValidationMessagesService.SERVER_ERRORS)) {\n  //     const existingErrorMessages = control.getError(NgxValidationMessagesService.SERVER_ERRORS);\n  //     if (_.isArray(existingErrorMessages.customMessages) &&\n  //       existingErrorMessages.customMessages.indexOf(serverError.message) === -1) {\n  //       existingErrorMessages.customMessages.push(serverError.message);\n  //     }\n  //   } else {\n  //     control.setErrors({[NgxValidationMessagesService.SERVER_ERRORS]: {customMessages: [serverError.message]}});\n  //   }\n  //   control.markAsTouched();\n  // }\n\n}\n","import { AfterViewInit, Component, ContentChildren, ElementRef, Inject, Input, QueryList } from '@angular/core';\nimport { NgxValidatorNameDirective } from '../../directivies/ngx-validator-name.directive';\nimport {\n  NGX_VALIDATION_MESSAGES_CONFIG,\n  NgxValidationMessagesConfig\n} from '../../interface/ngx-validation-messages.config';\nimport { NgxValidationMessagesService } from '../../service/ngx-validation-messages.service';\nimport { NgxCustomMessageComponent } from '../ngx-custom-message/ngx-custom-message.component';\nimport { CommonModule } from '@angular/common';\nimport { MatFormFieldModule } from '@angular/material/form-field';\n\n/**\n * Component for displaying validation messages, supports child components of type {@link NgxCustomMessageComponent}\n * and html elements with directive {@link NgxValidatorNameDirective} to override validation messages.\n */\n@Component({\n  standalone: true,\n  selector: 'ngx-validation-messages, [ngxValidationMessages]',\n    templateUrl: './ngx-validation-messages.component.html',\n    styleUrls: ['./ngx-validation-messages.component.scss'],\n    imports: [\n        CommonModule,\n        MatFormFieldModule,\n    ]\n})\nexport class NgxValidationMessagesComponent implements AfterViewInit {\n\n  /**\n   * Form control for which need to show validation messages.\n   */\n  @Input('for')\n  public formControl: any;\n\n  /**\n   * Contains {@link NgxCustomMessageComponent} if present.\n   */\n  @ContentChildren(NgxCustomMessageComponent)\n  public customMsgComponent: any;\n\n  /**\n   * Contains {@link NgxValidatorNameDirective} if present.\n   */\n  @ContentChildren(NgxValidatorNameDirective)\n  public customMsgDirective: any;\n\n  public isMaterialError = false;\n\n  /**\n   * Key to get default validation message.\n   */\n  private defaultError = 'error';\n\n  private materialErrorElement = 'MAT-ERROR';\n\n  constructor(@Inject(NGX_VALIDATION_MESSAGES_CONFIG) public ngxValidationConfig: NgxValidationMessagesConfig,\n              private ngxValidationMessagesService: NgxValidationMessagesService,\n              private directiveElementRef: ElementRef) {\n  }\n\n  public ngAfterViewInit(): void {\n    if (this.directiveElementRef && this.directiveElementRef.nativeElement\n      && this.directiveElementRef.nativeElement.nodeName) {\n      this.isMaterialError = this.materialErrorElement.toLocaleUpperCase()\n        === this.directiveElementRef.nativeElement.nodeName.toLocaleUpperCase();\n    }\n  }\n\n  /**\n   * Get all validation messages for specified form control.\n   */\n  public get errorMessages(): Array<string> {\n    const result: Array<string> = [];\n\n    if (!this.formControl || !this.formControl.errors) {\n      return result;\n    }\n    if (this.customMsgComponent && this.customMsgComponent.length > 0) {\n      this.processingCustomMessages(this.customMsgComponent);\n    }\n    if (this.customMsgDirective && this.customMsgDirective.length > 0) {\n      this.processingCustomMessages(this.customMsgDirective);\n    }\n\n    for (const property in this.formControl.errors) {\n      if (this.formControl.errors.hasOwnProperty(property)\n        && (this.formControl.touched || this.formControl.dirty)) {\n        if (this.formControl.errors[property].customMessages instanceof Array) {\n          result.push(...this.formControl.errors[property].customMessages);\n          continue;\n        }\n        if (this.formControl.errors[property].customMessage) {\n          result.push(this.formControl.errors[property].customMessage);\n          continue;\n        }\n        const validationMessage: string =\n          this.ngxValidationMessagesService.getValidatorErrorMessages(property, this.formControl.errors[property]);\n        result.push(validationMessage || this.formControl.errors[property].message\n          || this.ngxValidationMessagesService.getValidatorErrorMessages(this.defaultError));\n      }\n    }\n    return result;\n  }\n\n  private processingCustomMessages(customMessage: QueryList<any>): void {\n    customMessage.forEach((msg: any) => {\n      if (!this.formControl.errors[msg.validatorName]) {\n        return;\n      }\n      let message = (msg instanceof NgxCustomMessageComponent)\n        ? msg.message?.nativeElement.innerText : msg.message;\n      message = this.ngxValidationMessagesService.expandParameterizedTemplateMessage(message, this.formControl.errors[msg.validatorName]);\n\n      typeof this.formControl.errors[msg.validatorName] === 'object'\n        ? this.formControl.errors[msg.validatorName].customMessage = message\n        : this.formControl.errors[msg.validatorName] = {customMessage: message};\n    });\n  }\n\n}\n","<!--To show error messages standalone without component-->\n@if (!formControl && customMsgComponent.length == 0 && customMsgDirective.length == 0) {\n  <div\n    [ngClass]=\"ngxValidationConfig?.validationMessagesStyle?.blockClassNames || 'ngx_vm__def_error_block'\">\n    <span [ngClass]=\"ngxValidationConfig?.validationMessagesStyle?.textClassNames || 'ngx_vm__def_error_text'\">\n      <ng-content></ng-content>\n    </span>\n  </div>\n}\n\n@if (errorMessages.length > 0) {\n  <!--To show error messages in material ui style-->\n  @if (isMaterialError) {\n    @for (message of errorMessages; track message) {\n      <mat-error>{{ message }}</mat-error>\n    }\n  } @else {\n    <div [ngClass]=\"ngxValidationConfig?.validationMessagesStyle?.blockClassNames || 'ngx_vm__def_error_block'\">\n      @for (message of errorMessages; track message) {\n        <div>\n          <span [ngClass]=\"ngxValidationConfig?.validationMessagesStyle?.textClassNames || 'ngx_vm__def_error_text'\">\n            {{ message }}\n          </span>\n        </div>\n      }\n    </div>\n  }\n  <!--To show error messages in user style-->\n}\n","import { Provider } from '@angular/core';\r\nimport {\r\n  DEFAULT_CONFIG,\r\n  NGX_VALIDATION_MESSAGES_CONFIG,\r\n  NgxValidationMessagesConfig\r\n} from './interface/ngx-validation-messages.config';\r\n\r\nexport { NGX_VALIDATION_MESSAGES_CONFIG } from './interface/ngx-validation-messages.config';\r\nexport type { NgxValidationMessagesConfig } from './interface/ngx-validation-messages.config';\r\nexport { NgxCustomMessageComponent } from './components/ngx-custom-message/ngx-custom-message.component';\r\nexport { NgxValidationMessagesComponent } from './components/ngx-validation-messages/ngx-validation-messages.component';\r\nexport { NgxValidatorNameDirective } from './directivies/ngx-validator-name.directive';\r\n\r\nexport function provideNgxValidationMessages(config: NgxValidationMessagesConfig): Provider[] {\r\n  return [\r\n    {\r\n      provide: NGX_VALIDATION_MESSAGES_CONFIG,\r\n      useValue: config\r\n    }\r\n  ];\r\n}\r\n\r\nexport function provideNgxValidationMessagesTesting(config?: NgxValidationMessagesConfig): Provider[] {\r\n  return [\r\n    {\r\n      provide: NGX_VALIDATION_MESSAGES_CONFIG,\r\n      useValue: config ?? DEFAULT_CONFIG\r\n    }\r\n  ];\r\n}\r\n","/*\n * Public API Surface of ngx-validation-messages\n */\nexport * from './lib/ngx-validation-messages.providers';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i1.NgxValidationMessagesService"],"mappings":"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"}
+{"version":3,"file":"lagoshny-ngx-validation-messages.mjs","sources":["../../../projects/ngx-validation-messages/src/lib/interface/ngx-validation-messages.config.ts","../../../projects/ngx-validation-messages/src/lib/components/ngx-custom-message/ngx-custom-message.component.ts","../../../projects/ngx-validation-messages/src/lib/service/ngx-validation-messages.service.ts","../../../projects/ngx-validation-messages/src/lib/directivies/ngx-validator-name.directive.ts","../../../projects/ngx-validation-messages/src/lib/components/base/ngx-validation-messages-base.directive.ts","../../../projects/ngx-validation-messages/src/lib/components/ngx-mat-validation-messages/ngx-mat-validation-messages.directive.ts","../../../projects/ngx-validation-messages/src/lib/components/ngx-validation-messages/ngx-validation-messages.component.ts","../../../projects/ngx-validation-messages/src/lib/components/ngx-validation-messages/ngx-validation-messages.component.html","../../../projects/ngx-validation-messages/src/lib/ngx-validation-messages.providers.ts","../../../projects/ngx-validation-messages/src/public-api.ts","../../../projects/ngx-validation-messages/src/lagoshny-ngx-validation-messages.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\n\nexport const NGX_VALIDATION_MESSAGES_CONFIG: InjectionToken<NgxValidationMessagesConfig>\n  = new InjectionToken<NgxValidationMessagesConfig>('NgxValidationMessagesConfig');\n\nexport interface NgxValidationMessagesConfig {\n\n  /**\n   * Object contains validation messages in validatorName: validatorMessage format.\n   */\n  messages: {\n    [validatorName: string]: string;\n  };\n\n  /**\n   * Define custom styles to display validation messages.\n   */\n  validationMessagesStyle?: {\n    blockClassNames?: string;\n    textClassNames?: string;\n  };\n\n}\n\nexport const DEFAULT_CONFIG: NgxValidationMessagesConfig = {\n  messages: {}\n}\n","import { Component, ElementRef, Input, ViewChild } from '@angular/core';\n\n\n/**\n * Component allows specifying custom validation message for the specified\n * validator to override default message.\n *\n * Use this component as child in {@link NgxValidationMessagesComponent}.\n */\n@Component({\n  standalone: true,\n  selector: 'ngx-custom-message',\n    template: `\n    <div #message>\n      <ng-content></ng-content>\n    </div>`,\n    imports: []\n})\nexport class NgxCustomMessageComponent {\n\n  /**\n   * The name of the validator for which you want to override the message.\n   */\n  @Input('forValidator')\n  public validatorName: string | undefined;\n\n  /**\n   * Contains overridden message for validator.\n   */\n  @ViewChild('message')\n  public message: ElementRef | undefined;\n\n}\n","import { inject, Injectable } from '@angular/core';\nimport {\n  NGX_VALIDATION_MESSAGES_CONFIG,\n  NgxValidationMessagesConfig\n} from '../interface/ngx-validation-messages.config';\n\n/**\n * Service allows getting validation messages from client's settings.\n * Injecting {@link NgxValidationMessagesConfig} to get client's configuration with validation messages.\n */\n@Injectable({\n  providedIn: 'root',\n})\nexport class NgxValidationMessagesService {\n\n  public static SERVER_ERRORS = 'serverErrors';\n\n  /**\n   * Regular expression to find params placeholder '#[paramName]'.\n   */\n  private paramsRegExp = new RegExp(/#[[a-zA-Z_\\\\-]*]/);\n\n  private readonly messagesConfig: NgxValidationMessagesConfig = inject(\n    NGX_VALIDATION_MESSAGES_CONFIG,\n  );\n\n  /**\n   * Get validation message for specified validator.\n   *\n   * @param validatorName for which to get message\n   * @param params passed from validator for more detailed validation message\n   *\n   * @returns string validation message\n   */\n  public getValidatorErrorMessages(validatorName: string, params?: object): string {\n    const validationMessages = this.messagesConfig.messages;\n    const validationMessage: string = validationMessages[validatorName];\n\n    if (!validationMessage) {\n      throw new Error('Validation message for validator: ' + validatorName\n        + ' cannot be found, please check validation message key for validator it is case sensitive.');\n    }\n\n    if (params) {\n      return this.expandParameterizedTemplateMessage(validationMessage, params);\n    }\n\n    return validationMessage;\n  }\n\n  public expandParameterizedTemplateMessage(msg: string, params: object): string {\n    while (this.paramsRegExp.test(msg)) {\n      const foundParams = this.paramsRegExp.exec(msg);\n      foundParams?.forEach(value => {\n        const paramPlaceholder = value;\n        value = value.replace('#[', '').replace(']', '');\n        msg = msg.replace(paramPlaceholder, this.getParameter(params, value));\n      });\n    }\n\n    return msg;\n  }\n\n  /**\n   * A utilitarian method to get a property from an object.\n   * if there is no property, an empty string is returned.\n   *\n   * @param obj from which the property must be obtained\n   * @param prop property name\n   *\n   * @return property value or empty string\n   */\n  private getParameter(obj: unknown, prop: string): string {\n    return prop.split('.').reduce((acc: unknown, key: string) => {\n      if (acc != null && typeof acc === 'object') {\n        return (acc as Record<string, unknown>)[key];\n      }\n      return '';\n    }, obj) as string ?? '';\n  }\n\n  // public static applyServerError(control: AbstractControl | null, serverError: ServerError): void {\n  //   if (!control) {\n  //     return;\n  //   }\n  //   if (control.getError(NgxValidationMessagesService.SERVER_ERRORS)) {\n  //     const existingErrorMessages = control.getError(NgxValidationMessagesService.SERVER_ERRORS);\n  //     if (_.isArray(existingErrorMessages.customMessages) &&\n  //       existingErrorMessages.customMessages.indexOf(serverError.message) === -1) {\n  //       existingErrorMessages.customMessages.push(serverError.message);\n  //     }\n  //   } else {\n  //     control.setErrors({[NgxValidationMessagesService.SERVER_ERRORS]: {customMessages: [serverError.message]}});\n  //   }\n  //   control.markAsTouched();\n  // }\n\n}\n","import { AfterViewInit, Directive, ElementRef, Input } from '@angular/core';\n\n/**\n * Allows to specify custom validator message to override default message.\n *\n * It's alternative for {@link NgxCustomMessageComponent}.\n * If you want to use standard html tags to define custom message, use this directive on html tag within\n * {@link NgxValidationMessagesComponent} specifying validator name as directive parameter,\n * otherwise use {@link NgxCustomMessageComponent}.\n */\n@Directive({\n  standalone: true,\n  selector: '[ngxValidatorName]'\n})\nexport class NgxValidatorNameDirective implements AfterViewInit {\n\n  /**\n   * The name of the validator for which you want to override the message.\n   */\n  @Input()\n  public validatorName: string | undefined;\n\n  /**\n   * Contains overridden message for validator.\n   */\n  public message: string | undefined;\n\n  constructor(private elem: ElementRef) {\n  }\n\n  public ngAfterViewInit(): void {\n    this.message = this.elem.nativeElement.innerText;\n  }\n\n}\n","import { ContentChildren, Directive, inject, Input, QueryList } from '@angular/core';\nimport { AbstractControl } from '@angular/forms';\nimport {\n  NGX_VALIDATION_MESSAGES_CONFIG,\n  NgxValidationMessagesConfig\n} from '../../interface/ngx-validation-messages.config';\nimport { NgxValidationMessagesService } from '../../service/ngx-validation-messages.service';\nimport { NgxValidatorNameDirective } from '../../directivies/ngx-validator-name.directive';\nimport { NgxCustomMessageComponent } from '../ngx-custom-message/ngx-custom-message.component';\n\n@Directive()\nexport abstract class NgxValidationMessagesBase {\n  /**\n   * Form control for which need to show validation messages.\n   */\n  @Input('for')\n  public formControl: AbstractControl | null = null;\n\n  /**\n   * Contains {@link NgxCustomMessageComponent} if present.\n   */\n  @ContentChildren(NgxCustomMessageComponent)\n  public customMsgComponent!: QueryList<NgxCustomMessageComponent>;\n\n  /**\n   * Contains {@link NgxValidatorNameDirective} if present.\n   */\n  @ContentChildren(NgxValidatorNameDirective)\n  public customMsgDirective!: QueryList<NgxValidatorNameDirective>;\n\n  /**\n   * Key to get default validation message.\n   */\n  private defaultError = 'error';\n\n  readonly ngxValidationConfig: NgxValidationMessagesConfig = inject(\n    NGX_VALIDATION_MESSAGES_CONFIG,\n  );\n\n  private readonly ngxValidationMessagesService = inject(NgxValidationMessagesService);\n\n  /**\n   * Get all validation messages for specified form control.\n   */\n  public get errorMessages(): Array<string> {\n    const result: Array<string> = [];\n\n    if (!this.formControl?.errors || !(this.formControl.touched || this.formControl.dirty)) {\n      return result;\n    }\n    if (this.customMsgComponent && this.customMsgComponent.length > 0) {\n      this.processingCustomMessages(this.customMsgComponent);\n    }\n    if (this.customMsgDirective && this.customMsgDirective.length > 0) {\n      this.processingCustomMessages(this.customMsgDirective);\n    }\n\n    for (const property in this.formControl.errors) {\n      if (this.formControl.errors.hasOwnProperty(property)\n        && (this.formControl.touched || this.formControl.dirty)) {\n        if (this.formControl.errors[property].customMessages instanceof Array) {\n          result.push(...this.formControl.errors[property].customMessages);\n          continue;\n        }\n        if (this.formControl.errors[property].customMessage) {\n          result.push(this.formControl.errors[property].customMessage);\n          continue;\n        }\n        const validationMessage: string =\n          this.ngxValidationMessagesService.getValidatorErrorMessages(property, this.formControl.errors[property]);\n        result.push(validationMessage || this.formControl.errors[property].message\n          || this.ngxValidationMessagesService.getValidatorErrorMessages(this.defaultError));\n      }\n    }\n    return result;\n  }\n\n  private processingCustomMessages(customMessage: QueryList<any>): void {\n    customMessage.forEach((msg: any) => {\n      if (this.formControl == null || !this.formControl?.errors || !this.formControl.errors[msg.validatorName]) {\n        return;\n      }\n      let message = (msg instanceof NgxCustomMessageComponent)\n        ? msg.message?.nativeElement.innerText : msg.message;\n      message = this.ngxValidationMessagesService.expandParameterizedTemplateMessage(message, this.formControl.errors[msg.validatorName]);\n\n      typeof this.formControl.errors[msg.validatorName] === 'object'\n        ? this.formControl.errors[msg.validatorName].customMessage = message\n        : this.formControl.errors[msg.validatorName] = { customMessage: message };\n    });\n  }\n\n}\n","import { Directive, DoCheck, ElementRef, inject, OnDestroy, Renderer2 } from '@angular/core';\nimport { NgxValidationMessagesBase } from '../base/ngx-validation-messages-base.directive';\n\n/**\n * Attribute directive for Material form fields.\n * Usage: <mat-error ngxValidationMessages [for]=\"form.get('email')\"></mat-error>\n */\n@Directive({\n  standalone: true,\n  selector: 'mat-error[ngxValidationMessages]'\n})\nexport class NgxMatValidationMessagesDirective extends NgxValidationMessagesBase implements DoCheck, OnDestroy {\n  private readonly hostElementRef = inject(ElementRef<HTMLElement>);\n  private readonly renderer = inject(Renderer2);\n  private renderedMessages: string[] = [];\n  private dynamicMessageElements: HTMLElement[] = [];\n\n  public ngDoCheck(): void {\n    if (!this.formControl) {\n      this.resetRenderedMessages();\n      return;\n    }\n\n    const currentMessages = this.errorMessages;\n    if (this.isEqualMessageSet(this.renderedMessages, currentMessages)) {\n      return;\n    }\n\n    this.renderedMessages = [...currentMessages];\n    this.renderMessages(currentMessages);\n  }\n\n  public ngOnDestroy(): void {\n    this.resetRenderedMessages();\n  }\n\n  private renderMessages(messages: string[]): void {\n    const hostElement = this.hostElementRef.nativeElement;\n    this.renderer.setProperty(hostElement, 'textContent', messages[0] ?? '');\n    this.syncAdditionalMessageElements(messages.slice(1));\n  }\n\n  private syncAdditionalMessageElements(messages: string[]): void {\n    while (this.dynamicMessageElements.length < messages.length) {\n      this.dynamicMessageElements.push(this.createDynamicMatErrorElement());\n    }\n\n    while (this.dynamicMessageElements.length > messages.length) {\n      const errorElement = this.dynamicMessageElements.pop();\n      if (errorElement?.parentNode) {\n        this.renderer.removeChild(errorElement.parentNode, errorElement);\n      }\n    }\n\n    const hostElement = this.hostElementRef.nativeElement;\n    const parentElement = hostElement.parentNode;\n\n    let previousNode: Node = hostElement;\n    this.dynamicMessageElements.forEach((errorElement, index) => {\n      this.renderer.setProperty(errorElement, 'textContent', messages[index]);\n\n      if (!parentElement) {\n        return;\n      }\n\n      this.renderer.insertBefore(parentElement, errorElement, previousNode.nextSibling);\n      previousNode = errorElement;\n    });\n  }\n\n  private createDynamicMatErrorElement(): HTMLElement {\n    const errorElement = this.renderer.createElement('mat-error') as HTMLElement;\n    const hostClasses = this.hostElementRef.nativeElement.className;\n    if (hostClasses) {\n      this.renderer.setAttribute(errorElement, 'class', hostClasses);\n    }\n    return errorElement;\n  }\n\n  private destroyDynamicMessageElements(): void {\n    this.dynamicMessageElements.forEach((errorElement) => {\n      if (errorElement.parentNode) {\n        this.renderer.removeChild(errorElement.parentNode, errorElement);\n      }\n    });\n    this.dynamicMessageElements = [];\n  }\n\n  private resetRenderedMessages(): void {\n    if (this.renderedMessages.length === 0 && this.dynamicMessageElements.length === 0) {\n      return;\n    }\n    this.renderedMessages = [];\n    this.renderer.setProperty(this.hostElementRef.nativeElement, 'textContent', '');\n    this.destroyDynamicMessageElements();\n  }\n\n  private isEqualMessageSet(previous: string[], current: string[]): boolean {\n    if (previous.length !== current.length) {\n      return false;\n    }\n    return previous.every((message, index) => message === current[index]);\n  }\n}\n","import { Component } from '@angular/core';\nimport { NgxValidatorNameDirective } from '../../directivies/ngx-validator-name.directive';\nimport { NgxCustomMessageComponent } from '../ngx-custom-message/ngx-custom-message.component';\nimport { CommonModule } from '@angular/common';\nimport { NgxValidationMessagesBase } from '../base/ngx-validation-messages-base.directive';\n\n/**\n * Component for displaying validation messages, supports child components of type {@link NgxCustomMessageComponent}\n * and html elements with directive {@link NgxValidatorNameDirective} to override validation messages.\n */\n@Component({\n  standalone: true,\n  selector: 'ngx-validation-messages',\n    templateUrl: './ngx-validation-messages.component.html',\n    styleUrls: ['./ngx-validation-messages.component.scss'],\n    imports: [\n        CommonModule,\n    ]\n})\nexport class NgxValidationMessagesComponent extends NgxValidationMessagesBase {}\n","<!--To show error messages standalone without component-->\n@if (!formControl && customMsgComponent.length == 0 && customMsgDirective.length == 0) {\n  <div\n    [ngClass]=\"ngxValidationConfig?.validationMessagesStyle?.blockClassNames || 'ngx_vm__def_error_block'\">\n    <span [ngClass]=\"ngxValidationConfig?.validationMessagesStyle?.textClassNames || 'ngx_vm__def_error_text'\">\n      <ng-content></ng-content>\n    </span>\n  </div>\n}\n\n@if (errorMessages.length > 0) {\n  <div [ngClass]=\"ngxValidationConfig?.validationMessagesStyle?.blockClassNames || 'ngx_vm__def_error_block'\">\n    @for (message of errorMessages; track message) {\n      <div>\n          <span [ngClass]=\"ngxValidationConfig?.validationMessagesStyle?.textClassNames || 'ngx_vm__def_error_text'\">\n            {{ message }}\n          </span>\n      </div>\n    }\n  </div>\n}\n","import { Provider } from '@angular/core';\nimport {\n  DEFAULT_CONFIG,\n  NGX_VALIDATION_MESSAGES_CONFIG,\n  NgxValidationMessagesConfig\n} from './interface/ngx-validation-messages.config';\n\nexport { NGX_VALIDATION_MESSAGES_CONFIG } from './interface/ngx-validation-messages.config';\nexport type { NgxValidationMessagesConfig } from './interface/ngx-validation-messages.config';\nexport { NgxCustomMessageComponent } from './components/ngx-custom-message/ngx-custom-message.component';\nexport { NgxMatValidationMessagesDirective } from './components/ngx-mat-validation-messages/ngx-mat-validation-messages.directive';\nexport { NgxValidationMessagesComponent } from './components/ngx-validation-messages/ngx-validation-messages.component';\nexport { NgxValidatorNameDirective } from './directivies/ngx-validator-name.directive';\n\nexport function provideNgxValidationMessages(config: NgxValidationMessagesConfig): Provider[] {\n  return [\n    {\n      provide: NGX_VALIDATION_MESSAGES_CONFIG,\n      useValue: config\n    }\n  ];\n}\n\nexport function provideNgxValidationMessagesTesting(config?: NgxValidationMessagesConfig): Provider[] {\n  return [\n    {\n      provide: NGX_VALIDATION_MESSAGES_CONFIG,\n      useValue: config ?? DEFAULT_CONFIG\n    }\n  ];\n}\n","/*\n * Public API Surface of ngx-validation-messages\n */\nexport * from './lib/ngx-validation-messages.providers';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;MAEa,8BAA8B,GACvC,IAAI,cAAc,CAA8B,6BAA6B;AAqB1E,MAAM,cAAc,GAAgC;AACzD,IAAA,QAAQ,EAAE;CACX;;ACvBD;;;;;AAKG;MAUU,yBAAyB,CAAA;AAEpC;;AAEG;AAEI,IAAA,aAAa;AAEpB;;AAEG;AAEI,IAAA,OAAO;uGAZH,yBAAyB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAzB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,yBAAyB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,EAAA,aAAA,EAAA,CAAA,cAAA,EAAA,eAAA,CAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,SAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,SAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EANxB;;;AAGH,UAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA;;2FAGE,yBAAyB,EAAA,UAAA,EAAA,CAAA;kBATrC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,QAAQ,EAAE,oBAAoB;AAC5B,oBAAA,QAAQ,EAAE;;;AAGH,UAAA,CAAA;AACP,oBAAA,OAAO,EAAE;AACZ,iBAAA;;sBAME,KAAK;uBAAC,cAAc;;sBAMpB,SAAS;uBAAC,SAAS;;;ACvBtB;;;AAGG;MAIU,4BAA4B,CAAA;AAEhC,IAAA,OAAO,aAAa,GAAG,cAAc;AAE5C;;AAEG;AACK,IAAA,YAAY,GAAG,IAAI,MAAM,CAAC,kBAAkB,CAAC;AAEpC,IAAA,cAAc,GAAgC,MAAM,CACnE,8BAA8B,CAC/B;AAED;;;;;;;AAOG;IACI,yBAAyB,CAAC,aAAqB,EAAE,MAAe,EAAA;AACrE,QAAA,MAAM,kBAAkB,GAAG,IAAI,CAAC,cAAc,CAAC,QAAQ;AACvD,QAAA,MAAM,iBAAiB,GAAW,kBAAkB,CAAC,aAAa,CAAC;QAEnE,IAAI,CAAC,iBAAiB,EAAE;AACtB,YAAA,MAAM,IAAI,KAAK,CAAC,oCAAoC,GAAG;AACnD,kBAAA,2FAA2F,CAAC;QAClG;QAEA,IAAI,MAAM,EAAE;YACV,OAAO,IAAI,CAAC,kCAAkC,CAAC,iBAAiB,EAAE,MAAM,CAAC;QAC3E;AAEA,QAAA,OAAO,iBAAiB;IAC1B;IAEO,kCAAkC,CAAC,GAAW,EAAE,MAAc,EAAA;QACnE,OAAO,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE;YAClC,MAAM,WAAW,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC;AAC/C,YAAA,WAAW,EAAE,OAAO,CAAC,KAAK,IAAG;gBAC3B,MAAM,gBAAgB,GAAG,KAAK;AAC9B,gBAAA,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC;AAChD,gBAAA,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC,gBAAgB,EAAE,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;AACvE,YAAA,CAAC,CAAC;QACJ;AAEA,QAAA,OAAO,GAAG;IACZ;AAEA;;;;;;;;AAQG;IACK,YAAY,CAAC,GAAY,EAAE,IAAY,EAAA;AAC7C,QAAA,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,GAAY,EAAE,GAAW,KAAI;YAC1D,IAAI,GAAG,IAAI,IAAI,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE;AAC1C,gBAAA,OAAQ,GAA+B,CAAC,GAAG,CAAC;YAC9C;AACA,YAAA,OAAO,EAAE;AACX,QAAA,CAAC,EAAE,GAAG,CAAW,IAAI,EAAE;IACzB;uGAlEW,4BAA4B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA;AAA5B,IAAA,OAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,4BAA4B,cAF3B,MAAM,EAAA,CAAA;;2FAEP,4BAA4B,EAAA,UAAA,EAAA,CAAA;kBAHxC,UAAU;AAAC,YAAA,IAAA,EAAA,CAAA;AACV,oBAAA,UAAU,EAAE,MAAM;AACnB,iBAAA;;;ACVD;;;;;;;AAOG;MAKU,yBAAyB,CAAA;AAahB,IAAA,IAAA;AAXpB;;AAEG;AAEI,IAAA,aAAa;AAEpB;;AAEG;AACI,IAAA,OAAO;AAEd,IAAA,WAAA,CAAoB,IAAgB,EAAA;QAAhB,IAAA,CAAA,IAAI,GAAJ,IAAI;IACxB;IAEO,eAAe,GAAA;QACpB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,SAAS;IAClD;uGAlBW,yBAAyB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAzB,yBAAyB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,EAAA,aAAA,EAAA,eAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAzB,yBAAyB,EAAA,UAAA,EAAA,CAAA;kBAJrC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,QAAQ,EAAE;AACX,iBAAA;;sBAME;;;MCRmB,yBAAyB,CAAA;AAC7C;;AAEG;IAEI,WAAW,GAA2B,IAAI;AAEjD;;AAEG;AAEI,IAAA,kBAAkB;AAEzB;;AAEG;AAEI,IAAA,kBAAkB;AAEzB;;AAEG;IACK,YAAY,GAAG,OAAO;AAErB,IAAA,mBAAmB,GAAgC,MAAM,CAChE,8BAA8B,CAC/B;AAEgB,IAAA,4BAA4B,GAAG,MAAM,CAAC,4BAA4B,CAAC;AAEpF;;AAEG;AACH,IAAA,IAAW,aAAa,GAAA;QACtB,MAAM,MAAM,GAAkB,EAAE;QAEhC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,MAAM,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC,OAAO,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE;AACtF,YAAA,OAAO,MAAM;QACf;AACA,QAAA,IAAI,IAAI,CAAC,kBAAkB,IAAI,IAAI,CAAC,kBAAkB,CAAC,MAAM,GAAG,CAAC,EAAE;AACjE,YAAA,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,kBAAkB,CAAC;QACxD;AACA,QAAA,IAAI,IAAI,CAAC,kBAAkB,IAAI,IAAI,CAAC,kBAAkB,CAAC,MAAM,GAAG,CAAC,EAAE;AACjE,YAAA,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,kBAAkB,CAAC;QACxD;QAEA,KAAK,MAAM,QAAQ,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE;YAC9C,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,cAAc,CAAC,QAAQ;AAC9C,oBAAC,IAAI,CAAC,WAAW,CAAC,OAAO,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE;AACzD,gBAAA,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,cAAc,YAAY,KAAK,EAAE;AACrE,oBAAA,MAAM,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,cAAc,CAAC;oBAChE;gBACF;gBACA,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,aAAa,EAAE;AACnD,oBAAA,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,aAAa,CAAC;oBAC5D;gBACF;AACA,gBAAA,MAAM,iBAAiB,GACrB,IAAI,CAAC,4BAA4B,CAAC,yBAAyB,CAAC,QAAQ,EAAE,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;AAC1G,gBAAA,MAAM,CAAC,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;uBAC9D,IAAI,CAAC,4BAA4B,CAAC,yBAAyB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;YACtF;QACF;AACA,QAAA,OAAO,MAAM;IACf;AAEQ,IAAA,wBAAwB,CAAC,aAA6B,EAAA;AAC5D,QAAA,aAAa,CAAC,OAAO,CAAC,CAAC,GAAQ,KAAI;YACjC,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,MAAM,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,GAAG,CAAC,aAAa,CAAC,EAAE;gBACxG;YACF;AACA,YAAA,IAAI,OAAO,GAAG,CAAC,GAAG,YAAY,yBAAyB;AACrD,kBAAE,GAAG,CAAC,OAAO,EAAE,aAAa,CAAC,SAAS,GAAG,GAAG,CAAC,OAAO;YACtD,OAAO,GAAG,IAAI,CAAC,4BAA4B,CAAC,kCAAkC,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;YAEnI,OAAO,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,GAAG,CAAC,aAAa,CAAC,KAAK;AACpD,kBAAE,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC,aAAa,GAAG;AAC7D,kBAAE,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,GAAG,CAAC,aAAa,CAAC,GAAG,EAAE,aAAa,EAAE,OAAO,EAAE;AAC7E,QAAA,CAAC,CAAC;IACJ;uGA/EoB,yBAAyB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAzB,yBAAyB,EAAA,YAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,WAAA,EAAA,CAAA,KAAA,EAAA,aAAA,CAAA,EAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,oBAAA,EAAA,SAAA,EAU5B,yBAAyB,EAAA,EAAA,EAAA,YAAA,EAAA,oBAAA,EAAA,SAAA,EAMzB,yBAAyB,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAhBtB,yBAAyB,EAAA,UAAA,EAAA,CAAA;kBAD9C;;sBAKE,KAAK;uBAAC,KAAK;;sBAMX,eAAe;uBAAC,yBAAyB;;sBAMzC,eAAe;uBAAC,yBAAyB;;;ACxB5C;;;AAGG;AAKG,MAAO,iCAAkC,SAAQ,yBAAyB,CAAA;AAC7D,IAAA,cAAc,GAAG,MAAM,EAAC,UAAuB,EAAC;AAChD,IAAA,QAAQ,GAAG,MAAM,CAAC,SAAS,CAAC;IACrC,gBAAgB,GAAa,EAAE;IAC/B,sBAAsB,GAAkB,EAAE;IAE3C,SAAS,GAAA;AACd,QAAA,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACrB,IAAI,CAAC,qBAAqB,EAAE;YAC5B;QACF;AAEA,QAAA,MAAM,eAAe,GAAG,IAAI,CAAC,aAAa;QAC1C,IAAI,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,gBAAgB,EAAE,eAAe,CAAC,EAAE;YAClE;QACF;AAEA,QAAA,IAAI,CAAC,gBAAgB,GAAG,CAAC,GAAG,eAAe,CAAC;AAC5C,QAAA,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC;IACtC;IAEO,WAAW,GAAA;QAChB,IAAI,CAAC,qBAAqB,EAAE;IAC9B;AAEQ,IAAA,cAAc,CAAC,QAAkB,EAAA;AACvC,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,aAAa;AACrD,QAAA,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,WAAW,EAAE,aAAa,EAAE,QAAQ,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;QACxE,IAAI,CAAC,6BAA6B,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IACvD;AAEQ,IAAA,6BAA6B,CAAC,QAAkB,EAAA;QACtD,OAAO,IAAI,CAAC,sBAAsB,CAAC,MAAM,GAAG,QAAQ,CAAC,MAAM,EAAE;YAC3D,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,CAAC,4BAA4B,EAAE,CAAC;QACvE;QAEA,OAAO,IAAI,CAAC,sBAAsB,CAAC,MAAM,GAAG,QAAQ,CAAC,MAAM,EAAE;YAC3D,MAAM,YAAY,GAAG,IAAI,CAAC,sBAAsB,CAAC,GAAG,EAAE;AACtD,YAAA,IAAI,YAAY,EAAE,UAAU,EAAE;gBAC5B,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,YAAY,CAAC,UAAU,EAAE,YAAY,CAAC;YAClE;QACF;AAEA,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,aAAa;AACrD,QAAA,MAAM,aAAa,GAAG,WAAW,CAAC,UAAU;QAE5C,IAAI,YAAY,GAAS,WAAW;QACpC,IAAI,CAAC,sBAAsB,CAAC,OAAO,CAAC,CAAC,YAAY,EAAE,KAAK,KAAI;AAC1D,YAAA,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,YAAY,EAAE,aAAa,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC;YAEvE,IAAI,CAAC,aAAa,EAAE;gBAClB;YACF;AAEA,YAAA,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,aAAa,EAAE,YAAY,EAAE,YAAY,CAAC,WAAW,CAAC;YACjF,YAAY,GAAG,YAAY;AAC7B,QAAA,CAAC,CAAC;IACJ;IAEQ,4BAA4B,GAAA;QAClC,MAAM,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,WAAW,CAAgB;QAC5E,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,SAAS;QAC/D,IAAI,WAAW,EAAE;YACf,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,YAAY,EAAE,OAAO,EAAE,WAAW,CAAC;QAChE;AACA,QAAA,OAAO,YAAY;IACrB;IAEQ,6BAA6B,GAAA;QACnC,IAAI,CAAC,sBAAsB,CAAC,OAAO,CAAC,CAAC,YAAY,KAAI;AACnD,YAAA,IAAI,YAAY,CAAC,UAAU,EAAE;gBAC3B,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,YAAY,CAAC,UAAU,EAAE,YAAY,CAAC;YAClE;AACF,QAAA,CAAC,CAAC;AACF,QAAA,IAAI,CAAC,sBAAsB,GAAG,EAAE;IAClC;IAEQ,qBAAqB,GAAA;AAC3B,QAAA,IAAI,IAAI,CAAC,gBAAgB,CAAC,MAAM,KAAK,CAAC,IAAI,IAAI,CAAC,sBAAsB,CAAC,MAAM,KAAK,CAAC,EAAE;YAClF;QACF;AACA,QAAA,IAAI,CAAC,gBAAgB,GAAG,EAAE;AAC1B,QAAA,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,cAAc,CAAC,aAAa,EAAE,aAAa,EAAE,EAAE,CAAC;QAC/E,IAAI,CAAC,6BAA6B,EAAE;IACtC;IAEQ,iBAAiB,CAAC,QAAkB,EAAE,OAAiB,EAAA;QAC7D,IAAI,QAAQ,CAAC,MAAM,KAAK,OAAO,CAAC,MAAM,EAAE;AACtC,YAAA,OAAO,KAAK;QACd;AACA,QAAA,OAAO,QAAQ,CAAC,KAAK,CAAC,CAAC,OAAO,EAAE,KAAK,KAAK,OAAO,KAAK,OAAO,CAAC,KAAK,CAAC,CAAC;IACvE;uGA3FW,iCAAiC,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAjC,iCAAiC,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kCAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAjC,iCAAiC,EAAA,UAAA,EAAA,CAAA;kBAJ7C,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,QAAQ,EAAE;AACX,iBAAA;;;ACJD;;;AAGG;AAUG,MAAO,8BAA+B,SAAQ,yBAAyB,CAAA;uGAAhE,8BAA8B,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAA9B,8BAA8B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,yBAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECnB3C,+1BAqBA,EAAA,MAAA,EAAA,CAAA,0OAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDLQ,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAGP,8BAA8B,EAAA,UAAA,EAAA,CAAA;kBAT1C,SAAS;iCACI,IAAI,EAAA,QAAA,EACN,yBAAyB,EAAA,OAAA,EAGxB;wBACL,YAAY;AACf,qBAAA,EAAA,QAAA,EAAA,+1BAAA,EAAA,MAAA,EAAA,CAAA,0OAAA,CAAA,EAAA;;;AEHC,SAAU,4BAA4B,CAAC,MAAmC,EAAA;IAC9E,OAAO;AACL,QAAA;AACE,YAAA,OAAO,EAAE,8BAA8B;AACvC,YAAA,QAAQ,EAAE;AACX;KACF;AACH;AAEM,SAAU,mCAAmC,CAAC,MAAoC,EAAA;IACtF,OAAO;AACL,QAAA;AACE,YAAA,OAAO,EAAE,8BAA8B;YACvC,QAAQ,EAAE,MAAM,IAAI;AACrB;KACF;AACH;;AC9BA;;AAEG;;ACFH;;AAEG;;;;"}

package/package.json

@@ -1,13 +1,19 @@
 {
   "name": "@lagoshny/ngx-validation-messages",
-  "version": "21.0.3",
+  "version": "21.1.0",
   "description": "This module allows to simplify display form validator validation messages using single component.",
   "readme": "README.md",
   "author": "Ilya Lagoshny <ilya@lagoshny.ru>",
   "license": "MIT",
   "peerDependencies": {
     "@angular/common": ">=12.x.x",
-    "@angular/core": ">=12.x.x"
+    "@angular/core": ">=12.x.x",
+    "@angular/material": ">=12.x.x"
+  },
+  "peerDependenciesMeta": {
+    "@angular/material": {
+      "optional": true
+    }
   },
   "keywords": [
     "Angular validation",
@@ -54,5 +60,6 @@
       "types": "./types/lagoshny-ngx-validation-messages.d.ts",
       "default": "./fesm2022/lagoshny-ngx-validation-messages.mjs"
     }
-  }
+  },
+  "type": "module"
 }

package/types/lagoshny-ngx-validation-messages.d.ts

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, ElementRef, AfterViewInit, Provider } from '@angular/core';
+import { InjectionToken, ElementRef, AfterViewInit, QueryList, DoCheck, OnDestroy, Provider } from '@angular/core';
+import { AbstractControl } from '@angular/forms';
 
 declare const NGX_VALIDATION_MESSAGES_CONFIG: InjectionToken<NgxValidationMessagesConfig>;
 interface NgxValidationMessagesConfig {
@@ -38,104 +39,89 @@ declare class NgxCustomMessageComponent {
 }
 
 /**
- * Service allows getting validation messages from client's settings.
- * Injecting {@link NgxValidationMessagesConfig} to get client's configuration with validation messages.
+ * Allows to specify custom validator message to override default message.
+ *
+ * It's alternative for {@link NgxCustomMessageComponent}.
+ * If you want to use standard html tags to define custom message, use this directive on html tag within
+ * {@link NgxValidationMessagesComponent} specifying validator name as directive parameter,
+ * otherwise use {@link NgxCustomMessageComponent}.
  */
-declare class NgxValidationMessagesService {
-    private messagesConfig;
-    static SERVER_ERRORS: string;
-    /**
-     * Regular expression to find params placeholder '#[paramName]'.
-     */
-    private paramsRegExp;
-    constructor(messagesConfig: NgxValidationMessagesConfig);
+declare class NgxValidatorNameDirective implements AfterViewInit {
+    private elem;
     /**
-     * Get validation message for specified validator.
-     *
-     * @param validatorName for which to get message
-     * @param params passed from validator for more detailed validation message
-     *
-     * @returns string validation message
+     * The name of the validator for which you want to override the message.
      */
-    getValidatorErrorMessages(validatorName: string, params?: object): string;
-    expandParameterizedTemplateMessage(msg: string, params: object): string;
+    validatorName: string | undefined;
     /**
-     * A utilitarian method to get a property from an object.
-     * if there is no property, an empty string is returned.
-     *
-     * @param obj from which the property must be obtained
-     * @param prop property name
-     *
-     * @return property value or empty string
+     * Contains overridden message for validator.
      */
-    private getParameter;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgxValidationMessagesService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<NgxValidationMessagesService>;
+    message: string | undefined;
+    constructor(elem: ElementRef);
+    ngAfterViewInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgxValidatorNameDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgxValidatorNameDirective, "[ngxValidatorName]", never, { "validatorName": { "alias": "validatorName"; "required": false; }; }, {}, never, never, true, never>;
 }
 
-/**
- * Component for displaying validation messages, supports child components of type {@link NgxCustomMessageComponent}
- * and html elements with directive {@link NgxValidatorNameDirective} to override validation messages.
- */
-declare class NgxValidationMessagesComponent implements AfterViewInit {
-    ngxValidationConfig: NgxValidationMessagesConfig;
-    private ngxValidationMessagesService;
-    private directiveElementRef;
+declare abstract class NgxValidationMessagesBase {
     /**
      * Form control for which need to show validation messages.
      */
-    formControl: any;
+    formControl: AbstractControl | null;
     /**
      * Contains {@link NgxCustomMessageComponent} if present.
      */
-    customMsgComponent: any;
+    customMsgComponent: QueryList<NgxCustomMessageComponent>;
     /**
      * Contains {@link NgxValidatorNameDirective} if present.
      */
-    customMsgDirective: any;
-    isMaterialError: boolean;
+    customMsgDirective: QueryList<NgxValidatorNameDirective>;
     /**
      * Key to get default validation message.
      */
     private defaultError;
-    private materialErrorElement;
-    constructor(ngxValidationConfig: NgxValidationMessagesConfig, ngxValidationMessagesService: NgxValidationMessagesService, directiveElementRef: ElementRef);
-    ngAfterViewInit(): void;
+    readonly ngxValidationConfig: NgxValidationMessagesConfig;
+    private readonly ngxValidationMessagesService;
     /**
      * Get all validation messages for specified form control.
      */
     get errorMessages(): Array<string>;
     private processingCustomMessages;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgxValidationMessagesComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgxValidationMessagesComponent, "ngx-validation-messages, [ngxValidationMessages]", never, { "formControl": { "alias": "for"; "required": false; }; }, {}, ["customMsgComponent", "customMsgDirective"], ["*"], true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgxValidationMessagesBase, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgxValidationMessagesBase, never, never, { "formControl": { "alias": "for"; "required": false; }; }, {}, ["customMsgComponent", "customMsgDirective"], never, true, never>;
 }
 
 /**
- * Allows to specify custom validator message to override default message.
- *
- * It's alternative for {@link NgxCustomMessageComponent}.
- * If you want to use standard html tags to define custom message, use this directive on html tag within
- * {@link NgxValidationMessagesComponent} specifying validator name as directive parameter,
- * otherwise use {@link NgxCustomMessageComponent}.
+ * Attribute directive for Material form fields.
+ * Usage: <mat-error ngxValidationMessages [for]="form.get('email')"></mat-error>
  */
-declare class NgxValidatorNameDirective implements AfterViewInit {
-    private elem;
-    /**
-     * The name of the validator for which you want to override the message.
-     */
-    validatorName: string | undefined;
-    /**
-     * Contains overridden message for validator.
-     */
-    message: string | undefined;
-    constructor(elem: ElementRef);
-    ngAfterViewInit(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgxValidatorNameDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgxValidatorNameDirective, "[ngxValidatorName]", never, { "validatorName": { "alias": "validatorName"; "required": false; }; }, {}, never, never, true, never>;
+declare class NgxMatValidationMessagesDirective extends NgxValidationMessagesBase implements DoCheck, OnDestroy {
+    private readonly hostElementRef;
+    private readonly renderer;
+    private renderedMessages;
+    private dynamicMessageElements;
+    ngDoCheck(): void;
+    ngOnDestroy(): void;
+    private renderMessages;
+    private syncAdditionalMessageElements;
+    private createDynamicMatErrorElement;
+    private destroyDynamicMessageElements;
+    private resetRenderedMessages;
+    private isEqualMessageSet;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgxMatValidationMessagesDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgxMatValidationMessagesDirective, "mat-error[ngxValidationMessages]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Component for displaying validation messages, supports child components of type {@link NgxCustomMessageComponent}
+ * and html elements with directive {@link NgxValidatorNameDirective} to override validation messages.
+ */
+declare class NgxValidationMessagesComponent extends NgxValidationMessagesBase {
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgxValidationMessagesComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgxValidationMessagesComponent, "ngx-validation-messages", never, {}, {}, never, ["*"], true, never>;
 }
 
 declare function provideNgxValidationMessages(config: NgxValidationMessagesConfig): Provider[];
 declare function provideNgxValidationMessagesTesting(config?: NgxValidationMessagesConfig): Provider[];
 
-export { NGX_VALIDATION_MESSAGES_CONFIG, NgxCustomMessageComponent, NgxValidationMessagesComponent, NgxValidatorNameDirective, provideNgxValidationMessages, provideNgxValidationMessagesTesting };
+export { NGX_VALIDATION_MESSAGES_CONFIG, NgxCustomMessageComponent, NgxMatValidationMessagesDirective, NgxValidationMessagesComponent, NgxValidatorNameDirective, provideNgxValidationMessages, provideNgxValidationMessagesTesting };
 export type { NgxValidationMessagesConfig };