@acorex/components 7.17.21 → 7.17.23

package/fesm2022/acorex-components-form.mjs

@@ -1,10 +1,9 @@
-import * as i1 from '@acorex/components/common';
-import { MXBaseComponent, AXEvent, AXValuableComponent } from '@acorex/components/common';
+import * as i1$1 from '@acorex/components/common';
+import { MXBaseComponent, AXValuableComponent, AXEvent } from '@acorex/components/common';
+import { AXLabelComponent } from '@acorex/components/label';
+import { AXUnsubscriber } from '@acorex/core/utils';
 import * as i0 from '@angular/core';
-import { Component, ViewEncapsulation, ChangeDetectionStrategy, EventEmitter, Input, Output, inject, InjectionToken, Optional, Inject, NgModule } from '@angular/core';
-import { AX_GLOBAL_CONFIG } from '@acorex/core/config';
-import { AXTranslator } from '@acorex/core/translation';
-import { set } from 'lodash-es';
+import { inject, Component, ViewEncapsulation, ChangeDetectionStrategy, ContentChild, EventEmitter, Input, Output, ContentChildren, InjectionToken, Optional, Inject, Directive, NgModule } from '@angular/core';
 import * as i4 from '@acorex/components/alert';
 import { AXAlertModule } from '@acorex/components/alert';
 import * as i5 from '@acorex/components/button';
@@ -13,16 +12,44 @@ import * as i3 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i1$1 from '@acorex/components/toast';
+import * as i1 from '@acorex/components/toast';
+import { AXTranslator } from '@acorex/core/translation';
+import { AXValidationModule } from '@acorex/core/validation';
 
 class AXFormFieldComponent extends MXBaseComponent {
+    constructor() {
+        super(...arguments);
+        this.unsubscriber = inject(AXUnsubscriber);
+    }
+    ngAfterContentInit() {
+        this.autoSetRequired();
+        this.input?.validationRulesChange
+            .pipe(this.unsubscriber.takeUntilDestroy)
+            .subscribe(() => {
+            this.autoSetRequired();
+        });
+    }
+    autoSetRequired() {
+        if (this.label && this.input) {
+            if (this.label.required == null || this.label['autoSetRequired']) {
+                this.label.required = this.input.isRequired;
+                this.label['autoSetRequired'] = true;
+            }
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AXFormFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: AXFormFieldComponent, selector: "ax-form-field", usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [".ax-dark ax-form.ax-form-normal .ax-error-message{border-color:rgba(var(--ax-color-danger-500));background-color:rgba(var(--ax-color-danger-200));color:rgba(var(--ax-color-danger-fore-tint))}.ax-dark ax-form.ax-form-normal .ax-error-message:before,.ax-dark ax-form.ax-form-normal .ax-error-message:after{border-bottom-color:rgba(var(--ax-color-danger-500))}.ax-dark ax-form.ax-form-normal .ax-error-message:before{border-bottom-color:rgba(var(--ax-color-danger-500))}.ax-dark ax-form form.ax-float-error .ax-error-message{border-color:rgba(var(--ax-color-danger-700));background-color:rgba(var(--ax-color-danger-700));color:rgba(var(--ax-color-danger-fore))}.ax-dark ax-form form.ax-float-error .ax-error-message:before,.ax-dark ax-form form.ax-float-error .ax-error-message:after{border-bottom-color:rgba(var(--ax-color-danger-700))}.ax-dark ax-form form.ax-float-error .ax-error-message:before{border-bottom-color:rgba(var(--ax-color-danger-700))}ax-form-field{position:relative;display:block;width:100%}ax-form-field .ax-error-message{margin-top:.25rem;margin-bottom:.25rem;display:block;font-size:.75rem;line-height:1rem}ax-form{width:100%}ax-form form.ax-bottom-error .ax-error-message{color:rgba(var(--ax-color-danger-500))}ax-form form.ax-float-error .ax-error-message{position:absolute;bottom:-2.5rem;z-index:10;display:block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;border-radius:.375rem;border-width:1px;border-color:rgba(var(--ax-color-danger-500));background-color:rgba(var(--ax-color-danger-500));padding:.25rem .5rem;font-weight:400;color:rgba(var(--ax-color-danger-fore))}ax-form form.ax-float-error .ax-error-message:before,ax-form form.ax-float-error .ax-error-message:after{pointer-events:none;position:absolute;bottom:100%;inset-inline-start:.75rem;z-index:20;height:0px;width:0px;border-bottom-color:rgba(var(--ax-color-danger-500));border-inline-end-color:transparent;border-inline-start-color:transparent;border-top-color:transparent;content:\"\"}ax-form form.ax-float-error .ax-error-message:before{-webkit-margin-start:-1px;margin-inline-start:-1px;border-width:4px;border-bottom-color:rgba(var(--ax-color-danger-500))}ax-form form.ax-float-error .ax-error-message:after{border-width:4px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: AXFormFieldComponent, selector: "ax-form-field", providers: [AXUnsubscriber], queries: [{ propertyName: "input", first: true, predicate: AXValuableComponent, descendants: true }, { propertyName: "label", first: true, predicate: AXLabelComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [".ax-dark ax-form.ax-form-normal .ax-error-message{border-color:rgba(var(--ax-color-danger-500));background-color:rgba(var(--ax-color-danger-200));color:rgba(var(--ax-color-danger-fore-tint))}.ax-dark ax-form.ax-form-normal .ax-error-message:before,.ax-dark ax-form.ax-form-normal .ax-error-message:after{border-bottom-color:rgba(var(--ax-color-danger-500))}.ax-dark ax-form.ax-form-normal .ax-error-message:before{border-bottom-color:rgba(var(--ax-color-danger-500))}.ax-dark ax-form form.ax-float-error .ax-error-message{border-color:rgba(var(--ax-color-danger-700));background-color:rgba(var(--ax-color-danger-700));color:rgba(var(--ax-color-danger-fore))}.ax-dark ax-form form.ax-float-error .ax-error-message:before,.ax-dark ax-form form.ax-float-error .ax-error-message:after{border-bottom-color:rgba(var(--ax-color-danger-700))}.ax-dark ax-form form.ax-float-error .ax-error-message:before{border-bottom-color:rgba(var(--ax-color-danger-700))}ax-form-field{position:relative;display:block;width:100%}ax-form-field .ax-error-message{margin-top:.25rem;margin-bottom:.25rem;display:block;font-size:.75rem;line-height:1rem}ax-form{width:100%}ax-form form.ax-bottom-error .ax-error-message{color:rgba(var(--ax-color-danger-500))}ax-form form.ax-float-error .ax-error-message{position:absolute;bottom:-2.5rem;z-index:10;display:block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;border-radius:.375rem;border-width:1px;border-color:rgba(var(--ax-color-danger-500));background-color:rgba(var(--ax-color-danger-500));padding:.25rem .5rem;font-weight:400;color:rgba(var(--ax-color-danger-fore))}ax-form form.ax-float-error .ax-error-message:before,ax-form form.ax-float-error .ax-error-message:after{pointer-events:none;position:absolute;bottom:100%;inset-inline-start:.75rem;z-index:20;height:0px;width:0px;border-bottom-color:rgba(var(--ax-color-danger-500));border-inline-end-color:transparent;border-inline-start-color:transparent;border-top-color:transparent;content:\"\"}ax-form form.ax-float-error .ax-error-message:before{-webkit-margin-start:-1px;margin-inline-start:-1px;border-width:4px;border-bottom-color:rgba(var(--ax-color-danger-500))}ax-form form.ax-float-error .ax-error-message:after{border-width:4px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AXFormFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-form-field', template: `<ng-content></ng-content>`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".ax-dark ax-form.ax-form-normal .ax-error-message{border-color:rgba(var(--ax-color-danger-500));background-color:rgba(var(--ax-color-danger-200));color:rgba(var(--ax-color-danger-fore-tint))}.ax-dark ax-form.ax-form-normal .ax-error-message:before,.ax-dark ax-form.ax-form-normal .ax-error-message:after{border-bottom-color:rgba(var(--ax-color-danger-500))}.ax-dark ax-form.ax-form-normal .ax-error-message:before{border-bottom-color:rgba(var(--ax-color-danger-500))}.ax-dark ax-form form.ax-float-error .ax-error-message{border-color:rgba(var(--ax-color-danger-700));background-color:rgba(var(--ax-color-danger-700));color:rgba(var(--ax-color-danger-fore))}.ax-dark ax-form form.ax-float-error .ax-error-message:before,.ax-dark ax-form form.ax-float-error .ax-error-message:after{border-bottom-color:rgba(var(--ax-color-danger-700))}.ax-dark ax-form form.ax-float-error .ax-error-message:before{border-bottom-color:rgba(var(--ax-color-danger-700))}ax-form-field{position:relative;display:block;width:100%}ax-form-field .ax-error-message{margin-top:.25rem;margin-bottom:.25rem;display:block;font-size:.75rem;line-height:1rem}ax-form{width:100%}ax-form form.ax-bottom-error .ax-error-message{color:rgba(var(--ax-color-danger-500))}ax-form form.ax-float-error .ax-error-message{position:absolute;bottom:-2.5rem;z-index:10;display:block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;border-radius:.375rem;border-width:1px;border-color:rgba(var(--ax-color-danger-500));background-color:rgba(var(--ax-color-danger-500));padding:.25rem .5rem;font-weight:400;color:rgba(var(--ax-color-danger-fore))}ax-form form.ax-float-error .ax-error-message:before,ax-form form.ax-float-error .ax-error-message:after{pointer-events:none;position:absolute;bottom:100%;inset-inline-start:.75rem;z-index:20;height:0px;width:0px;border-bottom-color:rgba(var(--ax-color-danger-500));border-inline-end-color:transparent;border-inline-start-color:transparent;border-top-color:transparent;content:\"\"}ax-form form.ax-float-error .ax-error-message:before{-webkit-margin-start:-1px;margin-inline-start:-1px;border-width:4px;border-bottom-color:rgba(var(--ax-color-danger-500))}ax-form form.ax-float-error .ax-error-message:after{border-width:4px}\n"] }]
-        }] });
+            args: [{ selector: 'ax-form-field', template: `<ng-content></ng-content>`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [AXUnsubscriber], styles: [".ax-dark ax-form.ax-form-normal .ax-error-message{border-color:rgba(var(--ax-color-danger-500));background-color:rgba(var(--ax-color-danger-200));color:rgba(var(--ax-color-danger-fore-tint))}.ax-dark ax-form.ax-form-normal .ax-error-message:before,.ax-dark ax-form.ax-form-normal .ax-error-message:after{border-bottom-color:rgba(var(--ax-color-danger-500))}.ax-dark ax-form.ax-form-normal .ax-error-message:before{border-bottom-color:rgba(var(--ax-color-danger-500))}.ax-dark ax-form form.ax-float-error .ax-error-message{border-color:rgba(var(--ax-color-danger-700));background-color:rgba(var(--ax-color-danger-700));color:rgba(var(--ax-color-danger-fore))}.ax-dark ax-form form.ax-float-error .ax-error-message:before,.ax-dark ax-form form.ax-float-error .ax-error-message:after{border-bottom-color:rgba(var(--ax-color-danger-700))}.ax-dark ax-form form.ax-float-error .ax-error-message:before{border-bottom-color:rgba(var(--ax-color-danger-700))}ax-form-field{position:relative;display:block;width:100%}ax-form-field .ax-error-message{margin-top:.25rem;margin-bottom:.25rem;display:block;font-size:.75rem;line-height:1rem}ax-form{width:100%}ax-form form.ax-bottom-error .ax-error-message{color:rgba(var(--ax-color-danger-500))}ax-form form.ax-float-error .ax-error-message{position:absolute;bottom:-2.5rem;z-index:10;display:block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;border-radius:.375rem;border-width:1px;border-color:rgba(var(--ax-color-danger-500));background-color:rgba(var(--ax-color-danger-500));padding:.25rem .5rem;font-weight:400;color:rgba(var(--ax-color-danger-fore))}ax-form form.ax-float-error .ax-error-message:before,ax-form form.ax-float-error .ax-error-message:after{pointer-events:none;position:absolute;bottom:100%;inset-inline-start:.75rem;z-index:20;height:0px;width:0px;border-bottom-color:rgba(var(--ax-color-danger-500));border-inline-end-color:transparent;border-inline-start-color:transparent;border-top-color:transparent;content:\"\"}ax-form form.ax-float-error .ax-error-message:before{-webkit-margin-start:-1px;margin-inline-start:-1px;border-width:4px;border-bottom-color:rgba(var(--ax-color-danger-500))}ax-form form.ax-float-error .ax-error-message:after{border-width:4px}\n"] }]
+        }], propDecorators: { input: [{
+                type: ContentChild,
+                args: [AXValuableComponent]
+            }], label: [{
+                type: ContentChild,
+                args: [AXLabelComponent]
+            }] } });
 
 /**
  *  Contains native event
@@ -31,7 +58,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
 class AXFormValidationEvent extends AXEvent {
 }
 /**
- * The Button is a component which detects user interaction and triggers a corresponding event
+ * The AXForm is a component which detects user interaction and triggers a corresponding event
  *
  * @category Components
  */
@@ -42,7 +69,6 @@ class AXFormComponent extends MXBaseComponent {
         this.onValidate = new EventEmitter();
         this.updateOnChange = new EventEmitter();
         this._updateOn = 'blur';
-        this.validateInitValues = false;
         this._subs = [];
     }
     get updateOn() {
@@ -53,92 +79,55 @@ class AXFormComponent extends MXBaseComponent {
             name: 'updateOn',
             value: v,
             afterCallback: () => {
-                this._bindEvents();
+                //this._bindEvents();
             },
         });
     }
-    _handleSubmit(e) {
+    async _handleSubmit(e) {
         e.preventDefault();
-        this.validate();
+        await this.validate();
     }
     _handleReset() {
         this.clear();
     }
-    _getComponenets() {
-        return Array.from(this.getHostElement().querySelectorAll('[ax-form-input="true"]'))
-            .map((c) => c.__axContext__)
-            .filter((c) => c != null);
-    }
     ngAfterViewInit() {
-        if (this.validateInitValues) {
-            this._validateInitValues();
-        }
-        this._bindEvents();
-        // const config = { attributes: false, childList: true, subtree: true };
-        // const callback = (mutationList, observer) => {
-        //   this._bindEvents();
-        // };
-        // // Create an observer instance linked to the callback function
-        // if (typeof MutationObserver !== 'undefined') {
-        //   this._observer = new MutationObserver(callback);
-        // }
-        // this._observer.observe(this.getHostElement(), config);
-    }
-    _bindEvents() {
-        this._clearSubs();
-        const widgets = this._getComponenets();
-        //
-        widgets.forEach((w) => {
-            if (this.updateOn == 'change') {
-                this._subs.push(w.onValueChanged?.subscribe((v) => {
-                    if (v.isUserInteraction)
-                        w.validate();
-                }));
-            }
-            else if (this.updateOn == 'blur') {
-                this._subs.push(w.onBlur?.subscribe((v) => {
-                    w.validate();
-                }));
-            }
-        });
+        //this._bindEvents();
     }
+    // private _bindEvents() {
+    //   this._clearSubs();
+    //   const widgets = this._getComponenets();
+    //   //
+    //   widgets.forEach((w) => {
+    //     if (this.updateOn == 'change') {
+    //       this._subs.push(
+    //         w.onValueChanged?.subscribe((v: AXValueChangedEvent) => {
+    //           if (v.isUserInteraction) w.validate();
+    //         }),
+    //       );
+    //     } else if (this.updateOn == 'blur') {
+    //       this._subs.push(
+    //         w.onBlur?.subscribe((v) => {
+    //           w.validate();
+    //         }),
+    //       );
+    //     }
+    //   });
+    // }
     _clearSubs() {
         this._subs.forEach((c) => c?.unsubscribe());
         this._subs = [];
     }
-    _validateInitValues() {
-        this._getComponenets()
-            .filter((c) => c['value'])
-            .forEach((c) => c.validate());
-    }
-    validate(...args) {
-        const widgets = this._getComponenets();
-        if (widgets.length === 0) {
-            this._emitOnValidateEvent({ result: true });
-            return Promise.resolve({ result: true });
-        }
-        //
-        return new Promise((resolve) => {
-            Promise.all(widgets
-                .filter((c) => args == null || args.length == 0 || args.includes(c.name))
-                .map((c) => c.validate())).then((rules) => {
-                const failed = rules.filter((c) => !c.result);
-                if (failed.length) {
-                    this._emitOnValidateEvent({
-                        result: false,
-                        items: failed,
-                    });
-                    resolve({
-                        result: false,
-                        items: failed,
-                    });
-                }
-                else {
-                    this._emitOnValidateEvent({ result: true });
-                    resolve({ result: true });
-                }
-            });
-        });
+    async validate(...names) {
+        const results = await Promise.all(this.fields
+            .filter((c) => names == null || names.length == 0 || names.includes(c.name))
+            .map(field => field.validate()));
+        // Merge all validation summaries into one
+        const mergedSummary = {
+            result: results.every(res => res.result),
+            rules: results.flatMap(res => res.rules)
+        };
+        this._emitOnValidateEvent(mergedSummary);
+        return mergedSummary;
     }
     _emitOnValidateEvent(e) {
         this.onValidate.emit({
@@ -148,18 +137,13 @@ class AXFormComponent extends MXBaseComponent {
         });
     }
     clear() {
-        const widgets = this._getComponenets();
-        widgets.forEach((w) => {
-            if (typeof w?.clear === 'function')
-                w.clear(false);
-        });
+        this.fields.forEach(c => c.clear(false));
     }
     ngOnDestroy() {
-        this._observer?.disconnect();
         this._clearSubs();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AXFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: AXFormComponent, selector: "ax-form", inputs: { messageStyle: "messageStyle", updateOn: "updateOn", validateInitValues: "validateInitValues" }, outputs: { onValidate: "onValidate", updateOnChange: "updateOnChange" }, usesInheritance: true, ngImport: i0, template: `<form
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: AXFormComponent, selector: "ax-form", inputs: { messageStyle: "messageStyle", updateOn: "updateOn" }, outputs: { onValidate: "onValidate", updateOnChange: "updateOnChange" }, queries: [{ propertyName: "fields", predicate: AXValuableComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: `<form
     (submit)="_handleSubmit($event)"
     (reset)="_handleReset()"
     class="ax-{{ messageStyle }}-error"
@@ -189,34 +173,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
                 type: Output
             }], updateOn: [{
                 type: Input
-            }], validateInitValues: [{
-                type: Input
+            }], fields: [{
+                type: ContentChildren,
+                args: [AXValuableComponent, { descendants: true }]
             }] } });
 
 const AX_FORM_CONFIG = new InjectionToken('AX_FORM_CONFIG', {
     providedIn: 'root',
     factory: () => {
-        const global = inject(AX_GLOBAL_CONFIG);
-        set(global, 'form', AX_FORM_CONFIG);
         return AXFormDefaultConfig;
     },
 });
-const AXFormDefaultConfig = {
-    validation: {
-        rules: {
-            email: {
-                rule: 'regex',
-                value: /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
-                message: AXTranslator.get('validation.messages.email'),
-            },
-            phone: {
-                rule: 'regex',
-                value: /^[+]*[(]{0,1}[0-9]{1,4}[)]{0,1}[-\s\./0-9]*$/,
-                message: AXTranslator.get('validation.messages.phone'),
-            },
-        },
-    },
-};
+const AXFormDefaultConfig = {};
 function formConfig(config = {}) {
     const result = {
         ...AXFormDefaultConfig,
@@ -225,124 +193,6 @@ function formConfig(config = {}) {
     return result;
 }
 
-class AXValidationRuleComponent extends MXBaseComponent {
-    ngOnInit() {
-        super.ngOnInit();
-        this.getHostElement().validate = this.validate.bind(this);
-    }
-    /**
-     * @ignore
-     */
-    constructor(control) {
-        super();
-        this.control = control;
-        this._config = inject(AX_FORM_CONFIG);
-        this.rule = 'required';
-        this.showMessage = true;
-        this.enabled = true;
-    }
-    validate(value) {
-        if (this.enabled === false) {
-            return Promise.resolve({ result: true });
-        }
-        if (this.rule == 'custom') {
-            const regRule = this._config.validation.rules[this.value];
-            if (regRule) {
-                return this._internalValidate(regRule.rule, value, this.message || regRule.message, regRule.value);
-            }
-        }
-        return this._internalValidate(this.rule, value, this.message, this.value);
-    }
-    _internalValidate(type, value, message, ruleValue) {
-        return new Promise((resolve) => {
-            switch (type) {
-                case 'required':
-                    resolve({
-                        message: this.showMessage
-                            ? message || AXTranslator.get('validation.messages.required', { name: this.control?.name })
-                            : '',
-                        result: !this._isNullOrEmpty(value),
-                    });
-                    break;
-                case 'regex':
-                    const ex = new RegExp(ruleValue);
-                    resolve({
-                        message: this.showMessage ? message || AXTranslator.get('validation.messages.regex') : '',
-                        result: ex.test(value),
-                    });
-                    break;
-                case 'callback':
-                    if (typeof ruleValue === 'function') {
-                        const res = {};
-                        res.message = this.showMessage ? message : null;
-                        const val = ruleValue({ value, message });
-                        if (val instanceof Promise) {
-                            val
-                                .then((c) => {
-                                res.result = c;
-                            })
-                                .catch((c) => {
-                                res.result = false;
-                            })
-                                .finally(() => {
-                                resolve(res);
-                            });
-                        }
-                        else {
-                            res.result = val;
-                            resolve(res);
-                        }
-                    }
-                    else {
-                        resolve({
-                            message: AXTranslator.get('validation.messages.invalid-rull-fn'),
-                            result: false,
-                        });
-                    }
-                    break;
-                default:
-                    resolve({
-                        message: AXTranslator.get('validation.messages.invalid-rull-name'),
-                        result: false,
-                    });
-            }
-        });
-    }
-    _isNullOrEmpty(value) {
-        return (value === undefined ||
-            value === null ||
-            Number.isNaN(value) ||
-            (Array.isArray(value) && value.length == 0) ||
-            (typeof value === 'string' && value.trim().length === 0));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AXValidationRuleComponent, deps: [{ token: AXValuableComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: AXValidationRuleComponent, selector: "ax-validation-rule", inputs: { rule: "rule", message: "message", showMessage: "showMessage", value: "value", enabled: "enabled" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AXValidationRuleComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ax-validation-rule',
-                    template: '',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                }]
-        }], ctorParameters: () => [{ type: i1.AXValuableComponent, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [AXValuableComponent]
-                }] }], propDecorators: { rule: [{
-                type: Input
-            }], message: [{
-                type: Input
-            }], showMessage: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], enabled: [{
-                type: Input
-            }] } });
-
 class AXValidationSummaryComponent extends MXBaseComponent {
     get title() {
         return this._title;
@@ -350,25 +200,28 @@ class AXValidationSummaryComponent extends MXBaseComponent {
     set title(v) {
         this._title = v;
     }
-    constructor(_tosatService, _parent) {
+    constructor(_tosatService, host) {
         super();
         this._tosatService = _tosatService;
-        this._parent = _parent;
-        this._content = '';
+        this.host = host;
+        this._content = null;
         this._title = AXTranslator.get('validation.messages.title');
         this.displayMode = 'toast';
         this.autoHide = false;
         //
-        _parent.onValidate.subscribe((c) => {
-            if (!c.result.result) {
-                this._content = `<ul>${c.result.items.map((c) => `<li>${c.message}</li>`).join('')}</ul>`;
-                this._timeOut = this.autoHide ? this.timeOut ?? Math.max(c.result.items.length * 1500, 2000) : 0;
+        this.sub = host.onValidate
+            .subscribe((e) => {
+            if (!e.result.result) {
+                const failedRules = e.result.rules.filter(c => !c.result && c.message);
+                this._content = `<ul>${failedRules.map((c) => `<li>${c.message}</li>`).join('')}</ul>`;
+                this._timeOut = this.autoHide ? (this.timeOut ?? Math.max(failedRules.length * 1000, 2000)) : 0;
                 //
                 if (this.displayMode == 'toast') {
                     this._tosatService.show({
                         color: 'danger',
                         closeButton: true,
                         timeOut: this._timeOut,
+                        timeOutProgress: true,
                         content: this._content,
                         title: this.title,
                         location: 'bottom-center',
@@ -376,22 +229,25 @@ class AXValidationSummaryComponent extends MXBaseComponent {
                 }
             }
             else {
-                this._content = '';
+                this._content = null;
             }
             this.cdr.markForCheck();
         });
     }
-    _handleOnDismissed(e) {
-        this._content = '';
+    _handleOnDismissed() {
+        this._content = null;
+    }
+    ngOnDestroy() {
+        this.sub?.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AXValidationSummaryComponent, deps: [{ token: i1$1.AXToastService }, { token: AXFormComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AXValidationSummaryComponent, deps: [{ token: i1.AXToastService }, { token: AXFormComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: AXValidationSummaryComponent, selector: "ax-validation-summary", inputs: { title: "title", displayMode: "displayMode", timeOut: "timeOut", autoHide: "autoHide" }, usesInheritance: true, ngImport: i0, template: `
     <ax-alert
       color="danger"
       *ngIf="displayMode === 'alert' && _content"
       [timeOut]="_timeOut"
       #a
-      (onClosed)="_handleOnDismissed($event)"
+      (onClosed)="_handleOnDismissed()"
     >
       <ax-icon></ax-icon>
       <ax-title>{{ title }}</ax-title>
@@ -416,7 +272,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
       *ngIf="displayMode === 'alert' && _content"
       [timeOut]="_timeOut"
       #a
-      (onClosed)="_handleOnDismissed($event)"
+      (onClosed)="_handleOnDismissed()"
     >
       <ax-icon></ax-icon>
       <ax-title>{{ title }}</ax-title>
@@ -433,7 +289,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                 }]
-        }], ctorParameters: () => [{ type: i1$1.AXToastService }, { type: AXFormComponent, decorators: [{
+        }], ctorParameters: () => [{ type: i1.AXToastService }, { type: AXFormComponent, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -448,13 +304,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
                 type: Input
             }] } });
 
+class AXValidationRuleDirective {
+    constructor(host) {
+        this.host = host;
+    }
+    ngOnInit() {
+        this.host.addValidationRule({ rule: this.rule, options: this.ruleOptions });
+    }
+    ngOnDestroy() {
+        this.host.removeValidationRule({ rule: this.rule, options: this.ruleOptions });
+    }
+    get ruleOptions() {
+        return Object.assign({ message: this.message, name: this.host.name }, this.options);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AXValidationRuleDirective, deps: [{ token: i1$1.AXValuableComponent }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.8", type: AXValidationRuleDirective, selector: "ax-validation-rule", inputs: { rule: "rule", options: "options", message: "message" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AXValidationRuleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ax-validation-rule'
+                }]
+        }], ctorParameters: () => [{ type: i1$1.AXValuableComponent }], propDecorators: { rule: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], message: [{
+                type: Input
+            }] } });
+
 class AXFormModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AXFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: AXFormModule, declarations: [AXFormFieldComponent,
             AXFormComponent,
-            AXValidationRuleComponent,
-            AXValidationSummaryComponent], imports: [CommonModule, AXDecoratorModule, AXAlertModule, AXButtonModule], exports: [AXFormFieldComponent, AXFormComponent, AXValidationRuleComponent, AXValidationSummaryComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AXFormModule, imports: [CommonModule, AXDecoratorModule, AXAlertModule, AXButtonModule] }); }
+            AXValidationRuleDirective,
+            AXValidationSummaryComponent], imports: [CommonModule, AXDecoratorModule, AXAlertModule, AXButtonModule, AXValidationModule], exports: [AXFormFieldComponent, AXFormComponent, AXValidationRuleDirective, AXValidationSummaryComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AXFormModule, imports: [CommonModule, AXDecoratorModule, AXAlertModule, AXButtonModule, AXValidationModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AXFormModule, decorators: [{
             type: NgModule,
@@ -462,11 +347,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
                     declarations: [
                         AXFormFieldComponent,
                         AXFormComponent,
-                        AXValidationRuleComponent,
+                        AXValidationRuleDirective,
                         AXValidationSummaryComponent,
                     ],
-                    imports: [CommonModule, AXDecoratorModule, AXAlertModule, AXButtonModule],
-                    exports: [AXFormFieldComponent, AXFormComponent, AXValidationRuleComponent, AXValidationSummaryComponent],
+                    imports: [CommonModule, AXDecoratorModule, AXAlertModule, AXButtonModule, AXValidationModule],
+                    exports: [AXFormFieldComponent, AXFormComponent, AXValidationRuleDirective, AXValidationSummaryComponent],
                     providers: [],
                 }]
         }] });
@@ -475,5 +360,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXFormComponent, AXFormDefaultConfig, AXFormFieldComponent, AXFormModule, AXFormValidationEvent, AXValidationRuleComponent, AXValidationSummaryComponent, AX_FORM_CONFIG, formConfig };
+export { AXFormComponent, AXFormDefaultConfig, AXFormFieldComponent, AXFormModule, AXFormValidationEvent, AXValidationRuleDirective, AXValidationSummaryComponent, AX_FORM_CONFIG, formConfig };
 //# sourceMappingURL=acorex-components-form.mjs.map