@refinitiv-ui/elements 6.0.3 → 6.0.4

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.
 
+## [6.0.4](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@6.0.3...@refinitiv-ui/elements@6.0.4) (2022-08-02)
+
+
+### Bug Fixes
+
+* **calendar:** day cell selected style not work with disabled state ([#410](https://github.com/Refinitiv/refinitiv-ui/issues/410)) ([1d9c931](https://github.com/Refinitiv/refinitiv-ui/commit/1d9c931b4d625b93c6fd60b780060ff2f03d9fc9))
+* **interactive-chart:** show dash text when legend hided ([#402](https://github.com/Refinitiv/refinitiv-ui/issues/402)) ([93631ca](https://github.com/Refinitiv/refinitiv-ui/commit/93631cac4db0623f05c333b53f67728ace953039))
+* **tab-bar:** notify value change event on pressing an arrow key ([#398](https://github.com/Refinitiv/refinitiv-ui/issues/398)) ([e55d152](https://github.com/Refinitiv/refinitiv-ui/commit/e55d152491b97c8763dc628ef7d1c013e4c3f01a))
+
+
+
+
+
 ## [6.0.3](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@6.0.2...@refinitiv-ui/elements@6.0.3) (2022-07-20)
 
 **Note:** Version bump only for package @refinitiv-ui/elements

package/lib/calendar/index.js

@@ -156,7 +156,7 @@ let Calendar = class Calendar extends ControlElement {
       [part~=cell-content]:not([tabindex]) {
         pointer-events: none;
       }
-      [part~=selection] {
+      [part~=selectable] {
         cursor: pointer;
       }
     `;
@@ -307,7 +307,7 @@ let Calendar = class Calendar extends ControlElement {
      * @returns button HTML date button element or null
      */
     getDateButtonByIndex(index) {
-        const elements = Array.from(this.renderRoot.querySelectorAll('[part~=cell] > [part~=selection]'));
+        const elements = Array.from(this.renderRoot.querySelectorAll('[part~=cell] > [part~=selectable]'));
         return elements.find((element) => this.isDateButton(element) && String(element.index) === String(index));
     }
     /**
@@ -315,7 +315,7 @@ let Calendar = class Calendar extends ControlElement {
      * @returns button HTML date button element or null
      */
     get activeDateButton() {
-        return this.renderRoot.querySelector('[part~=cell][active] > [part~=selection]');
+        return this.renderRoot.querySelector('[part~=cell][active] > [part~=selectable]');
     }
     /**
      * Return true if passed target is HTML
@@ -1118,7 +1118,8 @@ let Calendar = class Calendar extends ControlElement {
      * @returns template result
      */
     renderCell(cell) {
-        const isSelectable = cell.value !== undefined && !cell.disabled;
+        const isSelection = cell.value !== undefined;
+        const isSelectable = isSelection && !cell.disabled;
         return html `<div
       role="gridcell"
       part="cell ${cell.view}"
@@ -1140,7 +1141,7 @@ let Calendar = class Calendar extends ControlElement {
             value: parse(cell.value),
             view: this.renderView
         }) : undefined)}"
-             part="cell-content${isSelectable ? ' selection' : ''}"
+             part="cell-content${isSelection ? ' selection' : ''}${isSelectable ? ' selectable' : ''}"
              .value=${cell.value}
              .index=${cell.index}>${cell.text}</div>
     </div>`;

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

@@ -1,3 +1,3 @@
 import '@refinitiv-ui/elements/button/themes/halo/dark';
 
-elf.customStyles.define('ef-calendar', ':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:12rem;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]):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]:active [part~=selection],:host [part~=cell][selected]:active [part~=selection],:host [part~=cell][today]: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}');
+elf.customStyles.define('ef-calendar', ':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:12rem;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}');

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

@@ -1,3 +1,3 @@
 import '@refinitiv-ui/elements/button/themes/halo/light';
 
-elf.customStyles.define('ef-calendar', ':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:12rem;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]):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]:active [part~=selection],:host [part~=cell][selected]:active [part~=selection],:host [part~=cell][today]: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}');
+elf.customStyles.define('ef-calendar', ':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:12rem;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}');

package/lib/interactive-chart/index.js

@@ -12,6 +12,7 @@ import { LegendStyle } from './helpers/types.js';
 import { merge } from './helpers/merge.js';
 const NOT_AVAILABLE_DATA = 'N/A';
 const NO_DATA_POINT = '--';
+const HIDE_DATA_POINT = '';
 /**
  * A charting component that allows you to create several use cases of financial chart.
  * By lightweight-charts library.
@@ -668,7 +669,7 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
                 }
                 // when there's no data point in the series object.
                 else if (!eventMove?.seriesPrices.get(this.seriesList[idx]) && eventMove?.time) {
-                    value = NO_DATA_POINT;
+                    value = symbol ? NO_DATA_POINT : HIDE_DATA_POINT;
                     this.isCrosshairVisible = true;
                     this.hasDataPoint = false;
                 }
@@ -763,7 +764,7 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
                 /**
                  * Create a new span OHLC after displaying (--) or (N/A)
                  */
-                if (spanElem.textContent === NOT_AVAILABLE_DATA || spanElem.textContent === NO_DATA_POINT) {
+                if (spanElem.textContent === NOT_AVAILABLE_DATA || spanElem.textContent === NO_DATA_POINT || spanElem.textContent === HIDE_DATA_POINT) {
                     rowLegend[index].removeChild(spanElem);
                     this.createSpanOHLC(rowLegend[index], rowData, priceColor);
                 }
@@ -800,7 +801,7 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
     createTextPrice(rowLegend, price, priceColor, index) {
         const formatter = this.internalConfig.series[index].legendPriceFormatter;
         // Formats legend only when formatter and data point are provided
-        const formattedPrice = !!formatter && price !== NO_DATA_POINT ? formatter(price) : price;
+        const formattedPrice = !!formatter && price !== NO_DATA_POINT && price !== HIDE_DATA_POINT ? formatter(price) : price;
         // Create text price after chart has rendered
         if (rowLegend instanceof HTMLElement) {
             rowLegend.setAttribute('data-color', priceColor);

package/lib/tab-bar/index.d.ts

@@ -73,7 +73,13 @@ export declare class TabBar extends BasicElement {
      * @param value Value to check
      * @returns true if incoming value matches one of the existing tabs
      */
-    private isValidValue;
+    protected isValidValue(value: string): boolean;
+    /**
+     * On *user-interaction* set the value and notify.
+     * @param value New value
+     * @returns {void}
+     */
+    protected setValueAndNotify(value: string): void;
     /**
      * When the slot changes, set the level, toggle the scroll button, and set the value
      * @returns {void}

package/lib/tab-bar/index.js

@@ -131,6 +131,17 @@ let TabBar = class TabBar extends BasicElement {
         const tabList = this.getFocusableTabs();
         return tabList.some(tab => this.getTabValue(tab) === value);
     }
+    /**
+     * On *user-interaction* set the value and notify.
+     * @param value New value
+     * @returns {void}
+     */
+    setValueAndNotify(value) {
+        if (this.value !== value) {
+            this.value = value;
+            this.notifyPropertyChange('value', value);
+        }
+    }
     /**
      * When the slot changes, set the level, toggle the scroll button, and set the value
      * @returns {void}
@@ -183,10 +194,7 @@ let TabBar = class TabBar extends BasicElement {
         const element = event.target;
         if (element instanceof Tab) {
             const tabValue = this.getTabValue(element);
-            if (tabValue !== this.value) {
-                this.value = this.getTabValue(element);
-                this.notifyPropertyChange('value', tabValue);
-            }
+            this.setValueAndNotify(tabValue);
         }
     }
     /**
@@ -286,7 +294,8 @@ let TabBar = class TabBar extends BasicElement {
     focusAndSetActiveTab(tab) {
         tab.focus();
         tab.scrollIntoView({ block: 'nearest' });
-        this.value = this.getTabValue(tab);
+        const tabValue = this.getTabValue(tab);
+        this.setValueAndNotify(tabValue);
     }
     /**
      * Navigate to first focusable tab of the tab bar

package/lib/version.js

@@ -1 +1 @@
-export const VERSION = '6.0.3';
+export const VERSION = '6.0.4';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refinitiv-ui/elements",
-  "version": "6.0.3",
+  "version": "6.0.4",
   "description": "Element Framework Elements",
   "author": "Refinitiv",
   "license": "Apache-2.0",
@@ -328,8 +328,8 @@
   },
   "dependencies": {
     "@refinitiv-ui/browser-sparkline": "1.1.8",
-    "@refinitiv-ui/halo-theme": "^6.1.2",
-    "@refinitiv-ui/solar-theme": "^6.0.3",
+    "@refinitiv-ui/halo-theme": "^6.1.3",
+    "@refinitiv-ui/solar-theme": "^6.0.4",
     "@types/chart.js": "^2.9.31",
     "chart.js": "~2.9.4",
     "d3-interpolate": "^3.0.1",
@@ -338,24 +338,24 @@
     "tslib": "^2.3.1"
   },
   "devDependencies": {
-    "@refinitiv-ui/core": "^6.0.2",
-    "@refinitiv-ui/demo-block": "^6.0.3",
-    "@refinitiv-ui/i18n": "^6.0.2",
-    "@refinitiv-ui/phrasebook": "^6.1.1",
-    "@refinitiv-ui/test-helpers": "^6.0.2",
-    "@refinitiv-ui/translate": "^6.0.2",
-    "@refinitiv-ui/utils": "^6.0.2",
+    "@refinitiv-ui/core": "^6.0.3",
+    "@refinitiv-ui/demo-block": "^6.0.4",
+    "@refinitiv-ui/i18n": "^6.0.3",
+    "@refinitiv-ui/phrasebook": "^6.1.2",
+    "@refinitiv-ui/test-helpers": "^6.0.3",
+    "@refinitiv-ui/translate": "^6.0.3",
+    "@refinitiv-ui/utils": "^6.0.3",
     "@types/d3-interpolate": "^3.0.1"
   },
   "peerDependencies": {
-    "@refinitiv-ui/core": "^6.0.2",
-    "@refinitiv-ui/i18n": "^6.0.2",
-    "@refinitiv-ui/phrasebook": "^6.1.1",
-    "@refinitiv-ui/translate": "^6.0.2",
-    "@refinitiv-ui/utils": "^6.0.2"
+    "@refinitiv-ui/core": "^6.0.3",
+    "@refinitiv-ui/i18n": "^6.0.3",
+    "@refinitiv-ui/phrasebook": "^6.1.2",
+    "@refinitiv-ui/translate": "^6.0.3",
+    "@refinitiv-ui/utils": "^6.0.3"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2d6efc9712d7900cea0509b52cca0b8d61cddd1a"
+  "gitHead": "489b81e6e87d65a6b44b5960a9a5da795518b4ce"
 }