@refinitiv-ui/elements 7.4.0 → 7.6.0

package/lib/email-field/custom-elements.md

@@ -28,6 +28,13 @@ A form control element for email.
 | `value`         | `value`           | `string`         | ""      | Input's value                                    |
 | `warning`       | `warning`         | `boolean`        | false   | Set warning state                                |
 
+## Methods
+
+| Method           | Type          | Description                                      |
+|------------------|---------------|--------------------------------------------------|
+| `checkValidity`  | `(): boolean` | Returns `true` if the element input is valid; otherwise, returns `false`. |
+| `reportValidity` | `(): boolean` | Validate the element input and mark it as error if its input is invalid. |
+
 ## Events
 
 | Event           | Description                                      |

package/lib/email-field/index.d.ts

@@ -1,5 +1,4 @@
 import { JSXInterface } from '../jsx';
-import { PropertyValues } from '@refinitiv-ui/core';
 import { TemplateMap } from '@refinitiv-ui/core/directives/template-map.js';
 import '../icon/index.js';
 import { TextField } from '../text-field/index.js';
@@ -50,6 +49,16 @@ export declare class EmailField extends TextField {
      * Set to multiple mode, allows multiple emails in a single input
      */
     multiple: boolean;
+    /**
+     * Returns `true` if the element input is valid; otherwise, returns `false`.
+     * @returns element input validity
+     */
+    checkValidity(): boolean;
+    /**
+     * Validate the element input and mark it as error if its input is invalid.
+     * @returns `true` if the element input is valid; otherwise, returns `false`.
+     */
+    reportValidity(): boolean;
     /**
      * Decorate `<input>` element with common properties extended from text-field:
      * type="email" - always `email`
@@ -57,12 +66,6 @@ export declare class EmailField extends TextField {
      * @returns template map
      */
     protected get decorateInputMap(): TemplateMap;
-    /**
-     * Check if input should be re-validated
-     * @param changedProperties Properties that has changed
-     * @returns True if input should be re-validated
-     */
-    protected shouldValidateInput(changedProperties: PropertyValues): boolean;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/lib/email-field/index.js

@@ -52,7 +52,20 @@ let EmailField = class EmailField extends TextField {
          * Set to multiple mode, allows multiple emails in a single input
          */
         this.multiple = false;
-        /* c8 ignore stop */
+    }
+    /**
+     * Returns `true` if the element input is valid; otherwise, returns `false`.
+     * @returns element input validity
+     */
+    checkValidity() {
+        return super.checkValidity();
+    }
+    /**
+     * Validate the element input and mark it as error if its input is invalid.
+     * @returns `true` if the element input is valid; otherwise, returns `false`.
+     */
+    reportValidity() {
+        return super.reportValidity();
     }
     /**
      * Decorate `<input>` element with common properties extended from text-field:
@@ -68,18 +81,6 @@ let EmailField = class EmailField extends TextField {
             multiple: this.multiple
         };
     }
-    /**
-     * Check if input should be re-validated
-     * @param changedProperties Properties that has changed
-     * @returns True if input should be re-validated
-     */
-    /* c8 ignore start */
-    shouldValidateInput(changedProperties) {
-        // TODO: This validation should be refactored
-        return (changedProperties.has('value') ||
-            changedProperties.has('multiple') ||
-            super.shouldValidateInput(changedProperties));
-    }
 };
 __decorate([
     property({ type: Boolean, reflect: true })

package/lib/interactive-chart/index.js

@@ -957,6 +957,7 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
                 const dataSet = series.data || [];
                 const latestData = dataSet[dataSet.length - 1];
                 if (latestData) {
+                    this.hasDataPoint = dataSet.length > 0;
                     const priceColor = this.getColorInSeries(latestData, chartType, idx);
                     // Render legend by series type
                     this.renderTextLegend(chartType, this.rowLegend, latestData, priceColor, idx);

package/lib/number-field/custom-elements.json

@@ -166,9 +166,6 @@
         {
           "name": "step-down",
           "description": "Fired when user acts value down on both pressing arrow down or tapping the spinner down. The event is not triggered if stepDown method is called programmatically."
-        },
-        {
-          "name": "input"
         }
       ],
       "methods": [
@@ -193,13 +190,13 @@
           ]
         },
         {
-          "name": "checkValidity",
-          "description": "Returns true if an input element contains valid data.",
+          "name": "reportValidity",
+          "description": "Validate the element input and mark it as error if its input is invalid.",
           "params": []
         },
         {
-          "name": "reportValidity",
-          "description": "Validate input. Mark as error if input is invalid",
+          "name": "checkValidity",
+          "description": "Returns `true` if the element input is valid; otherwise, returns `false`.",
           "params": []
         }
       ]

package/lib/number-field/custom-elements.md

@@ -23,8 +23,8 @@ Form control element for numbers.
 
 | Method           | Type                                          | Description                                      |
 |------------------|-----------------------------------------------|--------------------------------------------------|
-| `checkValidity`  | `(): boolean`                                 | Returns true if an input element contains valid data. |
-| `reportValidity` | `(): boolean`                                 | Validate input. Mark as error if input is invalid |
+| `checkValidity`  | `(): boolean`                                 | Returns `true` if the element input is valid; otherwise, returns `false`. |
+| `reportValidity` | `(): boolean`                                 | Validate the element input and mark it as error if its input is invalid. |
 | `stepDown`       | `(stepIncrement?: number \| undefined): void` | Decreases the input value by amount of step<br /><br />**stepIncrement**: The stepIncrement parameter is a numeric value. If no parameter is passed, stepIncrement defaults to 1. |
 | `stepUp`         | `(stepIncrement?: number \| undefined): void` | Increases the input value by amount of step<br /><br />**stepIncrement**: The stepIncrement parameter is a numeric value. If no parameter is passed, stepIncrement defaults to 1. |
 
@@ -33,7 +33,6 @@ Form control element for numbers.
 | Event           | Description                                      |
 |-----------------|--------------------------------------------------|
 | `error-changed` | Fired when user inputs invalid value. The event is not triggered if `error` property is changed programmatically. |
-| `input`         |                                                  |
 | `step-down`     | Fired when user acts value down on both pressing arrow down or tapping the spinner down. The event is not triggered if stepDown method is called programmatically. |
 | `step-up`       | Fired when user acts value up on both pressing arrow up or tapping the spinner up. The event is not triggered if stepUp method is called programmatically. |
 | `value-changed` | Fired when user commits a value change. The event is not triggered if `value` property is changed programmatically. |

package/lib/number-field/index.d.ts

@@ -209,11 +209,6 @@ export declare class NumberField extends FormFieldElement {
      * @returns {void}
      */
     private setSilentlyValueAndNotify;
-    /**
-     * Reset error state on input
-     * @returns {void}
-     */
-    private resetError;
     /**
      * Get the allowed step value
      * @returns allowed step
@@ -267,15 +262,15 @@ export declare class NumberField extends FormFieldElement {
      */
     stepDown(stepIncrement?: number): void;
     /**
-     * Returns true if an input element contains valid data.
-     * @returns true if input is valid
+     * Validate the element input and mark it as error if its input is invalid.
+     * @returns `true` if the element input is valid; otherwise, returns `false`.
      */
-    checkValidity(): boolean;
+    reportValidity(): boolean;
     /**
-     * Validate input. Mark as error if input is invalid
-     * @returns false if there is an error
+     * Returns `true` if the element input is valid; otherwise, returns `false`.
+     * @returns element input validity
      */
-    reportValidity(): boolean;
+    checkValidity(): boolean;
     /**
      * @ignore
      * @inheritDoc

package/lib/number-field/index.js

@@ -138,8 +138,6 @@ let NumberField = class NumberField extends FormFieldElement {
      * @returns {void}
      */
     update(changedProperties) {
-        // This code probably should not be here, as validation must be instantiated by the app developer
-        // Keep the element inline with others for now
         if (changedProperties.has(FocusedPropertyKey) && !this.focused) {
             this.reportValidity();
         }
@@ -291,6 +289,10 @@ let NumberField = class NumberField extends FormFieldElement {
         if (event) {
             try {
                 this.applyStepDirection(direction);
+                /**
+                 * @ignore
+                 * exclude native event from the documentation
+                 */
                 this.dispatchEvent(new InputEvent('input'));
                 this.setSilentlyValueAndNotify();
             }
@@ -362,16 +364,14 @@ let NumberField = class NumberField extends FormFieldElement {
     onNativeInputChange(event) {
         const currentInput = this.inputValue;
         const inputValue = this.stripeInvalidCharacters(currentInput, this.value, event.data || '');
-        if (inputValue !== currentInput) {
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            const inputEl = this.inputElement;
+        if (inputValue !== currentInput && this.inputElement) {
             // we can only stripe the characters, so try to make the best guess where the cursor should be
-            const selectionStart = inputEl.selectionStart || 0;
-            const selectionEnd = inputEl.selectionEnd || 0;
+            const selectionStart = this.inputElement.selectionStart || 0;
+            const selectionEnd = this.inputElement.selectionEnd || 0;
             this.inputValue = inputValue;
             const diff = currentInput.length - inputValue.length;
-            inputEl.selectionStart = Math.max(selectionStart - diff, 0);
-            inputEl.selectionEnd = Math.max(selectionEnd - diff, 0);
+            this.inputElement.selectionStart = Math.max(selectionStart - diff, 0);
+            this.inputElement.selectionEnd = Math.max(selectionEnd - diff, 0);
         }
         this.setSilentlyValueAndNotify();
     }
@@ -418,7 +418,7 @@ let NumberField = class NumberField extends FormFieldElement {
      */
     setSilentlyValueAndNotify() {
         // Nobody likes to see a red border
-        this.resetError();
+        this.reportValidity();
         const value = this.valueAsNumberString(this.inputValue);
         if (super.value !== value) {
             // here we must set the value silently to avoid re-rendering of input
@@ -426,15 +426,6 @@ let NumberField = class NumberField extends FormFieldElement {
             this.notifyPropertyChange('value', value);
         }
     }
-    /**
-     * Reset error state on input
-     * @returns {void}
-     */
-    resetError() {
-        if (this.error && this.checkValidity()) {
-            this.reportValidity();
-        }
-    }
     /**
      * Get the allowed step value
      * @returns allowed step
@@ -619,8 +610,15 @@ let NumberField = class NumberField extends FormFieldElement {
         this.applyStepDirection(Direction.Down, stepIncrement);
     }
     /**
-     * Returns true if an input element contains valid data.
-     * @returns true if input is valid
+     * Validate the element input and mark it as error if its input is invalid.
+     * @returns `true` if the element input is valid; otherwise, returns `false`.
+     */
+    reportValidity() {
+        return super.reportValidity();
+    }
+    /**
+     * Returns `true` if the element input is valid; otherwise, returns `false`.
+     * @returns element input validity
      */
     checkValidity() {
         const value = this.internalValue;
@@ -645,18 +643,6 @@ let NumberField = class NumberField extends FormFieldElement {
         }
         return true;
     }
-    /**
-     * Validate input. Mark as error if input is invalid
-     * @returns false if there is an error
-     */
-    reportValidity() {
-        const hasError = !this.checkValidity();
-        if (this.error !== hasError) {
-            this.error = hasError;
-            this.notifyPropertyChange('error', this.error);
-        }
-        return !hasError;
-    }
     /**
      * @ignore
      * @inheritDoc

package/lib/password-field/custom-elements.json

@@ -134,6 +134,18 @@
           "name": "error-changed",
           "description": "Fired when user inputs an invalid value. The event is not triggered if `error` property is changed programmatically."
         }
+      ],
+      "methods": [
+        {
+          "name": "checkValidity",
+          "description": "Returns `true` if the element input is valid; otherwise, returns `false`.",
+          "params": []
+        },
+        {
+          "name": "reportValidity",
+          "description": "Validate the element input and mark it as error if its input is invalid.",
+          "params": []
+        }
       ]
     }
   ]

package/lib/password-field/custom-elements.md

@@ -24,6 +24,13 @@ A form control element for password.
 | `value`       | `value`       | `string`         | ""      | Input's value                                    |
 | `warning`     | `warning`     | `boolean`        | false   | Set warning state                                |
 
+## Methods
+
+| Method           | Type          | Description                                      |
+|------------------|---------------|--------------------------------------------------|
+| `checkValidity`  | `(): boolean` | Returns `true` if the element input is valid; otherwise, returns `false`. |
+| `reportValidity` | `(): boolean` | Validate the element input and mark it as error if its input is invalid. |
+
 ## Events
 
 | Event           | Description                                      |

package/lib/password-field/index.d.ts

@@ -55,6 +55,16 @@ export declare class PasswordField extends TextField {
      * @return shouldUpdate
      */
     protected firstUpdated(changedProperties: PropertyValues): void;
+    /**
+     * Returns `true` if the element input is valid; otherwise, returns `false`.
+     * @returns element input validity
+     */
+    checkValidity(): boolean;
+    /**
+     * Validate the element input and mark it as error if its input is invalid.
+     * @returns `true` if the element input is valid; otherwise, returns `false`.
+     */
+    reportValidity(): boolean;
     /**
      * Decorate `<input>` element with common properties extended from text-field:
      * type="text|password" - text if password is visible

package/lib/password-field/index.js

@@ -60,6 +60,20 @@ let PasswordField = class PasswordField extends TextField {
         // password shouldn't display value on tooltip when value is overflow
         deregisterOverflowTooltip(this);
     }
+    /**
+     * Returns `true` if the element input is valid; otherwise, returns `false`.
+     * @returns element input validity
+     */
+    checkValidity() {
+        return super.checkValidity();
+    }
+    /**
+     * Validate the element input and mark it as error if its input is invalid.
+     * @returns `true` if the element input is valid; otherwise, returns `false`.
+     */
+    reportValidity() {
+        return super.reportValidity();
+    }
     /**
      * Decorate `<input>` element with common properties extended from text-field:
      * type="text|password" - text if password is visible

package/lib/search-field/custom-elements.json

@@ -156,6 +156,18 @@
           "name": "icon-click",
           "description": "Fired when the user taps on icon added into control's slot."
         }
+      ],
+      "methods": [
+        {
+          "name": "checkValidity",
+          "description": "Returns `true` if the element input is valid; otherwise, returns `false`.",
+          "params": []
+        },
+        {
+          "name": "reportValidity",
+          "description": "Validate the element input and mark it as error if its input is invalid.",
+          "params": []
+        }
       ]
     }
   ]

package/lib/search-field/custom-elements.md

@@ -26,6 +26,13 @@ Form control to get a search input from users.
 | `value`         | `value`           | `string`         | ""      | Input's value                                    |
 | `warning`       | `warning`         | `boolean`        | false   | Set warning state                                |
 
+## Methods
+
+| Method           | Type          | Description                                      |
+|------------------|---------------|--------------------------------------------------|
+| `checkValidity`  | `(): boolean` | Returns `true` if the element input is valid; otherwise, returns `false`. |
+| `reportValidity` | `(): boolean` | Validate the element input and mark it as error if its input is invalid. |
+
 ## Events
 
 | Event           | Description                                      |

package/lib/search-field/index.d.ts

@@ -55,6 +55,16 @@ export declare class SearchField extends TextField {
      * @returns template map
      */
     protected get decorateInputMap(): TemplateMap;
+    /**
+     * Returns `true` if the element input is valid; otherwise, returns `false`.
+     * @returns element input validity
+     */
+    checkValidity(): boolean;
+    /**
+     * Validate the element input and mark it as error if its input is invalid.
+     * @returns `true` if the element input is valid; otherwise, returns `false`.
+     */
+    reportValidity(): boolean;
     /**
      * Renders icon element
      * @returns {void}

package/lib/search-field/index.js

@@ -57,6 +57,20 @@ let SearchField = class SearchField extends TextField {
             inputmode: 'search'
         };
     }
+    /**
+     * Returns `true` if the element input is valid; otherwise, returns `false`.
+     * @returns element input validity
+     */
+    checkValidity() {
+        return super.checkValidity();
+    }
+    /**
+     * Validate the element input and mark it as error if its input is invalid.
+     * @returns `true` if the element input is valid; otherwise, returns `false`.
+     */
+    reportValidity() {
+        return super.reportValidity();
+    }
     /**
      * Renders icon element
      * @returns {void}

package/lib/slider/custom-elements.json

@@ -177,7 +177,7 @@
         },
         {
           "name": "input",
-          "description": "Fired when the user inputs a value by interacting with the slider or updating its input field."
+          "description": "Fired with the value of the input in `e.detail.value` like another custom events when the user inputs a value by interacting with the slider or updating its input field."
         },
         {
           "name": "from-input",

package/lib/slider/custom-elements.md

@@ -25,7 +25,7 @@ Allows users to make selections from a range of values
 |-----------------|--------------------------------------------------|
 | `from-changed`  | Fired when the user changes from's value. The event is not triggered if `from` property is changed programmatically. |
 | `from-input`    | Fired when the user inputs from's value by interacting with the slider or updating its input field. |
-| `input`         | Fired when the user inputs a value by interacting with the slider or updating its input field. |
+| `input`         | Fired with the value of the input in `e.detail.value` like another custom events when the user inputs a value by interacting with the slider or updating its input field. |
 | `to-changed`    | Fired when the user changes to's value. The event is not triggered if `to` property is changed programmatically. |
 | `to-input`      | Fired when the user inputs to's value by interacting with the slider or updating its input field. |
 | `value-changed` | Fired when the user commits a value change. The event is not triggered if `value` property is changed programmatically. |

package/lib/slider/index.d.ts

@@ -18,7 +18,7 @@ import '../number-field/index.js';
  * @fires value-changed - Fired when the user commits a value change. The event is not triggered if `value` property is changed programmatically.
  * @fires from-changed - Fired when the user changes from's value. The event is not triggered if `from` property is changed programmatically.
  * @fires to-changed - Fired when the user changes to's value. The event is not triggered if `to` property is changed programmatically.
- * @fires input - Fired when the user inputs a value by interacting with the slider or updating its input field.
+ * @fires input - Fired with the value of the input in `e.detail.value` like another custom events when the user inputs a value by interacting with the slider or updating its input field.
  * @fires from-input - Fired when the user inputs from's value by interacting with the slider or updating its input field.
  * @fires to-input - Fired when the user inputs to's value by interacting with the slider or updating its input field.
  */
@@ -341,6 +341,11 @@ export declare class Slider extends ControlElement {
      * @returns validated to value.
      */
     private validateTo;
+    /**
+     * Validate number field from changed thumb
+     * @returns {void}
+     */
+    private validateNumberField;
     /**
      * Calculate the nearest possible step value depending on step interval
      * @param thumbPosition current thumb position in fraction

package/lib/slider/index.js

@@ -27,7 +27,7 @@ import { clamp, countDecimalPlace, isDecimalNumber, preventDefault } from './uti
  * @fires value-changed - Fired when the user commits a value change. The event is not triggered if `value` property is changed programmatically.
  * @fires from-changed - Fired when the user changes from's value. The event is not triggered if `from` property is changed programmatically.
  * @fires to-changed - Fired when the user changes to's value. The event is not triggered if `to` property is changed programmatically.
- * @fires input - Fired when the user inputs a value by interacting with the slider or updating its input field.
+ * @fires input - Fired with the value of the input in `e.detail.value` like another custom events when the user inputs a value by interacting with the slider or updating its input field.
  * @fires from-input - Fired when the user inputs from's value by interacting with the slider or updating its input field.
  * @fires to-input - Fired when the user inputs to's value by interacting with the slider or updating its input field.
  */
@@ -762,6 +762,7 @@ let Slider = class Slider extends ControlElement {
             this.valuePreviousInput = this.value;
         }
         this.onDrag(event);
+        this.validateNumberField();
         if (event.changedTouches) {
             this.addEventListener('touchmove', this.onDrag);
             this.addEventListener('touchend', this.onDragEnd);
@@ -855,6 +856,17 @@ let Slider = class Slider extends ControlElement {
         }
         return this.fromNumber + this.minRangeNumber;
     }
+    /**
+     * Validate number field from changed thumb
+     * @returns {void}
+     */
+    validateNumberField() {
+        if (this.isShowInputField) {
+            const name = this.changedThumb?.getAttribute('name');
+            const numberField = this[`${name}Input`];
+            requestAnimationFrame(() => numberField.reportValidity());
+        }
+    }
     /**
      * Calculate the nearest possible step value depending on step interval
      * @param thumbPosition current thumb position in fraction
@@ -996,7 +1008,7 @@ let Slider = class Slider extends ControlElement {
             if (valueFor === SliderDataName.to && value < this.fromNumber + this.minRangeNumber) {
                 return false;
             }
-            else if (value > this.toNumber - this.minRangeNumber) {
+            else if (valueFor === SliderDataName.from && value > this.toNumber - this.minRangeNumber) {
                 return false;
             }
         }

package/lib/text-field/custom-elements.json

@@ -171,6 +171,18 @@
           "name": "icon-click",
           "description": "Fired when the user taps on icon added into control's slot."
         }
+      ],
+      "methods": [
+        {
+          "name": "checkValidity",
+          "description": "Returns `true` if the element input is valid; otherwise, returns `false`.",
+          "params": []
+        },
+        {
+          "name": "reportValidity",
+          "description": "Validate the element input and mark it as error if its input is invalid.",
+          "params": []
+        }
       ]
     }
   ]

package/lib/text-field/custom-elements.md

@@ -19,6 +19,13 @@ Form control element for text.
 | `value`         | `value`           | `string`         | ""      | Input's value                                    |
 | `warning`       | `warning`         | `boolean`        | false   | Set warning state                                |
 
+## Methods
+
+| Method           | Type          | Description                                      |
+|------------------|---------------|--------------------------------------------------|
+| `checkValidity`  | `(): boolean` | Returns `true` if the element input is valid; otherwise, returns `false`. |
+| `reportValidity` | `(): boolean` | Validate the element input and mark it as error if its input is invalid. |
+
 ## Events
 
 | Event           | Description                                      |

package/lib/text-field/index.d.ts

@@ -68,12 +68,28 @@ export declare class TextField extends FormFieldElement {
      * @returns {void}
      */
     protected firstUpdated(changedProperties: PropertyValues): void;
+    /**
+     * Updates the element
+     * @param changedProperties Properties that has changed
+     * @returns {void}
+     */
+    protected update(changedProperties: PropertyValues): void;
     /**
      * Called when the element’s DOM has been updated and rendered
      * @param changedProperties Properties that has changed
      * @returns shouldUpdate
      */
     protected updated(changedProperties: PropertyValues): void;
+    /**
+     * Returns `true` if the element input is valid; otherwise, returns `false`.
+     * @returns element input validity
+     */
+    checkValidity(): boolean;
+    /**
+     * Validate the element input and mark it as error if its input is invalid.
+     * @returns `true` if the element input is valid; otherwise, returns `false`.
+     */
+    reportValidity(): boolean;
     /**
      * Check if input value should be synchronised with component value
      * @param changedProperties Properties that has changed
@@ -86,13 +102,7 @@ export declare class TextField extends FormFieldElement {
      * @param changedProperties Properties that has changed
      * @returns {void}
      */
-    protected syncInputValue(changedProperties: PropertyValues): void;
-    /**
-     * Check if input should be re-validated
-     * @param changedProperties Properties that has changed
-     * @returns True if input should be re-validated
-     */
-    protected shouldValidateInput(changedProperties: PropertyValues): boolean;
+    protected syncInputValue(): void;
     /**
      * Runs on input element `input` event
      * @param event `input` event
@@ -110,11 +120,6 @@ export declare class TextField extends FormFieldElement {
      * @returns {void}
      */
     protected onPossibleValueChange(event: InputEvent): void;
-    /**
-     * Uses native `checkValidity()` function to validate input
-     * @returns {void}
-     */
-    protected validateInput(): void;
     /**
      * Fires event on `icon` click
      * @returns {void}