Feat/fields no constraint no validation

documents/scripts/element.injector.js

@@ -44,7 +44,7 @@ const handler = async () => {
       const hasApi = apiReferenceIndices.some(index => index !== -1);
 
       if(hasApi) {
-        content += '\n\n---\n' + '\n## API Reference\n';
+        content += '\n\n---\n' + '\n## API reference\n';
       }
 
       for(let i=0; i<apiReferenceIndices.length; i++) {

documents/src/pages/elements/email-field.md

@@ -47,7 +47,7 @@ p {
 </ef-email-field>
 ```
 
-## Getting value
+## Getting a value
 The field's value can be accessed directly using the `value` property.
 
 ```html
@@ -197,7 +197,7 @@ emailField?.addEventListener("input", () => {
 });
 ```
 
-### Use pattern
+### Using a pattern
 You can use a regular expression to validate the input value by adding the `pattern` attribute.
 
 ::
@@ -283,7 +283,168 @@ emailField?.addEventListener("input", () => {
 });
 ```
 
-## Show icon
+### Custom validation
+
+For advance use cases, default validation and error state of the field can be overridden. To do this, make sure that `maxLength` & `minLength` are not set and `pattern` is set to `''`, then validate with your customised validation logic and update `error` property accordingly.
+
+::
+
+```javascript
+::text-field::
+const fullName = document.getElementById("full-name");
+const email = document.getElementById("email");
+const responseText = document.getElementById("response-text");
+const save = document.getElementById("button");
+
+save.addEventListener("tap", () => {
+  const isPartial = Boolean(fullName.value) !== Boolean(email.value);
+  fullName.error = isPartial ? !fullName.value : false;
+  email.error = isPartial ? !email.value : false;
+  if (isPartial) {
+    responseText.classList.add('error');
+    responseText.innerHTML = "Full name & email must be provided together";
+  } else if (email.value && !/^\[email protected]$/.test(email.value)) {
+    email.error = true;
+    responseText.innerHTML = "Email must be valid and end with @mail.com";
+  } else {
+    responseText.innerHTML = "Saved";
+  }
+});
+
+const inputHandler = () => {
+  responseText.classList.remove('error');
+  fullName.error = false;
+  email.error = false;
+  responseText.innerHTML = "";
+};
+
+fullName.addEventListener("input", inputHandler);
+email.addEventListener("input", inputHandler);
+```
+
+```css
+.error {
+  color: #d94255;
+}
+ef-text-field, ef-email-field {
+  width: 250px;
+}
+label {
+  display: block;
+}
+
+#response-text {
+  min-height: 18px;
+}
+```
+
+```html
+<p>Please provide secondary contact if available</p>
+<label for="full-name">Full name</label>
+<ef-text-field
+  id="full-name"
+  aria-describedby="response-text"
+  placeholder="Full name as shown on the passport">
+</ef-text-field>
+<label for="email">Email</label>
+<ef-email-field
+  id="email"
+  aria-describedby="response-text"
+  placeholder="Actively used email address">
+</ef-email-field>
+<p id="response-text"></p>
+<ef-button id="button">Save</ef-button>
+```
+
+::
+
+```html
+<p>Please provide secondary contact if available</p>
+<label for="full-name">Full name</label>
+<ef-text-field
+  id="full-name"
+  aria-describedby="response-text"
+  placeholder="Full name as shown on the passport">
+</ef-text-field>
+<label for="email">Email</label>
+<ef-email-field
+  id="email"
+  aria-describedby="response-text"
+  placeholder="Actively used email address">
+</ef-email-field>
+<p id="response-text"></p>
+<ef-button id="button">Save</ef-button>
+```
+
+```javascript
+const fullName = document.getElementById("full-name");
+const email = document.getElementById("email");
+const responseText = document.getElementById("response-text");
+const save = document.getElementById("button");
+
+save.addEventListener("tap", () => {
+  const isPartial = Boolean(fullName.value) !== Boolean(email.value);
+  fullName.error = isPartial ? !fullName.value : false;
+  email.error = isPartial ? !email.value : false;
+  if (isPartial) {
+    responseText.classList.add('error');
+    responseText.innerHTML = "Full name & email must be provided together";
+  } else if (email.value && !/^\[email protected]$/.test(email.value)) {
+    email.error = true;
+    responseText.innerHTML = "Email must be valid and end with @mail.com";
+  } else {
+    responseText.innerHTML = "Saved";
+  }
+});
+
+const inputHandler = () => {
+  responseText.classList.remove('error');
+  fullName.error = false;
+  email.error = false;
+  responseText.innerHTML = "";
+};
+
+fullName.addEventListener("input", inputHandler);
+email.addEventListener("input", inputHandler);
+```
+
+```typescript
+import type { TextField } from "@refinitiv-ui/elements/text-field";
+import type { EmailField } from "@refinitiv-ui/elements/email-field";
+import type { Button } from "@refinitiv-ui/elements/button";
+
+const fullName = document.getElementById("full-name") as TextField;
+const email = document.getElementById("email") as EmailField;
+const responseText = document.getElementById("response-text") as HTMLElement;
+const save = document.getElementById("button") as Button;
+
+save.addEventListener("tap", () => {
+  const isPartial = Boolean(fullName.value) !== Boolean(email.value);
+  fullName.error = isPartial ? !fullName.value : false;
+  email.error = isPartial ? !email.value : false;
+  if (isPartial) {
+    responseText.classList.add('error');
+    responseText.innerHTML = "Full name & email must be provided together";
+  } else if (email.value && !/^\[email protected]$/.test(email.value)) {
+    email.error = true;
+    responseText.innerHTML = "Email must be valid and end with @mail.com";
+  } else {
+    responseText.innerHTML = "Saved";
+  }
+});
+
+const inputHandler = () => {
+  responseText.classList.remove('error');
+  fullName.error = false;
+  email.error = false;
+  responseText.innerHTML = "";
+};
+
+fullName.addEventListener("input", inputHandler);
+email.addEventListener("input", inputHandler);
+```
+
+## Showing an icon
 An inline icon can be displayed inside the input using `icon`.
 
 ```html

documents/src/pages/elements/number-field.md

@@ -56,7 +56,7 @@ Number field can be used in a similar fashion to the native number input.
 <ef-number-field id="total" value="1000"></ef-number-field>
 ```
 
-## Getting value
+## Getting a value
 Just like the HTML native input, the number field input value is a `string` which can be accessed using the `value` property.
 
 ```html
@@ -204,7 +204,7 @@ numberField?.addEventListener("input", () => {
 });
 ```
 
-### Set min or max
+### Setting min or max
 Minimum and maximum values can be set to limit input values when the user interacts. If a value exceeds the min or max set programmatically, the component will display an error state.
 
 ```html
@@ -216,7 +216,7 @@ Minimum and maximum values can be set to limit input values when the user intera
 </ef-number-field>
 ```
 
-### Set input step
+### Setting input step
 The step attribute specifies the interval between valid numbers. For instance, when `step="2"`, valid values would only be even numbers e.g. 2,4,6,8... Alternatively, specify the `step="any"` to allow any value.
 
 ::
@@ -246,6 +246,159 @@ The step attribute specifies the interval between valid numbers. For instance, w
 <ef-number-field id="any" step="any"></ef-number-field>
 ```
 
+### Custom validation
+
+For advance use cases, default validation and error state of the field can be overridden. To do this, make sure that `max` & `min` are not set and `step` is set to `any`, then validate with your customised validation logic and update `error` property accordingly.
+
+::
+
+```javascript
+::number-field::
+const numberField = document.getElementById("prime-number");
+const errorText = document.getElementById("error-text");
+
+const isPrime = (n) => {
+  if (n <= 1) {
+    return false;
+  }
+
+  if (n === 2 || n === 3) {
+    return true;
+  }
+
+  for (let i = 2; i <= Math.sqrt(n); i++) {
+    if (n % i === 0) {
+      return false;
+    }
+  }
+  return true;
+};
+
+numberField.addEventListener("blur", () => {
+  const value = Number(numberField.value);
+  const error = !isPrime(value);
+  numberField.error = error;
+  errorText.textContent = error ? "Start value must be a prime number" : "";
+});
+
+numberField.addEventListener("input", () => {
+  const value = Number(numberField.value);
+  if (isPrime(value)) {
+    errorText.textContent = "";
+  }
+});
+```
+
+```css
+#error-text {
+  color:#d94255;
+}
+ef-number-field {
+  width: 250px;
+}
+label {
+  display: block;
+}
+```
+
+```html
+<label for="prime-number">Prime number</label>
+<ef-number-field
+  id="prime-number"
+  aria-describedby="error-text"
+  step="any"
+  placeholder="Please input a prime number">
+</ef-number-field>
+<p id="error-text"></p>
+```
+
+::
+
+```html
+<label for="prime-number">Start value</label>
+<ef-number-field
+  id="prime-number"
+  aria-describedby="error-text"
+  step="any"
+  placeholder="any prime number such as 2, 3 and 5">
+</ef-number-field>
+<p id="error-text"></p>
+```
+
+```javascript
+const numberField = document.getElementById("prime-number");
+const errorText = document.getElementById("error-text");
+
+const isPrime = (n) => {
+  if (n <= 1) {
+    return false;
+  }
+
+  if (n === 2 || n === 3) {
+    return true;
+  }
+
+  for (let i = 2; i <= Math.sqrt(n); i++) {
+    if (n % i === 0) {
+      return false;
+    }
+  }
+  return true;
+};
+
+numberField.addEventListener("blur", () => {
+  const value = Number(numberField.value);
+  const error = !isPrime(value);
+  numberField.error = error;
+  errorText.textContent = error ? "Start value must be a prime number" : "";
+});
+
+numberField.addEventListener("input", () => {
+  const value = Number(numberField.value);
+  if (isPrime(value)) {
+    errorText.textContent = "";
+  }
+});
+```
+
+```typescript
+import type { NumberField } from "@refinitiv-ui/elements/number-field";
+
+const numberField = document.getElementById("prime-number") as NumberField;
+const errorText = document.getElementById("error-text") as HTMLElement;
+
+const isPrime = (n: number) => {
+  if (n <= 1) {
+    return false;
+  }
+
+  if (n === 2 || n === 3) {
+    return true;
+  }
+
+  for (let i = 2; i <= Math.sqrt(n); i++) {
+    if (n % i === 0) {
+      return false;
+    }
+  }
+  return true;
+};
+
+numberField.addEventListener("blur", () => {
+  const value = Number(numberField.value);
+  const error = !isPrime(value);
+  numberField.error = error;
+  errorText.textContent = error ? "Start value must be a prime number" : "";
+});
+
+numberField.addEventListener("input", () => {
+  const value = Number(numberField.value);
+  if (isPrime(value)) {
+    errorText.textContent = "";
+  }
+});
+```
+
 ## Accessibility
 ::a11y-intro::