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

package/README.md

@@ -29,10 +29,10 @@ Finally, import both elements that you want to use and its themes into your appl
 import '@refinitiv-ui/halo-theme/dark/imports/native-elements';
 
 // import element and its Halo dark theme
-import '@refinitiv-ui/elements/lib/button';
-import '@refinitiv-ui/elements/lib/panel';
-import '@refinitiv-ui/elements/lib/button/themes/halo/dark';
-import '@refinitiv-ui/elements/lib/panel/themes/halo/dark';
+import '@refinitiv-ui/elements/button';
+import '@refinitiv-ui/elements/panel';
+import '@refinitiv-ui/elements/button/themes/halo/dark';
+import '@refinitiv-ui/elements/panel/themes/halo/dark';
 ```
 
 Now, you can use the elements in your app.

package/lib/accordion/index.js

@@ -1,7 +1,7 @@
 import { __decorate } from "tslib";
 import { 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 { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { VERSION } from '../version.js';
 import { Collapse } from '../collapse/index.js';
 /**

package/lib/appstate-bar/index.d.ts

@@ -1,5 +1,7 @@
 import { JSXInterface } from '../jsx';
 import { BasicElement, TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
+import { Translate } from '@refinitiv-ui/translate';
+import '@refinitiv-ui/phrasebook/locale/en/appstate-bar.js';
 import '../icon/index.js';
 /**
  * Used to display at the top of application to provide a status or information.
@@ -29,6 +31,10 @@ export declare class AppstateBar extends BasicElement {
      * (optional) Type of state bar. Supported value are `info`, `highlight`.
      */
     state: 'info' | 'highlight' | null;
+    /**
+     * Used for translations
+     */
+    protected t: Translate;
     /**
      * Invoked whenever the element is updated
      * @param {PropertyValues} changedProperties Map of changed properties with old values

package/lib/appstate-bar/index.js

@@ -1,8 +1,10 @@
 import { __decorate } from "tslib";
 import { BasicElement, 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 { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { VERSION } from '../version.js';
+import { translate } from '@refinitiv-ui/translate';
+import '@refinitiv-ui/phrasebook/locale/en/appstate-bar.js';
 import '../icon/index.js';
 /**
  * Used to display at the top of application to provide a status or information.
@@ -82,7 +84,7 @@ let AppstateBar = class AppstateBar extends BasicElement {
       <div part="heading">${this.heading}</div>
       <div part="message"><slot></slot></div>
       <div part="right"><slot name="right"></slot></div>
-      <ef-icon part="close"  @tap="${this.clear}" icon="cross"></ef-icon>
+      <ef-icon role="button" part="close"  @tap="${this.clear}" icon="cross" aria-label="${this.t('CLOSE')}"></ef-icon>
     `;
     }
 };
@@ -92,6 +94,9 @@ __decorate([
 __decorate([
     property({ type: String, reflect: true })
 ], AppstateBar.prototype, "state", void 0);
+__decorate([
+    translate()
+], AppstateBar.prototype, "t", void 0);
 AppstateBar = __decorate([
     customElement('ef-appstate-bar', {
         alias: 'amber-appstate-bar'

package/lib/autosuggest/index.js

@@ -1,14 +1,14 @@
 var Autosuggest_1;
 import { __decorate } from "tslib";
 import { css, html } from '@refinitiv-ui/core';
-import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
-import { query } from '@refinitiv-ui/core/lib/decorators/query.js';
-import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
-import { unsafeHTML } from '@refinitiv-ui/core/lib/directives/unsafe-html.js';
+import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
+import { query } from '@refinitiv-ui/core/decorators/query.js';
+import { property } from '@refinitiv-ui/core/decorators/property.js';
+import { unsafeHTML } from '@refinitiv-ui/core/directives/unsafe-html.js';
 import { VERSION } from '../version.js';
-import { AnimationTaskRunner, TimeoutTaskRunner } from '@refinitiv-ui/utils/lib/async.js';
+import { AnimationTaskRunner, TimeoutTaskRunner } from '@refinitiv-ui/utils/async.js';
 import { escapeRegExp, itemHighlightable, itemRenderer, queryWordSelect } from './helpers/utils.js';
-import { isIE, isMobile } from '@refinitiv-ui/utils/lib/browser.js';
+import { isIE, isMobile } from '@refinitiv-ui/utils/browser.js';
 import { Overlay } from '../overlay/index.js';
 import '../loader/index.js';
 import '../item/index.js';
@@ -532,7 +532,7 @@ let Autosuggest = Autosuggest_1 = class Autosuggest extends Overlay {
         const { detail: { query, suggestion } } = event;
         /* istanbul ignore next */
         if (this.attachTarget) {
-            this.attachTarget.value = suggestion && (suggestion === null || suggestion === void 0 ? void 0 : suggestion.label) || query;
+            this.attachTarget.value = suggestion && suggestion?.label || query;
         }
     }
     /**
@@ -1181,13 +1181,12 @@ let Autosuggest = Autosuggest_1 = class Autosuggest extends Overlay {
      */
     /* istanbul ignore next */
     calculateContentMaxHeight(size) {
-        var _a, _b, _c;
         if (!isIE) {
             return;
         }
-        const headerRect = (_a = this.headerElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-        const footerRect = (_b = this.footerElement) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
-        const contentRect = (_c = this.contentElement) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect();
+        const headerRect = this.headerElement?.getBoundingClientRect();
+        const footerRect = this.footerElement?.getBoundingClientRect();
+        const contentRect = this.contentElement?.getBoundingClientRect();
         const dialogHeight = size.height;
         const headerHeight = headerRect ? headerRect.height : 0;
         const footerHeight = footerRect ? footerRect.height : 0;

package/lib/button/index.d.ts

@@ -53,22 +53,11 @@ export declare class Button extends ControlElement {
      */
     private labelElement;
     /**
-     * Aria indicating state of toggle button
-     * @ignore
-     */
-    ariaPressed: string;
-    /**
-     * Aria indicating state of toggle button.
-     * Used when role is radio.
-     * @ignore
-     */
-    ariaChecked: string;
-    /**
-     * Updates the element
+     * Called before update() to compute values needed during the update.
      * @param changedProperties Properties that has changed
      * @returns {void}
      */
-    protected update(changedProperties: PropertyValues): void;
+    protected willUpdate(changedProperties: PropertyValues): void;
     /**
      * the lifecycle method called when properties changed first time
      * @param changedProperties properties it's the Map object which has the updated properties

package/lib/button/index.js

@@ -1,21 +1,11 @@
 import { __decorate } from "tslib";
 import { ControlElement, html } from '@refinitiv-ui/core';
-import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
-import { query } from '@refinitiv-ui/core/lib/decorators/query.js';
-import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
+import { query } from '@refinitiv-ui/core/decorators/query.js';
+import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { VERSION } from '../version.js';
 import { registerOverflowTooltip } from '../tooltip/index.js';
 import '../icon/index.js';
-/**
- * Return the attribute that converted from the property
- * Prevent empty string that reflected to attribute
- * @private
- * @param value value from the property
- * @returns string converted to attribute
- */
-const emptyStringToNull = function (value) {
-    return value || null;
-};
 /**
  * Use button for actions in forms, dialogs,
  * and more with support for different states and styles.
@@ -60,17 +50,6 @@ let Button = class Button extends ControlElement {
          * Use by theme to detect when no content inside button
          */
         this.empty = false;
-        /**
-         * Aria indicating state of toggle button
-         * @ignore
-         */
-        this.ariaPressed = '';
-        /**
-         * Aria indicating state of toggle button.
-         * Used when role is radio.
-         * @ignore
-         */
-        this.ariaChecked = '';
     }
     /**
      * Element version number
@@ -80,17 +59,17 @@ let Button = class Button extends ControlElement {
         return VERSION;
     }
     /**
-     * Updates the element
+     * Called before update() to compute values needed during the update.
      * @param changedProperties Properties that has changed
      * @returns {void}
      */
-    update(changedProperties) {
+    willUpdate(changedProperties) {
         if (changedProperties.has('active') && this.toggles || changedProperties.has('toggles') && this.toggles) {
             if (this.getAttribute('role') === 'radio') {
-                this.ariaChecked = String(this.active);
+                this.setAttribute('aria-checked', String(this.active));
             }
             else {
-                this.ariaPressed = String(this.active);
+                this.setAttribute('aria-pressed', String(this.active));
             }
         }
         super.update(changedProperties);
@@ -219,20 +198,6 @@ __decorate([
 __decorate([
     query('[part="label"]')
 ], Button.prototype, "labelElement", void 0);
-__decorate([
-    property({ type: String,
-        reflect: true,
-        attribute: 'aria-pressed',
-        converter: { toAttribute: emptyStringToNull } // TODO: Remove after typescript update to allow nullable for ARIAMixin
-    })
-], Button.prototype, "ariaPressed", void 0);
-__decorate([
-    property({ type: String,
-        reflect: true,
-        attribute: 'aria-checked',
-        converter: { toAttribute: emptyStringToNull } // TODO: Remove after typescript update to allow nullable for ARIAMixin
-    })
-], Button.prototype, "ariaChecked", void 0);
 Button = __decorate([
     customElement('ef-button', {
         alias: 'coral-button'

package/lib/button-bar/index.js

@@ -1,11 +1,11 @@
 var ButtonBar_1;
 import { __decorate } from "tslib";
 import { BasicElement, 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 { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/decorators/property.js';
+import { ref, createRef } from '@refinitiv-ui/core/directives/ref.js';
 import { VERSION } from '../version.js';
 import { Button } from '../button/index.js';
-import { ref, createRef } from '@refinitiv-ui/core/lib/directives/ref.js';
 /**
  * Used to display multiple buttons to create a list of commands bar.
  */
@@ -256,8 +256,7 @@ let ButtonBar = ButtonBar_1 = class ButtonBar extends BasicElement {
      * @returns the array of Element of the default slot
      */
     getElementsOfSlot() {
-        var _a;
-        return (_a = this.defaultSlot.value) === null || _a === void 0 ? void 0 : _a.assignedNodes().filter(node => node instanceof Element);
+        return this.defaultSlot.value?.assignedNodes().filter(node => node instanceof Element);
     }
     /**
      * Return the array of Buttons which focusable

package/lib/calendar/constants.js

@@ -1,4 +1,4 @@
-import { uuid } from '@refinitiv-ui/utils/lib/uuid.js';
+import { uuid } from '@refinitiv-ui/utils/uuid.js';
 export var RenderView;
 (function (RenderView) {
     RenderView["DAY"] = "day";

package/lib/calendar/index.d.ts

@@ -4,7 +4,7 @@ import { TranslateDirective, TranslatePromise } from '@refinitiv-ui/translate';
 import { CalendarFilter } from './types';
 import './locales.js';
 import '../button/index.js';
-import '@refinitiv-ui/phrasebook/lib/locale/en/calendar.js';
+import '@refinitiv-ui/phrasebook/locale/en/calendar.js';
 export { CalendarFilter };
 /**
  * Standard calendar element

package/lib/calendar/index.js

@@ -1,22 +1,22 @@
 import { __decorate } from "tslib";
 import { ControlElement, 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 { state } from '@refinitiv-ui/core/lib/decorators/state.js';
-import { ifDefined } from '@refinitiv-ui/core/lib/directives/if-defined.js';
-import { cache } from '@refinitiv-ui/core/lib/directives/cache.js';
-import { guard } from '@refinitiv-ui/core/lib/directives/guard.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 { state } from '@refinitiv-ui/core/decorators/state.js';
+import { ifDefined } from '@refinitiv-ui/core/directives/if-defined.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 { isIE } from '@refinitiv-ui/utils/lib/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/lib/date.js';
-import { left, right, up, down, first, last } from '@refinitiv-ui/utils/lib/navigation.js';
+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 '../button/index.js';
-import '@refinitiv-ui/phrasebook/lib/locale/en/calendar.js';
+import '@refinitiv-ui/phrasebook/locale/en/calendar.js';
 /**
  * Standard calendar element
  *
@@ -925,7 +925,14 @@ let Calendar = class Calendar extends ControlElement {
             }
             const year = startIdx + i;
             const value = utcFormat({ year, month: 0, day: 1 }, DateFormat.yyyyMMdd);
-            cell = Object.assign({ view, text: year > 0 ? `${year}` : year === 0 ? '1' : `${Math.abs(year - 1)}`, value: `${year}`, now: isThisYear(value), index: [cells.length, rows.length - 1] }, this.getCellSelection(value, isSameYear));
+            cell = {
+                view,
+                text: year > 0 ? `${year}` : year === 0 ? '1' : `${Math.abs(year - 1)}`,
+                value: `${year}`,
+                now: isThisYear(value),
+                index: [cells.length, rows.length - 1],
+                ...this.getCellSelection(value, isSameYear)
+            };
             cells.push(cell);
             years.push(cell);
         }
@@ -962,7 +969,15 @@ let Calendar = class Calendar extends ControlElement {
             const segment = { year, month, day: 1 };
             const value = utcFormat(segment, DateFormat.yyyyMMdd);
             const idle = i < before || i >= after;
-            cell = Object.assign({ view, text: monthsNames[month], value: utcFormat(segment, DateFormat.yyyyMM), idle, now: isThisMonth(value), index: [cells.length, rows.length - 1] }, this.getCellSelection(value, isSameMonth));
+            cell = {
+                view,
+                text: monthsNames[month],
+                value: utcFormat(segment, DateFormat.yyyyMM),
+                idle,
+                now: isThisMonth(value),
+                index: [cells.length, rows.length - 1],
+                ...this.getCellSelection(value, isSameMonth)
+            };
             cells.push(cell);
             months.push(cell);
         }
@@ -1026,8 +1041,16 @@ let Calendar = class Calendar extends ControlElement {
             }
             const value = utcFormat({ year, month, day }, DateFormat.yyyyMMdd);
             const disabled = this.isDateAvailable ? !this.isDateAvailable(value) : false;
-            const dayCell = Object.assign({ view, text: day.toString(), value,
-                disabled, idle: month !== viewMonth.month || year !== viewMonth.year, now: isToday(value), index: [cells.length, rows.length - 1] }, this.getCellSelection(value, isSameDay));
+            const dayCell = {
+                view,
+                text: day.toString(),
+                value,
+                disabled,
+                idle: month !== viewMonth.month || year !== viewMonth.year,
+                now: isToday(value),
+                index: [cells.length, rows.length - 1],
+                ...this.getCellSelection(value, isSameDay)
+            };
             cells.push(dayCell);
             days.push(dayCell);
         }
@@ -1182,6 +1205,7 @@ let Calendar = class Calendar extends ControlElement {
         }
         return html `<div
       part="aria-selection"
+      role="status"
       aria-live="polite"
       aria-label="${this.value
             ? this.range

package/lib/calendar/locales.js

@@ -9,20 +9,20 @@ const globals = {
     FIRST_DAY_OF_WEEK: '1'
 };
 const en = globals;
-const enUS = Object.assign(Object.assign({}, en), { FIRST_DAY_OF_WEEK: '0' });
+const enUS = { ...en, FIRST_DAY_OF_WEEK: '0' };
 const enCA = enUS;
 const de = globals;
 const es = globals;
 const fr = globals;
-const frCA = Object.assign(Object.assign({}, fr), { FIRST_DAY_OF_WEEK: '0' });
+const frCA = { ...fr, FIRST_DAY_OF_WEEK: '0' };
 const it = globals;
 const ja = globals;
-const ko = Object.assign(Object.assign({}, globals), { FIRST_DAY_OF_WEEK: '0' });
+const ko = { ...globals, FIRST_DAY_OF_WEEK: '0' };
 const pl = globals;
 const ru = globals;
-const th = Object.assign(Object.assign({}, globals), { FIRST_DAY_OF_WEEK: '0' });
+const th = { ...globals, FIRST_DAY_OF_WEEK: '0' };
 const zh = globals;
-const ar = Object.assign(Object.assign({}, globals), { FIRST_DAY_OF_WEEK: '6' });
+const ar = { ...globals, FIRST_DAY_OF_WEEK: '6' };
 const scope = CalendarLocaleScope;
 Phrasebook.define('en', scope, en);
 Phrasebook.define('en-CA', scope, enCA);

package/lib/calendar/types.d.ts

@@ -1,4 +1,4 @@
-import { CellIndex } from '@refinitiv-ui/utils/lib/navigation.js';
+import { CellIndex } from '@refinitiv-ui/utils/navigation.js';
 import { RenderView } from './constants.js';
 export interface CellSelectionModel {
     selected?: boolean;

package/lib/calendar/utils.js

@@ -1,4 +1,4 @@
-import { toDateSegment, getDaysInMonth, utcParse } from '@refinitiv-ui/utils/lib/date.js';
+import { toDateSegment, getDaysInMonth, utcParse } from '@refinitiv-ui/utils/date.js';
 import { DEFAULT_LOCALE, resolveLocale } from '@refinitiv-ui/i18n';
 import { CalendarLocaleScope } from './constants.js';
 /**
@@ -27,10 +27,10 @@ const calendar = {
  */
 const DateMessageFormats = {
     date: {
-        calendarMonthEra: Object.assign(Object.assign({}, calendar), { month: 'long', year: 'numeric', era: 'short' }),
-        calendarMonth: Object.assign(Object.assign({}, calendar), { month: 'long', year: 'numeric' }),
-        calendarYearEra: Object.assign(Object.assign({}, calendar), { year: 'numeric', era: 'short' }),
-        calendarYear: Object.assign(Object.assign({}, calendar), { year: 'numeric' })
+        calendarMonthEra: { ...calendar, month: 'long', year: 'numeric', era: 'short' },
+        calendarMonth: { ...calendar, month: 'long', year: 'numeric' },
+        calendarYearEra: { ...calendar, year: 'numeric', era: 'short' },
+        calendarYear: { ...calendar, year: 'numeric' }
     }
 };
 /**

package/lib/canvas/index.js

@@ -1,7 +1,7 @@
 import { __decorate } from "tslib";
 import { ResponsiveElement, 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 { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { VERSION } from '../version.js';
 /**
  * A Component uses to draw graphics on a web page,
@@ -64,8 +64,7 @@ let Canvas = class Canvas extends ResponsiveElement {
      * @type {HTMLCanvasElement}
      */
     get canvas() {
-        var _a;
-        return (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('canvas');
+        return this.shadowRoot?.getElementById('canvas');
     }
     /**
      * Alias of context

package/lib/card/index.js

@@ -1,11 +1,11 @@
 import { __decorate } from "tslib";
 import { BasicElement, 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 { state } from '@refinitiv-ui/core/lib/decorators/state.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 { VERSION } from '../version.js';
-import { isSlotEmpty } from '@refinitiv-ui/utils/lib/is-slot-empty.js';
+import { isSlotEmpty } from '@refinitiv-ui/utils/is-slot-empty.js';
 import '../label/index.js';
 import '../button/index.js';
 import '../overlay-menu/index.js';
@@ -78,8 +78,7 @@ let Card = class Card extends BasicElement {
         return this._config;
     }
     set config(config) {
-        var _a;
-        const data = (_a = config === null || config === void 0 ? void 0 : config.menu) === null || _a === void 0 ? void 0 : _a.data;
+        const data = config?.menu?.data;
         if (data !== this.menuData) {
             this.menuData = data;
         }

package/lib/chart/index.js

@@ -1,10 +1,12 @@
+/* eslint @typescript-eslint/no-unsafe-call: 0 */
+/* eslint @typescript-eslint/no-unsafe-member-access: 0 */
 import { __decorate } from "tslib";
 import { BasicElement, 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 { color as parseColor } from '@refinitiv-ui/utils/lib/color.js';
+import { color as parseColor } from '@refinitiv-ui/utils/color.js';
 import 'chart.js/dist/Chart.bundle.min.js';
 import { legendHelper, merge } from './helpers/index.js';
 import '../header/index.js';
@@ -14,6 +16,7 @@ import doughnutCenterPlugin from './plugins/doughnut-center-label.js';
 window.Chart.pluginService.register(doughnutCenterPlugin);
 const CSS_COLOR_PREFIX = '--chart-color-';
 const CHART_TYPE_OPAQUE = ['line', 'bubble', 'radar', 'polarArea'];
+// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
 const DEFAULT_CHART_CONFIG = window.Chart.defaults;
 const ELF_CHART_CONFIG = {
     polarArea: {
@@ -54,8 +57,7 @@ let Chart = class Chart extends BasicElement {
          * @returns {Chart.ChartLegendLabelItem[]} Array of label configurations
          */
         this.generateLegendLabels = (chart) => {
-            var _a, _b, _c, _d;
-            if (!((_a = this.config) === null || _a === void 0 ? void 0 : _a.type)) {
+            if (!this.config?.type) {
                 return [];
             }
             const chartOption = DEFAULT_CHART_CONFIG[this.config.type];
@@ -63,11 +65,11 @@ let Chart = class Chart extends BasicElement {
                 && chartOption.legend
                 && Array.isArray(this.datasets[0].backgroundColor)) {
                 let legends = [];
-                if ((_b = chartOption.legend.labels) === null || _b === void 0 ? void 0 : _b.generateLabels) {
-                    legends = (_c = chartOption.legend.labels) === null || _c === void 0 ? void 0 : _c.generateLabels(chart);
+                if (chartOption.legend.labels?.generateLabels) {
+                    legends = chartOption.legend.labels?.generateLabels(chart);
                 }
                 // Customize for doughnut chart change border color to background color
-                if (['pie', 'doughnut'].includes((_d = this.config) === null || _d === void 0 ? void 0 : _d.type) && this.datasets.length > 1) {
+                if (['pie', 'doughnut'].includes(this.config?.type) && this.datasets.length > 1) {
                     legends.forEach((label) => {
                         label.strokeStyle = label.fillStyle;
                     });
@@ -75,9 +77,8 @@ let Chart = class Chart extends BasicElement {
                 return legends;
             }
             return this.datasets.map((dataset, i) => {
-                var _a, _b, _c;
-                const solidFill = !CHART_TYPE_OPAQUE.includes(dataset.type || ((_a = this.config) === null || _a === void 0 ? void 0 : _a.type));
-                const usePointStyle = ((_c = (_b = chart.options.legend) === null || _b === void 0 ? void 0 : _b.labels) === null || _c === void 0 ? void 0 : _c.usePointStyle) || false;
+                const solidFill = !CHART_TYPE_OPAQUE.includes(dataset.type || this.config?.type);
+                const usePointStyle = chart.options.legend?.labels?.usePointStyle || false;
                 return {
                     text: dataset.label,
                     fillStyle: legendHelper.getLegendFillStyle(dataset, usePointStyle, solidFill),
@@ -122,8 +123,7 @@ let Chart = class Chart extends BasicElement {
      * @returns chart title
      */
     get chartTitle() {
-        var _a, _b, _c;
-        const title = (_c = (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.title) === null || _c === void 0 ? void 0 : _c.text;
+        const title = this.config?.options?.title?.text;
         if (title) {
             return typeof title === 'string' ? title : title.join();
         }
@@ -134,8 +134,7 @@ let Chart = class Chart extends BasicElement {
      * @returns dataset array
      */
     get datasets() {
-        var _a, _b;
-        return ((_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.datasets) || [];
+        return this.config?.data?.datasets || [];
     }
     /**
      * List of available chart colors
@@ -186,7 +185,6 @@ let Chart = class Chart extends BasicElement {
      * @returns {ChartConfig} chart config with theme
      */
     get themableConfig() {
-        var _a;
         const style = getComputedStyle(this);
         // TODO: Try and remove the need for global object modification.
         // It's easier to cover all areas by modifying the global object,
@@ -222,7 +220,7 @@ let Chart = class Chart extends BasicElement {
                     displayColors: false
                 },
                 legend: {
-                    position: ['pie', 'doughnut'].includes(((_a = this.config) === null || _a === void 0 ? void 0 : _a.type) || '') ? 'right' : 'top',
+                    position: ['pie', 'doughnut'].includes(this.config?.type || '') ? 'right' : 'top',
                     labels: {
                         boxWidth: this.cssVarAsNumber('--legend-key-box-width', '10'),
                         generateLabels: this.generateLegendLabels
@@ -291,8 +289,7 @@ let Chart = class Chart extends BasicElement {
      * @returns {Chart.ChartDataSets} Information about the dataset
      */
     datasetInfo(dataset) {
-        var _a;
-        const type = dataset.type || ((_a = this.config) === null || _a === void 0 ? void 0 : _a.type);
+        const type = dataset.type || this.config?.type;
         let index = this.datasets.indexOf(dataset);
         const isColorArray = (!!type && ['pie', 'doughnut', 'polarArea'].includes(type)) || type === 'bar' && this.datasets.length === 1;
         const isSolidFill = !!type && !CHART_TYPE_OPAQUE.includes(type);
@@ -456,8 +453,7 @@ let Chart = class Chart extends BasicElement {
      * @returns {void}
      */
     onResize() {
-        var _a;
-        (_a = this.chart) === null || _a === void 0 ? void 0 : _a.resize();
+        this.chart?.resize();
     }
     /**
      * A `TemplateResult` that will be used