@refinitiv-ui/elements 7.0.0 → 7.0.2

package/lib/calendar/index.js

@@ -1,20 +1,20 @@
 import { __decorate } from "tslib";
-import { ControlElement, html, css, nothing, WarningNotice } from '@refinitiv-ui/core';
+import { ControlElement, WarningNotice, css, html, nothing } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { state } from '@refinitiv-ui/core/decorators/state.js';
 import { cache } from '@refinitiv-ui/core/directives/cache.js';
 import { guard } from '@refinitiv-ui/core/directives/guard.js';
-import { ref, createRef } from '@refinitiv-ui/core/directives/ref.js';
+import { createRef, ref } from '@refinitiv-ui/core/directives/ref.js';
+import '@refinitiv-ui/phrasebook/locale/en/calendar.js';
+import { TranslatePropertyKey, getLocale, translate } from '@refinitiv-ui/translate';
+import { DateFormat, addMonths, format, isAfter, isBefore, isSameDay, isSameMonth, isSameYear, isThisMonth, isThisYear, isToday, isValidDate, isWeekend, parse, subMonths, toDateSegment, utcFormat, utcParse } from '@refinitiv-ui/utils/date.js';
+import { down, first, last, left, right, up } from '@refinitiv-ui/utils/navigation.js';
+import '../button/index.js';
 import { VERSION } from '../version.js';
-import { DateFormat, format, utcFormat, utcParse, isValidDate, isWeekend, isAfter, isBefore, addMonths, subMonths, isToday, isThisMonth, isThisYear, isSameDay, isSameMonth, isSameYear, toDateSegment, parse } from '@refinitiv-ui/utils/date.js';
-import { left, right, up, down, first, last } from '@refinitiv-ui/utils/navigation.js';
-import { monthInfo, weekdaysNames, monthsNames, ViewFormatTranslateParams } from './utils.js';
-import { translate, getLocale, TranslatePropertyKey } from '@refinitiv-ui/translate';
-import { RenderView, CalendarLocaleScope, FIRST_DAY_OF_WEEK, YEARS_PER_YEAR_VIEW, DAY_VIEW, YEAR_VIEW, MONTH_VIEW } from './constants.js';
+import { CalendarLocaleScope, DAY_VIEW, FIRST_DAY_OF_WEEK, MONTH_VIEW, RenderView, YEARS_PER_YEAR_VIEW, YEAR_VIEW } from './constants.js';
 import './locales.js';
-import '../button/index.js';
-import '@refinitiv-ui/phrasebook/locale/en/calendar.js';
+import { ViewFormatTranslateParams, monthInfo, monthsNames, weekdaysNames } from './utils.js';
 /**
  * Standard calendar element
  *
@@ -40,28 +40,28 @@ let Calendar = class Calendar extends ControlElement {
         this._min = '';
         this._max = '';
         /**
-        * Only enable weekdays
-        */
+         * Only enable weekdays
+         */
         this.weekdaysOnly = false;
         /**
-        * Only enable weekends
-        */
+         * Only enable weekends
+         */
         this.weekendsOnly = false;
         /**
-        * Custom filter, used for enabling/disabling certain dates
-        * @type {CalendarFilter | null}
-        */
+         * Custom filter, used for enabling/disabling certain dates
+         * @type {CalendarFilter | null}
+         */
         this.filter = null;
         this._view = '';
         this.localFirstDayOfWeek = FIRST_DAY_OF_WEEK; // used from locales. 0 stands for Sunday
         this._firstDayOfWeek = null; // used from setter
         /**
-        * Set to switch to range select mode
-        */
+         * Set to switch to range select mode
+         */
         this.range = false;
         /**
-        * Set to switch to multiple select mode
-        */
+         * Set to switch to multiple select mode
+         */
         this.multiple = false;
         this._values = [];
         /**
@@ -104,19 +104,20 @@ let Calendar = class Calendar extends ControlElement {
       :host {
         display: inline-block;
       }
-      [part~=navigation], [part~=navigation] section {
+      [part~='navigation'],
+      [part~='navigation'] section {
         display: flex;
         flex-flow: row nowrap;
       }
-      [part~=navigation] {
+      [part~='navigation'] {
         justify-content: space-between;
       }
-      [part~=navigation] > div {
+      [part~='navigation'] > div {
         display: flex;
         flex: 1;
         justify-content: center;
       }
-      [part~=cell-content] {
+      [part~='cell-content'] {
         position: absolute;
         top: 0;
         bottom: 0;
@@ -126,44 +127,45 @@ let Calendar = class Calendar extends ControlElement {
         align-items: center;
         justify-content: center;
       }
-      [part=navigation] [part] {
+      [part='navigation'] [part] {
         flex: none;
       }
-      [part=table] {
+      [part='table'] {
         width: 100%;
       }
-      [part~=row] {
+      [part~='row'] {
         display: flex;
         width: 100%;
       }
-      [part~=cell] {
+      [part~='cell'] {
         position: relative;
       }
-      [part~=cell][part~=year] {
+      [part~='cell'][part~='year'] {
         width: calc(100% / ${YEAR_VIEW.columnCount});
         padding-top: calc(100% / ${YEAR_VIEW.columnCount});
       }
-      [part~=cell][part~=month] {
+      [part~='cell'][part~='month'] {
         width: calc(100% / ${MONTH_VIEW.columnCount});
         padding-top: calc(100% / ${MONTH_VIEW.columnCount});
       }
-      [part~=cell][part~=day], [part~=cell][part~=day-name] {
+      [part~='cell'][part~='day'],
+      [part~='cell'][part~='day-name'] {
         width: calc(100% / ${DAY_VIEW.columnCount});
         padding-top: calc(100% / ${DAY_VIEW.columnCount});
       }
-      [part~=cell-content]:not([tabindex]) {
+      [part~='cell-content']:not([tabindex]) {
         pointer-events: none;
       }
-      [part~=selectable] {
+      [part~='selectable'] {
         cursor: pointer;
       }
     `;
     }
     /**
-    * Set minimum date
-    * @param min min date
-    * @default -
-    */
+     * Set minimum date
+     * @param min min date
+     * @default -
+     */
     set min(min) {
         const oldMin = this._min;
         if (!this.isValidValue(min)) {
@@ -179,10 +181,10 @@ let Calendar = class Calendar extends ControlElement {
         return this._min;
     }
     /**
-    * Set maximum date
-    * @param max max date
-    * @default -
-    */
+     * Set maximum date
+     * @param max max date
+     * @default -
+     */
     set max(max) {
         const oldMax = this._max;
         if (!this.isValidValue(max)) {
@@ -198,10 +200,10 @@ let Calendar = class Calendar extends ControlElement {
         return this._max;
     }
     /**
-    * Current calendar view date
-    * @param view view date
-    * @default -
-    */
+     * Current calendar view date
+     * @param view view date
+     * @default -
+     */
     set view(view) {
         if (view && !isValidDate(view, DateFormat.yyyyMM)) {
             this.warnInvalidView(view);
@@ -216,7 +218,10 @@ let Calendar = class Calendar extends ControlElement {
     }
     get view() {
         /* as soon as user interaction has happened, always rely on view */
-        return this._view || (this.value ? utcFormat(toDateSegment(this.value), DateFormat.yyyyMM) : format(new Date(), DateFormat.yyyyMM));
+        return (this._view ||
+            (this.value
+                ? utcFormat(toDateSegment(this.value), DateFormat.yyyyMM)
+                : format(new Date(), DateFormat.yyyyMM)));
     }
     /**
      * Set the first day of the week.
@@ -237,10 +242,10 @@ let Calendar = class Calendar extends ControlElement {
         return this._firstDayOfWeek === null ? this.localFirstDayOfWeek : this._firstDayOfWeek;
     }
     /**
-    * Current date time value
-    * @param value Calendar value
-    * @default -
-    */
+     * Current date time value
+     * @param value Calendar value
+     * @default -
+     */
     set value(value) {
         this.values = [value];
     }
@@ -340,7 +345,7 @@ let Calendar = class Calendar extends ControlElement {
      */
     async performUpdate() {
         const localFirstDayOfWeek = Number(await this.dateTPromise('FIRST_DAY_OF_WEEK'));
-        this.localFirstDayOfWeek = isNaN(localFirstDayOfWeek) ? FIRST_DAY_OF_WEEK : (localFirstDayOfWeek % 7);
+        this.localFirstDayOfWeek = isNaN(localFirstDayOfWeek) ? FIRST_DAY_OF_WEEK : localFirstDayOfWeek % 7;
         void super.performUpdate();
     }
     /**
@@ -353,15 +358,18 @@ let Calendar = class Calendar extends ControlElement {
         super.willUpdate(changedProperties);
         // This code is here to ensure that focus is not lost
         // while navigating through the render views using keyboard
-        if (this.focused && changedProperties.has('renderView') && this.viewBtnRef.value && this.activeElement !== this.viewBtnRef.value) {
+        if (this.focused &&
+            changedProperties.has('renderView') &&
+            this.viewBtnRef.value &&
+            this.activeElement !== this.viewBtnRef.value) {
             this.viewBtnRef.value.focus();
         }
     }
     /**
-    * Updates the element
-    * @param changedProperties Properties that has changed
-    * @returns {void}
-    */
+     * Updates the element
+     * @param changedProperties Properties that has changed
+     * @returns {void}
+     */
     update(changedProperties) {
         if (!this.localMonthsNames || changedProperties.has(TranslatePropertyKey)) {
             const locale = getLocale(this);
@@ -399,7 +407,7 @@ let Calendar = class Calendar extends ControlElement {
      */
     firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties);
-        this.renderRoot.addEventListener('keydown', event => this.onKeyDown(event));
+        this.renderRoot.addEventListener('keydown', (event) => this.onKeyDown(event));
     }
     /**
      * Show invalid view message
@@ -418,10 +426,10 @@ let Calendar = class Calendar extends ControlElement {
         new WarningNotice(`The specified value "${value}" does not conform to the required format. The format is "yyyy-MM-dd".`).once();
     }
     /**
-    * Validate that the value confirms the control type
-    * @param value Value to check
-    * @returns false if value is invalid
-    */
+     * Validate that the value confirms the control type
+     * @param value Value to check
+     * @returns false if value is invalid
+     */
     isValidValue(value) {
         return value === '' || isValidDate(value);
     }
@@ -433,7 +441,7 @@ let Calendar = class Calendar extends ControlElement {
      */
     filterAndWarnInvalidValues(values) {
         const filtered = [];
-        values.forEach(value => {
+        values.forEach((value) => {
             if (this.isValidValue(value)) {
                 value && filtered.push(value);
             }
@@ -449,11 +457,11 @@ let Calendar = class Calendar extends ControlElement {
      * @returns true if filter needs to be constructed
      */
     shouldConstructFilters(changedProperties) {
-        return changedProperties.has('min')
-            || changedProperties.has('max')
-            || changedProperties.has('weekdaysOnly')
-            || changedProperties.has('weekendsOnly')
-            || changedProperties.has('filter');
+        return (changedProperties.has('min') ||
+            changedProperties.has('max') ||
+            changedProperties.has('weekdaysOnly') ||
+            changedProperties.has('weekendsOnly') ||
+            changedProperties.has('filter'));
     }
     /**
      * Construct and store a collection of filters
@@ -462,13 +470,13 @@ let Calendar = class Calendar extends ControlElement {
      */
     constructFilters() {
         const filters = [];
-        this.min && filters.push(date => isSameDay(date, this.min) || isAfter(date, this.min));
-        this.max && filters.push(date => isSameDay(date, this.max) || isBefore(date, this.max));
+        this.min && filters.push((date) => isSameDay(date, this.min) || isAfter(date, this.min));
+        this.max && filters.push((date) => isSameDay(date, this.max) || isBefore(date, this.max));
         if (this.weekdaysOnly) {
-            filters.push(date => !isWeekend(date));
+            filters.push((date) => !isWeekend(date));
         }
         if (this.weekendsOnly) {
-            filters.push(date => isWeekend(date));
+            filters.push((date) => isWeekend(date));
         }
         if (this.filter) {
             filters.push(this.filter);
@@ -537,7 +545,7 @@ let Calendar = class Calendar extends ControlElement {
      * @returns {void}
      */
     setNavigationMap(rows) {
-        this.navigationGrid = rows.map(row => row.map(cell => cell.value && !cell.disabled ? 1 : 0));
+        this.navigationGrid = rows.map((row) => row.map((cell) => (cell.value && !cell.disabled ? 1 : 0)));
     }
     /**
      * Run when next button is tapped.
@@ -626,14 +634,16 @@ 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) { /* YEAR -> MONTH */
+        if (this.renderView === RenderView.YEAR) {
+            /* YEAR -> MONTH */
             viewSegment.year = cellSegment.year;
             if (this.notifyViewChange(viewSegment)) {
                 this.renderView = RenderView.MONTH;
             }
             return;
         }
-        if (this.renderView === RenderView.MONTH) { /* MONTH -> DAY */
+        if (this.renderView === RenderView.MONTH) {
+            /* MONTH -> DAY */
             viewSegment.year = cellSegment.year;
             viewSegment.month = cellSegment.month;
             if (this.notifyViewChange(viewSegment)) {
@@ -779,7 +789,8 @@ let Calendar = class Calendar extends ControlElement {
             if (!this.values.length) {
                 values = [value];
             }
-            else if (this.values.length === 1) { /* from is populated */
+            else if (this.values.length === 1) {
+                /* from is populated */
                 const from = this.values[0];
                 const to = value;
                 if (isAfter(to, from) || isSameDay(to, from)) {
@@ -848,7 +859,9 @@ let Calendar = class Calendar extends ControlElement {
                 const day = segment.day;
                 const fromYear = Math.floor(segment.year / YEARS_PER_YEAR_VIEW) * YEARS_PER_YEAR_VIEW;
                 const toYear = fromYear + YEARS_PER_YEAR_VIEW - 1;
-                return html `${this.viewFormattedDate({ year: fromYear, month, day })} - ${this.viewFormattedDate({ year: toYear, month, day })}`;
+                const fromView = this.viewFormattedDate({ year: fromYear, month, day });
+                const toView = this.viewFormattedDate({ year: toYear, month, day });
+                return html `${fromView} - ${toView}`;
             case RenderView.DAY:
             default:
                 return this.viewFormattedDate(segment, true);
@@ -945,7 +958,7 @@ let Calendar = class Calendar extends ControlElement {
         const totalCount = MONTH_VIEW.totalCount;
         const monthsNames = this.localMonthsNames;
         const before = (totalCount - monthCount) / 2;
-        const startIdx = monthCount - before % monthCount;
+        const startIdx = monthCount - (before % monthCount);
         const after = before + monthCount;
         const months = [];
         const rows = [];
@@ -1051,8 +1064,7 @@ let Calendar = class Calendar extends ControlElement {
         this.setActiveCell(rows);
         this.setNavigationMap(rows);
         return html `
-      ${guard([this.firstDayOfWeek, this.lang], () => this.renderWeekdayNames)}
-      ${this.renderRows(rows)}
+      ${guard([this.firstDayOfWeek, this.lang], () => this.renderWeekdayNames)} ${this.renderRows(rows)}
     `;
     }
     /**
@@ -1060,14 +1072,16 @@ let Calendar = class Calendar extends ControlElement {
      */
     get renderWeekdayNames() {
         const firstDayOfWeek = this.firstDayOfWeek;
-        const weekdaysNames = this.localWeekdaysNames.slice(firstDayOfWeek).concat(this.localWeekdaysNames.slice(0, firstDayOfWeek));
-        return html `
-      <div role="row"
-           part="row day-name-row">${weekdaysNames.map(day => html `
-        <div scope="col" role="columnheader" part="cell day-name" abbr="${day.long}">
-          <div part="cell-content">${day.narrow}</div>
-        </div>
-      `)}</div>`;
+        const weekdaysNames = this.localWeekdaysNames
+            .slice(firstDayOfWeek)
+            .concat(this.localWeekdaysNames.slice(0, firstDayOfWeek));
+        return html ` <div role="row" part="row day-name-row">
+      ${weekdaysNames.map((day) => html `
+          <div scope="col" role="columnheader" part="cell day-name" abbr="${day.long}">
+            <div part="cell-content">${day.narrow}</div>
+          </div>
+        `)}
+    </div>`;
     }
     /**
      * Render a view based on the current render view
@@ -1127,17 +1141,24 @@ let Calendar = class Calendar extends ControlElement {
       ?selected=${cell.selected}
       ?range=${cell.range}
       ?range-from=${cell.rangeFrom}
-      ?range-to=${cell.rangeTo}>
-      <div role="${cell.value ? 'button' : nothing}"
-             tabindex="${isSelectable ? String(isActive) : nothing}"
-             aria-label="${isSelectable ? this.t(this.getCellLabelKey(cell), {
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            value: parse(cell.value),
-            view: this.renderView
-        }) : nothing}"
-             part="cell-content${isSelection ? ' selection' : ''}${isSelectable ? ' selectable' : ''}"
-             .value=${cell.value}
-             .index=${cell.index}>${cell.text}</div>
+      ?range-to=${cell.rangeTo}
+    >
+      <div
+        role="${cell.value ? 'button' : nothing}"
+        tabindex="${isSelectable ? String(isActive) : nothing}"
+        aria-label="${isSelectable
+            ? this.t(this.getCellLabelKey(cell), {
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                value: parse(cell.value),
+                view: this.renderView
+            })
+            : nothing}"
+        part="cell-content${isSelection ? ' selection' : ''}${isSelectable ? ' selectable' : ''}"
+        .value=${cell.value}
+        .index=${cell.index}
+      >
+        ${cell.text}
+      </div>
     </div>`;
     }
     /**
@@ -1146,7 +1167,7 @@ let Calendar = class Calendar extends ControlElement {
      * @returns template result
      */
     renderRows(rows) {
-        return rows.map(row => html `<div role="row" part="row">${row.map(cell => this.renderCell(cell))}</div>`);
+        return rows.map((row) => html `<div role="row" part="row">${row.map((cell) => this.renderCell(cell))}</div>`);
     }
     /**
      * Render button navigation template
@@ -1171,24 +1192,28 @@ let Calendar = class Calendar extends ControlElement {
             // no default
         }
         return html `<div part="navigation">
-        <ef-button
-          part="btn-prev"
-          aria-label="${prevBtnAriaLabel}"
-          icon="left"
-          @tap=${this.onPreviousTap}></ef-button>
-        <ef-button
-          ${ref(this.viewBtnRef)}
-          aria-description="${viewBtnAriaLabel}"
-          part="btn-view"
-          textpos="before"
-          .icon="${this.renderView === RenderView.DAY ? 'down' : 'up'}"
-          @tap="${this.onRenderViewTap}">${this.formattedViewRender}</ef-button>
-        <ef-button
-          part="btn-next"
-          aria-label="${nextBtnAriaLabel}"
-          icon="right"
-          @tap=${this.onNextTap}></ef-button>
-      </div>`;
+      <ef-button
+        part="btn-prev"
+        aria-label="${prevBtnAriaLabel}"
+        icon="left"
+        @tap=${this.onPreviousTap}
+      ></ef-button>
+      <ef-button
+        ${ref(this.viewBtnRef)}
+        aria-description="${viewBtnAriaLabel}"
+        part="btn-view"
+        textpos="before"
+        .icon="${this.renderView === RenderView.DAY ? 'down' : 'up'}"
+        @tap="${this.onRenderViewTap}"
+        >${this.formattedViewRender}</ef-button
+      >
+      <ef-button
+        part="btn-next"
+        aria-label="${nextBtnAriaLabel}"
+        icon="right"
+        @tap=${this.onNextTap}
+      ></ef-button>
+    </div>`;
     }
     /**
      * A template used to notify currently selected value for screen readers
@@ -1204,9 +1229,13 @@ let Calendar = class Calendar extends ControlElement {
       aria-live="polite"
       aria-label="${this.value
             ? this.range
-                ? this.t('SELECTED_RANGE', { from: parse(this.values[0]), to: this.values[1] ? parse(this.values[1]) : null })
+                ? this.t('SELECTED_RANGE', {
+                    from: parse(this.values[0]),
+                    to: this.values[1] ? parse(this.values[1]) : null
+                })
                 : this.t('SELECTED_DATE', { value: parse(this.value), count: this.values.length })
-            : this.t('SELECTED_NONE', { multiple: this.multiple, range: this.range })}"></div>`;
+            : this.t('SELECTED_NONE', { multiple: this.multiple, range: this.range })}"
+    ></div>`;
     }
     /**
      * A `TemplateResult` that will be used
@@ -1217,10 +1246,14 @@ let Calendar = class Calendar extends ControlElement {
         return html `
       ${guard([this.values, this.lang, this.range, this.multiple, this.announceValues], () => this.selectionTemplate)}
       ${guard([this.view, this.renderView, this.lang], () => this.buttonNavigationTemplate)}
-      <div role="grid"
-           aria-multiselectable="${this.range || this.multiple}"
-           part="table"
-           @tap=${this.onTableTap}>${this.viewRender}</div>
+      <div
+        role="grid"
+        aria-multiselectable="${this.range || this.multiple}"
+        part="table"
+        @tap=${this.onTableTap}
+      >
+        ${this.viewRender}
+      </div>
       <div part="footer"><slot name="footer"></slot></div>
     `;
     }

package/lib/calendar/utils.js

@@ -1,5 +1,5 @@
-import { toDateSegment, getDaysInMonth, utcParse } from '@refinitiv-ui/utils/date.js';
 import { DEFAULT_LOCALE, resolveLocale } from '@refinitiv-ui/i18n';
+import { getDaysInMonth, toDateSegment, utcParse } from '@refinitiv-ui/utils/date.js';
 import { CalendarLocaleScope } from './constants.js';
 /**
  * Get information about number of days, month number and year from date object

package/lib/canvas/index.d.ts

@@ -1,5 +1,5 @@
 import { JSXInterface } from '../jsx';
-import { ResponsiveElement, TemplateResult, CSSResultGroup, ElementSize } from '@refinitiv-ui/core';
+import { CSSResultGroup, ElementSize, ResponsiveElement, TemplateResult } from '@refinitiv-ui/core';
 /**
  * A Component uses to draw graphics on a web page,
  * it works similarly to the normal HTML5 Canvas element.

package/lib/canvas/index.js

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { ResponsiveElement, html, css } from '@refinitiv-ui/core';
+import { ResponsiveElement, css, html } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { VERSION } from '../version.js';
@@ -157,9 +157,7 @@ let Canvas = class Canvas extends ResponsiveElement {
      * @return Render template
      */
     render() {
-        return html `
-      <canvas id="canvas"></canvas>
-    `;
+        return html ` <canvas id="canvas"></canvas> `;
     }
 };
 __decorate([

package/lib/card/helpers/types.d.ts

@@ -1,8 +1,8 @@
 import type { OverlayMenuData } from '../../overlay-menu';
 export type CardConfig = {
     /**
-    * Configuration for side menu
-    */
+     * Configuration for side menu
+     */
     menu?: {
         /**
          * Menu data object as defined in `overlay-menu`

package/lib/card/index.d.ts

@@ -1,11 +1,11 @@
 import { JSXInterface } from '../jsx';
-import { BasicElement, TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
-import type { CardConfig } from './helpers/types';
-import '../label/index.js';
-import '../button/index.js';
-import '../overlay-menu/index.js';
+import { BasicElement, CSSResultGroup, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
 import '@refinitiv-ui/phrasebook/locale/en/card.js';
 import { Translate } from '@refinitiv-ui/translate';
+import '../button/index.js';
+import '../label/index.js';
+import '../overlay-menu/index.js';
+import type { CardConfig } from './helpers/types';
 export type { CardConfig };
 /**
  * A card frame component.