@wavemaker/app-ng-runtime 11.6.0-next.NULL → 11.6.0-rc.157

app-ng-runtime/components/data/form/fesm2015/index.mjs

@@ -315,8 +315,21 @@ const findInvalidElement = ($formEle, ngForm) => {
         $ele: $ele
     };
 };
+// Function to get the active element markup based on widget type
+const getActiveElement = (element) => {
+    const widgetType = element.getAttribute('widgettype');
+    switch (widgetType) {
+        case 'select':
+            return element.querySelector('select');
+            break;
+        case 'textarea':
+            return element.querySelector('textarea');
+            break;
+        default:
+            return element.querySelector('input');
+    }
+};
 const setTouchedState = (self, ngForm, fieldName) => {
-    var _a, _b;
     if (ngForm.valid) {
         return;
     }
@@ -327,15 +340,13 @@ const setTouchedState = (self, ngForm, fieldName) => {
     }
     else {
         let element = self.$element.find(`[wmformfield][key="${fieldName}"]`);
-        // checking for name attribute if the key attribute is not present on formfield
         if (!element.length) {
             element = self.$element.find(`[wmformfield][name="${fieldName}"]`);
         }
-        if (element.length) {
-            element[0].setAttribute('__errormsg', element[0].getAttribute('__validationId'));
-            (_a = element[0].querySelector('input')) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-invalid', ngForm.invalid);
-            (_b = element[0].querySelector('input')) === null || _b === void 0 ? void 0 : _b.setAttribute('aria-describedby', element[0].getAttribute('__validationId'));
-        }
+        element[0].setAttribute('__errormsg', element[0].getAttribute('__validationId'));
+        let activeElement = getActiveElement(element[0]);
+        activeElement === null || activeElement === void 0 ? void 0 : activeElement.setAttribute('aria-invalid', ngForm.invalid);
+        activeElement === null || activeElement === void 0 ? void 0 : activeElement.setAttribute('aria-describedby', element[0].getAttribute('__validationId'));
         ngForm.markAsTouched();
     }
 };
@@ -1742,21 +1753,38 @@ class FormFieldDirective extends StylableComponent {
         this._activeField = true;
         $($evt.target).closest('.live-field').addClass('active');
     }
-    _onBlurField($evt) {
-        var _a, _b, _c, _d;
-        $($evt.target).closest('.live-field').removeClass('active');
-        const ele = this.nativeElement.querySelector('p.text-danger');
-        // Fix for [WMS-23959]: ADA issue - adding aria-describedby, aria-invalid, __errormsg attributes only when the form field is invalid , else removing the attributes
+    // Function to get the active element markup based on widget type
+    getActiveElement() {
+        const widgetType = this.nativeElement.getAttribute('widgettype');
+        switch (widgetType) {
+            case 'select':
+                return this.nativeElement.querySelector('select');
+                break;
+            case 'textarea':
+                return this.nativeElement.querySelector('textarea');
+                break;
+            default:
+                return this.nativeElement.querySelector('input');
+        }
+    }
+    setAriaAttributes() {
+        const element = this.getActiveElement();
         if (this.ngform.controls[this._fieldName].invalid && this.ngform.controls[this._fieldName].touched && this.form.isUpdateMode) {
             this.nativeElement.setAttribute('__errormsg', `${this.nativeElement.getAttribute('__validationId')}`);
-            (_a = this.nativeElement.querySelector('input')) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-invalid', `${this.ngform.controls[this._fieldName].invalid}`);
-            (_b = this.nativeElement.querySelector('input')) === null || _b === void 0 ? void 0 : _b.setAttribute('aria-describedby', `${this.nativeElement.getAttribute('__validationId')}`);
+            element === null || element === void 0 ? void 0 : element.setAttribute('aria-invalid', `${this.ngform.controls[this._fieldName].invalid}`);
+            element === null || element === void 0 ? void 0 : element.setAttribute('aria-describedby', `${this.nativeElement.getAttribute('__validationId')}`);
         }
         else {
             this.nativeElement.removeAttribute('__errormsg');
-            (_c = this.nativeElement.querySelector('input')) === null || _c === void 0 ? void 0 : _c.removeAttribute('aria-invalid');
-            (_d = this.nativeElement.querySelector('input')) === null || _d === void 0 ? void 0 : _d.removeAttribute('aria-describedby');
+            element === null || element === void 0 ? void 0 : element.removeAttribute('aria-invalid');
+            element === null || element === void 0 ? void 0 : element.removeAttribute('aria-describedby');
         }
+    }
+    _onBlurField($evt) {
+        $($evt.target).closest('.live-field').removeClass('active');
+        const ele = this.nativeElement.querySelector('p.text-danger');
+        // Fix for [WMS-23959]: ADA issue - adding aria-describedby, aria-invalid, __errormsg attributes only when the form field is invalid , else removing the attributes
+        this.setAriaAttributes();
         this._activeField = false;
         this._triggeredByUser = false;
         this._clicktriggeredByUser = false;
@@ -1955,7 +1983,6 @@ class FormFieldDirective extends StylableComponent {
     }
     // On field value change, propagate event to parent form
     onValueChange(val) {
-        var _a, _b, _c, _d;
         if (!this.isDestroyed) {
             const captionEl = $(this.nativeElement).find('.caption-floating');
             if (captionEl.length > 0) {
@@ -1966,16 +1993,7 @@ class FormFieldDirective extends StylableComponent {
                 this.app.notify('captionPositionAnimate', { displayVal: hasValue, nativeEl: captionEl, isSelectMultiple: this.formWidget && this.formWidget.multiple, isFocused: this._activeField });
             }
             // Fix for [WMS-23959]: ADA issue - adding aria-describedby, aria-invalid, __errormsg attributes only when the form field is invalid , else removing the attributes
-            if (this.ngform.controls[this._fieldName].invalid && this.ngform.controls[this._fieldName].touched && this.form.isUpdateMode) {
-                this.nativeElement.setAttribute('__errormsg', `${this.nativeElement.getAttribute('__validationId')}`);
-                (_a = this.nativeElement.querySelector('input')) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-invalid', this._triggeredByUser && this.ngform.controls[this._fieldName].invalid ? 'true' : 'false');
-                (_b = this.nativeElement.querySelector('input')) === null || _b === void 0 ? void 0 : _b.setAttribute('aria-describedby', `${this.nativeElement.getAttribute('__validationId')}`);
-            }
-            else {
-                this.nativeElement.removeAttribute('__errormsg');
-                (_c = this.nativeElement.querySelector('input')) === null || _c === void 0 ? void 0 : _c.removeAttribute('aria-invalid');
-                (_d = this.nativeElement.querySelector('input')) === null || _d === void 0 ? void 0 : _d.removeAttribute('aria-describedby');
-            }
+            this.setAriaAttributes();
             this.form.onFieldValueChange(this, val);
             this.notifyChanges();
             // Do mark as touched, only incase when user has entered an input but not through the script. Hence added mousedown event check