@acorex/components 7.17.22 → 7.17.24

package/fesm2022/acorex-components-common.mjs

@@ -10,6 +10,7 @@ import { map, pairwise, filter as filter$1, startWith, exhaustMap } from 'rxjs/o
 import { classes } from 'polytype';
 import { AXHtmlUtil } from '@acorex/core/utils';
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
+import { AXValidationService } from '@acorex/core/validation';
 import { AXTranslator } from '@acorex/core/translation';
 import * as i1$1 from '@angular/forms';
 
@@ -1120,6 +1121,9 @@ class MXValueComponent extends MXInteractiveComponent {
         this._isUserInteraction = false;
         this.stateChange = new EventEmitter();
         this._state = 'clear';
+        this.validationService = inject(AXValidationService);
+        this.validationRulesChange = new EventEmitter();
+        this.validationRules = [];
         this.onChangeCallback = noop;
     }
     /**
@@ -1162,11 +1166,11 @@ class MXValueComponent extends MXInteractiveComponent {
         if (!isEqual(old, v)) {
             this._value = v;
             this.emitOnValueChangedEvent(old, this.value);
-            if (v == null || v == undefined || v == '' || (Array.isArray(v) && v.length == 0)) {
-                this.setState('clear');
-            }
             this.internalValueChanged(this.value);
         }
+        if (v == null || v == undefined || v == '' || (Array.isArray(v) && v.length == 0)) {
+            this.setState('clear');
+        }
     }
     get state() {
         return this._state;
@@ -1195,77 +1199,46 @@ class MXValueComponent extends MXInteractiveComponent {
         return value;
     }
     internalValueChanged(value) { }
-    ngAfterViewInit() {
-        const a = this.getHostElement().querySelectorAll('[ax-form-input="true"]');
-        a.forEach((c) => {
-            c.removeAttribute('ax-form-input');
-        });
-        this.getHostElement().setAttribute('ax-form-input', 'true');
-        this._checkRequired();
-    }
     ngOnDestroy() {
         this.onValueChanged?.unsubscribe();
         this.onOptionChanged?.unsubscribe();
     }
-    _checkRequired() {
-        const isRequired = Array.from(this.getHostElement().querySelectorAll('ax-validation-rule')).some((c) => c.__axContext__?.enabled && c.__axContext__?.rule == 'required');
-        //
-        if (isRequired) {
-            const container = this.getHostElement().classList.contains('ax-editor-container')
-                ? this.getHostElement()
-                : this.getHostElement().querySelector('.ax-editor-container');
-            const formField = container?.closest('ax-form-field');
-            const label = formField?.querySelector('ax-label')?.__axContext__;
-            if (label)
-                label.required = true;
-        }
+    get isRequired() {
+        return this.validationRules?.some(c => c.rule == 'required');
     }
-    validate() {
-        const rules = Array.from(this.getHostElement().querySelectorAll('ax-validation-rule')).filter((c) => c.__axContext__.enabled);
-        //
-        if (!rules || rules.length === 0) {
+    addValidationRule(rule) {
+        this.validationRules.push(rule);
+        this.validationRulesChange.emit(this.validationRules);
+    }
+    removeValidationRule(rule) {
+        this.validationRules = this.validationRules.filter(r => r.rule !== rule.rule || !isEqual(r.options, rule.options));
+        this.validationRulesChange.emit(this.validationRules);
+    }
+    async validate() {
+        const rules = this.validationService.ruleFor(this.value);
+        this.validationRules.forEach(r => {
+            rules.addRule(r.rule, r.options);
+        });
+        const result = await rules.validate();
+        if (result.result) {
             this.setState('clear');
-            return Promise.resolve({
-                result: true,
-                value: this.value,
-                name: this.name,
-                id: this.id,
-            });
         }
-        return new Promise((resolve) => {
-            Promise.all(rules
-                .filter((c) => typeof c?.validate === 'function')
-                .map((c) => {
-                return c.validate(this.value);
-            })).then((d) => {
-                const error = d.find((c) => c.result === false);
-                if (error) {
-                    this.setState('error', error.message);
-                    resolve({
-                        result: false,
-                        value: this.value,
-                        message: error.message,
-                        name: this.name,
-                        id: this.id,
-                    });
-                }
-                else {
-                    this.setState('success');
-                    resolve({
-                        result: true,
-                        value: this.value,
-                        name: this.name,
-                        id: this.id,
-                    });
-                }
-            });
+        else {
+            const message = result.rules.find(c => !c.result).message;
+            this.setState('error', message);
+        }
+        result.rules.forEach(r => {
+            // set name & title for validation summary component
+            r["name"] = this.name;
         });
+        return result;
     }
     setState(state, ...args) {
+        //TODO: find a better solution
         const container = this.getHostElement().classList.contains('ax-editor-container')
             ? this.getHostElement()
             : this.getHostElement().querySelector('.ax-editor-container');
-        const formField = container?.closest('.ax-form-field');
+        const formField = container?.closest('ax-form-field');
         const label = formField?.querySelector('ax-label') || formField?.querySelector('label');
         let target = container || this.getHostElement().firstElementChild;
         if (target?.querySelector('.ax-error-container')) {
@@ -1292,7 +1265,7 @@ class MXValueComponent extends MXInteractiveComponent {
                 this.setState('clear');
                 if (args[0]) {
                     const span = document.createElement('span');
-                    span.innerText = args[0];
+                    span.innerHTML = args[0];
                     span.classList.add('ax-error-message');
                     parent.appendChild(span);
                 }
@@ -1317,7 +1290,7 @@ class MXValueComponent extends MXInteractiveComponent {
         }
         this.writeValue(value);
     }
-    clear(e) {
+    clear(e = false) {
         this.commitValue(null, e);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: MXValueComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }