@refinitiv-ui/elements 7.3.1 → 7.4.0

package/CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [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
+
+- **number-field:** stepUp/stepDown not fire input event ([#921](https://github.com/Refinitiv/refinitiv-ui/issues/921)) ([e89e124](https://github.com/Refinitiv/refinitiv-ui/commit/e89e124461cc101bd065fd6262cab64c484d50dc))
+
 ## [7.3.1](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@7.3.0...@refinitiv-ui/elements@7.3.1) (2023-08-28)
 
 ### Bug Fixes

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/number-field/custom-elements.json

@@ -158,6 +158,17 @@
         {
           "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"
         }
       ],
       "methods": [

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

@@ -33,4 +33,7 @@ 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

@@ -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

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
@@ -251,6 +253,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,13 +287,17 @@ let NumberField = class NumberField extends FormFieldElement {
      * @returns {void}
      */
     onApplyStep(direction) {
-        try {
-            this.applyStepDirection(direction);
-            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
+            }
         }
     }
     /**

package/lib/slider/index.js

@@ -1209,7 +1209,6 @@ let Slider = class Slider extends ControlElement {
         @blur=${this.onNumberFieldBlur}
         @keydown=${this.onNumberFieldKeyDown}
         @input=${this.onNumberFieldInput}
-        @value-changed=${this.onNumberFieldInput}
         part="input"
         name="${name}"
         no-spinner

package/lib/version.js

@@ -1 +1 @@
-export const VERSION = '7.3.1';
+export const VERSION = '7.4.0';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refinitiv-ui/elements",
-  "version": "7.3.1",
+  "version": "7.4.0",
   "description": "Element Framework Elements",
   "author": "Refinitiv",
   "license": "Apache-2.0",
@@ -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.0",
+    "@refinitiv-ui/solar-theme": "^7.1.0",
     "chart.js": "^4.3.0",
     "chartjs-adapter-date-fns": "^3.0.0",
     "d3-interpolate": "^3.0.1",
@@ -352,7 +352,7 @@
   },
   "devDependencies": {
     "@refinitiv-ui/core": "^7.1.0",
-    "@refinitiv-ui/demo-block": "^7.0.4",
+    "@refinitiv-ui/demo-block": "^7.0.5",
     "@refinitiv-ui/i18n": "^7.0.3",
     "@refinitiv-ui/phrasebook": "^7.0.3",
     "@refinitiv-ui/test-helpers": "^7.0.3",
@@ -371,5 +371,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b67b84b5628dfdc902c6250c61dd8f6d31f9ba8c"
+  "gitHead": "d220dde5331f239eb4d3ca99ed4972ff3d290f9a"
 }