@refinitiv-ui/elements 7.10.5 → 7.10.7

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.10.7](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@7.10.6...@refinitiv-ui/elements@7.10.7) (2024-03-12)
+
+### Bug Fixes
+
+- **datetime-picker:** validate values for weekendsonly and weekdaysonly ([#1117](https://github.com/Refinitiv/refinitiv-ui/issues/1117)) ([0898814](https://github.com/Refinitiv/refinitiv-ui/commit/089881482effc70cf9e2b47f3148b44140ce37a2))
+
+## [7.10.6](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@7.10.5...@refinitiv-ui/elements@7.10.6) (2024-02-27)
+
+**Note:** Version bump only for package @refinitiv-ui/elements
+
 ## [7.10.5](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@7.10.4...@refinitiv-ui/elements@7.10.5) (2024-02-19)
 
 **Note:** Version bump only for package @refinitiv-ui/elements

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

@@ -427,6 +427,11 @@ export declare class DatetimePicker extends FormFieldElement implements MultiVal
      * @returns true if `from` is before or the same as `to`
      */
     private isFromBeforeTo;
+    /**
+     * Check if `values` correspond to dates that are allowed within the conditions of weekdays or weekends
+     * @returns false if `values` don't correspond to dates that are allowed within the conditions of weekdays or weekends.
+     */
+    private isValidDay;
     /**
      * Check if datetime picker has an error
      * @returns true if error

package/lib/datetime-picker/index.js

@@ -8,7 +8,7 @@ import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { query } from '@refinitiv-ui/core/decorators/query.js';
 import '@refinitiv-ui/phrasebook/locale/en/datetime-picker.js';
 import { TranslatePropertyKey, getLocale, translate } from '@refinitiv-ui/translate';
-import { DateFormat, DateTimeFormat, addMonths, format, isAfter, isBefore, isValidDate, isValidDateTime, parse, subMonths } from '@refinitiv-ui/utils/date.js';
+import { DateFormat, DateTimeFormat, addMonths, format, isAfter, isBefore, isValidDate, isValidDateTime, isWeekend, parse, subMonths } from '@refinitiv-ui/utils/date.js';
 import '../calendar/index.js';
 import '../icon/index.js';
 import '../overlay/index.js';
@@ -442,7 +442,9 @@ let DatetimePicker = class DatetimePicker extends FormFieldElement {
         if ((changedProperties.has('_values') && changedProperties.get('_values') !== undefined) ||
             (changedProperties.has('min') && changedProperties.get('min') !== undefined) ||
             (changedProperties.has('max') && changedProperties.get('max') !== undefined) ||
-            (changedProperties.has('showSeconds') && changedProperties.get('showSeconds') !== undefined)) {
+            (changedProperties.has('showSeconds') && changedProperties.get('showSeconds') !== undefined) ||
+            (changedProperties.has('weekdaysOnly') && changedProperties.get('weekdaysOnly') !== undefined) ||
+            (changedProperties.has('weekendsOnly') && changedProperties.get('weekendsOnly') !== undefined)) {
             return true;
         }
         return false;
@@ -893,12 +895,30 @@ let DatetimePicker = class DatetimePicker extends FormFieldElement {
         }
         return true;
     }
+    /**
+     * Check if `values` correspond to dates that are allowed within the conditions of weekdays or weekends
+     * @returns false if `values` don't correspond to dates that are allowed within the conditions of weekdays or weekends.
+     */
+    isValidDay() {
+        for (const value of this.values) {
+            if (this.weekdaysOnly && isWeekend(value)) {
+                return false;
+            }
+            if (this.weekendsOnly && !isWeekend(value)) {
+                return false;
+            }
+        }
+        return true;
+    }
     /**
      * Check if datetime picker has an error
      * @returns true if error
      */
     hasError() {
-        return !(this.isValidFormat() && this.isValueWithinMinMax() && this.isFromBeforeTo());
+        return !(this.isValidFormat() &&
+            this.isValueWithinMinMax() &&
+            this.isFromBeforeTo() &&
+            this.isValidDay());
     }
     /**
      * Toggles the opened state of the list

package/lib/heatmap/custom-elements.json

@@ -12,7 +12,7 @@
         },
         {
           "name": "label-width",
-          "description": "Number of maximum label width that cell can paint in pixel.\ne.g. label-width: 30px; cell label hides when text length reaches 30px.",
+          "description": "Set minimum text length to be shown on cells. Unit in pixel.\ne.g. label-width = 30; cell's label is hidden when text length is less than 30px.",
           "type": "number",
           "default": "0"
         },
@@ -57,6 +57,12 @@
           "description": "Cell minimum color saturation, value can be from 0 - 1",
           "type": "number",
           "default": "0.4"
+        },
+        {
+          "name": "label-max-font-size",
+          "description": "Maximum font size of label in cells, value in pixel unit e.g. 18",
+          "type": "number",
+          "default": "16"
         }
       ],
       "properties": [
@@ -69,7 +75,7 @@
         {
           "name": "labelWidth",
           "attribute": "label-width",
-          "description": "Number of maximum label width that cell can paint in pixel.\ne.g. label-width: 30px; cell label hides when text length reaches 30px.",
+          "description": "Set minimum text length to be shown on cells. Unit in pixel.\ne.g. label-width = 30; cell's label is hidden when text length is less than 30px.",
           "type": "number",
           "default": "0"
         },
@@ -122,6 +128,13 @@
           "type": "number",
           "default": "0.4"
         },
+        {
+          "name": "labelMaxFontSize",
+          "attribute": "label-max-font-size",
+          "description": "Maximum font size of label in cells, value in pixel unit e.g. 18",
+          "type": "number",
+          "default": "16"
+        },
         {
           "name": "tooltipCallback",
           "description": "A callback function that allows tooltip rendering on cell hover",

package/lib/heatmap/custom-elements.md

@@ -5,19 +5,20 @@ values contained in a matrix are represented as colors
 
 ## Properties
 
-| Property          | Attribute      | Type                     | Default | Description                                      |
-|-------------------|----------------|--------------------------|---------|--------------------------------------------------|
-| `axisHidden`      | `axis-hidden`  | `boolean`                | false   | Hide all axes                                    |
-| `blend`           | `blend`        | `boolean`                | false   | Enable cell color blending                       |
-| `config`          | `config`       | `HeatmapConfig`          | null    | Heatmap configuration options.                   |
-| `labelHidden`     | `label-hidden` | `boolean`                | false   | Hide all labels in the cells                     |
-| `labelWidth`      | `label-width`  | `number`                 | 0       | Number of maximum label width that cell can paint in pixel.<br />e.g. label-width: 30px; cell label hides when text length reaches 30px. |
-| `maxPoint`        | `max-point`    | `number`                 | 1       | Maximum point of the cell coloring               |
-| `midPoint`        | `mid-point`    | `number`                 | 0       | Middle point of the cell coloring                |
-| `minPoint`        | `min-point`    | `number`                 | -1      | Minimum point of the cell coloring               |
-| `renderCallback`  |                | `HeatmapRenderCallback`  |         | Render callback function use for custom cell properties.<br />Accepts custom label, foreground and background color |
-| `saturation`      | `saturation`   | `number`                 | 0.4     | Cell minimum color saturation, value can be from 0 - 1 |
-| `tooltipCallback` |                | `HeatmapTooltipCallback` |         | A callback function that allows tooltip rendering on cell hover |
+| Property           | Attribute             | Type                     | Default | Description                                      |
+|--------------------|-----------------------|--------------------------|---------|--------------------------------------------------|
+| `axisHidden`       | `axis-hidden`         | `boolean`                | false   | Hide all axes                                    |
+| `blend`            | `blend`               | `boolean`                | false   | Enable cell color blending                       |
+| `config`           | `config`              | `HeatmapConfig`          | null    | Heatmap configuration options.                   |
+| `labelHidden`      | `label-hidden`        | `boolean`                | false   | Hide all labels in the cells                     |
+| `labelMaxFontSize` | `label-max-font-size` | `number`                 | 16      | Maximum font size of label in cells, value in pixel unit e.g. 18 |
+| `labelWidth`       | `label-width`         | `number`                 | 0       | Set minimum text length to be shown on cells. Unit in pixel.<br />e.g. label-width = 30; cell's label is hidden when text length is less than 30px. |
+| `maxPoint`         | `max-point`           | `number`                 | 1       | Maximum point of the cell coloring               |
+| `midPoint`         | `mid-point`           | `number`                 | 0       | Middle point of the cell coloring                |
+| `minPoint`         | `min-point`           | `number`                 | -1      | Minimum point of the cell coloring               |
+| `renderCallback`   |                       | `HeatmapRenderCallback`  |         | Render callback function use for custom cell properties.<br />Accepts custom label, foreground and background color |
+| `saturation`       | `saturation`          | `number`                 | 0.4     | Cell minimum color saturation, value can be from 0 - 1 |
+| `tooltipCallback`  |                       | `HeatmapTooltipCallback` |         | A callback function that allows tooltip rendering on cell hover |
 
 ## Methods
 

package/lib/heatmap/helpers/text.d.ts

@@ -1,14 +1,14 @@
 import type { HeatmapCell } from './types';
 declare const MIN_FONT_SIZE = 12;
-declare const MAX_FONT_SIZE = 16;
 /**
  * Calculate responsive font size according to the screen width
  * @param ratio font ratio
  * @param cellHeight cell's height
  * @param cellWidth cell's width
+ * @param cellMaxFontSize cell's max font size
  * @returns font size
  */
-declare const getResponsiveFontSize: (ratio: number, cellHeight: number, cellWidth: number) => number;
+declare const getResponsiveFontSize: (ratio: number, cellHeight: number, cellWidth: number, cellMaxFontSize: number) => number;
 /**
  * Get maximum text width out of all the cell by sampling
  * @param ctx canvas context
@@ -17,4 +17,4 @@ declare const getResponsiveFontSize: (ratio: number, cellHeight: number, cellWid
  * @returns label width measured in canvas
  */
 declare const getMaximumTextWidth: (ctx: CanvasRenderingContext2D, cells: HeatmapCell[], hasCellHeader: boolean) => number;
-export { getResponsiveFontSize, getMaximumTextWidth, MIN_FONT_SIZE, MAX_FONT_SIZE };
+export { getResponsiveFontSize, getMaximumTextWidth, MIN_FONT_SIZE };

package/lib/heatmap/helpers/text.js

@@ -1,19 +1,19 @@
 const MIN_FONT_SIZE = 12;
-const MAX_FONT_SIZE = 16;
 /**
  * Calculate responsive font size according to the screen width
  * @param ratio font ratio
  * @param cellHeight cell's height
  * @param cellWidth cell's width
+ * @param cellMaxFontSize cell's max font size
  * @returns font size
  */
-const getResponsiveFontSize = (ratio, cellHeight, cellWidth) => {
+const getResponsiveFontSize = (ratio, cellHeight, cellWidth, cellMaxFontSize) => {
     let fontSize = Math.round(Math.min(cellHeight, cellWidth) * ratio);
     if (fontSize < MIN_FONT_SIZE) {
         fontSize = MIN_FONT_SIZE;
     }
-    else if (fontSize > MAX_FONT_SIZE) {
-        fontSize = MAX_FONT_SIZE;
+    else if (fontSize > cellMaxFontSize) {
+        fontSize = cellMaxFontSize;
     }
     return fontSize;
 };
@@ -71,4 +71,4 @@ const getMaximumTextWidth = (ctx, cells, hasCellHeader) => {
     }
     return maxTextWidth;
 };
-export { getResponsiveFontSize, getMaximumTextWidth, MIN_FONT_SIZE, MAX_FONT_SIZE };
+export { getResponsiveFontSize, getMaximumTextWidth, MIN_FONT_SIZE };

package/lib/heatmap/index.d.ts

@@ -27,8 +27,8 @@ export declare class Heatmap extends ResponsiveElement {
      */
     config: HeatmapConfig | null;
     /**
-     * Number of maximum label width that cell can paint in pixel.
-     * e.g. label-width: 30px; cell label hides when text length reaches 30px.
+     * Set minimum text length to be shown on cells. Unit in pixel.
+     * e.g. label-width = 30; cell's label is hidden when text length is less than 30px.
      */
     labelWidth: number;
     /**
@@ -65,6 +65,10 @@ export declare class Heatmap extends ResponsiveElement {
      * Cell minimum color saturation, value can be from 0 - 1
      */
     saturation: number;
+    /**
+     * Maximum font size of label in cells, value in pixel unit e.g. 18
+     */
+    labelMaxFontSize: number;
     /**
      * Returns data of interactive cell
      * @param {MouseEvent} event A MouseEvent that occurs when Heatmap is being interacted
@@ -330,9 +334,9 @@ export declare class Heatmap extends ResponsiveElement {
      */
     private paintAllLabel;
     /**
-     * Calculates space between header and label using cell's height
-     * Maximum 10 pixels
+     * Calculates space between header and label
      * @param cellHeight in pixels
+     * @param cellWidth in pixels
      * @returns in pixels
      */
     private calculateHeaderMargin;

package/lib/heatmap/index.js

@@ -148,8 +148,8 @@ let Heatmap = class Heatmap extends ResponsiveElement {
          */
         this.config = null;
         /**
-         * Number of maximum label width that cell can paint in pixel.
-         * e.g. label-width: 30px; cell label hides when text length reaches 30px.
+         * Set minimum text length to be shown on cells. Unit in pixel.
+         * e.g. label-width = 30; cell's label is hidden when text length is less than 30px.
          */
         this.labelWidth = 0;
         /**
@@ -181,6 +181,10 @@ let Heatmap = class Heatmap extends ResponsiveElement {
          * Cell minimum color saturation, value can be from 0 - 1
          */
         this.saturation = 0.4;
+        /**
+         * Maximum font size of label in cells, value in pixel unit e.g. 18
+         */
+        this.labelMaxFontSize = 16;
         /**
          * Current active cell
          */
@@ -638,14 +642,16 @@ let Heatmap = class Heatmap extends ResponsiveElement {
         }
     }
     /**
-     * Calculates space between header and label using cell's height
-     * Maximum 10 pixels
+     * Calculates space between header and label
      * @param cellHeight in pixels
+     * @param cellWidth in pixels
      * @returns in pixels
      */
-    calculateHeaderMargin(cellHeight) {
-        const margin = (cellHeight / 10) * 2;
-        return margin > 10 ? 10 : margin;
+    calculateHeaderMargin(cellHeight, cellWidth) {
+        const margin = 18; // maximum margin
+        const maxValue = Math.max(cellHeight, cellWidth);
+        const minValue = Math.min(cellHeight, cellWidth);
+        return margin / (maxValue / minValue);
     }
     /**
      * Paints label to a single cell
@@ -661,7 +667,7 @@ let Heatmap = class Heatmap extends ResponsiveElement {
             cell.foregroundColor === undefined) {
             return;
         }
-        const margin = cell.header ? this.calculateHeaderMargin(cell.height) : 0;
+        const margin = cell.header ? this.calculateHeaderMargin(cell.height, cell.width) : 0;
         const label = typeof cell.customLabel === 'string' ? cell.customLabel : cell.label;
         this.canvasContext.fillStyle = cell.customForegroundColor || cell.foregroundColor;
         this.canvasContext.fillText(label || '', cell.x + cell.width / 2, cell.y + 1 + cell.height / 2 + margin);
@@ -684,7 +690,7 @@ let Heatmap = class Heatmap extends ResponsiveElement {
             this.contentWithinCellBoundary = false;
             return this.contentWithinCellBoundary;
         }
-        let fontSize = getResponsiveFontSize(fontRatio, contentHeight, contentWidth);
+        let fontSize = getResponsiveFontSize(fontRatio, contentHeight, contentWidth, this.labelMaxFontSize);
         canvas.textAlign = 'center';
         canvas.textBaseline = 'middle';
         canvas.font = `${fontSize}px ${fontFamily}`;
@@ -823,7 +829,7 @@ let Heatmap = class Heatmap extends ResponsiveElement {
             return;
         }
         const labelFontStyle = this.canvasContext.font;
-        const margin = this.labelHidden ? 0 : this.calculateHeaderMargin(cell.height);
+        const margin = this.labelHidden ? 0 : this.calculateHeaderMargin(cell.height, cell.width);
         this.canvasContext.font = 'bold ' + labelFontStyle;
         this.canvasContext.fillStyle = cell.customForegroundColor || cell.foregroundColor;
         this.canvasContext.fillText(cell.header || '', cell.x + cell.width / 2, cell.y + 1 + cell.height / 2 - margin);
@@ -1112,6 +1118,9 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], Heatmap.prototype, "saturation", void 0);
+__decorate([
+    property({ type: Number, attribute: 'label-max-font-size' })
+], Heatmap.prototype, "labelMaxFontSize", void 0);
 __decorate([
     property({ attribute: false })
 ], Heatmap.prototype, "tooltipCallback", void 0);

package/lib/version.js

@@ -1 +1 @@
-export const VERSION = '7.10.5';
+export const VERSION = '7.10.7';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refinitiv-ui/elements",
-  "version": "7.10.5",
+  "version": "7.10.7",
   "description": "Element Framework Elements",
   "author": "LSEG",
   "license": "Apache-2.0",
@@ -344,7 +344,7 @@
     "@lit-labs/context": "^0.3.1",
     "@refinitiv-ui/halo-theme": "^7.3.5",
     "@refinitiv-ui/solar-theme": "^7.2.6",
-    "chart.js": "^4.3.0",
+    "chart.js": "^4.4.2",
     "chartjs-adapter-date-fns": "^3.0.0",
     "d3-interpolate": "^3.0.1",
     "date-fns": "^2.29.3",
@@ -373,5 +373,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6820b961ecc0ad1517ef94807df775eceb4f91db"
+  "gitHead": "95774e711a8ad9898e4cb12aa97e050622d593ac"
 }