@lagoshny/ngx-validation-messages 3.0.0 → 16.0.0

package/{fesm2020 → fesm2022}/lagoshny-ngx-validation-messages.mjs

@@ -5,273 +5,304 @@ import { Component, Input, ViewChild, Directive, InjectionToken, Injectable, Inj
 import * as i3 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
 
-/**
- * Component allows specifying custom validation message for the specified
- * validator to override default message.
- *
- * Use this component as child in {@link NgxValidationMessagesComponent}.
- */
-class NgxCustomMessageComponent {
-}
-NgxCustomMessageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: NgxCustomMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NgxCustomMessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: NgxCustomMessageComponent, 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: "13.1.1", ngImport: i0, type: NgxCustomMessageComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ngx-custom-message',
-                    template: `
-    <div #message>
-      <ng-content></ng-content>
-    </div>`
-                }]
-        }], propDecorators: { validatorName: [{
-                type: Input,
-                args: ['forValidator']
-            }], message: [{
-                type: ViewChild,
-                args: ['message']
+/**
+ * Component allows specifying custom validation message for the specified
+ * validator to override default message.
+ *
+ * Use this component as child in {@link NgxValidationMessagesComponent}.
+ */
+class NgxCustomMessageComponent {
+    /**
+     * The name of the validator for which you want to override the message.
+     */
+    validatorName;
+    /**
+     * Contains overridden message for validator.
+     */
+    message;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgxCustomMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NgxCustomMessageComponent, 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: "16.2.12", ngImport: i0, type: NgxCustomMessageComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngx-custom-message',
+                    template: `
+    <div #message>
+      <ng-content></ng-content>
+    </div>`
+                }]
+        }], propDecorators: { validatorName: [{
+                type: Input,
+                args: ['forValidator']
+            }], message: [{
+                type: ViewChild,
+                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 {
-    constructor(elem) {
-        this.elem = elem;
-    }
-    ngAfterViewInit() {
-        this.message = this.elem.nativeElement.innerText;
-    }
-}
-NgxValidatorNameDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: NgxValidatorNameDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-NgxValidatorNameDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: NgxValidatorNameDirective, selector: "[ngxValidatorName]", inputs: { validatorName: "validatorName" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: NgxValidatorNameDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[ngxValidatorName]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { validatorName: [{
-                type: Input
+/**
+ * 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: "16.2.12", ngImport: i0, type: NgxValidatorNameDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: NgxValidatorNameDirective, selector: "[ngxValidatorName]", inputs: { validatorName: "validatorName" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgxValidatorNameDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngxValidatorName]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { validatorName: [{
+                type: Input
             }] } });
 
 const NGX_VALIDATION_MESSAGES_CONFIG = new InjectionToken('NgxValidationMessagesConfig');
 
-/**
- * Service allows getting validation messages from client's settings.
- * Injecting {@link NgxValidationMessagesConfig} to get client's configuration with validation messages.
- */
-class NgxValidationMessagesService {
-    constructor(messagesConfig) {
-        this.messagesConfig = messagesConfig;
-        /**
-         * Regular expression to find params placeholder '#[paramName]'.
-         */
-        this.paramsRegExp = new RegExp(/#[[a-zA-Z_\\-]*]/);
-    }
-    /**
-     * 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
-     */
-    getValidatorErrorMessages(validatorName, params) {
-        const validationMessages = this.messagesConfig.messages;
-        const validationMessage = validationMessages[validatorName];
-        if (!validationMessage) {
-            throw new Error('Validation message for validator: ' + validatorName
-                + ' cannot be found, please check validation message key for validator it is case sensitive.');
-        }
-        if (params) {
-            return this.expandParameterizedTemplateMessage(validationMessage, params);
-        }
-        return validationMessage;
-    }
-    expandParameterizedTemplateMessage(msg, params) {
-        while (this.paramsRegExp.test(msg)) {
-            const foundParams = this.paramsRegExp.exec(msg);
-            foundParams.forEach(value => {
-                const paramPlaceholder = value;
-                value = value.replace('#[', '').replace(']', '');
-                msg = msg.replace(paramPlaceholder, this.getParameter(params, value));
-            });
-        }
-        return msg;
-    }
-    /**
-     * 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
-     */
-    getParameter(obj, prop) {
-        return prop.split('.')
-            .reduce((m, i) => {
-            return m && typeof m === 'object' ? m[i] : '';
-        }, obj);
-    }
-}
-NgxValidationMessagesService.SERVER_ERRORS = 'serverErrors';
-NgxValidationMessagesService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: NgxValidationMessagesService, deps: [{ token: NGX_VALIDATION_MESSAGES_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable });
-NgxValidationMessagesService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: NgxValidationMessagesService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: NgxValidationMessagesService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [NGX_VALIDATION_MESSAGES_CONFIG]
+/**
+ * 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;
+    }
+    /**
+     * 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
+     */
+    getValidatorErrorMessages(validatorName, params) {
+        const validationMessages = this.messagesConfig.messages;
+        const validationMessage = validationMessages[validatorName];
+        if (!validationMessage) {
+            throw new Error('Validation message for validator: ' + validatorName
+                + ' cannot be found, please check validation message key for validator it is case sensitive.');
+        }
+        if (params) {
+            return this.expandParameterizedTemplateMessage(validationMessage, params);
+        }
+        return validationMessage;
+    }
+    expandParameterizedTemplateMessage(msg, params) {
+        while (this.paramsRegExp.test(msg)) {
+            const foundParams = this.paramsRegExp.exec(msg);
+            foundParams.forEach(value => {
+                const paramPlaceholder = value;
+                value = value.replace('#[', '').replace(']', '');
+                msg = msg.replace(paramPlaceholder, this.getParameter(params, value));
+            });
+        }
+        return msg;
+    }
+    /**
+     * 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
+     */
+    getParameter(obj, prop) {
+        return prop.split('.')
+            .reduce((m, i) => {
+            return m && typeof m === 'object' ? m[i] : '';
+        }, obj);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgxValidationMessagesService, deps: [{ token: NGX_VALIDATION_MESSAGES_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgxValidationMessagesService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgxValidationMessagesService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ 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.
- */
-class NgxValidationMessagesComponent {
-    constructor(ngxValidationConfig, ngxValidationMessagesService, directiveElementRef) {
-        this.ngxValidationConfig = ngxValidationConfig;
-        this.ngxValidationMessagesService = ngxValidationMessagesService;
-        this.directiveElementRef = directiveElementRef;
-        this.isMaterialError = false;
-        /**
-         * Key to get default validation message.
-         */
-        this.defaultError = 'error';
-        this.materialErrorElement = 'MAT-ERROR';
-    }
-    ngAfterViewInit() {
-        if (this.directiveElementRef && this.directiveElementRef.nativeElement
-            && this.directiveElementRef.nativeElement.nodeName) {
-            this.isMaterialError = this.materialErrorElement.toLocaleUpperCase()
-                === this.directiveElementRef.nativeElement.nodeName.toLocaleUpperCase();
-        }
-    }
-    /**
-     * Get all validation messages for specified form control.
-     */
-    get errorMessages() {
-        const result = [];
-        if (!this.formControl || !this.formControl.errors) {
-            return result;
-        }
-        if (this.customMsgComponent && this.customMsgComponent.length > 0) {
-            this.processingCustomMessages(this.customMsgComponent);
-        }
-        if (this.customMsgDirective && this.customMsgDirective.length > 0) {
-            this.processingCustomMessages(this.customMsgDirective);
-        }
-        for (const property in this.formControl.errors) {
-            if (this.formControl.errors.hasOwnProperty(property)
-                && (this.formControl.touched || this.formControl.dirty)) {
-                if (this.formControl.errors[property].customMessages instanceof Array) {
-                    result.push(...this.formControl.errors[property].customMessages);
-                    continue;
-                }
-                if (this.formControl.errors[property].customMessage) {
-                    result.push(this.formControl.errors[property].customMessage);
-                    continue;
-                }
-                const validationMessage = this.ngxValidationMessagesService.getValidatorErrorMessages(property, this.formControl.errors[property]);
-                result.push(validationMessage || this.formControl.errors[property].message
-                    || this.ngxValidationMessagesService.getValidatorErrorMessages(this.defaultError));
-            }
-        }
-        return result;
-    }
-    processingCustomMessages(customMessage) {
-        customMessage.forEach((msg) => {
-            if (!this.formControl.errors[msg.validatorName]) {
-                return;
-            }
-            let message = (msg instanceof NgxCustomMessageComponent)
-                ? msg.message.nativeElement.innerText : msg.message;
-            message = this.ngxValidationMessagesService.expandParameterizedTemplateMessage(message, this.formControl.errors[msg.validatorName]);
-            typeof this.formControl.errors[msg.validatorName] === 'object'
-                ? this.formControl.errors[msg.validatorName].customMessage = message
-                : this.formControl.errors[msg.validatorName] = { customMessage: message };
-        });
-    }
-}
-NgxValidationMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: NgxValidationMessagesComponent, deps: [{ token: NGX_VALIDATION_MESSAGES_CONFIG }, { token: NgxValidationMessagesService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-NgxValidationMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: NgxValidationMessagesComponent, 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-->\r\n<div *ngIf=\"!formControl && customMsgComponent.length == 0 && customMsgDirective.length == 0\"\r\n     [ngClass]=\"ngxValidationConfig?.validationMessagesStyle?.blockClassNames || 'ngx_vm__def_error_block'\">\r\n <span [ngClass]=\"ngxValidationConfig?.validationMessagesStyle?.textClassNames || 'ngx_vm__def_error_text'\">\r\n   <ng-content></ng-content>\r\n </span>\r\n</div>\r\n\r\n<ng-container *ngIf=\"errorMessages.length > 0\">\r\n\r\n  <!--To show error messages in material ui style-->\r\n  <ng-container *ngIf=\"isMaterialError; else withoutMaterial\">\r\n    <ng-container *ngFor=\"let message of errorMessages\">\r\n      <mat-error>{{ message }}</mat-error>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <!--To show error messages in user style-->\r\n  <ng-template #withoutMaterial>\r\n    <div [ngClass]=\"ngxValidationConfig?.validationMessagesStyle?.blockClassNames || 'ngx_vm__def_error_block'\">\r\n      <div *ngFor=\"let message of errorMessages\">\r\n        <span [ngClass]=\"ngxValidationConfig?.validationMessagesStyle?.textClassNames || 'ngx_vm__def_error_text'\">\r\n          {{ message }}\r\n        </span>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n\r\n</ng-container>\r\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"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.MatError, selector: "mat-error", inputs: ["id"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: NgxValidationMessagesComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ngx-validation-messages, [ngxValidationMessages]', template: "<!--To show error messages standalone without component-->\r\n<div *ngIf=\"!formControl && customMsgComponent.length == 0 && customMsgDirective.length == 0\"\r\n     [ngClass]=\"ngxValidationConfig?.validationMessagesStyle?.blockClassNames || 'ngx_vm__def_error_block'\">\r\n <span [ngClass]=\"ngxValidationConfig?.validationMessagesStyle?.textClassNames || 'ngx_vm__def_error_text'\">\r\n   <ng-content></ng-content>\r\n </span>\r\n</div>\r\n\r\n<ng-container *ngIf=\"errorMessages.length > 0\">\r\n\r\n  <!--To show error messages in material ui style-->\r\n  <ng-container *ngIf=\"isMaterialError; else withoutMaterial\">\r\n    <ng-container *ngFor=\"let message of errorMessages\">\r\n      <mat-error>{{ message }}</mat-error>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <!--To show error messages in user style-->\r\n  <ng-template #withoutMaterial>\r\n    <div [ngClass]=\"ngxValidationConfig?.validationMessagesStyle?.blockClassNames || 'ngx_vm__def_error_block'\">\r\n      <div *ngFor=\"let message of errorMessages\">\r\n        <span [ngClass]=\"ngxValidationConfig?.validationMessagesStyle?.textClassNames || 'ngx_vm__def_error_text'\">\r\n          {{ message }}\r\n        </span>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n\r\n</ng-container>\r\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: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [NGX_VALIDATION_MESSAGES_CONFIG]
-                }] }, { type: NgxValidationMessagesService }, { type: i0.ElementRef }]; }, propDecorators: { formControl: [{
-                type: Input,
-                args: ['for']
-            }], customMsgComponent: [{
-                type: ContentChildren,
-                args: [NgxCustomMessageComponent]
-            }], customMsgDirective: [{
-                type: ContentChildren,
-                args: [NgxValidatorNameDirective]
+/**
+ * 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 {
+    ngxValidationConfig;
+    ngxValidationMessagesService;
+    directiveElementRef;
+    /**
+     * Form control for which need to show validation messages.
+     */
+    formControl;
+    /**
+     * Contains {@link NgxCustomMessageComponent} if present.
+     */
+    customMsgComponent;
+    /**
+     * 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();
+        }
+    }
+    /**
+     * Get all validation messages for specified form control.
+     */
+    get errorMessages() {
+        const result = [];
+        if (!this.formControl || !this.formControl.errors) {
+            return result;
+        }
+        if (this.customMsgComponent && this.customMsgComponent.length > 0) {
+            this.processingCustomMessages(this.customMsgComponent);
+        }
+        if (this.customMsgDirective && this.customMsgDirective.length > 0) {
+            this.processingCustomMessages(this.customMsgDirective);
+        }
+        for (const property in this.formControl.errors) {
+            if (this.formControl.errors.hasOwnProperty(property)
+                && (this.formControl.touched || this.formControl.dirty)) {
+                if (this.formControl.errors[property].customMessages instanceof Array) {
+                    result.push(...this.formControl.errors[property].customMessages);
+                    continue;
+                }
+                if (this.formControl.errors[property].customMessage) {
+                    result.push(this.formControl.errors[property].customMessage);
+                    continue;
+                }
+                const validationMessage = this.ngxValidationMessagesService.getValidatorErrorMessages(property, this.formControl.errors[property]);
+                result.push(validationMessage || this.formControl.errors[property].message
+                    || this.ngxValidationMessagesService.getValidatorErrorMessages(this.defaultError));
+            }
+        }
+        return result;
+    }
+    processingCustomMessages(customMessage) {
+        customMessage.forEach((msg) => {
+            if (!this.formControl.errors[msg.validatorName]) {
+                return;
+            }
+            let message = (msg instanceof NgxCustomMessageComponent)
+                ? msg.message.nativeElement.innerText : msg.message;
+            message = this.ngxValidationMessagesService.expandParameterizedTemplateMessage(message, this.formControl.errors[msg.validatorName]);
+            typeof this.formControl.errors[msg.validatorName] === 'object'
+                ? this.formControl.errors[msg.validatorName].customMessage = message
+                : this.formControl.errors[msg.validatorName] = { customMessage: message };
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgxValidationMessagesComponent, deps: [{ token: NGX_VALIDATION_MESSAGES_CONFIG }, { token: NgxValidationMessagesService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NgxValidationMessagesComponent, 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<div *ngIf=\"!formControl && customMsgComponent.length == 0 && customMsgDirective.length == 0\"\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<ng-container *ngIf=\"errorMessages.length > 0\">\n\n  <!--To show error messages in material ui style-->\n  <ng-container *ngIf=\"isMaterialError; else withoutMaterial\">\n    <ng-container *ngFor=\"let message of errorMessages\">\n      <mat-error>{{ message }}</mat-error>\n    </ng-container>\n  </ng-container>\n\n  <!--To show error messages in user style-->\n  <ng-template #withoutMaterial>\n    <div [ngClass]=\"ngxValidationConfig?.validationMessagesStyle?.blockClassNames || 'ngx_vm__def_error_block'\">\n      <div *ngFor=\"let message of errorMessages\">\n        <span [ngClass]=\"ngxValidationConfig?.validationMessagesStyle?.textClassNames || 'ngx_vm__def_error_text'\">\n          {{ message }}\n        </span>\n      </div>\n    </div>\n  </ng-template>\n\n</ng-container>\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: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgxValidationMessagesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-validation-messages, [ngxValidationMessages]', template: "<!--To show error messages standalone without component-->\n<div *ngIf=\"!formControl && customMsgComponent.length == 0 && customMsgDirective.length == 0\"\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<ng-container *ngIf=\"errorMessages.length > 0\">\n\n  <!--To show error messages in material ui style-->\n  <ng-container *ngIf=\"isMaterialError; else withoutMaterial\">\n    <ng-container *ngFor=\"let message of errorMessages\">\n      <mat-error>{{ message }}</mat-error>\n    </ng-container>\n  </ng-container>\n\n  <!--To show error messages in user style-->\n  <ng-template #withoutMaterial>\n    <div [ngClass]=\"ngxValidationConfig?.validationMessagesStyle?.blockClassNames || 'ngx_vm__def_error_block'\">\n      <div *ngFor=\"let message of errorMessages\">\n        <span [ngClass]=\"ngxValidationConfig?.validationMessagesStyle?.textClassNames || 'ngx_vm__def_error_text'\">\n          {{ message }}\n        </span>\n      </div>\n    </div>\n  </ng-template>\n\n</ng-container>\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: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [NGX_VALIDATION_MESSAGES_CONFIG]
+                }] }, { type: NgxValidationMessagesService }, { type: i0.ElementRef }]; }, propDecorators: { formControl: [{
+                type: Input,
+                args: ['for']
+            }], customMsgComponent: [{
+                type: ContentChildren,
+                args: [NgxCustomMessageComponent]
+            }], customMsgDirective: [{
+                type: ContentChildren,
+                args: [NgxValidatorNameDirective]
             }] } });
 
-class NgxValidationMessagesModule {
-    static forRoot(config) {
-        return {
-            ngModule: NgxValidationMessagesModule,
-            providers: [
-                NgxValidationMessagesService,
-                {
-                    provide: NGX_VALIDATION_MESSAGES_CONFIG,
-                    useValue: config
-                }
-            ]
-        };
-    }
-}
-NgxValidationMessagesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: NgxValidationMessagesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NgxValidationMessagesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: NgxValidationMessagesModule, declarations: [NgxValidationMessagesComponent,
-        NgxCustomMessageComponent,
-        NgxValidatorNameDirective], imports: [CommonModule,
-        MatFormFieldModule], exports: [NgxValidationMessagesComponent,
-        NgxCustomMessageComponent,
-        NgxValidatorNameDirective] });
-NgxValidationMessagesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: NgxValidationMessagesModule, imports: [[
-            CommonModule,
-            MatFormFieldModule
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: NgxValidationMessagesModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        MatFormFieldModule
-                    ],
-                    declarations: [
-                        NgxValidationMessagesComponent,
-                        NgxCustomMessageComponent,
-                        NgxValidatorNameDirective
-                    ],
-                    exports: [
-                        NgxValidationMessagesComponent,
-                        NgxCustomMessageComponent,
-                        NgxValidatorNameDirective
-                    ]
-                }]
+class NgxValidationMessagesModule {
+    static forRoot(config) {
+        return {
+            ngModule: NgxValidationMessagesModule,
+            providers: [
+                NgxValidationMessagesService,
+                {
+                    provide: NGX_VALIDATION_MESSAGES_CONFIG,
+                    useValue: config
+                }
+            ]
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgxValidationMessagesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: NgxValidationMessagesModule, declarations: [NgxValidationMessagesComponent,
+            NgxCustomMessageComponent,
+            NgxValidatorNameDirective], imports: [CommonModule,
+            MatFormFieldModule], exports: [NgxValidationMessagesComponent,
+            NgxCustomMessageComponent,
+            NgxValidatorNameDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgxValidationMessagesModule, imports: [CommonModule,
+            MatFormFieldModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgxValidationMessagesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        MatFormFieldModule,
+                    ],
+                    declarations: [
+                        NgxValidationMessagesComponent,
+                        NgxCustomMessageComponent,
+                        NgxValidatorNameDirective
+                    ],
+                    exports: [
+                        NgxValidationMessagesComponent,
+                        NgxCustomMessageComponent,
+                        NgxValidatorNameDirective
+                    ]
+                }]
         }] });
 
-/*
- * Public API Surface of ngx-validation-messages
+/*
+ * Public API Surface of ngx-validation-messages
  */
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { NGX_VALIDATION_MESSAGES_CONFIG, NgxCustomMessageComponent, NgxValidationMessagesComponent, NgxValidationMessagesModule, NgxValidatorNameDirective };