@acorex/components 7.1.0 → 7.1.1

package/fesm2022/acorex-components-form.mjs

@@ -14,330 +14,330 @@ import { AXAlertModule } from '@acorex/components/alert';
 import * as i5 from '@acorex/components/button';
 import { AXButtonModule } from '@acorex/components/button';
 
-class AXFormFieldComponent extends AXBaseComponentMixin {
-    constructor(elementRef, cdr) {
-        super(elementRef, cdr);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXFormFieldComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: AXFormFieldComponent, selector: "ax-form-field", host: { classAttribute: "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{background:rgba(var(--ax-color-danger-900));border-color:rgba(var(--ax-color-danger-700));color:rgba(var(--ax-color-danger-100))}.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-900))}.ax-dark ax-form.ax-form-normal .ax-error-message:before{border-bottom-color:rgba(var(--ax-color-danger-700))}.ax-form-field{position:relative}.ax-form-field ax-form-hint-text{font-size:.875rem;color:rgba(var(--ax-color-text-default));margin-top:.5rem}.ax-form-field .ax-error-message{font-size:.75rem}form.ax-normal-error .ax-error-message{color:rgba(var(--ax-color-danger-500))}form.ax-tooltip-error .ax-error-message{position:absolute;display:block;border:1px solid;background:rgba(var(--ax-color-danger-50));color:rgba(var(--ax-color-danger-500));border-radius:.375rem;border-color:rgba(var(--ax-color-danger-200));z-index:10;padding:.25rem .5rem;bottom:-2.25rem;font-weight:400;width:-moz-fit-content;width:fit-content}form.ax-tooltip-error .ax-error-message:before,form.ax-tooltip-error .ax-error-message:after{position:absolute;bottom:100%;inset-inline-start:10px;z-index:15;width:0;height:0;pointer-events:none;content:\" \";border:solid transparent;border-bottom-color:rgba(var(--ax-color-danger-50))}form.ax-tooltip-error .ax-error-message:before{margin-inline-start:-1px;border-width:.375rem;border-bottom-color:rgba(var(--ax-color-danger-200))}form.ax-tooltip-error .ax-error-message:after{border-width:5px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXFormFieldComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ax-form-field', template: `<ng-content></ng-content>`, host: { class: 'ax-form-field' }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".ax-dark ax-form.ax-form-normal .ax-error-message{background:rgba(var(--ax-color-danger-900));border-color:rgba(var(--ax-color-danger-700));color:rgba(var(--ax-color-danger-100))}.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-900))}.ax-dark ax-form.ax-form-normal .ax-error-message:before{border-bottom-color:rgba(var(--ax-color-danger-700))}.ax-form-field{position:relative}.ax-form-field ax-form-hint-text{font-size:.875rem;color:rgba(var(--ax-color-text-default));margin-top:.5rem}.ax-form-field .ax-error-message{font-size:.75rem}form.ax-normal-error .ax-error-message{color:rgba(var(--ax-color-danger-500))}form.ax-tooltip-error .ax-error-message{position:absolute;display:block;border:1px solid;background:rgba(var(--ax-color-danger-50));color:rgba(var(--ax-color-danger-500));border-radius:.375rem;border-color:rgba(var(--ax-color-danger-200));z-index:10;padding:.25rem .5rem;bottom:-2.25rem;font-weight:400;width:-moz-fit-content;width:fit-content}form.ax-tooltip-error .ax-error-message:before,form.ax-tooltip-error .ax-error-message:after{position:absolute;bottom:100%;inset-inline-start:10px;z-index:15;width:0;height:0;pointer-events:none;content:\" \";border:solid transparent;border-bottom-color:rgba(var(--ax-color-danger-50))}form.ax-tooltip-error .ax-error-message:before{margin-inline-start:-1px;border-width:.375rem;border-bottom-color:rgba(var(--ax-color-danger-200))}form.ax-tooltip-error .ax-error-message:after{border-width:5px}\n"] }]
+class AXFormFieldComponent extends AXBaseComponentMixin {
+    constructor(elementRef, cdr) {
+        super(elementRef, cdr);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXFormFieldComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: AXFormFieldComponent, selector: "ax-form-field", host: { classAttribute: "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{background:rgba(var(--ax-color-danger-900));border-color:rgba(var(--ax-color-danger-700));color:rgba(var(--ax-color-danger-100))}.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-900))}.ax-dark ax-form.ax-form-normal .ax-error-message:before{border-bottom-color:rgba(var(--ax-color-danger-700))}.ax-form-field{position:relative}.ax-form-field ax-form-hint-text{font-size:.875rem;color:rgba(var(--ax-color-text-default));margin-top:.5rem}.ax-form-field .ax-error-message{font-size:.75rem}form.ax-normal-error .ax-error-message{color:rgba(var(--ax-color-danger-500))}form.ax-tooltip-error .ax-error-message{position:absolute;display:block;border:1px solid;background:rgba(var(--ax-color-danger-50));color:rgba(var(--ax-color-danger-500));border-radius:.375rem;border-color:rgba(var(--ax-color-danger-200));z-index:10;padding:.25rem .5rem;bottom:-2.25rem;font-weight:400;width:-moz-fit-content;width:fit-content}form.ax-tooltip-error .ax-error-message:before,form.ax-tooltip-error .ax-error-message:after{position:absolute;bottom:100%;inset-inline-start:10px;z-index:15;width:0;height:0;pointer-events:none;content:\" \";border:solid transparent;border-bottom-color:rgba(var(--ax-color-danger-50))}form.ax-tooltip-error .ax-error-message:before{margin-inline-start:-1px;border-width:.375rem;border-bottom-color:rgba(var(--ax-color-danger-200))}form.ax-tooltip-error .ax-error-message:after{border-width:5px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXFormFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-form-field', template: `<ng-content></ng-content>`, host: { class: 'ax-form-field' }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".ax-dark ax-form.ax-form-normal .ax-error-message{background:rgba(var(--ax-color-danger-900));border-color:rgba(var(--ax-color-danger-700));color:rgba(var(--ax-color-danger-100))}.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-900))}.ax-dark ax-form.ax-form-normal .ax-error-message:before{border-bottom-color:rgba(var(--ax-color-danger-700))}.ax-form-field{position:relative}.ax-form-field ax-form-hint-text{font-size:.875rem;color:rgba(var(--ax-color-text-default));margin-top:.5rem}.ax-form-field .ax-error-message{font-size:.75rem}form.ax-normal-error .ax-error-message{color:rgba(var(--ax-color-danger-500))}form.ax-tooltip-error .ax-error-message{position:absolute;display:block;border:1px solid;background:rgba(var(--ax-color-danger-50));color:rgba(var(--ax-color-danger-500));border-radius:.375rem;border-color:rgba(var(--ax-color-danger-200));z-index:10;padding:.25rem .5rem;bottom:-2.25rem;font-weight:400;width:-moz-fit-content;width:fit-content}form.ax-tooltip-error .ax-error-message:before,form.ax-tooltip-error .ax-error-message:after{position:absolute;bottom:100%;inset-inline-start:10px;z-index:15;width:0;height:0;pointer-events:none;content:\" \";border:solid transparent;border-bottom-color:rgba(var(--ax-color-danger-50))}form.ax-tooltip-error .ax-error-message:before{margin-inline-start:-1px;border-width:.375rem;border-bottom-color:rgba(var(--ax-color-danger-200))}form.ax-tooltip-error .ax-error-message:after{border-width:5px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
 
-/**
- *  Contains native event
- * @category Events
- */
-class AXFormValidationEvent extends AXEvent {
-    result;
-}
-/**
- * The Button is a component which detects user interaction and triggers a corresponding event
- *
- * @category Components
- */
-class AXFormComponent extends AXBaseComponentMixin {
-    cdr;
-    validationMessageMode = 'normal';
-    onValidate = new EventEmitter();
-    updateOnChange = new EventEmitter();
-    _updateOn = 'blur';
-    get updateOn() {
-        return this._updateOn;
-    }
-    set updateOn(v) {
-        this._setOption({
-            name: 'updateOn',
-            value: v,
-            afterCallback: (oldValue, newValue) => {
-                this._bindEvents();
-            },
-        });
-    }
-    validateInitValues = false;
-    _observer;
-    _subs = [];
-    /**
-     *  @ignore
-     */
-    constructor(elementRef, cdr) {
-        super(elementRef, cdr);
-        this.cdr = cdr;
-    }
-    _handleSubmit(e) {
-        e.preventDefault();
-        this.validate();
-    }
-    _handleReset(e) {
-        this.clear();
-    }
-    _getComponenets() {
-        return Array.from(this._getHostElement().querySelectorAll('[ax-form-input="true"]')).map(c => c.__axContext__);
-    }
-    onViewInit() {
-        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
-        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 => {
-                    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, reject) => {
-            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 });
-                }
-            });
-        });
-    }
-    _emitOnValidateEvent(e) {
-        this.onValidate.emit({
-            component: this,
-            result: e,
-            htmlElement: this._getHostElement(),
-        });
-    }
-    clear() {
-        const widgets = this._getComponenets();
-        widgets.forEach(w => {
-            w.clear();
-        });
-    }
-    onDestroy() {
-        this._observer.disconnect();
-        this._observer = null;
-        this._clearSubs();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXFormComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: AXFormComponent, selector: "ax-form", inputs: { validationMessageMode: "validationMessageMode", updateOn: "updateOn", validateInitValues: "validateInitValues" }, outputs: { onValidate: "onValidate", updateOnChange: "updateOnChange" }, usesInheritance: true, ngImport: i0, template: '<form (submit)="_handleSubmit($event)" (reset)="_handleReset($event)" class="ax-{{validationMessageMode}}-error"><ng-content></ng-content></form>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXFormComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ax-form',
-                    template: '<form (submit)="_handleSubmit($event)" (reset)="_handleReset($event)" class="ax-{{validationMessageMode}}-error"><ng-content></ng-content></form>',
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { validationMessageMode: [{
-                type: Input
-            }], onValidate: [{
-                type: Output
-            }], updateOnChange: [{
-                type: Output
-            }], updateOn: [{
-                type: Input
-            }], validateInitValues: [{
-                type: Input
+/**
+ *  Contains native event
+ * @category Events
+ */
+class AXFormValidationEvent extends AXEvent {
+    result;
+}
+/**
+ * The Button is a component which detects user interaction and triggers a corresponding event
+ *
+ * @category Components
+ */
+class AXFormComponent extends AXBaseComponentMixin {
+    cdr;
+    validationMessageMode = 'normal';
+    onValidate = new EventEmitter();
+    updateOnChange = new EventEmitter();
+    _updateOn = 'blur';
+    get updateOn() {
+        return this._updateOn;
+    }
+    set updateOn(v) {
+        this._setOption({
+            name: 'updateOn',
+            value: v,
+            afterCallback: (oldValue, newValue) => {
+                this._bindEvents();
+            },
+        });
+    }
+    validateInitValues = false;
+    _observer;
+    _subs = [];
+    /**
+     *  @ignore
+     */
+    constructor(elementRef, cdr) {
+        super(elementRef, cdr);
+        this.cdr = cdr;
+    }
+    _handleSubmit(e) {
+        e.preventDefault();
+        this.validate();
+    }
+    _handleReset(e) {
+        this.clear();
+    }
+    _getComponenets() {
+        return Array.from(this._getHostElement().querySelectorAll('[ax-form-input="true"]')).map(c => c.__axContext__);
+    }
+    onViewInit() {
+        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
+        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 => {
+                    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, reject) => {
+            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 });
+                }
+            });
+        });
+    }
+    _emitOnValidateEvent(e) {
+        this.onValidate.emit({
+            component: this,
+            result: e,
+            htmlElement: this._getHostElement(),
+        });
+    }
+    clear() {
+        const widgets = this._getComponenets();
+        widgets.forEach(w => {
+            w.clear();
+        });
+    }
+    onDestroy() {
+        this._observer.disconnect();
+        this._observer = null;
+        this._clearSubs();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXFormComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: AXFormComponent, selector: "ax-form", inputs: { validationMessageMode: "validationMessageMode", updateOn: "updateOn", validateInitValues: "validateInitValues" }, outputs: { onValidate: "onValidate", updateOnChange: "updateOnChange" }, usesInheritance: true, ngImport: i0, template: '<form (submit)="_handleSubmit($event)" (reset)="_handleReset($event)" class="ax-{{validationMessageMode}}-error"><ng-content></ng-content></form>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXFormComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-form',
+                    template: '<form (submit)="_handleSubmit($event)" (reset)="_handleReset($event)" class="ax-{{validationMessageMode}}-error"><ng-content></ng-content></form>',
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { validationMessageMode: [{
+                type: Input
+            }], onValidate: [{
+                type: Output
+            }], updateOnChange: [{
+                type: Output
+            }], updateOn: [{
+                type: Input
+            }], validateInitValues: [{
+                type: Input
             }] } });
 
-class AXValidationRuleComponent extends AXBaseComponentMixin {
-    rule = 'required';
-    message;
-    showMessage = true;
-    value;
-    enabled = true;
-    constructor(elementRef, cdr) {
-        super(elementRef, cdr);
-    }
-    onInit() {
-        this._getHostElement().validate = this.validate.bind(this);
-    }
-    validate(value) {
-        if (this.enabled === false) {
-            return Promise.resolve({ result: true });
-        }
-        if (this.rule == 'custom') {
-            const regRule = AXConfig.get(`form.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') : '',
-                        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) ||
-            //(typeof value === 'object' && Object.keys(value).length === 0) ||
-            (Array.isArray(value) && value.length == 0) ||
-            (typeof value === 'string' && value.trim().length === 0));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXValidationRuleComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", 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: "16.0.0", ngImport: i0, type: AXValidationRuleComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ax-validation-rule',
-                    template: '',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { rule: [{
-                type: Input
-            }], message: [{
-                type: Input
-            }], showMessage: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], enabled: [{
-                type: Input
+class AXValidationRuleComponent extends AXBaseComponentMixin {
+    rule = 'required';
+    message;
+    showMessage = true;
+    value;
+    enabled = true;
+    constructor(elementRef, cdr) {
+        super(elementRef, cdr);
+    }
+    onInit() {
+        this._getHostElement().validate = this.validate.bind(this);
+    }
+    validate(value) {
+        if (this.enabled === false) {
+            return Promise.resolve({ result: true });
+        }
+        if (this.rule == 'custom') {
+            const regRule = AXConfig.get(`form.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') : '',
+                        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) ||
+            //(typeof value === 'object' && Object.keys(value).length === 0) ||
+            (Array.isArray(value) && value.length == 0) ||
+            (typeof value === 'string' && value.trim().length === 0));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXValidationRuleComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", 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: "16.0.0", ngImport: i0, type: AXValidationRuleComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-validation-rule',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { rule: [{
+                type: Input
+            }], message: [{
+                type: Input
+            }], showMessage: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], enabled: [{
+                type: Input
             }] } });
 
-class AXValidationSummaryComponent extends AXBaseComponentMixin {
-    _tosatService;
-    _parent;
-    _content = '';
-    _title = AXTranslator.get('validation.messages.title');
-    get title() {
-        return this._title;
-    }
-    set title(v) {
-        this._title = v;
-    }
-    displayMode = 'toast';
-    timeOut;
-    autoHide = false;
-    _timeOut;
-    constructor(_elementRef, _cdr, _tosatService, _parent) {
-        super(_elementRef, _cdr);
-        this._tosatService = _tosatService;
-        this._parent = _parent;
-        //
-        _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;
-                //
-                if (this.displayMode == 'toast') {
-                    this._tosatService.show({
-                        color: 'danger',
-                        closeable: true,
-                        timeOut: this._timeOut,
-                        content: this._content,
-                        title: this.title
-                    });
-                }
-            }
-            else {
-                this._content = '';
-            }
-            _cdr.markForCheck();
-        });
-    }
-    _handleOnDismissed(e) {
-        this._content = '';
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXValidationSummaryComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.AXToastService }, { token: AXFormComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+class AXValidationSummaryComponent extends AXBaseComponentMixin {
+    _tosatService;
+    _parent;
+    _content = '';
+    _title = AXTranslator.get('validation.messages.title');
+    get title() {
+        return this._title;
+    }
+    set title(v) {
+        this._title = v;
+    }
+    displayMode = 'toast';
+    timeOut;
+    autoHide = false;
+    _timeOut;
+    constructor(_elementRef, _cdr, _tosatService, _parent) {
+        super(_elementRef, _cdr);
+        this._tosatService = _tosatService;
+        this._parent = _parent;
+        //
+        _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;
+                //
+                if (this.displayMode == 'toast') {
+                    this._tosatService.show({
+                        color: 'danger',
+                        closeable: true,
+                        timeOut: this._timeOut,
+                        content: this._content,
+                        title: this.title
+                    });
+                }
+            }
+            else {
+                this._content = '';
+            }
+            _cdr.markForCheck();
+        });
+    }
+    _handleOnDismissed(e) {
+        this._content = '';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXValidationSummaryComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.AXToastService }, { token: AXFormComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", 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)">
           <ax-icon></ax-icon>
@@ -352,12 +352,12 @@ class AXValidationSummaryComponent extends AXBaseComponentMixin {
         </ax-suffix>
         </ax-footer>
       </ax-alert>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.AXDecoratorSuffixComponent, selector: "ax-suffix" }, { kind: "component", type: i3.AXDecoratorContentComponent, selector: "ax-content" }, { kind: "component", type: i3.AXDecoratorFooterComponent, selector: "ax-footer" }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorTitleComponent, selector: "ax-title" }, { kind: "component", type: i4.AXAlertComponent, selector: "ax-alert", inputs: ["color", "timeOut", "visible"], outputs: ["onClosed"] }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXValidationSummaryComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ax-validation-summary',
+  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.AXDecoratorSuffixComponent, selector: "ax-suffix" }, { kind: "component", type: i3.AXDecoratorContentComponent, selector: "ax-content" }, { kind: "component", type: i3.AXDecoratorFooterComponent, selector: "ax-footer" }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorTitleComponent, selector: "ax-title" }, { kind: "component", type: i4.AXAlertComponent, selector: "ax-alert", inputs: ["color", "timeOut", "visible"], outputs: ["onClosed"] }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXValidationSummaryComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-validation-summary',
                     template: `
       <ax-alert color="danger" *ngIf="displayMode=='alert' && _content" [timeOut]="_timeOut" #a (onClosed)="_handleOnDismissed($event)">
           <ax-icon></ax-icon>
@@ -372,78 +372,78 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
         </ax-suffix>
         </ax-footer>
       </ax-alert>
-  `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.AXToastService }, { type: AXFormComponent, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [AXFormComponent]
-                }] }]; }, propDecorators: { title: [{
-                type: Input
-            }], displayMode: [{
-                type: Input
-            }], timeOut: [{
-                type: Input
-            }], autoHide: [{
-                type: Input
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.AXToastService }, { type: AXFormComponent, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [AXFormComponent]
+                }] }]; }, propDecorators: { title: [{
+                type: Input
+            }], displayMode: [{
+                type: Input
+            }], timeOut: [{
+                type: Input
+            }], autoHide: [{
+                type: Input
             }] } });
 
-class AXFormModule {
-    constructor() {
-        AXConfig.set({
-            form: {
-                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'),
-                        },
-                    },
-                },
-            },
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: AXFormModule, declarations: [AXFormFieldComponent,
-            AXFormComponent,
-            AXValidationRuleComponent,
-            AXValidationSummaryComponent], imports: [CommonModule, AXDecoratorModule, AXAlertModule, AXButtonModule], exports: [AXFormFieldComponent,
-            AXFormComponent,
-            AXValidationRuleComponent,
-            AXValidationSummaryComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXFormModule, imports: [CommonModule, AXDecoratorModule, AXAlertModule, AXButtonModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXFormModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        AXFormFieldComponent,
-                        AXFormComponent,
-                        AXValidationRuleComponent,
-                        AXValidationSummaryComponent,
-                    ],
-                    imports: [CommonModule, AXDecoratorModule, AXAlertModule, AXButtonModule],
-                    exports: [
-                        AXFormFieldComponent,
-                        AXFormComponent,
-                        AXValidationRuleComponent,
-                        AXValidationSummaryComponent,
-                    ],
-                    providers: [],
-                }]
+class AXFormModule {
+    constructor() {
+        AXConfig.set({
+            form: {
+                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'),
+                        },
+                    },
+                },
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: AXFormModule, declarations: [AXFormFieldComponent,
+            AXFormComponent,
+            AXValidationRuleComponent,
+            AXValidationSummaryComponent], imports: [CommonModule, AXDecoratorModule, AXAlertModule, AXButtonModule], exports: [AXFormFieldComponent,
+            AXFormComponent,
+            AXValidationRuleComponent,
+            AXValidationSummaryComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXFormModule, imports: [CommonModule, AXDecoratorModule, AXAlertModule, AXButtonModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXFormModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        AXFormFieldComponent,
+                        AXFormComponent,
+                        AXValidationRuleComponent,
+                        AXValidationSummaryComponent,
+                    ],
+                    imports: [CommonModule, AXDecoratorModule, AXAlertModule, AXButtonModule],
+                    exports: [
+                        AXFormFieldComponent,
+                        AXFormComponent,
+                        AXValidationRuleComponent,
+                        AXValidationSummaryComponent,
+                    ],
+                    providers: [],
+                }]
         }], ctorParameters: function () { return []; } });
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { AXFormComponent, AXFormFieldComponent, AXFormModule, AXFormValidationEvent, AXValidationRuleComponent, AXValidationSummaryComponent };