diff --git a/documents/scripts/element.injector.js b/documents/scripts/element.injector.js index f0093c0aeb..c9125398fe 100644 --- a/documents/scripts/element.injector.js +++ b/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 ``` -## Getting value +## Getting a value The field's value can be accessed directly using the `value` property. ```html @@ -99,14 +99,14 @@ emailField?.addEventListener("value-changed", (event) => { }); ``` -## Input Validation +## Input validation `ef-email-field` has validation logic similar to a [native input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email). When a user types an invalid value into the control, error style will be shown to notify the user. You can call `reportValidity()` to trigger the validation anytime and it will set error style if input is invalid. In case that the input is initialised with an invalid value and you need to show the error style, you must call `reportValidity()` once the input is defined on the page. Whenever input is invalid, the `error` attribute will be added to the element. You can use the `error` property to check whether input is currently in the error state or not. -### Input Length +### Input length The `maxlength` attribute limits the number of characters that users can type into the input and the `minlength` attribute is used to set the minimum of characters required. `ef-email-field` will show error styles if the condition is not met. @> `maxlength` and `minlength` constraint validations are only applied when the value is changed by the user. [See input email](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email#maxlength). @@ -197,7 +197,7 @@ emailField?.addEventListener("input", () => { }); ``` -### Using pattern +### Using a pattern You can use a regular expression to validate the input value by adding the `pattern` attribute. :: @@ -283,7 +283,7 @@ emailField?.addEventListener("input", () => { }); ``` -### Custom Validation +### 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. @@ -444,7 +444,7 @@ fullName.addEventListener("input", inputHandler); email.addEventListener("input", inputHandler); ``` -## Showing icon +## Showing an icon An inline icon can be displayed inside the input using `icon`. ```html diff --git a/documents/src/pages/elements/number-field.md b/documents/src/pages/elements/number-field.md index 1b76d25317..9361228547 100644 --- a/documents/src/pages/elements/number-field.md +++ b/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. ``` -## 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 @@ -122,7 +122,7 @@ numberField?.addEventListener("value-changed", (event) => { }); ``` -## Input Validation +## Input validation `ef-number-field` has validation logic similar to a [native input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number). When a user types an invalid value into the control, error style will be shown to notify the user. You can call `reportValidity()` to trigger the validation anytime and it will set error style if input is invalid. In case that the input is initialised with an invalid value and you need to show the error style, you must call `reportValidity()` once the input is defined on the page. @@ -246,7 +246,7 @@ The step attribute specifies the interval between valid numbers. For instance, w ``` -### Custom Validation +### 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. diff --git a/documents/src/pages/elements/password-field.md b/documents/src/pages/elements/password-field.md index d4b3051f12..b86a38ac92 100644 --- a/documents/src/pages/elements/password-field.md +++ b/documents/src/pages/elements/password-field.md @@ -95,7 +95,7 @@ ul { ``` -## Getting value +## Getting a value The value can be accessed through the `value` property. ```html @@ -159,14 +159,14 @@ passwordField?.addEventListener("value-changed", (event) => { }); ``` -## Input Validation +## Input validation `ef-password-field` has validation logic similar to a [native input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password). When a user types an invalid value into the control, error style will be shown to notify the user. You can call `reportValidity()` to trigger the validation anytime and it will set error style if input is invalid. In case that the input is initialised with an invalid value and you need to show the error style, you must call `reportValidity()` once the input is defined on the page. Whenever input is invalid, the `error` attribute will be added to the element. You can use the `error` property to check whether input is currently in the error state or not. -### Input Length +### Input length The `maxlength` attribute limits the number of characters that can be typed into the input, and the `minlength` attribute sets the minimum of characters. `ef-password-field` will show error styles if a condition is not met. @> `maxlength` and `minlength` constraint validations are only applied when the value is changed by the user. [See input password](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password#maxlength). @@ -256,7 +256,7 @@ passwordField?.addEventListener("input", () => { }); ``` -### Using pattern +### Using a pattern You can use a regular expression to validate the input value by setting it to the `pattern` attribute. :: @@ -346,7 +346,7 @@ passwordField?.addEventListener("input", () => { }); ``` -### Custom Validation +### 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` and `pattern` are not set, then validate with your customised validation logic and update `error` property accordingly. diff --git a/documents/src/pages/elements/search-field.md b/documents/src/pages/elements/search-field.md index d7d195f5f1..01aa3ffc9b 100644 --- a/documents/src/pages/elements/search-field.md +++ b/documents/src/pages/elements/search-field.md @@ -33,7 +33,7 @@ language_tabs: [javascript, typescript] ``` -## Getting value +## Getting a value The value can be accessed using the `value` property. You can also listen to the `value-changed` event, which triggers whenever user interactions change the value. @@ -88,14 +88,14 @@ searchField?.addEventListener("value-changed", (event) => { }); ``` -## Input Validation +## Input validation `ef-search-field` has validation logic similar to a [native input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search). When a user types an invalid value into the control, error style will be shown to notify the user. You can call `reportValidity()` to trigger the validation anytime and it will set error style if input is invalid. In case that the input is initialised with an invalid value and you need to show the error style, you must call `reportValidity()` once the input is defined on the page. Whenever input is invalid, the `error` attribute will be added to the element. You can use the `error` property to check whether input is currently in the error state or not. -### Input Length +### Input length The `maxlength` attribute limits the number of characters that users can enter and the `minlength` attribute sets the minimum number of characters required. `ef-search-field` will show error styles if a condition is not met. @> `maxlength` and `minlength` constraint validations are only applied when the value is changed by the user. [See input search](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search#maxlength). @@ -185,7 +185,7 @@ searchField?.addEventListener("input", () => { }); ``` -### Using pattern +### Using a pattern You can use a regular expression to validate the input value by setting it to the `pattern` attribute. :: @@ -271,7 +271,7 @@ searchField?.addEventListener("input", () => { }); ``` -### Custom Validation +### 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` and `pattern` are not set, then validate with your customised validation logic and update `error` property accordingly. @@ -388,7 +388,7 @@ searchField.addEventListener("input", () => { }); ``` -## Icon Action +## Icon action The search icon can become actionable by adding the `icon-has-action` attribute to the element, so that `ef-search-field` will fire an `icon-click` event when a user clicks on the icon. You can add an event listener to this event to execute your code. :: diff --git a/documents/src/pages/elements/text-field.md b/documents/src/pages/elements/text-field.md index 48472df42c..26b7769f57 100644 --- a/documents/src/pages/elements/text-field.md +++ b/documents/src/pages/elements/text-field.md @@ -59,7 +59,7 @@ Text field is used to accept text input from users and has similar behaviors to ``` -## Getting value +## Getting a value The field's value can be accessed using the `value` property. You can also listen for the `value-changed` event. This event triggers when user interactions change the value. @@ -88,14 +88,14 @@ textField?.addEventListener("value-changed", (event) => { }); ``` -## Input Validation +## Input validation `ef-text-field` has validation logic similar to a [native input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text). When a user types an invalid value into the control, error style will be shown to notify the user. You can call `reportValidity()` to trigger the validation anytime and it will set error style if input is invalid. In case that the input is initialised with an invalid value and you need to show the error style, you must call `reportValidity()` once the input is defined on the page. Whenever input is invalid, the `error` attribute will be added to the element. You can use the `error` property to check whether input is currently in the error state or not. -### Input Length +### Input length The `maxlength` attribute limits the number of characters that users can type into the input, and the `minlength` attribute sets the minimum number of characters required. `ef-text-field` will show error styles if a condition is not met. @> `maxlength` and `minlength` constraint validations are only applied when the value is changed by the user. [See input text](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text#maxlength). @@ -190,7 +190,7 @@ textField?.addEventListener("input", () => { }); ``` -### Using pattern +### Using a pattern You can use a regular expression to validate the input value by setting it with the `pattern` attribute. :: @@ -285,7 +285,7 @@ textField?.addEventListener("input", () => { }); ``` -### Custom Validation +### 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` and `pattern` are not set, then validate with your customised validation logic and update `error` property accordingly. @@ -430,7 +430,7 @@ firstName.addEventListener("input", inputHandler); lastName.addEventListener("input", inputHandler); ``` -## Showing icon +## Showing an icon An inline icon can be set to display inside the input using the `icon` attribute. ::