@refinitiv-ui/elements 6.12.0 → 6.13.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.13.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@6.12.0...@refinitiv-ui/elements@6.13.0) (2023-09-25)
+
+### Bug Fixes
+
+- **interactive-chart:** legend not update when add new seriesList ([#959](https://github.com/Refinitiv/refinitiv-ui/issues/959)) ([215a6ba](https://github.com/Refinitiv/refinitiv-ui/commit/215a6badbd24dae46d631150b1bdb945e633c080))
+- **tree-select:** show invalid values when click on cancel button on … ([#965](https://github.com/Refinitiv/refinitiv-ui/issues/965)) ([a3abd4f](https://github.com/Refinitiv/refinitiv-ui/commit/a3abd4f543dd0662129c9656a8bd2be40c954bd9))
+
+### Features
+
+- **calendar:** introduce before-cell-render event ([#950](https://github.com/Refinitiv/refinitiv-ui/issues/950)) ([7889413](https://github.com/Refinitiv/refinitiv-ui/commit/7889413d4dbf690fab5c3a3fd8c526ba25fb1dbe))
+
 # [6.12.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@6.11.0...@refinitiv-ui/elements@6.12.0) (2023-09-18)
 
 ### Bug Fixes

package/lib/calendar/constants.d.ts

@@ -1,4 +1,4 @@
-export declare enum RenderView {
+export declare enum CalendarRenderView {
     DAY = "day",
     MONTH = "month",
     YEAR = "year"

package/lib/calendar/constants.js

@@ -1,10 +1,11 @@
 import { uuid } from '@refinitiv-ui/utils/uuid.js';
-export var RenderView;
-(function (RenderView) {
-    RenderView["DAY"] = "day";
-    RenderView["MONTH"] = "month";
-    RenderView["YEAR"] = "year";
-})(RenderView || (RenderView = {}));
+// public API
+export var CalendarRenderView;
+(function (CalendarRenderView) {
+    CalendarRenderView["DAY"] = "day";
+    CalendarRenderView["MONTH"] = "month";
+    CalendarRenderView["YEAR"] = "year";
+})(CalendarRenderView || (CalendarRenderView = {}));
 export const FIRST_DAY_OF_WEEK = 0; // 0 for Sunday
 export const YEARS_PER_YEAR_VIEW = 16; /* must be a square number */
 export const DAY_VIEW = {

package/lib/calendar/custom-elements.json

@@ -181,6 +181,10 @@
         }
       ],
       "events": [
+        {
+          "name": "before-cell-render",
+          "description": "Fired before calendar renders each cell along with `cell` model."
+        },
         {
           "name": "value-changed",
           "description": "Fired when the user commits a date change. The event is not triggered if `value` is changed programmatically."

package/lib/calendar/custom-elements.md

@@ -23,10 +23,11 @@ Standard calendar element
 
 ## Events
 
-| Event           | Description                                      |
-|-----------------|--------------------------------------------------|
-| `value-changed` | Fired when the user commits a date change. The event is not triggered if `value` is changed programmatically. |
-| `view-changed`  | Fired when the user changes a view of calendar e.g. changed to next month page. The event is not triggered if `view` property is changed programmatically. |
+| Event                | Description                                      |
+|----------------------|--------------------------------------------------|
+| `before-cell-render` | Fired before calendar renders each cell along with `cell` model. |
+| `value-changed`      | Fired when the user commits a date change. The event is not triggered if `value` is changed programmatically. |
+| `view-changed`       | Fired when the user changes a view of calendar e.g. changed to next month page. The event is not triggered if `view` property is changed programmatically. |
 
 ## Slots
 

package/lib/calendar/index.d.ts

@@ -3,12 +3,16 @@ import { CSSResultGroup, ControlElement, MultiValue, PropertyValues, TemplateRes
 import '@refinitiv-ui/phrasebook/locale/en/calendar.js';
 import { TranslateDirective, TranslatePromise } from '@refinitiv-ui/translate';
 import '../button/index.js';
+import { CalendarRenderView } from './constants.js';
 import './locales.js';
-import type { CalendarFilter } from './types';
-export { CalendarFilter };
+import type { BeforeCellRenderEvent, CalendarFilter } from './types';
+export { CalendarRenderView };
+export type { CalendarCell } from './types';
+export type { CalendarFilter, BeforeCellRenderEvent };
 /**
  * Standard calendar element
  *
+ * @fires before-cell-render - Fired before calendar renders each cell along with `cell` model.
  * @fires value-changed - Fired when the user commits a date change. The event is not triggered if `value` is changed programmatically.
  * @fires view-changed - Fired when the user changes a view of calendar e.g. changed to next month page. The event is not triggered if `view` property is changed programmatically.
  *
@@ -381,9 +385,15 @@ export declare class Calendar extends ControlElement implements MultiValue {
      * @returns key Translate label key
      */
     private getCellLabelKey;
+    /**
+     * fire 'before-cell-render' event
+     * @param cell Cell
+     * @returns {void}
+     */
+    private dispatchBeforeCellRender;
     /**
      * Render cell template. Cell can be a day, month or year
-     * @param cell Cell object
+     * @param cell Cell
      * @returns template result
      */
     private renderCell;

package/lib/calendar/index.js

@@ -13,12 +13,14 @@ import { DateFormat, addMonths, format, isAfter, isBefore, isSameDay, isSameMont
 import { down, first, last, left, right, up } from '@refinitiv-ui/utils/navigation.js';
 import '../button/index.js';
 import { VERSION } from '../version.js';
-import { CalendarLocaleScope, DAY_VIEW, FIRST_DAY_OF_WEEK, MONTH_VIEW, RenderView, YEARS_PER_YEAR_VIEW, YEAR_VIEW } from './constants.js';
+import { CalendarLocaleScope, CalendarRenderView, DAY_VIEW, FIRST_DAY_OF_WEEK, MONTH_VIEW, YEARS_PER_YEAR_VIEW, YEAR_VIEW } from './constants.js';
 import './locales.js';
-import { ViewFormatTranslateParams, formatLocaleDate, monthInfo, monthsNames, weekdaysNames } from './utils.js';
+import { ViewFormatTranslateParams, formatLocaleDate, monthInfo, monthsNames, toCalendarCell, weekdaysNames } from './utils.js';
+export { CalendarRenderView };
 /**
  * Standard calendar element
  *
+ * @fires before-cell-render - Fired before calendar renders each cell along with `cell` model.
  * @fires value-changed - Fired when the user commits a date change. The event is not triggered if `value` is changed programmatically.
  * @fires view-changed - Fired when the user changes a view of calendar e.g. changed to next month page. The event is not triggered if `view` property is changed programmatically.
  *
@@ -73,7 +75,7 @@ let Calendar = class Calendar extends ControlElement {
         /**
          * Used for internal navigation between render views
          */
-        this._renderView = RenderView.DAY;
+        this._renderView = CalendarRenderView.DAY;
         /**
          * Used for keyboard navigation when trying
          * to restore focus on re-render and control navigation
@@ -579,7 +581,8 @@ let Calendar = class Calendar extends ControlElement {
      */
     onRenderViewTap(event) {
         if (!event.defaultPrevented) {
-            this.renderView = this.renderView === RenderView.DAY ? RenderView.YEAR : RenderView.DAY;
+            this.renderView =
+                this.renderView === CalendarRenderView.DAY ? CalendarRenderView.YEAR : CalendarRenderView.DAY;
         }
     }
     /**
@@ -594,8 +597,8 @@ let Calendar = class Calendar extends ControlElement {
         switch (event.key) {
             case 'Esc':
             case 'Escape':
-                if (this.renderView === RenderView.YEAR || this.renderView === RenderView.MONTH) {
-                    this.renderView = RenderView.DAY;
+                if (this.renderView === CalendarRenderView.YEAR || this.renderView === CalendarRenderView.MONTH) {
+                    this.renderView = CalendarRenderView.DAY;
                     break;
                 }
                 return;
@@ -662,20 +665,20 @@ let Calendar = class Calendar extends ControlElement {
         this.activeCellIndex = cell.index;
         const cellSegment = toDateSegment(cell.value);
         const viewSegment = toDateSegment(this.view);
-        if (this.renderView === RenderView.YEAR) {
+        if (this.renderView === CalendarRenderView.YEAR) {
             /* YEAR -> MONTH */
             viewSegment.year = cellSegment.year;
             if (this.notifyViewChange(viewSegment)) {
-                this.renderView = RenderView.MONTH;
+                this.renderView = CalendarRenderView.MONTH;
             }
             return;
         }
-        if (this.renderView === RenderView.MONTH) {
+        if (this.renderView === CalendarRenderView.MONTH) {
             /* MONTH -> DAY */
             viewSegment.year = cellSegment.year;
             viewSegment.month = cellSegment.month;
             if (this.notifyViewChange(viewSegment)) {
-                this.renderView = RenderView.DAY;
+                this.renderView = CalendarRenderView.DAY;
             }
             return;
         }
@@ -759,13 +762,13 @@ let Calendar = class Calendar extends ControlElement {
     toNextView() {
         let viewSegment = toDateSegment(this.view);
         switch (this.renderView) {
-            case RenderView.DAY:
+            case CalendarRenderView.DAY:
                 viewSegment = toDateSegment(addMonths(this.view, 1));
                 break;
-            case RenderView.MONTH:
+            case CalendarRenderView.MONTH:
                 viewSegment.year += 1;
                 break;
-            case RenderView.YEAR:
+            case CalendarRenderView.YEAR:
                 viewSegment.year += YEARS_PER_YEAR_VIEW;
                 break;
             // no default
@@ -779,13 +782,13 @@ let Calendar = class Calendar extends ControlElement {
     toPreviousView() {
         let viewSegment = toDateSegment(this.view);
         switch (this.renderView) {
-            case RenderView.DAY:
+            case CalendarRenderView.DAY:
                 viewSegment = toDateSegment(subMonths(this.view, 1));
                 break;
-            case RenderView.MONTH:
+            case CalendarRenderView.MONTH:
                 viewSegment.year -= 1;
                 break;
-            case RenderView.YEAR:
+            case CalendarRenderView.YEAR:
                 viewSegment.year -= YEARS_PER_YEAR_VIEW;
                 break;
             // no default
@@ -886,9 +889,9 @@ let Calendar = class Calendar extends ControlElement {
     get formattedViewRender() {
         const segment = toDateSegment(this.view);
         switch (this.renderView) {
-            case RenderView.MONTH:
+            case CalendarRenderView.MONTH:
                 return this.viewFormattedDate(segment);
-            case RenderView.YEAR:
+            case CalendarRenderView.YEAR:
                 const month = segment.month;
                 const day = segment.day;
                 const fromYear = Math.floor(segment.year / YEARS_PER_YEAR_VIEW) * YEARS_PER_YEAR_VIEW;
@@ -896,7 +899,7 @@ let Calendar = class Calendar extends ControlElement {
                 const fromView = this.viewFormattedDate({ year: fromYear, month, day });
                 const toView = this.viewFormattedDate({ year: toYear, month, day });
                 return html `${fromView} - ${toView}`;
-            case RenderView.DAY:
+            case CalendarRenderView.DAY:
             default:
                 return this.viewFormattedDate(segment, true);
         }
@@ -950,7 +953,7 @@ let Calendar = class Calendar extends ControlElement {
      * Get year view template
      */
     get yearView() {
-        const view = RenderView.YEAR;
+        const view = CalendarRenderView.YEAR;
         const currentYear = toDateSegment(this.view).year;
         const startIdx = Math.floor(currentYear / YEARS_PER_YEAR_VIEW) * YEARS_PER_YEAR_VIEW;
         const years = [];
@@ -985,7 +988,7 @@ let Calendar = class Calendar extends ControlElement {
      * Get month view template
      */
     get monthView() {
-        const view = RenderView.MONTH;
+        const view = CalendarRenderView.MONTH;
         const currentYear = toDateSegment(this.view).year;
         const columnCount = MONTH_VIEW.columnCount;
         const monthCount = 12;
@@ -1030,7 +1033,7 @@ let Calendar = class Calendar extends ControlElement {
      * Get day view template
      */
     get dayView() {
-        const view = RenderView.DAY;
+        const view = CalendarRenderView.DAY;
         const firstDayOfWeek = this.firstDayOfWeek;
         const padding = (7 + utcParse(this.view).getUTCDay() - firstDayOfWeek) % 7;
         const viewMonth = monthInfo(this.view);
@@ -1123,13 +1126,13 @@ let Calendar = class Calendar extends ControlElement {
     get viewRender() {
         let renderView;
         switch (this.renderView) {
-            case RenderView.MONTH:
+            case CalendarRenderView.MONTH:
                 renderView = this.monthView;
                 break;
-            case RenderView.YEAR:
+            case CalendarRenderView.YEAR:
                 renderView = this.yearView;
                 break;
-            case RenderView.DAY:
+            case CalendarRenderView.DAY:
             default:
                 renderView = this.dayView;
         }
@@ -1152,12 +1155,32 @@ let Calendar = class Calendar extends ControlElement {
         }
         return 'CELL_LABEL';
     }
+    /**
+     * fire 'before-cell-render' event
+     * @param cell Cell
+     * @returns {void}
+     */
+    dispatchBeforeCellRender(cell) {
+        const calendarCell = toCalendarCell(cell);
+        const event = new CustomEvent('before-cell-render', {
+            cancelable: false,
+            composed: true,
+            detail: {
+                cell: calendarCell
+            }
+        });
+        this.dispatchEvent(event);
+    }
     /**
      * Render cell template. Cell can be a day, month or year
-     * @param cell Cell object
+     * @param cell Cell
      * @returns template result
      */
     renderCell(cell) {
+        // there is no slot for cells with falsy value
+        if (cell.value) {
+            this.dispatchBeforeCellRender(cell);
+        }
         const isSelection = cell.value !== undefined;
         const isSelectable = isSelection && !cell.disabled;
         const isSelected = cell.selected ? 'true' : 'false';
@@ -1214,12 +1237,12 @@ let Calendar = class Calendar extends ControlElement {
         let nextBtnAriaLabel = this.t('NEXT_MONTH');
         let viewBtnAriaLabel = this.t('YEAR_SELECTOR');
         switch (this.renderView) {
-            case RenderView.YEAR:
+            case CalendarRenderView.YEAR:
                 prevBtnAriaLabel = this.t('PREVIOUS_DECADE');
                 nextBtnAriaLabel = this.t('NEXT_DECADE');
                 viewBtnAriaLabel = this.t('DATE_SELECTOR');
                 break;
-            case RenderView.MONTH:
+            case CalendarRenderView.MONTH:
                 prevBtnAriaLabel = this.t('PREVIOUS_YEAR');
                 nextBtnAriaLabel = this.t('NEXT_YEAR');
                 viewBtnAriaLabel = this.t('DATE_SELECTOR');
@@ -1239,7 +1262,7 @@ let Calendar = class Calendar extends ControlElement {
         aria-description="${viewBtnAriaLabel}"
         part="btn-view"
         textpos="before"
-        .icon="${this.renderView === RenderView.DAY ? 'down' : 'up'}"
+        .icon="${this.renderView === CalendarRenderView.DAY ? 'down' : 'up'}"
         @tap="${this.onRenderViewTap}"
         >${this.formattedViewRender}</ef-button
       >

package/lib/calendar/types.d.ts

@@ -1,5 +1,5 @@
 import { CellIndex } from '@refinitiv-ui/utils/navigation.js';
-import { RenderView } from './constants.js';
+import { CalendarRenderView } from './constants.js';
 export interface CellSelectionModel {
     selected?: boolean;
     range?: boolean;
@@ -9,7 +9,7 @@ export interface CellSelectionModel {
     lastDate?: boolean;
 }
 export interface Cell extends CellSelectionModel {
-    view: RenderView;
+    view: CalendarRenderView;
     text?: string;
     active?: boolean;
     value?: string;
@@ -30,3 +30,22 @@ export type WeekdayName = {
     narrow: string;
     long: string;
 };
+export type CalendarCell = {
+    active: boolean;
+    disabled: boolean;
+    firstDate: boolean;
+    idle: boolean;
+    index: CellIndex;
+    lastDate: boolean;
+    now: boolean;
+    range: boolean;
+    rangeFrom: boolean;
+    rangeTo: boolean;
+    selected: boolean;
+    text: string;
+    value: string;
+    view: CalendarRenderView;
+};
+export type BeforeCellRenderEvent = CustomEvent<{
+    cell: CalendarCell;
+}>;

package/lib/calendar/utils.d.ts

@@ -1,4 +1,5 @@
 import { TranslateParams } from '@refinitiv-ui/i18n';
+import { CalendarCell, Cell } from './types.js';
 export type MonthInfo = {
     days: number;
     month: number;
@@ -39,4 +40,11 @@ declare const formatLocaleDate: (date: Date, locale: string, includeMonth?: bool
  * Used to format views
  */
 declare const ViewFormatTranslateParams: TranslateParams;
-export { monthInfo, weekdaysNames, monthsNames, formatLocaleDate, ViewFormatTranslateParams };
+/**
+ * convert internal Cell to CellModel
+ * avoid introducing breaking changes to the API
+ * @param cell Cell
+ * @returns CellModel
+ */
+declare const toCalendarCell: (cell: Cell) => CalendarCell;
+export { monthInfo, weekdaysNames, monthsNames, formatLocaleDate, toCalendarCell, ViewFormatTranslateParams };

package/lib/calendar/utils.js

@@ -117,4 +117,27 @@ const ViewFormatTranslateParams = {
     },
     formats: DateMessageFormats
 };
-export { monthInfo, weekdaysNames, monthsNames, formatLocaleDate, ViewFormatTranslateParams };
+/**
+ * convert internal Cell to CellModel
+ * avoid introducing breaking changes to the API
+ * @param cell Cell
+ * @returns CellModel
+ */
+const toCalendarCell = (cell) => {
+    return {
+        ...cell,
+        active: cell.active || false,
+        disabled: cell.disabled || false,
+        firstDate: cell.firstDate || false,
+        idle: cell.idle || false,
+        lastDate: cell.lastDate || false,
+        now: cell.now || false,
+        range: cell.range || false,
+        rangeFrom: cell.rangeFrom || false,
+        rangeTo: cell.rangeTo || false,
+        selected: cell.selected || false,
+        text: cell.text ?? '',
+        value: cell.value ?? ''
+    };
+};
+export { monthInfo, weekdaysNames, monthsNames, formatLocaleDate, toCalendarCell, ViewFormatTranslateParams };

package/lib/interactive-chart/index.js

@@ -980,6 +980,7 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
                 const dataSet = series.data || [];
                 const latestData = dataSet[dataSet.length - 1];
                 if (latestData) {
+                    this.hasDataPoint = dataSet.length > 0;
                     const value = chartType === 'bar' || chartType === 'candlestick' ? latestData : latestData.value; // latestData
                     const priceColor = this.getColorInSeries(latestData, chartType, idx);
                     // Render legend by series type

package/lib/tree-select/index.js

@@ -539,9 +539,8 @@ let TreeSelect = class TreeSelect extends ComboBox {
      */
     onPopupClosed() {
         super.onPopupClosed();
-        this.updateMemo();
+        this.exitEditSelection(); // selection filter should be removed before reverting modified selection
         this.revertModifiedSelection();
-        this.exitEditSelection();
     }
     /**
      * Filter the internal items by query. Changes items' hidden state.

package/lib/version.js

@@ -1 +1 @@
-export const VERSION = '6.12.0';
+export const VERSION = '6.13.0';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refinitiv-ui/elements",
-  "version": "6.12.0",
+  "version": "6.13.0",
   "description": "Element Framework Elements",
   "author": "LSEG",
   "license": "Apache-2.0",
@@ -369,5 +369,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "14c76686cee42f70897fd6234691ac09fd318858"
+  "gitHead": "55ebf6e2b7bc388fe8cbc4fb48e16314af3942cb"
 }