@refinitiv-ui/elements 7.11.0 → 7.11.1

package/CHANGELOG.md

@@ -3,6 +3,13 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.11.1](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@7.11.0...@refinitiv-ui/elements@7.11.1) (2024-05-20)
+
+### Bug Fixes
+
+- **chart:** fix gridlines colors ([#1161](https://github.com/Refinitiv/refinitiv-ui/issues/1161)) ([b59da6d](https://github.com/Refinitiv/refinitiv-ui/commit/b59da6d962d1e8026391df53c76c0fb1549738ca))
+- **datetime-picker:** fix changing format doesn't sync to input ([#1164](https://github.com/Refinitiv/refinitiv-ui/issues/1164)) ([f63decc](https://github.com/Refinitiv/refinitiv-ui/commit/f63decc53ba9941bdc26b8ea432ca62525135111))
+
 # [7.11.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@7.10.10...@refinitiv-ui/elements@7.11.0) (2024-05-07)
 
 ### Features

package/lib/chart/elements/chart.d.ts

@@ -112,6 +112,12 @@ export declare class Chart extends BasicElement {
      * @returns {void}
      */
     protected beforeUpdate: (chart: ChartJS) => void;
+    /**
+     * Set grid color in beforeUpdate event from Chartjs
+     * @param chart Chart.js instance
+     * @returns {void}
+     */
+    private decorateGridColors;
     /**
      * Inject theme color into each datasets
      * @param chart Chart.js instance

package/lib/chart/elements/chart.js

@@ -39,6 +39,7 @@ let Chart = class Chart extends BasicElement {
             // set global config again in case the CSS font isn't loaded when updating the chart
             this.setGlobalConfig();
             this.decorateColors(chart);
+            this.decorateGridColors(chart);
         };
         /**
          * Inject theme color into each datasets
@@ -395,12 +396,6 @@ let Chart = class Chart extends BasicElement {
         ChartJS.defaults.font.family = cssStyle.getPropertyValue('font-family');
         ChartJS.defaults.font.size = Number(cssStyle.getPropertyValue('font-size').replace('px', ''));
         ChartJS.defaults.font.style = cssStyle.getPropertyValue('font-style');
-        // Set global grid color
-        ChartJS.defaults.scale.grid.color = (line) => {
-            return line.index === 0
-                ? this.getComputedVariable('--zero-line-color', 'transparent')
-                : this.getComputedVariable('--grid-line-color', 'transparent');
-        };
         if (ChartJS.defaults.scales.radialLinear) {
             ChartJS.defaults.scales.radialLinear.ticks.showLabelBackdrop = false;
         }
@@ -425,6 +420,27 @@ let Chart = class Chart extends BasicElement {
         const result = parseFloat(cssComputeVar);
         return isNaN(result) ? undefined : result;
     }
+    /**
+     * Set grid color in beforeUpdate event from Chartjs
+     * @param chart Chart.js instance
+     * @returns {void}
+     */
+    decorateGridColors(chart) {
+        for (const scale of Object.keys(chart.scales)) {
+            const axis = chart.options?.scales?.[scale];
+            const userAxis = this.config?.options?.scales?.[scale];
+            const userGridColor = userAxis?.grid?.color;
+            const userBorderColor = userAxis?.border?.color;
+            // Change grid color if the color is the default value of `rgba(0,0,0,0.1)`
+            if (axis && userGridColor === 'rgba(0,0,0,0.1)') {
+                axis.grid.color = this.getComputedVariable('--grid-line-color', 'transparent');
+            }
+            // Change border color if the color is the default value of `rgba(0,0,0,0.1)`
+            if (axis && userBorderColor === 'rgba(0,0,0,0.1)') {
+                axis.border.color = this.getComputedVariable('--zero-line-color', 'transparent');
+            }
+        }
+    }
     /**
      * Merges all the different layers of the config.
      * @returns {void}

package/lib/datetime-picker/index.js

@@ -358,7 +358,9 @@ let DatetimePicker = class DatetimePicker extends FormFieldElement {
         if (this.opened && !this.canOpenPopup) {
             this.opened = false; /* this cannot be nor stopped nor listened */
         }
-        if (changedProperties.has('_values') || changedProperties.has(TranslatePropertyKey)) {
+        if (changedProperties.has('_values') ||
+            changedProperties.has(TranslatePropertyKey) ||
+            changedProperties.has('format')) {
             this.syncInputValues();
         }
         if (changedProperties.has('placeholder')) {

package/lib/version.js

@@ -1 +1 @@
-export const VERSION = '7.11.0';
+export const VERSION = '7.11.1';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refinitiv-ui/elements",
-  "version": "7.11.0",
+  "version": "7.11.1",
   "description": "Element Framework Elements",
   "author": "LSEG",
   "license": "Apache-2.0",
@@ -373,5 +373,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b689d22c6cc53274a12b42233d087f9d5ccdee2e"
+  "gitHead": "40fe09a69794fb8d964d638498b0f4fe31b50e7e"
 }