@refinitiv-ui/elements 5.12.2 → 6.0.0-next.0

package/lib/chart/plugins/doughnut-center-label.js

@@ -1,7 +1,6 @@
 const CHART = window.Chart;
 const getPluginConfig = (chart) => {
-    var _a, _b;
-    return (_b = (_a = chart.config.options) === null || _a === void 0 ? void 0 : _a.plugins) === null || _b === void 0 ? void 0 : _b.centerLabel;
+    return chart.config.options?.plugins?.centerLabel;
 };
 /**
  * Draw line
@@ -10,18 +9,17 @@ const getPluginConfig = (chart) => {
  * @returns {void}
  */
 const drawItemBorder = function (chart, active) {
-    var _a, _b, _c;
     if (!chart.data.datasets) {
         return;
     }
-    if (active === null || active === void 0 ? void 0 : active.length) {
+    if (active?.length) {
         const ctx = chart.ctx;
         const chartItem = active[0];
         const vm = chartItem._view;
         const datasets = chart.data.datasets[chartItem._datasetIndex];
         vm.backgroundColor = datasets.backgroundColor[chartItem._index];
         vm.backgroundColor = CHART.helpers.getHoverColor(vm.backgroundColor); // we need to make color bolder
-        vm.borderWidth = (datasets.borderWidth || ((_c = (_b = (_a = chart.config.options) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.arc) === null || _c === void 0 ? void 0 : _c.borderWidth));
+        vm.borderWidth = (datasets.borderWidth || chart.config.options?.elements?.arc?.borderWidth);
         vm.borderColor = (getComputedStyle(chart.canvas).getPropertyValue('--doughnut-border-color') || CHART.defaults.global.defaultFontColor);
         const sA = vm.startAngle;
         const eA = vm.endAngle;
@@ -73,7 +71,6 @@ const plugins = {
         }
     },
     beforeDraw: function (chart) {
-        var _a;
         const config = getPluginConfig(chart);
         if (!config) {
             return;
@@ -83,7 +80,7 @@ const plugins = {
         if (chart._select) {
             active = chart._select;
         }
-        if ((_a = chart.active) === null || _a === void 0 ? void 0 : _a.length) {
+        if (chart.active?.length) {
             active = chart.active;
         }
         const renderText = config.onRenderLabel(chart, active);
@@ -155,7 +152,6 @@ const plugins = {
         }
     },
     afterDatasetUpdate: function (chart) {
-        var _a;
         // Check chart already init selected.
         if (chart.selected !== undefined) {
             return;
@@ -165,7 +161,7 @@ const plugins = {
         if (!config || !config.selected || !chart.data.datasets) {
             return;
         }
-        const selectedIndex = Number((_a = config.selected) === null || _a === void 0 ? void 0 : _a.index);
+        const selectedIndex = Number(config.selected?.index);
         const datasetIndex = Number(config.selected.datasetIndex || 0);
         const visibleIndexes = chart.getVisibleDatasetCount() - 1;
         // Validate index and datasetIndex
@@ -177,14 +173,13 @@ const plugins = {
         chart.selected = items ? [items] : [];
     },
     afterDraw: function (chart) {
-        var _a;
         if (getPluginConfig(chart)) {
             // Draw active element
             // Note: use logic from chart.js - chart.js/src/elements/element.arc.js :draw()
             // hover
             drawItemBorder(chart, chart.active);
             // selected
-            if ((_a = chart.selected) === null || _a === void 0 ? void 0 : _a.length) {
+            if (chart.selected?.length) {
                 chart._select = chart.selected;
                 chart.selected = [];
             }

package/lib/checkbox/index.js

@@ -1,8 +1,8 @@
 import { __decorate } from "tslib";
 import { ControlElement, html, css } from '@refinitiv-ui/core';
-import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
-import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
-import { query } from '@refinitiv-ui/core/lib/decorators/query.js';
+import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/decorators/property.js';
+import { query } from '@refinitiv-ui/core/decorators/query.js';
 import { VERSION } from '../version.js';
 import { registerOverflowTooltip } from '../tooltip/index.js';
 import '../icon/index.js';

package/lib/clock/index.js

@@ -1,12 +1,12 @@
 import { __decorate } from "tslib";
 import { html, css, WarningNotice, ResponsiveElement } from '@refinitiv-ui/core';
-import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
-import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
-import { query } from '@refinitiv-ui/core/lib/decorators/query.js';
-import { state } from '@refinitiv-ui/core/lib/decorators/state.js';
-import { ifDefined } from '@refinitiv-ui/core/lib/directives/if-defined.js';
+import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/decorators/property.js';
+import { query } from '@refinitiv-ui/core/decorators/query.js';
+import { state } from '@refinitiv-ui/core/decorators/state.js';
+import { ifDefined } from '@refinitiv-ui/core/directives/if-defined.js';
 import { VERSION } from '../version.js';
-import { MILLISECONDS_IN_SECOND, HOURS_OF_NOON, isValidTime, toTimeSegment, TimeFormat, format, padNumber } from '@refinitiv-ui/utils/lib/date.js';
+import { MILLISECONDS_IN_SECOND, HOURS_OF_NOON, isValidTime, toTimeSegment, TimeFormat, format, padNumber } from '@refinitiv-ui/utils/date.js';
 import { HOURS_IN_DAY, MINUTES_IN_HOUR, SECONDS_IN_DAY, SECONDS_IN_HOUR, SECONDS_IN_MINUTE } from './utils/timestamps.js';
 import { register, deRegister } from './utils/TickManager.js';
 const UP = 'Up';

package/lib/clock/utils/TickManager.js

@@ -1,5 +1,5 @@
-import { TimeoutTaskRunner } from '@refinitiv-ui/utils/lib/async.js';
-import { MILLISECONDS_IN_SECOND } from '@refinitiv-ui/utils/lib/date.js';
+import { TimeoutTaskRunner } from '@refinitiv-ui/utils/async.js';
+import { MILLISECONDS_IN_SECOND } from '@refinitiv-ui/utils/date.js';
 const tickSet = new Set();
 let timeout = null;
 /**

package/lib/collapse/index.js

@@ -1,10 +1,10 @@
 import { __decorate } from "tslib";
 import { BasicElement, css, html } from '@refinitiv-ui/core';
-import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
-import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
-import { ifDefined } from '@refinitiv-ui/core/lib/directives/if-defined.js';
-import { state } from '@refinitiv-ui/core/lib/decorators/state.js';
-import { ref, createRef } from '@refinitiv-ui/core/lib/directives/ref.js';
+import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/decorators/property.js';
+import { ifDefined } from '@refinitiv-ui/core/directives/if-defined.js';
+import { state } from '@refinitiv-ui/core/decorators/state.js';
+import { ref, createRef } from '@refinitiv-ui/core/directives/ref.js';
 import { VERSION } from '../version.js';
 import { preload } from '../icon/index.js';
 import '../header/index.js';
@@ -123,9 +123,8 @@ let Collapse = class Collapse extends BasicElement {
      * @returns {void}
      */
     firstUpdated(changedProperties) {
-        var _a;
         super.firstUpdated(changedProperties);
-        (_a = this.panelHolderRef.value) === null || _a === void 0 ? void 0 : _a.setAttribute('no-animation', '');
+        this.panelHolderRef.value?.setAttribute('no-animation', '');
     }
     /**
      * Invoked whenever the element is updated
@@ -154,8 +153,7 @@ let Collapse = class Collapse extends BasicElement {
      * @returns {void}
      */
     showHide() {
-        var _a;
-        (_a = this.panelHolderRef.value) === null || _a === void 0 ? void 0 : _a.removeAttribute(('no-animation'));
+        this.panelHolderRef.value?.removeAttribute(('no-animation'));
         this.setAnimationTargetHeight(this.getContentHeight());
     }
     /**

package/lib/color-dialog/elements/color-palettes.js

@@ -1,6 +1,6 @@
 import { __decorate } from "tslib";
 import { html, css, svg } from '@refinitiv-ui/core';
-import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { VERSION } from '../../version.js';
 import { Palettes } from './palettes.js';
 import { COLOR_ITEMS } from '../helpers/color-helpers.js';

package/lib/color-dialog/elements/grayscale-palettes.js

@@ -1,7 +1,7 @@
 import { __decorate } from "tslib";
 import { html, css, svg } from '@refinitiv-ui/core';
-import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
-import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { VERSION } from '../../version.js';
 import { Palettes } from './palettes.js';
 import { GRAYSCALE_ITEMS, NOCOLOR_POINTS } from '../helpers/color-helpers.js';

package/lib/color-dialog/elements/palettes.js

@@ -1,9 +1,9 @@
 import { __decorate } from "tslib";
 import { BasicElement, svg } from '@refinitiv-ui/core';
-import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
-import { query } from '@refinitiv-ui/core/lib/decorators/query.js';
+import { property } from '@refinitiv-ui/core/decorators/property.js';
+import { query } from '@refinitiv-ui/core/decorators/query.js';
 import { VERSION } from '../../version.js';
-import { rgb } from '@refinitiv-ui/utils/lib/color.js';
+import { rgb } from '@refinitiv-ui/utils/color.js';
 import { isHex } from '../helpers/color-helpers.js';
 /**
  * Element base class usually used
@@ -89,14 +89,13 @@ export class Palettes extends BasicElement {
      * @return {void}
      */
     onTouchmove(event) {
-        var _a;
         const touchOffsets = event.changedTouches[0];
         // TODO: it is a bug of TypeScript@4.4 remove ts-ignore once it is fixed
         // https://github.com/microsoft/TypeScript/issues/45047
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-        const realTarget = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.elementFromPoint(touchOffsets.clientX, touchOffsets.clientY);
+        const realTarget = this.shadowRoot?.elementFromPoint(touchOffsets.clientX, touchOffsets.clientY);
         this.updateValue(realTarget);
     }
     /**

package/lib/color-dialog/helpers/value-model.js

@@ -1,4 +1,4 @@
-import { rgb } from '@refinitiv-ui/utils/lib/color.js';
+import { rgb } from '@refinitiv-ui/utils/color.js';
 import { isHex } from './color-helpers.js';
 const rgbNumberToString = (value) => isNaN(value) ? '' : `${value}`; // replace NaN with empty string
 /**

package/lib/color-dialog/index.d.ts

@@ -7,7 +7,7 @@ import { Dialog } from '../dialog/index.js';
 import './elements/color-palettes.js';
 import './elements/grayscale-palettes.js';
 import { Translate } from '@refinitiv-ui/translate';
-import '@refinitiv-ui/phrasebook/lib/locale/en/color-dialog.js';
+import '@refinitiv-ui/phrasebook/locale/en/color-dialog.js';
 /**
  * Displays a colour picker dialog,
  * for selecting a predefined range of colours.

package/lib/color-dialog/index.js

@@ -1,10 +1,10 @@
 import { __decorate } from "tslib";
 import { html, css, WarningNotice } from '@refinitiv-ui/core';
-import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
-import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
-import { query } from '@refinitiv-ui/core/lib/decorators/query.js';
-import { styleMap } from '@refinitiv-ui/core/lib/directives/style-map.js';
-import { rgb } from '@refinitiv-ui/utils/lib/color.js';
+import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/decorators/property.js';
+import { query } from '@refinitiv-ui/core/decorators/query.js';
+import { styleMap } from '@refinitiv-ui/core/directives/style-map.js';
+import { rgb } from '@refinitiv-ui/utils/color.js';
 import { VERSION } from '../version.js';
 import { ValueModel } from './helpers/value-model.js';
 import { isHex, removeHashSign } from './helpers/color-helpers.js';
@@ -15,7 +15,7 @@ import { Dialog } from '../dialog/index.js';
 import './elements/color-palettes.js';
 import './elements/grayscale-palettes.js';
 import { translate } from '@refinitiv-ui/translate';
-import '@refinitiv-ui/phrasebook/lib/locale/en/color-dialog.js';
+import '@refinitiv-ui/phrasebook/locale/en/color-dialog.js';
 /**
  * Displays a colour picker dialog,
  * for selecting a predefined range of colours.

package/lib/combo-box/helpers/filter.d.ts

@@ -1,4 +1,4 @@
-import type { DataItem } from '@refinitiv-ui/utils/lib/collection';
+import type { DataItem } from '@refinitiv-ui/utils/collection.js';
 import type { ComboBox } from '../index';
 import type { ComboBoxFilter } from './types';
 import type { ItemData } from '../../item';

package/lib/combo-box/helpers/types.d.ts

@@ -1,4 +1,4 @@
-import type { DataItem } from '@refinitiv-ui/utils/lib/collection';
+import type { DataItem } from '@refinitiv-ui/utils/collection.js';
 import type { ItemData } from '../../item';
 /**
  * Predicate callback

package/lib/combo-box/index.d.ts

@@ -1,8 +1,8 @@
 import { JSXInterface } from '../jsx';
 import { FormFieldElement, CSSResultGroup, PropertyValues, TapEvent, TemplateResult, StyleMap } from '@refinitiv-ui/core';
-import { TemplateMap } from '@refinitiv-ui/core/lib/directives/template-map.js';
-import { CollectionComposer, DataItem } from '@refinitiv-ui/utils/lib/collection.js';
-import { AnimationTaskRunner } from '@refinitiv-ui/utils/lib/async.js';
+import { TemplateMap } from '@refinitiv-ui/core/directives/template-map.js';
+import { CollectionComposer, DataItem } from '@refinitiv-ui/utils/collection.js';
+import { AnimationTaskRunner } from '@refinitiv-ui/utils/async.js';
 import { ItemData } from '../item';
 import { ComboBoxData, ComboBoxFilter } from './helpers/types';
 import type { List } from '../list/index.js';
@@ -13,7 +13,7 @@ import '../overlay/index.js';
 import '../list/index.js';
 import '../counter/index.js';
 import { TranslateDirective } from '@refinitiv-ui/translate';
-import '@refinitiv-ui/phrasebook/lib/locale/en/combo-box.js';
+import '@refinitiv-ui/phrasebook/locale/en/combo-box.js';
 export type { ComboBoxFilter, ComboBoxData };
 export { ComboBoxRenderer };
 /**

package/lib/combo-box/index.js

@@ -1,14 +1,14 @@
 import { __decorate } from "tslib";
 import { FormFieldElement, css, html, WarningNotice, FocusedPropertyKey } from '@refinitiv-ui/core';
-import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
-import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
-import { query } from '@refinitiv-ui/core/lib/decorators/query.js';
-import { eventOptions } from '@refinitiv-ui/core/lib/decorators/event-options.js';
-import { styleMap } from '@refinitiv-ui/core/lib/directives/style-map.js';
-import { ifDefined } from '@refinitiv-ui/core/lib/directives/if-defined.js';
+import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/decorators/property.js';
+import { query } from '@refinitiv-ui/core/decorators/query.js';
+import { eventOptions } from '@refinitiv-ui/core/decorators/event-options.js';
+import { styleMap } from '@refinitiv-ui/core/directives/style-map.js';
+import { ifDefined } from '@refinitiv-ui/core/directives/if-defined.js';
 import { VERSION } from '../version.js';
-import { CollectionComposer } from '@refinitiv-ui/utils/lib/collection.js';
-import { AnimationTaskRunner, TimeoutTaskRunner } from '@refinitiv-ui/utils/lib/async.js';
+import { CollectionComposer } from '@refinitiv-ui/utils/collection.js';
+import { AnimationTaskRunner, TimeoutTaskRunner } from '@refinitiv-ui/utils/async.js';
 import { ComboBoxRenderer } from './helpers/renderer.js';
 import { defaultFilter } from './helpers/filter.js';
 import { CustomKeyboardEvent } from './helpers/keyboard-event.js';
@@ -17,7 +17,7 @@ import '../overlay/index.js';
 import '../list/index.js';
 import '../counter/index.js';
 import { translate } from '@refinitiv-ui/translate';
-import '@refinitiv-ui/phrasebook/lib/locale/en/combo-box.js';
+import '@refinitiv-ui/phrasebook/locale/en/combo-box.js';
 export { ComboBoxRenderer };
 const QUERY_DEBOUNCE_RATE = 0;
 // Maximum number of characters to display in multiple mode
@@ -267,13 +267,19 @@ let ComboBox = class ComboBox extends FormFieldElement {
         else {
             // Clone value arrays
             const newValues = values.slice(0, this.multiple ? values.length : 1);
-            const oldValues = this.composerValues.slice();
+            const oldValues = this.values.slice();
             // Create comparison strings to check for differences
             const newComparison = newValues.sort().toString();
             const oldComparison = oldValues.sort().toString();
-            // Should we update the selection state?
+            // Update the selection state when found new value
             if (newComparison !== oldComparison) {
                 this.updateComposerValues(newValues);
+                if (this.freeText) {
+                    // free text mode is only supported in single selection mode
+                    // so if there is no valid selection in the composer, we can assume
+                    // the first item can be used as the free text item.
+                    this.freeTextValue = !this.composerValues.length ? newValues[0] : '';
+                }
                 this.requestUpdate('values', oldValues);
             }
         }
@@ -580,10 +586,9 @@ let ComboBox = class ComboBox extends FormFieldElement {
      * @returns {void}
      */
     scrollToSelected() {
-        var _a;
         const item = this.selectedItem;
         if (item) {
-            (_a = this.listEl) === null || _a === void 0 ? void 0 : _a.scrollToItem(item);
+            this.listEl?.scrollToItem(item);
         }
     }
     /**
@@ -1041,6 +1046,7 @@ let ComboBox = class ComboBox extends FormFieldElement {
         return html `
       <ef-list
         id="internal-list"
+        tabindex="-1"
         @value-changed="${this.onListValueChanged}"
         .data="${this.composer}"
         .multiple="${this.multiple}"
@@ -1087,7 +1093,18 @@ let ComboBox = class ComboBox extends FormFieldElement {
      * @returns template map
      */
     get decorateInputMap() {
-        return Object.assign(Object.assign({}, super.decorateInputMap), { 'part': 'input', 'type': 'text', 'role': 'combobox', '.value': this.focused ? this.inputText : this.freeTextValue || this.label, 'aria-expanded': this.opened ? 'true' : 'false', 'aria-haspopup': 'listbox', 'aria-autocomplete': 'list', 'aria-owns': 'internal-list', 'aria-activedescendant': this.highlightedItemValue });
+        return {
+            ...super.decorateInputMap,
+            'part': 'input',
+            'type': 'text',
+            'role': 'combobox',
+            '.value': this.focused ? this.inputText : this.freeTextValue || this.label,
+            'aria-expanded': this.opened ? 'true' : 'false',
+            'aria-haspopup': 'listbox',
+            'aria-autocomplete': 'list',
+            'aria-owns': 'internal-list',
+            'aria-activedescendant': this.highlightedItemValue
+        };
     }
     /**
      * Returns a template for input field

package/lib/counter/index.d.ts

@@ -15,14 +15,14 @@ export declare class Counter extends BasicElement {
      */
     private _value;
     /**
-    * Internal max of the element.
-    */
+     * Internal max of the element.
+     */
     private _max;
     /**
-    * The value of counter as string number
-    * @param value counter value
-    * @default -
-    */
+     * The value of counter as string number
+     * @param value counter value
+     * @default -
+     */
     set value(value: string);
     /**
     * The value of counter as string number

package/lib/counter/index.js

@@ -1,7 +1,7 @@
 import { __decorate } from "tslib";
 import { BasicElement, html, css, WarningNotice } from '@refinitiv-ui/core';
-import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
-import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { VERSION } from '../version.js';
 import { truncateDecimal, convertToCompactNotation } from './utils.js';
 /**
@@ -16,8 +16,8 @@ let Counter = class Counter extends BasicElement {
          */
         this._value = '';
         /**
-        * Internal max of the element.
-        */
+         * Internal max of the element.
+         */
         this._max = '';
     }
     /**
@@ -28,10 +28,10 @@ let Counter = class Counter extends BasicElement {
         return VERSION;
     }
     /**
-    * The value of counter as string number
-    * @param value counter value
-    * @default -
-    */
+     * The value of counter as string number
+     * @param value counter value
+     * @default -
+     */
     set value(value) {
         value = this.validateValue(value, 'value');
         const oldValue = this._value;

package/lib/datetime-field/constants.d.ts

@@ -0,0 +1,4 @@
+export declare enum Direction {
+    Up = 1,
+    Down = -1
+}

package/lib/datetime-field/constants.js

@@ -0,0 +1,5 @@
+export var Direction;
+(function (Direction) {
+    Direction[Direction["Up"] = 1] = "Up";
+    Direction[Direction["Down"] = -1] = "Down";
+})(Direction || (Direction = {}));