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

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

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/chart/themes/halo/dark/index.js

@@ -1,4 +1,4 @@
-import '@refinitiv-ui/elements/lib/header/themes/halo/dark';
-import '@refinitiv-ui/elements/lib/layout/themes/halo/dark';
+import '@refinitiv-ui/elements/header/themes/halo/dark';
+import '@refinitiv-ui/elements/layout/themes/halo/dark';
 
 elf.customStyles.define('ef-chart', ':host{--grid-line-color:rgba(51, 51, 51, 0.5);--zero-line-color:rgba(51, 51, 51, 0.5);--animation-duration:1000;--line-width:2px;--line-tension:0;--multi-dataset-border-color:#1A1A1A;--tooltip-background-color:rgba(204, 204, 204, 0.9);--tooltip-title-color:#0D0D0D;--tooltip-body-color:#0D0D0D;--tooltip-border-radius:0px;--tooltip-caret-size:7px;--tooltip-padding-x:7px;--tooltip-padding-y:5px;--tooltip-title-spacing:0;--legend-key-box-width:4px;--chart-color-1:#6678FF;--chart-color-2:#FFFFFF;--chart-color-3:#FFC800;--chart-color-4:#9064CD;--chart-color-5:#00D0D4;--chart-color-6:#FF5000;--chart-color-7:#00C389;--chart-color-8:#EA2E6C;font-size:12rem;--tooltip-background-color:#FFFFFF;--tooltip-title-color:#0D0D0D;--tooltip-body-color:#0D0D0D;--tooltip-padding-x:8px;--tooltip-padding-y:4px;--chart-color-1:#6678FF;--chart-color-2:#FFFFFF;--chart-color-3:#FFC800;--chart-color-4:#9064CD;--chart-color-5:#00D0D4;--chart-color-6:#FF5000;--chart-color-7:#00C389;--chart-color-8:#EA2E6C;--chart-color-9:#999999;--chart-color-10:#3BBAFF;--chart-color-11:#198C8C;--chart-color-12:#C36241;--chart-color-13:#CCD2FF;--chart-color-14:#808080;--chart-color-15:#FFDE66;--chart-color-16:#BCA2E1;--chart-color-17:#59DFE1;--chart-color-18:#FF9666;--chart-color-19:#6CEFC8;--chart-color-20:#F281A7;--chart-color-21:#CCCCCC;--chart-color-22:#89D5FF;--chart-color-23:#75BABA;--chart-color-24:#DBA08D;--chart-color-25:#F6ABC4}');

package/lib/chart/themes/halo/light/index.js

@@ -1,4 +1,4 @@
-import '@refinitiv-ui/elements/lib/header/themes/halo/light';
-import '@refinitiv-ui/elements/lib/layout/themes/halo/light';
+import '@refinitiv-ui/elements/header/themes/halo/light';
+import '@refinitiv-ui/elements/layout/themes/halo/light';
 
 elf.customStyles.define('ef-chart', ':host{--grid-line-color:rgba(224, 224, 224, 0.5);--zero-line-color:rgba(224, 224, 224, 0.5);--animation-duration:1000;--line-width:2px;--line-tension:0;--multi-dataset-border-color:#FAFAFA;--tooltip-background-color:rgba(13, 13, 13, 0.9);--tooltip-title-color:#FFFFFF;--tooltip-body-color:#FFFFFF;--tooltip-border-radius:0px;--tooltip-caret-size:7px;--tooltip-padding-x:7px;--tooltip-padding-y:5px;--tooltip-title-spacing:0;--legend-key-box-width:4px;--chart-color-1:#334BFF;--chart-color-2:#000000;--chart-color-3:#7F6400;--chart-color-4:#71549F;--chart-color-5:#007678;--chart-color-6:#CC4000;--chart-color-7:#007653;--chart-color-8:#D22962;font-size:12rem;--tooltip-background-color:#FFF4CC;--tooltip-title-color:#0D0D0D;--tooltip-body-color:#0D0D0D;--tooltip-padding-x:8px;--tooltip-padding-y:4px;--chart-color-1:#334BFF;--chart-color-2:#000000;--chart-color-3:#7F6400;--chart-color-4:#71549F;--chart-color-5:#007678;--chart-color-6:#CC4000;--chart-color-7:#007653;--chart-color-8:#D22962;--chart-color-9:#595959;--chart-color-10:#236F99;--chart-color-11:#147070;--chart-color-12:#AF583A;--chart-color-13:#0F1E8A;--chart-color-14:#737373;--chart-color-15:#4C3C00;--chart-color-16:#563F77;--chart-color-17:#004E4F;--chart-color-18:#993000;--chart-color-19:#00432F;--chart-color-20:#A3204C;--chart-color-21:#404040;--chart-color-22:#174A66;--chart-color-23:#116262;--chart-color-24:#88442D;--chart-color-25:#5D122B}');

package/lib/chart/themes/solar/charcoal/index.js

@@ -1,4 +1,4 @@
-import '@refinitiv-ui/elements/lib/header/themes/solar/charcoal';
-import '@refinitiv-ui/elements/lib/layout/themes/solar/charcoal';
+import '@refinitiv-ui/elements/header/themes/solar/charcoal';
+import '@refinitiv-ui/elements/layout/themes/solar/charcoal';
 
 elf.customStyles.define('ef-chart', ':host{--grid-line-color:rgba(10, 10, 10, 0.5);--zero-line-color:rgba(10, 10, 10, 0.5);--animation-duration:1000;--line-width:2px;--line-tension:0;--multi-dataset-border-color:#1A1A1C;--tooltip-background-color:rgba(194, 194, 194, 0.9);--tooltip-title-color:#151516;--tooltip-body-color:#151516;--tooltip-border-radius:0px;--tooltip-caret-size:7px;--tooltip-padding-x:7px;--tooltip-padding-y:5px;--tooltip-title-spacing:0;--legend-key-box-width:4px;--chart-color-1:#FF9933;--chart-color-2:#B10CF2;--chart-color-3:#7DE442;--chart-color-4:#3780BF;--chart-color-5:#FA4C11;--chart-color-6:#FFE433;--chart-color-7:#8C8C8C;--chart-color-8:#5A54FF;font-size:12rem;color:rgba(194,194,194,.8);--legend-key-box-width:12;--grid-line-color:rgba(194, 194, 194, 0.1);--zero-line-color:rgba(194, 194, 194, 0.1);--animation-duration:500;--tooltip-background-color:rgba(74, 74, 82, 0.9);--tooltip-title-color:#C2C2C2;--tooltip-body-color:#C2C2C2;--tooltip-caret-size:8px;--tooltip-padding-x:8px;--tooltip-padding-y:8px;--doughnut-center-text-color:#C2C2C2;--doughnut-border-color:#ffffff;--chart-color-1:#FF9933;--chart-color-2:#B10CF2;--chart-color-3:#7DE442;--chart-color-4:#3780BF;--chart-color-5:#FA4C11;--chart-color-6:#FFE433;--chart-color-7:#8C8C8C;--chart-color-8:#5A54FF;--chart-color-9:#E53766;--chart-color-10:#648608;--chart-color-11:#48CBF7;--chart-color-12:#F3478E;--chart-color-13:#508BF7;--chart-color-14:#EFF748;--chart-color-15:#FF4043;--chart-color-16:#A7DB0B;--chart-color-17:#C2C2C2;--chart-color-18:#1578AD;--chart-color-19:#F2B530;--chart-color-20:#297835;--chart-color-21:#7045FF;--chart-color-22:#DD48F7;--chart-color-23:#09A8C0;--chart-color-24:#60E65C;--chart-color-25:#2960A3}');

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

@@ -1,4 +1,4 @@
-import '@refinitiv-ui/elements/lib/header/themes/solar/pearl';
-import '@refinitiv-ui/elements/lib/layout/themes/solar/pearl';
+import '@refinitiv-ui/elements/header/themes/solar/pearl';
+import '@refinitiv-ui/elements/layout/themes/solar/pearl';
 
 elf.customStyles.define('ef-chart', ':host{--grid-line-color:rgba(213, 216, 219, 0.5);--zero-line-color:rgba(213, 216, 219, 0.5);--animation-duration:1000;--line-width:2px;--line-tension:0;--multi-dataset-border-color:#FFFFFF;--tooltip-background-color:rgba(72, 72, 72, 0.9);--tooltip-title-color:#C2C2C2;--tooltip-body-color:#C2C2C2;--tooltip-border-radius:0px;--tooltip-caret-size:7px;--tooltip-padding-x:7px;--tooltip-padding-y:5px;--tooltip-title-spacing:0;--legend-key-box-width:4px;--chart-color-1:#EE7600;--chart-color-2:#B10CF2;--chart-color-3:#309054;--chart-color-4:#3780BF;--chart-color-5:#FA4C11;--chart-color-6:#D9B500;--chart-color-7:#8C8C8C;--chart-color-8:#5A54FF;font-size:12rem;color:rgba(72,72,72,.8);--legend-key-box-width:12;--grid-line-color:rgba(72, 72, 72, 0.1);--zero-line-color:rgba(72, 72, 72, 0.1);--animation-duration:500;--tooltip-background-color:rgba(190, 195, 204, 0.9);--tooltip-title-color:#484848;--tooltip-body-color:#484848;--tooltip-caret-size:8px;--tooltip-padding-x:8px;--tooltip-padding-y:8px;--doughnut-center-text-color:#484848;--doughnut-border-color:#000000;--chart-color-1:#EE7600;--chart-color-2:#B10CF2;--chart-color-3:#309054;--chart-color-4:#3780BF;--chart-color-5:#FA4C11;--chart-color-6:#D9B500;--chart-color-7:#8C8C8C;--chart-color-8:#5A54FF;--chart-color-9:#E53766;--chart-color-10:#648608;--chart-color-11:#40B6DE;--chart-color-12:#F3478E;--chart-color-13:#508BF7;--chart-color-14:#AAB218;--chart-color-15:#FF4043;--chart-color-16:#80A808;--chart-color-17:#707070;--chart-color-18:#1578AC;--chart-color-19:#D9A22B;--chart-color-20:#297835;--chart-color-21:#7045FF;--chart-color-22:#DD48F7;--chart-color-23:#09A8C0;--chart-color-24:#4BB347;--chart-color-25:#2960A3}');

package/lib/checkbox/index.d.ts

@@ -81,6 +81,11 @@ export declare class Checkbox extends ControlElement {
      */
     protected render(): TemplateResult;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'ef-checkbox': Checkbox;
+    }
+}
 
 declare global {
   interface HTMLElementTagNameMap {

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/checkbox/themes/halo/dark/index.js

@@ -1,4 +1,4 @@
-import '@refinitiv-ui/elements/lib/icon/themes/halo/dark';
-import '@refinitiv-ui/elements/lib/tooltip/themes/halo/dark';
+import '@refinitiv-ui/elements/icon/themes/halo/dark';
+import '@refinitiv-ui/elements/tooltip/themes/halo/dark';
 
 elf.customStyles.define('ef-checkbox', ':host{margin:1px 0;vertical-align:middle;display:inline-flex;align-items:center;flex-wrap:nowrap;font-size:inherit;font-weight:inherit;touch-action:manipulation;--check-color:#6678FF;color:#ccc}:host(:focus){outline:0}:host [part=container]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:0;background-color:#0d0d0d;transition:box-shadow 150ms,border-color 150ms;box-shadow:inset 0 0 0 rgba(0,0,0,.5);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;border:1px solid #404040;width:14px;height:14px}:host [part=check]{display:flex;justify-content:center;align-items:center;box-sizing:border-box;color:var(--check-color,#6678ff);width:95%;height:95%}:host [part=label]{margin:0 7px;cursor:default}:host([indeterminate]) [part=check]{border:none;background-color:currentColor;transform:none;border-radius:1px;margin:0;width:70%;height:1px}:host([disabled]) [part=check],:host([readonly]) [part=check]{color:var(--check-color,#ccc)}:host([disabled]) [part=check]{opacity:.5}:host([disabled][checked]) [part=check]{opacity:.5}:host([disabled]) [part=label]{opacity:.65}@media (-ms-high-contrast:none),(pointer:fine){:host(:focus) [part=container]{border-color:#334bff;box-shadow:0 0 0 #334bff}}:host(:not([readonly])) [part=container]{cursor:pointer}:host(:hover:not([checked]):not([indeterminate]):not([readonly])) [part=container]{border-color:grey}:host(:hover:not([readonly])){color:#fff}:host([disabled]),:host([disabled]) [part=label]{opacity:.5}:host([checked]) [part=container]{border:1px solid #334bff}:host(:focus[readonly]:not([checked])) [part=container]{border-color:#404040}:host([focused=visible]){outline:#334bff solid 1px;outline-offset:2px}:host([indeterminate]) [part=container]{border:1px solid #334bff}:host(:focus[readonly]) [part=container],:host(:focus[readonly][indeterminate]) [part=container]{border-color:#334bff}');

package/lib/checkbox/themes/halo/light/index.js

@@ -1,4 +1,4 @@
-import '@refinitiv-ui/elements/lib/icon/themes/halo/light';
-import '@refinitiv-ui/elements/lib/tooltip/themes/halo/light';
+import '@refinitiv-ui/elements/icon/themes/halo/light';
+import '@refinitiv-ui/elements/tooltip/themes/halo/light';
 
 elf.customStyles.define('ef-checkbox', ':host{margin:1px 0;vertical-align:middle;display:inline-flex;align-items:center;flex-wrap:nowrap;font-size:inherit;font-weight:inherit;touch-action:manipulation;--check-color:#334BFF;color:#404040}:host(:focus){outline:0}:host [part=container]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:0;background-color:#fff;transition:box-shadow 150ms,border-color 150ms;box-shadow:inset 0 0 0 rgba(0,0,0,.25);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;border:1px solid #595959;width:14px;height:14px}:host [part=check]{display:flex;justify-content:center;align-items:center;box-sizing:border-box;color:var(--check-color,#334bff);width:95%;height:95%}:host [part=label]{margin:0 7px;cursor:default}:host([indeterminate]) [part=check]{border:none;background-color:currentColor;transform:none;border-radius:1px;margin:0;width:70%;height:1px}:host([disabled]) [part=check],:host([readonly]) [part=check]{color:var(--check-color,#404040)}:host([disabled]) [part=check]{opacity:.5}:host([disabled][checked]) [part=check]{opacity:.5}:host([disabled]) [part=label]{opacity:.65}@media (-ms-high-contrast:none),(pointer:fine){:host(:focus) [part=container]{border-color:#334bff;box-shadow:0 0 0 #334bff}}:host(:not([readonly])) [part=container]{cursor:pointer}:host(:hover:not([checked]):not([indeterminate]):not([readonly])) [part=container]{border-color:#0d0d0d}:host(:hover:not([readonly])){color:#0d0d0d}:host([disabled]),:host([disabled]) [part=label]{opacity:.5}:host([checked]) [part=container]{border:1px solid #334bff}:host(:focus[readonly]:not([checked])) [part=container]{border-color:#595959}:host([focused=visible]){outline:#334bff solid 1px;outline-offset:2px}:host([indeterminate]) [part=container]{border:1px solid #334bff}:host(:focus[readonly]) [part=container],:host(:focus[readonly][indeterminate]) [part=container]{border-color:#334bff}');

package/lib/checkbox/themes/solar/charcoal/index.js

@@ -1,4 +1,4 @@
-import '@refinitiv-ui/elements/lib/icon/themes/solar/charcoal';
-import '@refinitiv-ui/elements/lib/tooltip/themes/solar/charcoal';
+import '@refinitiv-ui/elements/icon/themes/solar/charcoal';
+import '@refinitiv-ui/elements/tooltip/themes/solar/charcoal';
 
 elf.customStyles.define('ef-checkbox', ':host{margin:1px 0;vertical-align:middle;display:inline-flex;align-items:center;flex-wrap:nowrap;font-size:inherit;font-weight:inherit;touch-action:manipulation}:host(:focus){outline:0}:host [part=container]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:0;background-color:#000;transition:box-shadow 150ms,border-color 150ms;box-shadow:inset 0 0 0 rgba(0,0,0,.6);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;border:1px solid #4a4a52;height:11px;width:11px}:host [part=check]{display:flex;justify-content:center;align-items:center;box-sizing:border-box;color:var(--check-color,#f93);border-width:0 2px 2px 0;width:95%;height:95%}:host [part=label]{cursor:default;margin:0 4px}:host([indeterminate]) [part=check]{border:none;background-color:currentColor;transform:none;border-radius:1px;margin:0;width:5px;height:5px}:host([disabled]) [part=check],:host([readonly]) [part=check]{color:var(--check-color,#e2e2e2)}:host([disabled]) [part=check]{opacity:.5}:host([disabled][checked]) [part=check]{opacity:.5}:host([disabled]) [part=label]{opacity:.65;color:rgba(194,194,194,.6)}:host([disabled][checked]) [part=check],:host([disabled][indeterminate]) [part=check]{color:#c2c2c2}:host([readonly][checked]) [part=check],:host([readonly][indeterminate]) [part=check]{color:rgba(194,194,194,.5)}:host([disabled]) [part=container],:host([readonly]) [part=container]{color:rgba(194,194,194,.6);border-color:rgba(74,74,82,.6);background-color:rgba(0,0,0,.6)}@media (-ms-high-contrast:none),(pointer:fine){:host(:focus) [part=container]{box-shadow:0 0 0 #f93;border:1px dotted #f93}}');

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

@@ -1,4 +1,4 @@
-import '@refinitiv-ui/elements/lib/icon/themes/solar/pearl';
-import '@refinitiv-ui/elements/lib/tooltip/themes/solar/pearl';
+import '@refinitiv-ui/elements/icon/themes/solar/pearl';
+import '@refinitiv-ui/elements/tooltip/themes/solar/pearl';
 
 elf.customStyles.define('ef-checkbox', ':host{margin:1px 0;vertical-align:middle;display:inline-flex;align-items:center;flex-wrap:nowrap;font-size:inherit;font-weight:inherit;touch-action:manipulation}:host(:focus){outline:0}:host [part=container]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:0;background-color:#fff;transition:box-shadow 150ms,border-color 150ms;box-shadow:inset 0 0 0 rgba(0,0,0,.3);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;border:1px solid #a9afba;height:11px;width:11px}:host [part=check]{display:flex;justify-content:center;align-items:center;box-sizing:border-box;color:var(--check-color,#ee7600);border-width:0 2px 2px 0;width:95%;height:95%}:host [part=label]{cursor:default;margin:0 4px}:host([indeterminate]) [part=check]{border:none;background-color:currentColor;transform:none;border-radius:1px;margin:0;width:5px;height:5px}:host([disabled]) [part=check],:host([readonly]) [part=check]{color:var(--check-color,#acafb5)}:host([disabled]) [part=check]{opacity:.5}:host([disabled][checked]) [part=check]{opacity:.5}:host([disabled]) [part=label]{opacity:.65;color:rgba(72,72,72,.6)}:host([disabled][checked]) [part=check],:host([disabled][indeterminate]) [part=check]{color:#a9afba}:host([readonly][checked]) [part=check],:host([readonly][indeterminate]) [part=check]{color:rgba(169,175,186,.5)}:host([disabled]) [part=container],:host([readonly]) [part=container]{color:rgba(72,72,72,.6);border-color:rgba(169,175,186,.6);background-color:rgba(255,255,255,.6)}@media (-ms-high-contrast:none),(pointer:fine){:host(:focus) [part=container]{box-shadow:0 0 0 #ffb266;border:1px dotted #ffb266}}');

package/lib/clock/index.d.ts

@@ -305,6 +305,11 @@ export declare class Clock extends ResponsiveElement {
      */
     protected render(): TemplateResult;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'ef-clock': Clock;
+    }
+}
 
 declare global {
   interface HTMLElementTagNameMap {

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.d.ts

@@ -107,6 +107,11 @@ export declare class Collapse extends BasicElement {
      */
     protected render(): TemplateResult;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'ef-collapse': Collapse;
+    }
+}
 
 declare global {
   interface HTMLElementTagNameMap {

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/collapse/themes/halo/dark/index.js

@@ -1,5 +1,5 @@
-import '@refinitiv-ui/elements/lib/panel/themes/halo/dark';
-import '@refinitiv-ui/elements/lib/header/themes/halo/dark';
-import '@refinitiv-ui/elements/lib/icon/themes/halo/dark';
+import '@refinitiv-ui/elements/panel/themes/halo/dark';
+import '@refinitiv-ui/elements/header/themes/halo/dark';
+import '@refinitiv-ui/elements/icon/themes/halo/dark';
 
 elf.customStyles.define('ef-collapse', ':host [part=toggle]{transition:.1s;opacity:.5;margin-right:.25em;margin-left:8px;flex-shrink:0;pointer-events:none;opacity:1}:host([expanded]) [part=toggle]{transform:rotate(90deg)}:host [part~=header]{padding:0}:host [part~=header][focused=visible]{background-color:#334bff}:host [part=header-toggle]{touch-action:manipulation;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;outline:0}@-webkit-keyframes expand{from{height:0}to{height:var(--target-height)}}@keyframes expand{from{height:0}to{height:var(--target-height)}}@-webkit-keyframes collapse{from{height:var(--target-height)}to{height:0}}@keyframes collapse{from{height:var(--target-height)}to{height:0}}:host [part=content]{-webkit-animation-duration:.1s;animation-duration:.1s;-webkit-animation-timing-function:ease;animation-timing-function:ease;text-transform:none}:host(:not([expanded])) [part=content]{height:0;-webkit-animation-name:collapse;animation-name:collapse}:host(:not([expanded])) [part=toggle]{transform:rotate(0)}:host([expanded]) [part=content]{-webkit-animation-name:expand;animation-name:expand}:host [part=content] ef-panel{overflow:auto}:host [part=content] ef-panel:not([spacing]){padding:var(--panel-padding)}:host{text-transform:uppercase}:host [part=header]{text-transform:inherit}:host [part=header]:hover,:host [part~=header][focused=visible],:host([expanded]) [part=header]{color:#fff;cursor:pointer;background-color:#404040}:host [part=header]:hover[level="1"],:host [part~=header][focused=visible][level="1"],:host([expanded]) [part=header][level="1"]{background-color:#5a5a5a}:host [part=header]:hover[level="2"],:host [part~=header][focused=visible][level="2"],:host([expanded]) [part=header][level="2"]{background-color:#4d4d4d}:host [part=header]:hover[level="4"],:host [part~=header][focused=visible][level="4"],:host([expanded]) [part=header][level="4"]{background-color:#343434}');

package/lib/collapse/themes/halo/light/index.js

@@ -1,5 +1,5 @@
-import '@refinitiv-ui/elements/lib/panel/themes/halo/light';
-import '@refinitiv-ui/elements/lib/header/themes/halo/light';
-import '@refinitiv-ui/elements/lib/icon/themes/halo/light';
+import '@refinitiv-ui/elements/panel/themes/halo/light';
+import '@refinitiv-ui/elements/header/themes/halo/light';
+import '@refinitiv-ui/elements/icon/themes/halo/light';
 
 elf.customStyles.define('ef-collapse', ':host [part=toggle]{transition:.1s;opacity:.5;margin-right:.25em;margin-left:8px;flex-shrink:0;pointer-events:none;opacity:1}:host([expanded]) [part=toggle]{transform:rotate(90deg)}:host [part~=header]{padding:0}:host [part~=header][focused=visible]{background-color:#334bff}:host [part=header-toggle]{touch-action:manipulation;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;outline:0}@-webkit-keyframes expand{from{height:0}to{height:var(--target-height)}}@keyframes expand{from{height:0}to{height:var(--target-height)}}@-webkit-keyframes collapse{from{height:var(--target-height)}to{height:0}}@keyframes collapse{from{height:var(--target-height)}to{height:0}}:host [part=content]{-webkit-animation-duration:.1s;animation-duration:.1s;-webkit-animation-timing-function:ease;animation-timing-function:ease;text-transform:none}:host(:not([expanded])) [part=content]{height:0;-webkit-animation-name:collapse;animation-name:collapse}:host(:not([expanded])) [part=toggle]{transform:rotate(0)}:host([expanded]) [part=content]{-webkit-animation-name:expand;animation-name:expand}:host [part=content] ef-panel{overflow:auto}:host [part=content] ef-panel:not([spacing]){padding:var(--panel-padding)}:host{text-transform:uppercase}:host [part=header]{text-transform:inherit}:host [part=header]:hover,:host [part~=header][focused=visible],:host([expanded]) [part=header]{color:#0d0d0d;cursor:pointer;background-color:#eaeaea}:host [part=header]:hover[level="1"],:host [part~=header][focused=visible][level="1"],:host([expanded]) [part=header][level="1"]{background-color:#d1d1d1}:host [part=header]:hover[level="2"],:host [part~=header][focused=visible][level="2"],:host([expanded]) [part=header][level="2"]{background-color:#dedede}:host [part=header]:hover[level="4"],:host [part~=header][focused=visible][level="4"],:host([expanded]) [part=header][level="4"]{background-color:#f2f2f2}');

package/lib/collapse/themes/solar/charcoal/index.js

@@ -1,5 +1,5 @@
-import '@refinitiv-ui/elements/lib/panel/themes/solar/charcoal';
-import '@refinitiv-ui/elements/lib/header/themes/solar/charcoal';
-import '@refinitiv-ui/elements/lib/icon/themes/solar/charcoal';
+import '@refinitiv-ui/elements/panel/themes/solar/charcoal';
+import '@refinitiv-ui/elements/header/themes/solar/charcoal';
+import '@refinitiv-ui/elements/icon/themes/solar/charcoal';
 
 elf.customStyles.define('ef-collapse', ':host [part=toggle]{transition:.2s;opacity:.5;margin-right:.25em;margin-left:10px;flex-shrink:0;pointer-events:none}:host([expanded]) [part=toggle]{transform:rotate(90deg)}:host [part~=header]{padding:0}:host [part~=header][focused=visible]{background-color:#4d4d55}:host [part=header-toggle]{touch-action:manipulation;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;outline:0}@-webkit-keyframes expand{from{height:0}to{height:var(--target-height)}}@keyframes expand{from{height:0}to{height:var(--target-height)}}@-webkit-keyframes collapse{from{height:var(--target-height)}to{height:0}}@keyframes collapse{from{height:var(--target-height)}to{height:0}}:host [part=content]{-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-timing-function:ease;animation-timing-function:ease}:host(:not([expanded])) [part=content]{height:0;-webkit-animation-name:collapse;animation-name:collapse}:host(:not([expanded])) [part=toggle]{transform:rotate(0)}:host([expanded]) [part=content]{-webkit-animation-name:expand;animation-name:expand}:host [part=content] ef-panel{overflow:auto}:host [part=content] ef-panel:not([spacing]){padding:var(--panel-padding)}');

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

@@ -1,5 +1,5 @@
-import '@refinitiv-ui/elements/lib/panel/themes/solar/pearl';
-import '@refinitiv-ui/elements/lib/header/themes/solar/pearl';
-import '@refinitiv-ui/elements/lib/icon/themes/solar/pearl';
+import '@refinitiv-ui/elements/panel/themes/solar/pearl';
+import '@refinitiv-ui/elements/header/themes/solar/pearl';
+import '@refinitiv-ui/elements/icon/themes/solar/pearl';
 
 elf.customStyles.define('ef-collapse', ':host [part=toggle]{transition:.2s;opacity:.5;margin-right:.25em;margin-left:10px;flex-shrink:0;pointer-events:none}:host([expanded]) [part=toggle]{transform:rotate(90deg)}:host [part~=header]{padding:0}:host [part~=header][focused=visible]{background-color:#fff}:host [part=header-toggle]{touch-action:manipulation;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;outline:0}@-webkit-keyframes expand{from{height:0}to{height:var(--target-height)}}@keyframes expand{from{height:0}to{height:var(--target-height)}}@-webkit-keyframes collapse{from{height:var(--target-height)}to{height:0}}@keyframes collapse{from{height:var(--target-height)}to{height:0}}:host [part=content]{-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-timing-function:ease;animation-timing-function:ease}:host(:not([expanded])) [part=content]{height:0;-webkit-animation-name:collapse;animation-name:collapse}:host(:not([expanded])) [part=toggle]{transform:rotate(0)}:host([expanded]) [part=content]{-webkit-animation-name:expand;animation-name:expand}:host [part=content] ef-panel{overflow:auto}:host [part=content] ef-panel:not([spacing]){padding:var(--panel-padding)}');

package/lib/color-dialog/elements/color-palettes.d.ts

@@ -36,6 +36,11 @@ export declare class ColorPalettes extends Palettes {
      */
     protected render(): TemplateResult;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'ef-color-palettes': ColorPalettes;
+    }
+}
 
 declare global {
   interface HTMLElementTagNameMap {

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.d.ts

@@ -51,6 +51,11 @@ export declare class GrayscalePalettes extends Palettes {
      */
     protected render(): TemplateResult;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'ef-grayscale-palettes': GrayscalePalettes;
+    }
+}
 
 declare global {
   interface HTMLElementTagNameMap {

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.
@@ -216,6 +216,11 @@ export declare class ColorDialog extends Dialog {
      */
     protected get footerRegion(): TemplateResult;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'ef-color-dialog': ColorDialog;
+    }
+}
 
 declare global {
   interface HTMLElementTagNameMap {