@refinitiv-ui/elements 5.12.0-dev.0 → 5.12.2-build.1909289434.1.62

package/CHANGELOG.md

@@ -3,6 +3,46 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.12.2](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@5.12.1...@refinitiv-ui/elements@5.12.2) (2022-02-17)
+
+**Note:** Version bump only for package @refinitiv-ui/elements
+
+
+
+
+
+## [5.12.1](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@5.12.0...@refinitiv-ui/elements@5.12.1) (2022-02-15)
+
+**Note:** Version bump only for package @refinitiv-ui/elements
+
+
+
+
+
+# [5.12.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@5.11.0...@refinitiv-ui/elements@5.12.0) (2022-02-15)
+
+
+### Bug Fixes
+
+* radio-button not add to group ([#167](https://github.com/Refinitiv/refinitiv-ui/issues/167)) ([fb05273](https://github.com/Refinitiv/refinitiv-ui/commit/fb052730cf8c7eeb376a3a49501b85dc363bf614))
+* **slider:** value-changed event is not fired ([#174](https://github.com/Refinitiv/refinitiv-ui/issues/174)) ([687f244](https://github.com/Refinitiv/refinitiv-ui/commit/687f244b4d848a684dc986158f324974931a3689))
+
+
+### Features
+
+* **button-bar:** improve screen reader support ([#176](https://github.com/Refinitiv/refinitiv-ui/issues/176)) ([f121ea6](https://github.com/Refinitiv/refinitiv-ui/commit/f121ea62fbdc160823dff386ec937b45d0a131e7))
+* **collapse:** accessibility support ([#203](https://github.com/Refinitiv/refinitiv-ui/issues/203)) ([12ae2f7](https://github.com/Refinitiv/refinitiv-ui/commit/12ae2f7fe036d0351e69f5daca4369fae4097917))
+* **collapse:** add accessibility support ([#161](https://github.com/Refinitiv/refinitiv-ui/issues/161)) ([158f031](https://github.com/Refinitiv/refinitiv-ui/commit/158f0317dd4df9ab76e1bd27d4aa02151787c252))
+
+
+### Reverts
+
+* Revert "feat(collapse): add accessibility support (#161)" (#179) ([9a0ad70](https://github.com/Refinitiv/refinitiv-ui/commit/9a0ad709d71c243fe68dbc38318a04745ea5b23b)), closes [#161](https://github.com/Refinitiv/refinitiv-ui/issues/161) [#179](https://github.com/Refinitiv/refinitiv-ui/issues/179)
+
+
+
+
+
 # [5.11.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@5.10.1...@refinitiv-ui/elements@5.11.0) (2022-01-14)
 
 

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.js

@@ -1,7 +1,7 @@
 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 '../icon/index.js';
 /**

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.js

@@ -1,8 +1,8 @@
 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';

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);
         }

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,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 { 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';
@@ -54,8 +54,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 +62,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 +74,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 +120,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 +131,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 +182,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 +217,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 +286,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 +450,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

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/custom-elements.json

@@ -8,7 +8,8 @@
         {
           "name": "header",
           "description": "Set text on the header",
-          "type": "string | null"
+          "type": "string",
+          "default": "\"\""
         },
         {
           "name": "level",
@@ -34,7 +35,8 @@
           "name": "header",
           "attribute": "header",
           "description": "Set text on the header",
-          "type": "string | null"
+          "type": "string",
+          "default": "\"\""
         },
         {
           "name": "level",