@refinitiv-ui/elements 6.9.0-next.0 → 6.9.0

package/lib/calendar/index.js

@@ -1,21 +1,21 @@
 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 { VERSION } from '../version.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 { isIE } from '@refinitiv-ui/utils/browser.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, formatLocaleDate, 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 './locales.js';
+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 '@refinitiv-ui/phrasebook/locale/en/calendar.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 './locales.js';
+import { ViewFormatTranslateParams, formatLocaleDate, monthInfo, monthsNames, weekdaysNames } from './utils.js';
 /**
  * Standard calendar element
  *
@@ -41,28 +41,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 = [];
         /**
@@ -105,19 +105,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;
@@ -127,44 +128,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)) {
@@ -180,10 +182,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)) {
@@ -199,10 +201,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);
@@ -217,7 +219,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.
@@ -238,10 +243,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];
     }
@@ -341,7 +346,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();
     }
     /**
@@ -354,15 +359,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);
@@ -400,7 +408,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
@@ -419,10 +427,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);
     }
@@ -434,7 +442,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);
             }
@@ -450,11 +458,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
@@ -463,13 +471,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);
@@ -538,7 +546,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.
@@ -632,14 +640,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)) {
@@ -785,7 +795,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)) {
@@ -795,16 +806,12 @@ let Calendar = class Calendar extends ControlElement {
                     values = [value];
                 }
             }
-            else if (this.values.indexOf(value) === -1) {
-                values = [value];
-            }
             else {
-                // remove range if start/end index match
-                values = [];
+                values = [value];
             }
         }
         else {
-            values = this.value === value ? [] : [value];
+            values = [value];
         }
         this.notifyValuesChange(values);
     }
@@ -864,7 +871,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);
@@ -961,7 +970,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 = [];
@@ -1067,8 +1076,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)}
     `;
     }
     /**
@@ -1076,14 +1084,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
@@ -1128,10 +1138,12 @@ let Calendar = class Calendar extends ControlElement {
     renderCell(cell) {
         const isSelection = cell.value !== undefined;
         const isSelectable = isSelection && !cell.disabled;
+        const isSelected = cell.selected ? 'true' : 'false';
+        const isActive = cell.active ? 0 : -1;
         return html `<div
       role="gridcell"
       part="cell ${cell.view}"
-      aria-selected="${isSelectable ? (cell.selected ? 'true' : 'false') : nothing}"
+      aria-selected="${isSelectable ? isSelected : nothing}"
       ?active=${cell.active}
       ?disabled=${cell.disabled}
       ?idle=${cell.idle}
@@ -1141,17 +1153,25 @@ 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 ? (cell.active ? 0 : -1) : nothing}
-             aria-label="${isSelectable && !isIE ? 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 ? isActive : nothing}
+        aria-label="${isSelectable && !isIE
+            ? this.t(this.getCellLabelKey(cell), {
+                /* IE11 has significant performance hit, disable */
+                // 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>`;
     }
     /**
@@ -1160,7 +1180,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
@@ -1185,31 +1205,36 @@ 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
      * @returns template result
      */
     get selectionTemplate() {
-        if (isIE || !this.announceValues) { /* IE11 has significant performance complications */
+        if (isIE || !this.announceValues) {
+            /* IE11 has significant performance complications */
             return;
         }
         return html `<div
@@ -1218,9 +1243,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
@@ -1231,10 +1260,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/themes/halo/dark/index.js

@@ -1,3 +1,2 @@
 import '@refinitiv-ui/elements/button/themes/halo/dark';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-calendar', styles: ':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:12px;color:#ccc;min-width:196px;-webkit-user-select:none;-moz-user-select:none;-ms-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,2 @@
 import '@refinitiv-ui/elements/button/themes/halo/light';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-calendar', styles: ':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:12px;color:#0d0d0d;min-width:196px;-webkit-user-select:none;-moz-user-select:none;-ms-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/calendar/themes/solar/charcoal/index.js

@@ -1,3 +1,2 @@
 import '@refinitiv-ui/elements/button/themes/solar/charcoal';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-calendar', styles: ':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:13px;color:#c2c2c2;min-width:224px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background:#3c3c42;padding:4px}:host [part=navigation]{padding-bottom:4px}:host [part=btn-next],:host [part=btn-prev],:host [part=btn-view]{margin:0}:host [part=btn-view]{background:0 0;color:inherit;box-shadow:none;margin-left:15px;padding:0}:host [part=btn-view]:not([focused=visible]){border:none}:host [part=table]{width:100%;box-shadow:0 0 0 1px #000;background:#212124}:host [part~=row]:not(:last-of-type){box-shadow:0 1px 0 0 #0a0a0a}:host [part~=row]:not(:first-of-type) [part~=cell] [part~=selection]{top:1px}:host [part~=cell]:not(:last-of-type){box-shadow:1px 0 0 0 #0a0a0a}:host [part~=cell][disabled]{opacity:.4}:host [part~=cell][today]{color:#f93}:host [part~=cell][today] [part~=selection]{background:#3c3c42}:host [part~=cell]:not([selected]):not([range]):not([disabled])[idle] [part~=selection]{opacity:.6}:host [part~=cell]:not([selected]):not([range]) [part~=selection]:focus,:host [part~=cell]:not([selected]):not([range]) [part~=selection]:hover{background:#3c3c42;color:#e2e2e2}:host [part~=cell]:not([selected]):not([range]) [part~=selection]:focus{outline:#f93 dotted 1px}:host [part~=cell][range] [part~=selection]{background:rgba(255,153,51,.2)}:host [part~=cell][range][today]{color:#f93}:host [part~=cell][selected]{color:#000}:host [part~=cell][selected] [part~=selection]{background:#f93}:host [part~=cell]:not(:first-of-type) [part~=selection]{left:1px}:host [part~=day-name]{background-color:#151516;color:#666570;font-size:10px;font-weight:700}:host [part~=selection]{outline:0;top:0;bottom:0;right:0;left:0}:host([disabled]){opacity:.4}' }}));

package/lib/calendar/themes/solar/pearl/index.js

@@ -1,3 +1,2 @@
 import '@refinitiv-ui/elements/button/themes/solar/pearl';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-calendar', styles: ':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:13px;color:#484848;min-width:224px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background:#fff;padding:4px}:host [part=navigation]{padding-bottom:4px}:host [part=btn-next],:host [part=btn-prev],:host [part=btn-view]{margin:0}:host [part=btn-view]{background:0 0;color:inherit;box-shadow:none;margin-left:15px;padding:0}:host [part=btn-view]:not([focused=visible]){border:none}:host [part=table]{width:100%;box-shadow:0 0 0 1px #a9afba;background:#fff}:host [part~=row]:not(:last-of-type){box-shadow:0 1px 0 0 #d5d8db}:host [part~=row]:not(:first-of-type) [part~=cell] [part~=selection]{top:1px}:host [part~=cell]:not(:last-of-type){box-shadow:1px 0 0 0 #d5d8db}:host [part~=cell][disabled]{opacity:.4}:host [part~=cell][today]{color:#fff}:host [part~=cell][today] [part~=selection]{background:#acafb5}:host [part~=cell]:not([selected]):not([range]):not([disabled])[idle] [part~=selection]{opacity:.6}:host [part~=cell]:not([selected]):not([range]) [part~=selection]:focus,:host [part~=cell]:not([selected]):not([range]) [part~=selection]:hover{background:#e4e8ed;color:#000}:host [part~=cell]:not([selected]):not([range]) [part~=selection]:focus{outline:#ee7600 dotted 1px}:host [part~=cell][range] [part~=selection]{background:rgba(255,153,51,.2)}:host [part~=cell][range][today]{color:#f93}:host [part~=cell][selected]{color:#fff}:host [part~=cell][selected] [part~=selection]{background:#f93}:host [part~=cell]:not(:first-of-type) [part~=selection]{left:1px}:host [part~=day-name]{background-color:#e4e8ed;color:#6e6e78;font-size:10px;font-weight:700}:host [part~=selection]{outline:0;top:0;bottom:0;right:0;left:0}:host([disabled]){opacity:.4}' }}));

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
@@ -102,7 +102,7 @@ const formatLocaleDate = (date, locale, includeMonth = false, includeEra = false
     const year = date.getUTCFullYear();
     const month = date.getUTCMonth();
     // BC flags are not supported. Always use English
-    return `${includeMonth ? `${monthNames[month]} ` : ''} ${year > 0 ? year : year === 0 ? '1' : Math.abs(year - 1)}${includeEra ? year <= 0 ? ' BC' : ' AD' : ''}`;
+    return `${includeMonth ? `${monthNames[month]} ` : ''} ${year > 0 ? year : year === 0 ? '1' : Math.abs(year - 1)}${includeEra ? (year <= 0 ? ' BC' : ' AD') : ''}`;
 };
 /**
  * Used to format views

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';
@@ -156,9 +156,7 @@ let Canvas = class Canvas extends ResponsiveElement {
      * @return Render template
      */
     render() {
-        return html `
-      <canvas id="canvas"></canvas>
-    `;
+        return html ` <canvas id="canvas"></canvas> `;
     }
 };
 __decorate([