@formio/js 5.6.1 → 5.7.0

package/lib/mjs/components/hidden/editForm/Hidden.edit.display.js

@@ -3,6 +3,14 @@ export default [
         key: 'labelPosition',
         ignore: true,
     },
+    {
+        key: 'labelWidth',
+        ignore: true,
+    },
+    {
+        key: 'labelMargin',
+        ignore: true,
+    },
     {
         key: 'placeholder',
         ignore: true,

package/lib/mjs/components/html/editForm/HTML.edit.display.js

@@ -3,6 +3,14 @@ export default [
         key: 'labelPosition',
         ignore: true,
     },
+    {
+        key: 'labelWidth',
+        ignore: true,
+    },
+    {
+        key: 'labelMargin',
+        ignore: true,
+    },
     {
         key: 'placeholder',
         ignore: true,

package/lib/mjs/components/number/Number.d.ts

@@ -51,5 +51,16 @@ export default class NumberComponent extends Input {
     focus(): void;
     getMaskedValue(value: any): any;
     getValueAsString(value: any, options: any): any;
+    setErrorClasses(elements: any, dirty: any, hasErrors: any, hasMessages: any, element?: any): void;
+    /**
+     * Points the invalid inputs at the rendered error messages through `aria-describedby`, so a
+     * screen reader announces what is wrong with the value. The base class only marks the input
+     * `aria-invalid`, which says the value was rejected but not why.
+     * @param {Array<HTMLElement>} elements - The input elements the errors apply to.
+     * @param {boolean} hasErrors - TRUE if the component currently has errors.
+     * @returns {void}
+     */
+    linkErrorMessages(elements: Array<HTMLElement>, hasErrors: boolean): void;
+    errorMessageIds: any[] | undefined;
 }
 import Input from '../_classes/input/Input';

package/lib/mjs/components/number/Number.js

@@ -268,4 +268,38 @@ export default class NumberComponent extends Input {
             element.value = this.getValueAsString(this.formatValue(this.parseValue(element.value)));
         });
     }
+    setErrorClasses(elements, dirty, hasErrors, hasMessages, element = this.element) {
+        super.setErrorClasses(elements, dirty, hasErrors, hasMessages, element);
+        this.linkErrorMessages(elements, hasErrors);
+    }
+    /**
+     * Points the invalid inputs at the rendered error messages through `aria-describedby`, so a
+     * screen reader announces what is wrong with the value. The base class only marks the input
+     * `aria-invalid`, which says the value was rejected but not why.
+     * @param {Array<HTMLElement>} elements - The input elements the errors apply to.
+     * @param {boolean} hasErrors - TRUE if the component currently has errors.
+     * @returns {void}
+     */
+    linkErrorMessages(elements, hasErrors) {
+        const previousIds = this.errorMessageIds || [];
+        const renderedMessages = Array.from(this.refs.messageContainer?.children || []);
+        const errorIds = hasErrors ? renderedMessages.map((message) => message.id).filter(Boolean) : [];
+        const invalidInputs = hasErrors ? Array.from(elements || []) : [];
+        const isOwnErrorId = (id) => previousIds.includes(id) || errorIds.includes(id);
+        Array.from(this.refs.input || []).forEach((input) => {
+            const describedBy = (input.getAttribute('aria-describedby') || '')
+                .split(' ')
+                .filter((id) => id && !isOwnErrorId(id));
+            if (invalidInputs.includes(input)) {
+                describedBy.push(...errorIds);
+            }
+            if (describedBy.length) {
+                input.setAttribute('aria-describedby', describedBy.join(' '));
+            }
+            else {
+                input.removeAttribute('aria-describedby');
+            }
+        });
+        this.errorMessageIds = errorIds;
+    }
 }

package/lib/mjs/components/number/editForm/Number.edit.display.js

@@ -11,6 +11,18 @@ export default [
         key: 'allowMultipleMasks',
         ignore: true,
     },
+    {
+        key: 'inputMasks',
+        ignore: true,
+    },
+    {
+        key: 'widget.type',
+        ignore: true,
+    },
+    {
+        key: 'widget',
+        ignore: true,
+    },
     {
         key: 'showWordCount',
         ignore: true,

package/lib/mjs/components/password/editForm/Password.edit.display.js

@@ -11,4 +11,16 @@ export default [
         key: 'allowMultipleMasks',
         ignore: true,
     },
+    {
+        key: 'inputMasks',
+        ignore: true,
+    },
+    {
+        key: 'widget.type',
+        ignore: true,
+    },
+    {
+        key: 'widget',
+        ignore: true,
+    },
 ];

package/lib/mjs/components/phonenumber/PhoneNumber.form.js

@@ -18,6 +18,14 @@ export default function (...extend) {
                     key: 'showCharCount',
                     ignore: true,
                 },
+                {
+                    key: 'widget.type',
+                    ignore: true,
+                },
+                {
+                    key: 'widget',
+                    ignore: true,
+                },
             ],
         },
         {

package/lib/mjs/components/select/editForm/Select.edit.data.d.ts

@@ -1057,6 +1057,7 @@ declare const _default: ({
     alwaysEnabled?: undefined;
 } | {
     key: string;
+    type: string;
     conditional: {
         json: {
             and: ({
@@ -1107,7 +1108,6 @@ declare const _default: ({
         };
     };
     data?: undefined;
-    type?: undefined;
     as?: undefined;
     editor?: undefined;
     weight?: undefined;

package/lib/mjs/components/select/editForm/Select.edit.data.js

@@ -619,6 +619,7 @@ export default [
     },
     {
         key: 'selectData',
+        type: 'hidden',
         conditional: {
             json: {
                 and: [

package/lib/mjs/components/tabs/editForm/Tabs.edit.display.js

@@ -3,6 +3,14 @@ export default [
         key: 'labelPosition',
         ignore: true,
     },
+    {
+        key: 'labelWidth',
+        ignore: true,
+    },
+    {
+        key: 'labelMargin',
+        ignore: true,
+    },
     {
         key: 'placeholder',
         ignore: true,

package/lib/mjs/components/textarea/editForm/TextArea.edit.display.js

@@ -9,10 +9,22 @@ export default [
         key: 'allowMultipleMasks',
         ignore: true,
     },
+    {
+        key: 'inputMasks',
+        ignore: true,
+    },
     {
         key: 'mask',
         ignore: true,
     },
+    {
+        key: 'widget.type',
+        ignore: true,
+    },
+    {
+        key: 'widget',
+        ignore: true,
+    },
     {
         type: 'number',
         input: true,

package/lib/mjs/components/url/editForm/Url.edit.display.js

@@ -7,6 +7,18 @@ export default [
         key: 'allowMultipleMasks',
         ignore: true,
     },
+    {
+        key: 'inputMasks',
+        ignore: true,
+    },
+    {
+        key: 'widget.type',
+        ignore: true,
+    },
+    {
+        key: 'widget',
+        ignore: true,
+    },
     {
         key: 'showWordCount',
         ignore: true,

package/lib/mjs/components/well/editForm/Well.edit.display.js

@@ -3,6 +3,14 @@ export default [
         key: 'labelPosition',
         ignore: true,
     },
+    {
+        key: 'labelWidth',
+        ignore: true,
+    },
+    {
+        key: 'labelMargin',
+        ignore: true,
+    },
     {
         key: 'placeholder',
         ignore: true,

package/lib/mjs/package.json

@@ -1,5 +1,5 @@
 {
     "type": "module",
-    "version": "5.6.1"
+    "version": "5.7.0"
     
 }

package/lib/mjs/utils/utils.js

@@ -449,9 +449,7 @@ export function setActionProperty(component, action, result, row, data, instance
         case 'string': {
             const safeData = escapeInterpolationDataStrings(data);
             const safeRow = escapeInterpolationDataStrings(row);
-            const safeResult = typeof result === 'string'
-                ? _.escape(result)
-                : escapeInterpolationDataStrings(result);
+            const safeResult = typeof result === 'string' ? _.escape(result) : escapeInterpolationDataStrings(result);
             const evalData = {
                 data: safeData,
                 row: safeRow,
@@ -1705,21 +1703,11 @@ function getScreenReaderMessage(component, type, value) {
             }
         }
     }
-    else if (typeof value === 'number' || value === null) {
-        if (value != null && value !== '') {
-            if (!isNaN(max) && value > max) {
-                message += `Number cannot be greater than ${max}. `;
-            }
-            if (!isNaN(min) && value < min) {
-                message += `Number cannot be less than ${min}.`;
-            }
-        }
-        else {
-            if (!isNaN(min))
-                message += `Minimum value ${min}. `;
-            if (!isNaN(max))
-                message += `Maximum value ${max}. `;
-        }
+    else if (value === null) {
+        if (!isNaN(min))
+            message += `Minimum value ${min}. `;
+        if (!isNaN(max))
+            message += `Maximum value ${max}. `;
     }
     return message.trim();
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formio/js",
-  "version": "5.6.1",
+  "version": "5.7.0",
   "description": "JavaScript powered Forms with JSON Form Builder",
   "main": "lib/cjs/index.js",
   "exports": {