@refinitiv-ui/elements 7.3.2 → 7.5.0

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [7.5.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@7.4.0...@refinitiv-ui/elements@7.5.0) (2023-09-18)
+
+### Bug Fixes
+
+- **slider:** incorrect updating `to` value ([#938](https://github.com/Refinitiv/refinitiv-ui/issues/938)) ([8479abc](https://github.com/Refinitiv/refinitiv-ui/commit/8479abc828571e06379b5f389058f60d5ba8443b))
+- **slider:** number field not revalidate when error state changes ([#942](https://github.com/Refinitiv/refinitiv-ui/issues/942)) ([5fc64a6](https://github.com/Refinitiv/refinitiv-ui/commit/5fc64a6ac21cdbbf820ae97de04ec19443755e50))
+
+### Features
+
+- **fields:** improve validation consistency for field elements ([#937](https://github.com/Refinitiv/refinitiv-ui/issues/937)) ([d58051c](https://github.com/Refinitiv/refinitiv-ui/commit/d58051c0b4d3508ac55d223299fd8bf267458ddf))
+- **utils:** add `selectedAt` property to `DataItem` interface ([4d69419](https://github.com/Refinitiv/refinitiv-ui/commit/4d69419107d8ed8dd554cb7cf0ecadd327d02f18))
+
+# [7.4.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@7.3.2...@refinitiv-ui/elements@7.4.0) (2023-09-11)
+
+### Features
+
+- **calendar:** custom cell content ([#928](https://github.com/Refinitiv/refinitiv-ui/issues/928)) ([ce8ec58](https://github.com/Refinitiv/refinitiv-ui/commit/ce8ec5859f503af45750f9838b809a1a2db2365e))
+- **number-field:** add new event step-up and step-down ([#906](https://github.com/Refinitiv/refinitiv-ui/issues/906)) ([75ec298](https://github.com/Refinitiv/refinitiv-ui/commit/75ec298d646913b645e3057160bdb664f298ba3d))
+
 ## [7.3.2](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@7.3.1...@refinitiv-ui/elements@7.3.2) (2023-09-04)
 
 ### Bug Fixes

package/LICENSE

@@ -1,4 +1,4 @@
-Copyright © 2023, Refinitiv.
+Copyright © 2023, LSEG
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.

package/README.md

@@ -1,6 +1,6 @@
 # Element Framework
 
-Element Framework (EF) is a collection of elements that includes theming capability within the Refinitiv Workspace's design system. The elements are a set of web components which is a standard web technology and can be utilized across all browsers.
+Element Framework (EF) is a collection of elements that includes theming capability within the LSEG Workspace's design system. The elements are a set of web components which is a standard web technology and can be utilized across all browsers.
 
 ## Usage
 
@@ -10,17 +10,17 @@ EF elements are published under single package.
 npm install @refinitiv-ui/elements
 ```
 
-The elements are required theme to instantiate itself in the app. Refinitiv Workspace's design system is called Halo theme and you can install it from npm command.
+The elements are required theme to instantiate itself in the app. LSEG Workspace's design system is called Halo theme and you can install it from npm command.
 
 ```sh
 npm install @refinitiv-ui/halo-theme
 ```
 
-Finally, import both elements that you want to use and its themes into your application and it is ready to go. To follow Refinitiv Workspace's design system, it is required styles of some native elements e.g. typography.
+Finally, import both elements that you want to use and its themes into your application and it is ready to go. To follow LSEG Workspace's design system, it is required styles of some native elements e.g. typography.
 
 <br>
 
-> The font "Proxima Nova Fin" shall only be used within Refinitiv products or services. The copyright owner must approve any use of such font outside of Refinitiv products or services, which may be subject to a fee. Please see https://www.fontspring.com/lic/fontspring/webfont#license_text
+> The font "Proxima Nova Fin" shall only be used within LSEG products or services. The copyright owner must approve any use of such font outside of LSEG products or services, which may be subject to a fee. Please see https://www.fontspring.com/lic/fontspring/webfont#license_text
 
 <br>
 
@@ -57,4 +57,4 @@ See list of elements, demo and more tutorial by visiting [EF Documentation](http
 
 # License
 
-Apache License 2.0. However, Halo theme shall only be used within Refinitiv products or services due to license of the font "Proxima Nova Fin".
+Apache License 2.0. However, Halo theme shall only be used within LSEG products or services due to license of the font "Proxima Nova Fin".

package/lib/calendar/custom-elements.json

@@ -191,6 +191,10 @@
         }
       ],
       "slots": [
+        {
+          "name": "yyyy-mm-dd",
+          "description": "Adds slotted content into the specific date which use value in `ISO8601` date string format as a key e.g. `yyyy-MM-dd`, `yyyy-MM` and `yyyy`"
+        },
         {
           "name": "footer",
           "description": "Adds slotted content into the footer of the calendar control"

package/lib/calendar/custom-elements.md

@@ -30,6 +30,7 @@ Standard calendar element
 
 ## Slots
 
-| Name     | Description                                      |
-|----------|--------------------------------------------------|
-| `footer` | Adds slotted content into the footer of the calendar control |
+| Name         | Description                                      |
+|--------------|--------------------------------------------------|
+| `footer`     | Adds slotted content into the footer of the calendar control |
+| `yyyy-mm-dd` | Adds slotted content into the specific date which use value in `ISO8601` date string format as a key e.g. `yyyy-MM-dd`, `yyyy-MM` and `yyyy` |

package/lib/calendar/index.d.ts

@@ -18,6 +18,7 @@ export { CalendarFilter };
  * @attr {boolean} disabled - Set disabled state
  * @prop {boolean} [disabled=false] - Set disabled state
  *
+ * @slot yyyy-mm-dd - Adds slotted content into the specific date which use value in `ISO8601` date string format as a key e.g. `yyyy-MM-dd`, `yyyy-MM` and `yyyy`
  * @slot footer - Adds slotted content into the footer of the calendar control
  */
 export declare class Calendar extends ControlElement implements MultiValue {
@@ -289,7 +290,13 @@ export declare class Calendar extends ControlElement implements MultiValue {
      */
     private onKeyDown;
     /**
-     * Run when tap event happens ot table.
+     * Get cell content from tap event
+     * @param event Keyboard event
+     * @returns html element
+     */
+    private getCellContent;
+    /**
+     * Run when tap event happens to table.
      * Select the values or switch the view
      * @param event Tap event
      * @returns {void}

package/lib/calendar/index.js

@@ -27,6 +27,7 @@ import { ViewFormatTranslateParams, monthInfo, monthsNames, weekdaysNames } from
  * @attr {boolean} disabled - Set disabled state
  * @prop {boolean} [disabled=false] - Set disabled state
  *
+ * @slot yyyy-mm-dd - Adds slotted content into the specific date which use value in `ISO8601` date string format as a key e.g. `yyyy-MM-dd`, `yyyy-MM` and `yyyy`
  * @slot footer - Adds slotted content into the footer of the calendar control
  */
 let Calendar = class Calendar extends ControlElement {
@@ -618,7 +619,28 @@ let Calendar = class Calendar extends ControlElement {
         event.preventDefault();
     }
     /**
-     * Run when tap event happens ot table.
+     * Get cell content from tap event
+     * @param event Keyboard event
+     * @returns html element
+     */
+    getCellContent(event) {
+        const path = event.composedPath();
+        for (let i = 0; i <= path.length; i += 1) {
+            const node = path[i];
+            if (node === this) {
+                return null;
+            }
+            if (node.nodeType !== Node.ELEMENT_NODE) {
+                continue;
+            }
+            if (node.getAttribute('role') === 'button' && node.part.value.includes('cell-content')) {
+                return node;
+            }
+        }
+        return null;
+    }
+    /**
+     * Run when tap event happens to table.
      * Select the values or switch the view
      * @param event Tap event
      * @returns {void}
@@ -627,7 +649,7 @@ let Calendar = class Calendar extends ControlElement {
         if (event.defaultPrevented) {
             return;
         }
-        const cell = event.target;
+        const cell = this.getCellContent(event);
         if (!cell || !this.isDateButton(cell) || !cell.value) {
             return;
         }
@@ -1128,6 +1150,7 @@ let Calendar = class Calendar extends ControlElement {
         const isSelectable = isSelection && !cell.disabled;
         const isSelected = cell.selected ? 'true' : 'false';
         const isActive = cell.active ? 0 : -1;
+        const slotContent = cell.value ? html `<slot name=${cell.value}>${cell.text}</slot>` : cell.text;
         return html `<div
       role="gridcell"
       part="cell ${cell.view}"
@@ -1157,7 +1180,7 @@ let Calendar = class Calendar extends ControlElement {
         .value=${cell.value}
         .index=${cell.index}
       >
-        ${cell.text}
+        ${slotContent}
       </div>
     </div>`;
     }

package/lib/calendar/themes/halo/dark/index.js

@@ -1,2 +1,2 @@
 import '@refinitiv-ui/elements/button/themes/halo/dark';
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-calendar', styles: ':host{font-style:normal;font-variant:normal;font-weight:400;line-height:normal;text-align:left;text-indent:0;text-shadow:none;text-transform:none;white-space:normal;word-break:normal;word-spacing:normal;word-wrap:normal;outline:0;font-size:12px;color:#ccc;min-width:196px;-webkit-user-select:none;-moz-user-select:none;user-select:none;background:#262626;padding:4px 3px}:host [part=navigation]{padding-bottom:3px}:host [part=btn-next],:host [part=btn-prev],:host [part=btn-view]{margin:0}:host [part=btn-view]{background:0 0;margin-left:16px;border:none;color:inherit;padding:0}:host [part=btn-view]:hover,:host [part=btn-view][focused=visible]{opacity:.8}:host [part=table]{width:100%;background:#262626}:host [part~=row]:not(:first-of-type) [part~=cell] [part~=cell-content]{top:1px}:host [part~=day-name-row]{background-color:#333}:host [part~=cell][disabled]{opacity:.4}:host [part~=cell][today]{color:#fff}:host [part~=cell][today] [part~=selection]{background:#404040}:host [part~=cell]:not([selected]):not([range]):not([disabled])[idle] [part~=selection]{opacity:.6}:host [part~=cell]:not([today]):not([range]) [part~=selection]:hover{color:#fff}:host [part~=cell]:not(:active) [part~=selection]:hover{border-color:#1429bd}:host [part~=cell]:not([today]):not([range]):not(:active) [part~=selection]:hover,:host [part~=cell][today][selected] [part~=selection]:hover{background:#1429bd}:host [part~=cell]:not([selected]):not([range]):not([today]) [part~=selection]:hover{background:#1429bd}:host [part~=cell]:not([selected]):not([range]):not([today]):not(:active) [part~=selection]:hover{border-color:#1429bd}:host [part~=cell]:not([selected]):not([range]):not([today]):not([disabled]):active [part~=selection]{color:#fff;background-color:#0f1e8a}:host [part~=cell][range]:not(:active) [part~=selection]:hover,:host [part~=cell][selected]:not(:active) [part~=selection]:hover,:host [part~=cell][today]:not(:active) [part~=selection]:hover{border-color:#1429bd}:host [part~=cell][range]:not([disabled]):active [part~=selection],:host [part~=cell][selected]:not([disabled]):active [part~=selection],:host [part~=cell][today]:not([disabled]):active [part~=selection]{color:#fff;background-color:#0f1e8a}:host [part~=cell][range] [part~=selection]{background:rgba(51,75,255,.2)}:host [part~=cell][range][today]{color:#fff}:host [part~=cell][selected]{color:#fff}:host [part~=cell][selected] [part~=selection]{background:#334bff}:host [part~=cell]:not(:first-of-type) [part~=cell-content]{left:1px}:host [part~=day-name]{color:#999;font-weight:600}:host [part~=day-name] [part~=cell-content]{background-color:#1a1a1a}:host [part~=cell-content]{background:#0d0d0d;top:0;bottom:0;right:0;left:0}:host [part~=selection]{outline:0;border:1px solid #0d0d0d}:host([focused=visible]) [part~=cell] [part~=selection]:focus{outline:#1429bd solid 1px}:host([disabled]){opacity:.4}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-calendar', styles: ':host{font-style:normal;font-variant:normal;font-weight:400;line-height:normal;text-align:left;text-indent:0;text-shadow:none;text-transform:none;white-space:normal;word-break:normal;word-spacing:normal;word-wrap:normal;outline:0;font-size:12px;color:#ccc;min-width:196px;-webkit-user-select:none;-moz-user-select:none;user-select:none;background:#262626;padding:4px 3px}:host [part=navigation]{padding-bottom:3px}:host [part=btn-next],:host [part=btn-prev],:host [part=btn-view]{margin:0}:host [part=btn-view]{background:0 0;margin-left:16px;border:none;color:inherit;padding:0}:host [part=btn-view]:hover,:host [part=btn-view][focused=visible]{opacity:.8}:host [part=table]{width:100%;background:#262626}:host [part~=row]:not(:first-of-type) [part~=cell] [part~=cell-content]{top:1px}:host [part~=day-name-row]{background-color:#333}:host [part~=cell][disabled]{opacity:.4}:host [part~=cell][today]{color:#fff}:host [part~=cell][today] [part~=selection]{background:#404040}:host [part~=cell]:not([selected]):not([range]):not([disabled])[idle] [part~=selection]{opacity:.6}:host [part~=cell]:not([today]):not([range]) [part~=selection]:hover{color:#fff}:host [part~=cell]:not(:active) [part~=selection]:hover{border-color:#1429bd}:host [part~=cell]:not([today]):not([range]):not(:active) [part~=selection]:hover,:host [part~=cell][today][selected] [part~=selection]:hover{background:#1429bd}:host [part~=cell]:not([selected]):not([range]):not([today]) [part~=selection]:hover{background:#1429bd}:host [part~=cell]:not([selected]):not([range]):not([today]):not(:active) [part~=selection]:hover{border-color:#1429bd}:host [part~=cell]:not([selected]):not([range]):not([today]):not([disabled]):active [part~=selection]{color:#fff;background-color:#0f1e8a}:host [part~=cell][range]:not(:active) [part~=selection]:hover,:host [part~=cell][selected]:not(:active) [part~=selection]:hover,:host [part~=cell][today]:not(:active) [part~=selection]:hover{border-color:#1429bd}:host [part~=cell][range]:not([disabled]):active [part~=selection],:host [part~=cell][selected]:not([disabled]):active [part~=selection],:host [part~=cell][today]:not([disabled]):active [part~=selection]{color:#fff;background-color:#0f1e8a}:host [part~=cell][range] [part~=selection]{background:rgba(51,75,255,.2)}:host [part~=cell][range][today]{color:#fff}:host [part~=cell][selected]{color:#fff}:host [part~=cell][selected] [part~=selection]{background:#334bff}:host [part~=cell]:not(:first-of-type) [part~=cell-content]{left:1px}:host [part~=day-name]{color:#999;font-weight:600}:host [part~=day-name] [part~=cell-content]{background-color:#1a1a1a}:host [part~=cell-content]{background:#0d0d0d;top:0;bottom:0;right:0;left:0}:host [part~=selection]{outline:0;border:1px solid #0d0d0d}:host [part~=selection] ::slotted(*){position:absolute}:host([focused=visible]) [part~=cell] [part~=selection]:focus{outline:#1429bd solid 1px}:host([disabled]){opacity:.4}' }}));

package/lib/calendar/themes/halo/light/index.js

@@ -1,2 +1,2 @@
 import '@refinitiv-ui/elements/button/themes/halo/light';
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-calendar', styles: ':host{font-style:normal;font-variant:normal;font-weight:400;line-height:normal;text-align:left;text-indent:0;text-shadow:none;text-transform:none;white-space:normal;word-break:normal;word-spacing:normal;word-wrap:normal;outline:0;font-size:12px;color:#0d0d0d;min-width:196px;-webkit-user-select:none;-moz-user-select:none;user-select:none;background:#f2f2f2;padding:4px 3px}:host [part=navigation]{padding-bottom:3px}:host [part=btn-next],:host [part=btn-prev],:host [part=btn-view]{margin:0}:host [part=btn-next]:not(:hover):not(:focus):not(:active),:host [part=btn-prev]:not(:hover):not(:focus):not(:active){color:#595959}:host [part=btn-view]{background:0 0;margin-left:16px;border:none;color:inherit;padding:0}:host [part=btn-view]:hover,:host [part=btn-view][focused=visible]{opacity:.8}:host [part=table]{width:100%;background:#e6e6e6}:host [part~=row]:not(:first-of-type) [part~=cell] [part~=cell-content]{top:1px}:host [part~=day-name-row]{background-color:#e6e6e6}:host [part~=cell][disabled]{opacity:.4}:host [part~=cell][today]{color:#0d0d0d}:host [part~=cell][today] [part~=selection]{background:#d9d9d9}:host [part~=cell]:not([selected]):not([range]):not([disabled])[idle] [part~=selection]{opacity:.6}:host [part~=cell]:not([today]):not([range]) [part~=selection]:hover{color:#fff}:host [part~=cell]:not(:active) [part~=selection]:hover{border-color:#1429bd}:host [part~=cell]:not([today]):not([range]):not(:active) [part~=selection]:hover,:host [part~=cell][today][selected] [part~=selection]:hover{background:#1429bd}:host [part~=cell]:not([selected]):not([range]):not([today]) [part~=selection]:hover{background:#1429bd}:host [part~=cell]:not([selected]):not([range]):not([today]):not(:active) [part~=selection]:hover{border-color:#1429bd}:host [part~=cell]:not([selected]):not([range]):not([today]):not([disabled]):active [part~=selection]{color:#fff;background-color:#0f1e8a}:host [part~=cell][range]:not(:active) [part~=selection]:hover,:host [part~=cell][selected]:not(:active) [part~=selection]:hover,:host [part~=cell][today]:not(:active) [part~=selection]:hover{border-color:#1429bd}:host [part~=cell][range]:not([disabled]):active [part~=selection],:host [part~=cell][selected]:not([disabled]):active [part~=selection],:host [part~=cell][today]:not([disabled]):active [part~=selection]{color:#fff;background-color:#0f1e8a}:host [part~=cell][range] [part~=selection]{background:rgba(51,75,255,.2)}:host [part~=cell][range][today]{color:#fff}:host [part~=cell][selected]{color:#fff}:host [part~=cell][selected] [part~=selection]{background:#334bff}:host [part~=cell]:not(:first-of-type) [part~=cell-content]{left:1px}:host [part~=day-name]{color:#737373;font-weight:600}:host [part~=day-name] [part~=cell-content]{background-color:#fafafa}:host [part~=cell-content]{background:#fff;top:0;bottom:0;right:0;left:0}:host [part~=selection]{outline:0;border:1px solid #fff}:host([focused=visible]) [part~=cell] [part~=selection]:focus{outline:#1429bd solid 1px}:host([disabled]){opacity:.4}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-calendar', styles: ':host{font-style:normal;font-variant:normal;font-weight:400;line-height:normal;text-align:left;text-indent:0;text-shadow:none;text-transform:none;white-space:normal;word-break:normal;word-spacing:normal;word-wrap:normal;outline:0;font-size:12px;color:#0d0d0d;min-width:196px;-webkit-user-select:none;-moz-user-select:none;user-select:none;background:#f2f2f2;padding:4px 3px}:host [part=navigation]{padding-bottom:3px}:host [part=btn-next],:host [part=btn-prev],:host [part=btn-view]{margin:0}:host [part=btn-next]:not(:hover):not(:focus):not(:active),:host [part=btn-prev]:not(:hover):not(:focus):not(:active){color:#595959}:host [part=btn-view]{background:0 0;margin-left:16px;border:none;color:inherit;padding:0}:host [part=btn-view]:hover,:host [part=btn-view][focused=visible]{opacity:.8}:host [part=table]{width:100%;background:#e6e6e6}:host [part~=row]:not(:first-of-type) [part~=cell] [part~=cell-content]{top:1px}:host [part~=day-name-row]{background-color:#e6e6e6}:host [part~=cell][disabled]{opacity:.4}:host [part~=cell][today]{color:#0d0d0d}:host [part~=cell][today] [part~=selection]{background:#d9d9d9}:host [part~=cell]:not([selected]):not([range]):not([disabled])[idle] [part~=selection]{opacity:.6}:host [part~=cell]:not([today]):not([range]) [part~=selection]:hover{color:#fff}:host [part~=cell]:not(:active) [part~=selection]:hover{border-color:#1429bd}:host [part~=cell]:not([today]):not([range]):not(:active) [part~=selection]:hover,:host [part~=cell][today][selected] [part~=selection]:hover{background:#1429bd}:host [part~=cell]:not([selected]):not([range]):not([today]) [part~=selection]:hover{background:#1429bd}:host [part~=cell]:not([selected]):not([range]):not([today]):not(:active) [part~=selection]:hover{border-color:#1429bd}:host [part~=cell]:not([selected]):not([range]):not([today]):not([disabled]):active [part~=selection]{color:#fff;background-color:#0f1e8a}:host [part~=cell][range]:not(:active) [part~=selection]:hover,:host [part~=cell][selected]:not(:active) [part~=selection]:hover,:host [part~=cell][today]:not(:active) [part~=selection]:hover{border-color:#1429bd}:host [part~=cell][range]:not([disabled]):active [part~=selection],:host [part~=cell][selected]:not([disabled]):active [part~=selection],:host [part~=cell][today]:not([disabled]):active [part~=selection]{color:#fff;background-color:#0f1e8a}:host [part~=cell][range] [part~=selection]{background:rgba(51,75,255,.2)}:host [part~=cell][range][today]{color:#fff}:host [part~=cell][selected]{color:#fff}:host [part~=cell][selected] [part~=selection]{background:#334bff}:host [part~=cell]:not(:first-of-type) [part~=cell-content]{left:1px}:host [part~=day-name]{color:#737373;font-weight:600}:host [part~=day-name] [part~=cell-content]{background-color:#fafafa}:host [part~=cell-content]{background:#fff;top:0;bottom:0;right:0;left:0}:host [part~=selection]{outline:0;border:1px solid #fff}:host [part~=selection] ::slotted(*){position:absolute}:host([focused=visible]) [part~=cell] [part~=selection]:focus{outline:#1429bd solid 1px}:host([disabled]){opacity:.4}' }}));

package/lib/calendar/themes/solar/charcoal/index.js

@@ -1,2 +1,2 @@
 import '@refinitiv-ui/elements/button/themes/solar/charcoal';
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-calendar', styles: ':host{font-style:normal;font-variant:normal;font-weight:400;line-height:normal;text-align:left;text-indent:0;text-shadow:none;text-transform:none;white-space:normal;word-break:normal;word-spacing:normal;word-wrap:normal;outline:0;font-size:13px;color:#c2c2c2;min-width:224px;-webkit-user-select:none;-moz-user-select:none;user-select:none;background:#3c3c42;padding:4px}:host [part=navigation]{padding-bottom:4px}:host [part=btn-next],:host [part=btn-prev],:host [part=btn-view]{margin:0}:host [part=btn-view]{background:0 0;color:inherit;box-shadow:none;margin-left:15px;padding:0}:host [part=btn-view]:not([focused=visible]){border:none}:host [part=table]{width:100%;box-shadow:0 0 0 1px #000;background:#212124}:host [part~=row]:not(:last-of-type){box-shadow:0 1px 0 0 #0a0a0a}:host [part~=row]:not(:first-of-type) [part~=cell] [part~=selection]{top:1px}:host [part~=cell]:not(:last-of-type){box-shadow:1px 0 0 0 #0a0a0a}:host [part~=cell][disabled]{opacity:.4}:host [part~=cell][today]{color:#f93}:host [part~=cell][today] [part~=selection]{background:#3c3c42}:host [part~=cell]:not([selected]):not([range]):not([disabled])[idle] [part~=selection]{opacity:.6}:host [part~=cell]:not([selected]):not([range]) [part~=selection]:focus,:host [part~=cell]:not([selected]):not([range]) [part~=selection]:hover{background:#3c3c42;color:#e2e2e2}:host [part~=cell]:not([selected]):not([range]) [part~=selection]:focus{outline:#f93 dotted 1px}:host [part~=cell][range] [part~=selection]{background:rgba(255,153,51,.2)}:host [part~=cell][range][today]{color:#f93}:host [part~=cell][selected]{color:#000}:host [part~=cell][selected] [part~=selection]{background:#f93}:host [part~=cell]:not(:first-of-type) [part~=selection]{left:1px}:host [part~=day-name]{background-color:#151516;color:#666570;font-size:10px;font-weight:700}:host [part~=selection]{outline:0;top:0;bottom:0;right:0;left:0}:host([disabled]){opacity:.4}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-calendar', styles: ':host{font-style:normal;font-variant:normal;font-weight:400;line-height:normal;text-align:left;text-indent:0;text-shadow:none;text-transform:none;white-space:normal;word-break:normal;word-spacing:normal;word-wrap:normal;outline:0;font-size:13px;color:#c2c2c2;min-width:224px;-webkit-user-select:none;-moz-user-select:none;user-select:none;background:#3c3c42;padding:4px}:host [part=navigation]{padding-bottom:4px}:host [part=btn-next],:host [part=btn-prev],:host [part=btn-view]{margin:0}:host [part=btn-view]{background:0 0;color:inherit;box-shadow:none;margin-left:15px;padding:0}:host [part=btn-view]:not([focused=visible]){border:none}:host [part=table]{width:100%;box-shadow:0 0 0 1px #000;background:#212124}:host [part~=row]:not(:last-of-type){box-shadow:0 1px 0 0 #0a0a0a}:host [part~=row]:not(:first-of-type) [part~=cell] [part~=selection]{top:1px}:host [part~=cell]:not(:last-of-type){box-shadow:1px 0 0 0 #0a0a0a}:host [part~=cell][disabled]{opacity:.4}:host [part~=cell][today]{color:#f93}:host [part~=cell][today] [part~=selection]{background:#3c3c42}:host [part~=cell]:not([selected]):not([range]):not([disabled])[idle] [part~=selection]{opacity:.6}:host [part~=cell]:not([selected]):not([range]) [part~=selection]:focus,:host [part~=cell]:not([selected]):not([range]) [part~=selection]:hover{background:#3c3c42;color:#e2e2e2}:host [part~=cell]:not([selected]):not([range]) [part~=selection]:focus{outline:#f93 dotted 1px}:host [part~=cell][range] [part~=selection]{background:rgba(255,153,51,.2)}:host [part~=cell][range][today]{color:#f93}:host [part~=cell][selected]{color:#000}:host [part~=cell][selected] [part~=selection]{background:#f93}:host [part~=cell]:not(:first-of-type) [part~=selection]{left:1px}:host [part~=day-name]{background-color:#151516;color:#666570;font-size:10px;font-weight:700}:host [part~=selection]{outline:0;top:0;bottom:0;right:0;left:0}:host [part~=selection] ::slotted(*){position:absolute}:host([disabled]){opacity:.4}' }}));

package/lib/calendar/themes/solar/pearl/index.js

@@ -1,2 +1,2 @@
 import '@refinitiv-ui/elements/button/themes/solar/pearl';
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-calendar', styles: ':host{font-style:normal;font-variant:normal;font-weight:400;line-height:normal;text-align:left;text-indent:0;text-shadow:none;text-transform:none;white-space:normal;word-break:normal;word-spacing:normal;word-wrap:normal;outline:0;font-size:13px;color:#484848;min-width:224px;-webkit-user-select:none;-moz-user-select:none;user-select:none;background:#fff;padding:4px}:host [part=navigation]{padding-bottom:4px}:host [part=btn-next],:host [part=btn-prev],:host [part=btn-view]{margin:0}:host [part=btn-view]{background:0 0;color:inherit;box-shadow:none;margin-left:15px;padding:0}:host [part=btn-view]:not([focused=visible]){border:none}:host [part=table]{width:100%;box-shadow:0 0 0 1px #a9afba;background:#fff}:host [part~=row]:not(:last-of-type){box-shadow:0 1px 0 0 #d5d8db}:host [part~=row]:not(:first-of-type) [part~=cell] [part~=selection]{top:1px}:host [part~=cell]:not(:last-of-type){box-shadow:1px 0 0 0 #d5d8db}:host [part~=cell][disabled]{opacity:.4}:host [part~=cell][today]{color:#fff}:host [part~=cell][today] [part~=selection]{background:#acafb5}:host [part~=cell]:not([selected]):not([range]):not([disabled])[idle] [part~=selection]{opacity:.6}:host [part~=cell]:not([selected]):not([range]) [part~=selection]:focus,:host [part~=cell]:not([selected]):not([range]) [part~=selection]:hover{background:#e4e8ed;color:#000}:host [part~=cell]:not([selected]):not([range]) [part~=selection]:focus{outline:#ee7600 dotted 1px}:host [part~=cell][range] [part~=selection]{background:rgba(255,153,51,.2)}:host [part~=cell][range][today]{color:#f93}:host [part~=cell][selected]{color:#fff}:host [part~=cell][selected] [part~=selection]{background:#f93}:host [part~=cell]:not(:first-of-type) [part~=selection]{left:1px}:host [part~=day-name]{background-color:#e4e8ed;color:#6e6e78;font-size:10px;font-weight:700}:host [part~=selection]{outline:0;top:0;bottom:0;right:0;left:0}:host([disabled]){opacity:.4}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-calendar', styles: ':host{font-style:normal;font-variant:normal;font-weight:400;line-height:normal;text-align:left;text-indent:0;text-shadow:none;text-transform:none;white-space:normal;word-break:normal;word-spacing:normal;word-wrap:normal;outline:0;font-size:13px;color:#484848;min-width:224px;-webkit-user-select:none;-moz-user-select:none;user-select:none;background:#fff;padding:4px}:host [part=navigation]{padding-bottom:4px}:host [part=btn-next],:host [part=btn-prev],:host [part=btn-view]{margin:0}:host [part=btn-view]{background:0 0;color:inherit;box-shadow:none;margin-left:15px;padding:0}:host [part=btn-view]:not([focused=visible]){border:none}:host [part=table]{width:100%;box-shadow:0 0 0 1px #a9afba;background:#fff}:host [part~=row]:not(:last-of-type){box-shadow:0 1px 0 0 #d5d8db}:host [part~=row]:not(:first-of-type) [part~=cell] [part~=selection]{top:1px}:host [part~=cell]:not(:last-of-type){box-shadow:1px 0 0 0 #d5d8db}:host [part~=cell][disabled]{opacity:.4}:host [part~=cell][today]{color:#fff}:host [part~=cell][today] [part~=selection]{background:#acafb5}:host [part~=cell]:not([selected]):not([range]):not([disabled])[idle] [part~=selection]{opacity:.6}:host [part~=cell]:not([selected]):not([range]) [part~=selection]:focus,:host [part~=cell]:not([selected]):not([range]) [part~=selection]:hover{background:#e4e8ed;color:#000}:host [part~=cell]:not([selected]):not([range]) [part~=selection]:focus{outline:#ee7600 dotted 1px}:host [part~=cell][range] [part~=selection]{background:rgba(255,153,51,.2)}:host [part~=cell][range][today]{color:#f93}:host [part~=cell][selected]{color:#fff}:host [part~=cell][selected] [part~=selection]{background:#f93}:host [part~=cell]:not(:first-of-type) [part~=selection]{left:1px}:host [part~=day-name]{background-color:#e4e8ed;color:#6e6e78;font-size:10px;font-weight:700}:host [part~=selection]{outline:0;top:0;bottom:0;right:0;left:0}:host [part~=selection] ::slotted(*){position:absolute}:host([disabled]){opacity:.4}' }}));

package/lib/combo-box/index.js

@@ -288,9 +288,11 @@ let ComboBox = class ComboBox extends FormFieldElement {
      * @returns {void}
      */
     updateComposerValues(newValues) {
+        const selectedAt = Date.now();
         this.queryItems((item, composer) => {
             if (newValues.includes(composer.getItemPropertyValue(item, 'value'))) {
                 composer.setItemPropertyValue(item, 'selected', true);
+                composer.setItemPropertyValue(item, 'selectedAt', selectedAt + newValues.indexOf(item.value ?? '')); // Sequential selection
                 return true;
             }
             composer.setItemPropertyValue(item, 'selected', false);

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

@@ -258,11 +258,6 @@
           "name": "checkValidity",
           "description": "Returns true if an input element contains valid data.",
           "params": []
-        },
-        {
-          "name": "reportValidity",
-          "description": "Validate input. Mark as error if input is invalid",
-          "params": []
         }
       ]
     }

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

@@ -37,11 +37,10 @@ A form control element for datetime input.
 
 ## Methods
 
-| 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 |
-| `willUpdate`     | `(changedProperties: any): void` | Updates the element<br /><br />**changedProperties**: Properties that has changed |
+| Method          | Type                             | Description                                      |
+|-----------------|----------------------------------|--------------------------------------------------|
+| `checkValidity` | `(): boolean`                    | Returns true if an input element contains valid data. |
+| `willUpdate`    | `(changedProperties: any): void` | Updates the element<br /><br />**changedProperties**: Properties that has changed |
 
 ## Events
 

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

@@ -186,18 +186,6 @@ export declare class DatetimeField extends TextField {
      * @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;
-    /**
-     * Validate input according `pattern`, `minLength` and `maxLength` properties
-     * change state of `error` property according pattern validation
-     * @returns {void}
-     */
-    protected validateInput(): void;
     /**
      * Override validation method for value
      * @param value value
@@ -244,21 +232,11 @@ export declare class DatetimeField extends TextField {
      * @returns {void}
      */
     protected setValueAndNotify(value: string): void;
-    /**
-     * Reset error state on input
-     * @returns {void}
-     */
-    protected resetError(): void;
     /**
      * Returns true if an input element contains valid data.
      * @returns true if input is valid
      */
     checkValidity(): boolean;
-    /**
-     * Validate input. Mark as error if input is invalid
-     * @returns false if there is an error
-     */
-    reportValidity(): boolean;
     /**
      * Select part
      * @param parts The list of parts

package/lib/datetime-field/index.js

@@ -294,23 +294,6 @@ let DatetimeField = class DatetimeField extends TextField {
             this.inputValue = inputValue; // setting the value resets selection
         }
     }
-    /**
-     * Check if input should be re-validated
-     * @param changedProperties Properties that has changed
-     * @returns True if input should be re-validated
-     */
-    shouldValidateInput(changedProperties) {
-        // TODO: this needs refactoring with all other fields to support common validation patterns
-        return changedProperties.has(FocusedPropertyKey) && !this.focused;
-    }
-    /**
-     * Validate input according `pattern`, `minLength` and `maxLength` properties
-     * change state of `error` property according pattern validation
-     * @returns {void}
-     */
-    validateInput() {
-        this.reportValidity();
-    }
     /**
      * Override validation method for value
      * @param value value
@@ -399,15 +382,6 @@ let DatetimeField = class DatetimeField extends TextField {
             this.notifyPropertyChange('value', value);
         }
     }
-    /**
-     * Reset error state on input
-     * @returns {void}
-     */
-    resetError() {
-        if (this.error && this.checkValidity()) {
-            this.reportValidity();
-        }
-    }
     /**
      * Returns true if an input element contains valid data.
      * @returns true if input is valid
@@ -433,15 +407,6 @@ let DatetimeField = class DatetimeField extends TextField {
         }
         return true;
     }
-    /**
-     * Validate input. Mark as error if input is invalid
-     * @returns false if there is an error
-     */
-    reportValidity() {
-        const hasError = !this.checkValidity();
-        this.notifyErrorChange(hasError);
-        return !hasError;
-    }
     /**
      * Select part
      * @param parts The list of parts
@@ -527,7 +492,7 @@ let DatetimeField = class DatetimeField extends TextField {
                     this.setValueAndNotify(newValue);
                     this.syncInputValue();
                     this.selectPart(this.formatToParts(newValue), selectedPartIndex);
-                    this.resetError();
+                    this.reportValidity();
                     event.preventDefault();
                 }
                 break;
@@ -547,8 +512,7 @@ let DatetimeField = class DatetimeField extends TextField {
      */
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     onPossibleValueChange(event) {
-        // Nobody likes to see a red border
-        this.resetError();
+        this.reportValidity();
         this.selectPartFrame.cancel(); // ensure no pending selection
         this.partLabel = '';
         const inputValue = this.inputElement?.value || '';

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';
@@ -57,12 +56,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,6 @@ let EmailField = class EmailField extends TextField {
          * Set to multiple mode, allows multiple emails in a single input
          */
         this.multiple = false;
-        /* c8 ignore stop */
     }
     /**
      * Decorate `<input>` element with common properties extended from text-field:
@@ -68,18 +67,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/number-field/custom-elements.json

@@ -159,6 +159,14 @@
           "name": "error-changed",
           "description": "Fired when user inputs invalid value. The event is not triggered if `error` property is changed programmatically."
         },
+        {
+          "name": "step-up",
+          "description": "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."
+        },
+        {
+          "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"
         }
@@ -188,11 +196,6 @@
           "name": "checkValidity",
           "description": "Returns true if an input element contains valid data.",
           "params": []
-        },
-        {
-          "name": "reportValidity",
-          "description": "Validate input. Mark as error if input is invalid",
-          "params": []
         }
       ]
     }

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

@@ -21,12 +21,11 @@ Form control element for numbers.
 
 ## Methods
 
-| 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 |
-| `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. |
+| Method          | Type                                          | Description                                      |
+|-----------------|-----------------------------------------------|--------------------------------------------------|
+| `checkValidity` | `(): boolean`                                 | Returns true if an input element contains valid data. |
+| `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. |
 
 ## Events
 
@@ -34,4 +33,6 @@ Form control element for numbers.
 |-----------------|--------------------------------------------------|
 | `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

@@ -12,6 +12,8 @@ declare enum Direction {
  *
  * @fires value-changed - Fired when user commits a value change. The event is not triggered if `value` property is changed programmatically.
  * @fires error-changed - Fired when user inputs invalid value. The event is not triggered if `error` property is changed programmatically.
+ * @fires 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.
+ * @fires 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.
  *
  * @attr {boolean} disabled - Set disabled state
  * @prop {boolean} [disabled=false] - Set disabled state
@@ -150,6 +152,12 @@ export declare class NumberField extends FormFieldElement {
      * @returns {void}
      */
     protected onInputKeyDown(event: KeyboardEvent): void;
+    /**
+     * Trigger step-up or step-down event and return the event is cancelled
+     * @param direction Up or Down
+     * @returns {boolean} false if cancelled event. And true otherwise.
+     */
+    private dispatchStepEvent;
     /**
      * Run when spinner has been tapped
      * @param event tap event
@@ -201,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
@@ -263,11 +266,6 @@ export declare class NumberField extends FormFieldElement {
      * @returns true if input is valid
      */
     checkValidity(): boolean;
-    /**
-     * Validate input. Mark as error if input is invalid
-     * @returns false if there is an error
-     */
-    reportValidity(): boolean;
     /**
      * @ignore
      * @inheritDoc

package/lib/number-field/index.js

@@ -17,6 +17,8 @@ var Direction;
  *
  * @fires value-changed - Fired when user commits a value change. The event is not triggered if `value` property is changed programmatically.
  * @fires error-changed - Fired when user inputs invalid value. The event is not triggered if `error` property is changed programmatically.
+ * @fires 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.
+ * @fires 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.
  *
  * @attr {boolean} disabled - Set disabled state
  * @prop {boolean} [disabled=false] - Set disabled state
@@ -136,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();
         }
@@ -251,6 +251,17 @@ let NumberField = class NumberField extends FormFieldElement {
         }
         event.preventDefault();
     }
+    /**
+     * Trigger step-up or step-down event and return the event is cancelled
+     * @param direction Up or Down
+     * @returns {boolean} false if cancelled event. And true otherwise.
+     */
+    dispatchStepEvent(direction) {
+        const eventName = direction === Direction.Up ? 'step-up' : 'step-down';
+        return this.dispatchEvent(new CustomEvent(eventName, {
+            cancelable: true
+        }));
+    }
     /**
      * Run when spinner has been tapped
      * @param event tap event
@@ -274,14 +285,17 @@ let NumberField = class NumberField extends FormFieldElement {
      * @returns {void}
      */
     onApplyStep(direction) {
-        try {
-            this.applyStepDirection(direction);
-            this.dispatchEvent(new InputEvent('input'));
-            this.setSilentlyValueAndNotify();
-        }
-        catch (error) {
-            // According to specs stepDown/stepUp may fail for some invalid inputs
-            // do nothing and report nothing in that case
+        const event = this.dispatchStepEvent(direction);
+        if (event) {
+            try {
+                this.applyStepDirection(direction);
+                this.dispatchEvent(new InputEvent('input'));
+                this.setSilentlyValueAndNotify();
+            }
+            catch (error) {
+                // According to specs stepDown/stepUp may fail for some invalid inputs
+                // do nothing and report nothing in that case
+            }
         }
     }
     /**
@@ -402,7 +416,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
@@ -410,15 +424,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
@@ -629,18 +634,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/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/index.d.ts

@@ -68,6 +68,12 @@ 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
@@ -86,13 +92,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 +110,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}

package/lib/text-field/index.js

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { FormFieldElement, css, html, nothing } from '@refinitiv-ui/core';
+import { FocusedPropertyKey, FormFieldElement, css, html, nothing } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { isElementOverflown } from '@refinitiv-ui/utils/element.js';
@@ -108,6 +108,17 @@ let TextField = class TextField extends FormFieldElement {
         super.firstUpdated(changedProperties);
         registerOverflowTooltip(this, () => this.inputValue, () => (this.inputElement ? isElementOverflown(this.inputElement) : false));
     }
+    /**
+     * Updates the element
+     * @param changedProperties Properties that has changed
+     * @returns {void}
+     */
+    update(changedProperties) {
+        if (changedProperties.has(FocusedPropertyKey) && !this.focused) {
+            this.reportValidity();
+        }
+        super.update(changedProperties);
+    }
     /**
      * Called when the element’s DOM has been updated and rendered
      * @param changedProperties Properties that has changed
@@ -116,10 +127,7 @@ let TextField = class TextField extends FormFieldElement {
     updated(changedProperties) {
         super.updated(changedProperties);
         if (this.shouldSyncInputValue(changedProperties)) {
-            this.syncInputValue(changedProperties);
-        }
-        if (this.shouldValidateInput(changedProperties)) {
-            this.validateInput();
+            this.syncInputValue();
         }
     }
     /**
@@ -137,26 +145,9 @@ let TextField = class TextField extends FormFieldElement {
      * @param changedProperties Properties that has changed
      * @returns {void}
      */
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    syncInputValue(changedProperties) {
+    syncInputValue() {
         this.inputValue = this.value;
     }
-    /**
-     * 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('pattern') ||
-            !!(this.pattern && changedProperties.has('value')) ||
-            changedProperties.has('minLength') ||
-            !!(this.minLength && changedProperties.has('value')) ||
-            changedProperties.has('maxLength') ||
-            !!(this.maxLength && changedProperties.has('value')));
-    }
-    /* c8 ignore stop */
     /**
      * Runs on input element `input` event
      * @param event `input` event
@@ -181,14 +172,7 @@ let TextField = class TextField extends FormFieldElement {
     onPossibleValueChange(event) {
         const value = this.inputElement?.value || '';
         this.setValueAndNotify(value);
-    }
-    /**
-     * Uses native `checkValidity()` function to validate input
-     * @returns {void}
-     */
-    validateInput() {
-        const error = !this.inputElement?.checkValidity();
-        this.notifyErrorChange(error);
+        this.reportValidity();
     }
     /**
      * Fires event on `icon` click

package/lib/tree/elements/tree.js

@@ -374,7 +374,7 @@ let Tree = class Tree extends List {
      */
     get values() {
         return this.manager.checkedItems.map((item) => {
-            return this.composer.getItemPropertyValue(item, 'value') || '';
+            return this.composer.getItemPropertyValue(item, 'value') ?? '';
         });
     }
     set values(values) {
@@ -384,9 +384,9 @@ let Tree = class Tree extends List {
         }
         else {
             // Clone value arrays
-            const newValue = [...values].sort().toString();
-            const oldValue = [...this.values].sort().toString();
-            if (newValue !== oldValue) {
+            const newValue = [...values];
+            const oldValue = [...this.values];
+            if (newValue.toString() !== oldValue.toString()) {
                 this.manager.uncheckAllItems();
                 values.some((value) => {
                     this.queryItemsByPropertyValue('value', value).forEach((item) => {

package/lib/tree/managers/tree-manager.d.ts

@@ -24,6 +24,10 @@ export declare class TreeManager<T extends TreeDataItem> {
      * Mode (algorithm) the tree manage is using
      */
     private mode;
+    /**
+     * Last selected item timestamp
+     */
+    private lastSelectedAt?;
     constructor(composer: CollectionComposer<T>, mode?: TreeManagerMode);
     /**
      * Is the manager maintaining parent/child relationships
@@ -42,6 +46,10 @@ export declare class TreeManager<T extends TreeDataItem> {
      * When managing relationships, this excludes groups/parents from the result.
      */
     get checkedItems(): readonly T[];
+    /**
+     * Compare items function order by sequential selected timestamp
+     */
+    protected get orderBySelectedAt(): (itemA: T, itemB: T) => number;
     /**
      * Items which should be visibly displayed.
      * This can be used to render items.

package/lib/tree/managers/tree-manager.js

@@ -47,12 +47,24 @@ export class TreeManager {
      * When managing relationships, this excludes groups/parents from the result.
      */
     get checkedItems() {
-        return this.composer.queryItems((item) => {
+        const items = this.composer.queryItems((item) => {
             if (this.manageRelationships && this.isItemParent(item)) {
                 return false;
             }
             return this.isItemChecked(item);
         }, Infinity);
+        return Object.freeze(items.slice().sort(this.orderBySelectedAt));
+    }
+    /**
+     * Compare items function order by sequential selected timestamp
+     */
+    get orderBySelectedAt() {
+        // Order by sequential selected timestamp
+        return (itemA, itemB) => {
+            const timeA = this.composer.getItemPropertyValue(itemA, 'selectedAt') ?? 0;
+            const timeB = this.composer.getItemPropertyValue(itemB, 'selectedAt') ?? 0;
+            return timeA - timeB;
+        };
     }
     /**
      * Items which should be visibly displayed.
@@ -341,7 +353,13 @@ export class TreeManager {
     }
     _checkItem(item, manageRelationships = this.manageRelationships) {
         if (this.canCheckItem(item)) {
+            // Create unique timestamp base on the latest selection for sequential selection.
+            const timestamp = Date.now();
+            this.lastSelectedAt =
+                this.lastSelectedAt && this.lastSelectedAt >= timestamp ? this.lastSelectedAt + 1 : timestamp;
+            // Set item selected with timestamp
             this.composer.setItemPropertyValue(item, 'selected', true);
+            this.composer.setItemPropertyValue(item, 'selectedAt', this.lastSelectedAt);
             if (manageRelationships) {
                 this.forceUpdateOnPath(item);
                 this.getItemDescendants(item).forEach((descendant) => this._checkItem(descendant, false));

package/lib/tree-select/index.d.ts

@@ -59,7 +59,11 @@ export declare class TreeSelect extends ComboBox<TreeSelectDataItem> {
     /**
      * Extracted values from {@link this.checkedGroupedItems}
      */
-    protected pillsData: TreeSelectDataItem[];
+    protected pillsData: Readonly<TreeSelectDataItem[]>;
+    /**
+     * Cache old selection timestamps for revert selected timestamps when cancel selection
+     */
+    protected oldSelection: Map<string, number | undefined>;
     /**
      * Are there pills visible
      */
@@ -207,10 +211,15 @@ export declare class TreeSelect extends ComboBox<TreeSelectDataItem> {
      */
     protected persistSelection(): void;
     /**
-     * Reverse selection. Run on Esc or Cancel
+     * Revert modified selection to old values. Run on Esc or Cancel
+     * @returns {void}
+     */
+    protected revertModifiedSelection(): void;
+    /**
+     * Revert all selected timestamps to the previous state which affect to item sorting
      * @returns {void}
      */
-    protected cancelSelection(): void;
+    protected revertSelectionTimestamps(): void;
     /**
      * Update memoized track
      *

package/lib/tree-select/index.js

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { css, html, nothing, triggerResize } from '@refinitiv-ui/core';
+import { WarningNotice, css, html, nothing, triggerResize } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { query } from '@refinitiv-ui/core/decorators/query.js';
@@ -21,6 +21,7 @@ import { VERSION } from '../version.js';
 export { TreeSelectRenderer };
 const MEMO_THROTTLE = 16;
 const POPUP_POSITION = ['bottom-start', 'top-start'];
+const valueFormatWarning = new WarningNotice("The specified 'values' format does not conform to the required format.");
 /**
  * Dropdown control that allows selection from the tree list
  *
@@ -65,6 +66,10 @@ let TreeSelect = class TreeSelect extends ComboBox {
          * Extracted values from {@link this.checkedGroupedItems}
          */
         this.pillsData = [];
+        /**
+         * Cache old selection timestamps for revert selected timestamps when cancel selection
+         */
+        this.oldSelection = new Map();
         /**
          * Are there pills visible
          */
@@ -165,8 +170,26 @@ let TreeSelect = class TreeSelect extends ComboBox {
         return this._values;
     }
     set values(values) {
-        super.values = values;
-        this._values = values;
+        if (!Array.isArray(values)) {
+            valueFormatWarning.show();
+            this.values = [];
+            return;
+        }
+        // Update the selection state when found new value
+        const newValues = values.slice(0, this.multiple ? values.length : 1);
+        const oldValues = this.values.slice();
+        if (newValues.toString() !== oldValues.toString()) {
+            this._values = values;
+            this.updateComposerValues(values);
+            this.updatePills();
+            if (this.freeText) {
+                // free text mode is only supported in single selection mode
+                // so if there is no valid selection in the composer, we can assume
+                // the first item can be used as the free text item.
+                this.freeTextValue = !this.composerValues.length ? newValues[0] : '';
+            }
+            this.requestUpdate('values', oldValues);
+        }
     }
     /**
      * Set maximum number of selected items
@@ -228,7 +251,7 @@ let TreeSelect = class TreeSelect extends ComboBox {
      * @override
      */
     get selectedLabels() {
-        return this.checkedGroupedItems.map((selected) => this.getItemPropertyValue(selected, 'label') || '');
+        return this.checkedGroupedItems.map((selected) => this.getItemPropertyValue(selected, 'label') ?? '');
     }
     /**
      * Returns memoized selected state
@@ -332,29 +355,37 @@ let TreeSelect = class TreeSelect extends ComboBox {
      * @returns {void}
      */
     persistSelection() {
-        const oldValues = this.values.slice();
+        const oldValues = this.values;
         const newValues = this.composerValues;
-        const oldComparison = oldValues.sort().toString();
-        const newComparison = newValues.sort().toString();
-        if (oldComparison !== newComparison) {
+        if (oldValues.toString() !== newValues.toString()) {
+            // Set new values order by sequential selection
             this.values = newValues;
             this.notifyPropertyChange('value', this.value);
         }
     }
     /**
-     * Reverse selection. Run on Esc or Cancel
+     * Revert modified selection to old values. Run on Esc or Cancel
      * @returns {void}
      */
-    cancelSelection() {
-        const oldValues = this.values.slice();
+    revertModifiedSelection() {
+        const oldValues = this.values;
         const newValues = this.composerValues;
-        const oldComparison = oldValues.sort().toString();
-        const newComparison = newValues.sort().toString();
-        if (oldComparison !== newComparison) {
-            // revert selected item by updating the collection composer
-            this.updateComposerValues(this._values);
+        if (oldValues.toString() !== newValues.toString()) {
+            // Revert selected item by updating the collection composer
+            this.updateComposerValues(oldValues);
         }
     }
+    /**
+     * Revert all selected timestamps to the previous state which affect to item sorting
+     * @returns {void}
+     */
+    revertSelectionTimestamps() {
+        this.selection.forEach((item) => {
+            const oldSelectedAt = this.oldSelection.get(item.value);
+            this.composer.setItemPropertyValue(item, 'selectedAt', oldSelectedAt);
+        });
+        this.oldSelection.clear(); // Clear cache old selection
+    }
     /**
      * Update memoized track
      *
@@ -419,6 +450,7 @@ let TreeSelect = class TreeSelect extends ComboBox {
         const event = new CustomEvent('cancel');
         this.dispatchEvent(event);
         if (!event.defaultPrevented) {
+            this.revertSelectionTimestamps();
             this.closeAndReset();
             // reset always happens on popup close action
         }
@@ -487,6 +519,10 @@ let TreeSelect = class TreeSelect extends ComboBox {
     onPopupOpened() {
         super.onPopupOpened();
         this.clearSelectionFilter();
+        // Cache current selection timestamps for reverting modified selection when user cancel
+        this.selection.forEach((item) => {
+            this.oldSelection.set(item.value, this.getItemPropertyValue(item, 'selectedAt'));
+        });
         this.updatePills();
         this.updateMemo();
     }
@@ -504,7 +540,7 @@ let TreeSelect = class TreeSelect extends ComboBox {
     onPopupClosed() {
         super.onPopupClosed();
         this.updateMemo();
-        this.cancelSelection();
+        this.revertModifiedSelection();
         this.exitEditSelection();
     }
     /**
@@ -733,7 +769,7 @@ let TreeSelect = class TreeSelect extends ComboBox {
      */
     updatePills() {
         if (this.showPills) {
-            this.pillsData = this.checkedGroupedItems.slice();
+            this.pillsData = this.checkedGroupedItems;
             this.hasPills = !!this.pillsData.length;
         }
     }

package/lib/version.js

@@ -1 +1 @@
-export const VERSION = '7.3.2';
+export const VERSION = '7.5.0';

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@refinitiv-ui/elements",
-  "version": "7.3.2",
+  "version": "7.5.0",
   "description": "Element Framework Elements",
-  "author": "Refinitiv",
+  "author": "LSEG",
   "license": "Apache-2.0",
   "main": "./lib/index.js",
   "module": "./lib/index.js",
@@ -341,8 +341,8 @@
   },
   "dependencies": {
     "@lit-labs/context": "^0.3.1",
-    "@refinitiv-ui/halo-theme": "^7.0.4",
-    "@refinitiv-ui/solar-theme": "^7.0.4",
+    "@refinitiv-ui/halo-theme": "^7.1.1",
+    "@refinitiv-ui/solar-theme": "^7.1.1",
     "chart.js": "^4.3.0",
     "chartjs-adapter-date-fns": "^3.0.0",
     "d3-interpolate": "^3.0.1",
@@ -351,25 +351,25 @@
     "tslib": "^2.3.1"
   },
   "devDependencies": {
-    "@refinitiv-ui/core": "^7.1.0",
-    "@refinitiv-ui/demo-block": "^7.0.4",
-    "@refinitiv-ui/i18n": "^7.0.3",
-    "@refinitiv-ui/phrasebook": "^7.0.3",
-    "@refinitiv-ui/test-helpers": "^7.0.3",
-    "@refinitiv-ui/translate": "^7.0.3",
-    "@refinitiv-ui/utils": "^7.0.3",
+    "@refinitiv-ui/core": "^7.2.0",
+    "@refinitiv-ui/demo-block": "^7.0.6",
+    "@refinitiv-ui/i18n": "^7.0.4",
+    "@refinitiv-ui/phrasebook": "^7.0.4",
+    "@refinitiv-ui/test-helpers": "^7.0.4",
+    "@refinitiv-ui/translate": "^7.0.4",
+    "@refinitiv-ui/utils": "^7.1.0",
     "@types/d3-interpolate": "^3.0.1"
   },
   "peerDependencies": {
     "@refinitiv-ui/browser-sparkline": "^1.0.0 || ^2.0.0",
-    "@refinitiv-ui/core": "^7.1.0",
-    "@refinitiv-ui/i18n": "^7.0.3",
-    "@refinitiv-ui/phrasebook": "^7.0.3",
-    "@refinitiv-ui/translate": "^7.0.3",
-    "@refinitiv-ui/utils": "^7.0.3"
+    "@refinitiv-ui/core": "^7.2.0",
+    "@refinitiv-ui/i18n": "^7.0.4",
+    "@refinitiv-ui/phrasebook": "^7.0.4",
+    "@refinitiv-ui/translate": "^7.0.4",
+    "@refinitiv-ui/utils": "^7.1.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "7926580c28da963085dceeeb27f9f706b627525c"
+  "gitHead": "e162ec78601e5f97201d53d740925ee2075fd95e"
 }