Merge pull request #795 from Refinitiv/sync-change-v6-to-v7

Sync change v6 to v7

documents/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.5.10](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/[email protected]...@refinitiv-ui/[email protected]) (2023-06-30)
+
+**Note:** Version bump only for package @refinitiv-ui/docs
+
+
+
+
+
 ## [6.5.9](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/[email protected]...@refinitiv-ui/[email protected]) (2023-06-23)
 
 **Note:** Version bump only for package @refinitiv-ui/docs

documents/package.json

@@ -29,7 +29,7 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "esbuild": "^0.18.1",
-    "pandora-book": "file:tools/pandora-book-3.0.0-68.tgz",
+    "pandora-book": "file:tools/pandora-book-3.0.0-70.tgz",
     "serve": "^14.2.0"
   },
   "dependencies": {

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

@@ -102,24 +102,9 @@ element.addEventListener('value-changed', (e) => {
 });
 ```
 
-## Input validation
-To validate input from users, `ef-number-field` provides similar features to a native input. When a user assigns an invalid input to the control, it will automatically apply an error style to alert the user. However, if you define a default value that is invalid, you need to call `input.reportValidity()` during initialization to ensure the error style is applied.
-
-@> Validation of user input of `ef-number-field` is consistent with a native input. [See native input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number).
-
 ## Set min or max value
 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.
 
-::
-```javascript
-::number-field::
-document.getElementById('mm').value = '-15';
-```
-```html
-<ef-number-field placeholder="Min/Max" min="-12" max="16" id="mm"></ef-number-field>
-```
-::
-
 ```html
 <ef-number-field placeholder="Min/Max" min="-12" max="16"></ef-number-field>
 ```
@@ -142,46 +127,15 @@ The step attribute specifies the interval between valid numbers. For instance, w
 <ef-number-field placeholder="Even numbers only" step="2"></ef-number-field>
 ```
 
-Whenever input is invalid, the error attribute will be added to the element. You can use the `error` property to check if input is currently in the error state.
+## Input validation
+To validate input from users, `ef-number-field` provides similar features to a native input. When a user assigns an invalid input to the control, it will automatically apply an error style to alert the user. However, if you define a default value that is invalid, you need to call `input.reportValidity()` during initialization to ensure the error style is applied.
 
-```html
-<ef-number-field
-  placeholder="Enter number less than 2"
-  id="number-input"
-  value="3"
-  max="2">
-</ef-number-field>
-```
+@> Validation of user input of `ef-number-field` is consistent with a native input. [See native input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number).
 
-```javascript
-const numberInput = document.getElementById('number-input');
-console.log(numberInput.error); // "true"
-```
+Whenever input is invalid, the error attribute will be added to the element. You can use the `error` property to check if input is currently in the error state.
 
 You can add the event listener `error-changed` to the element and it will dispatch whenever the error state changes.
 
-::
-```javascript
-::number-field::
-const element = document.getElementById('input');
-const errorChangedText = document.getElementById('error-text');
-element.value = "-1"
-
-element.addEventListener('error-changed', (e) => {
-  if (e.detail.value) {
-    errorChangedText.innerHTML = "Value must be between 0 - 10.";
-  }
-  else {
-    errorChangedText.innerHTML = "";
-  }
-  });
-```
-```html
-<ef-number-field id="input" placeholder="Enter number between 0 - 10" min="0" max="10"></ef-number-field>
-<p>Error: <code id="error-text"></code></p>
-```
-::
-
 ```html
 <ef-number-field
   id="input"
@@ -195,7 +149,6 @@ element.addEventListener('error-changed', (e) => {
 ```javascript
 const element = document.getElementById('input');
 const errorChangedText = document.getElementById('error-text');
-element.value = '-1';
 
 element.addEventListener('error-changed', (e) => {
   if (e.detail.value) {