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

package/lib/slider/themes/halo/dark/index.js

@@ -1,3 +1,3 @@
-import '@refinitiv-ui/elements/lib/number-field/themes/halo/dark';
+import '@refinitiv-ui/elements/number-field/themes/halo/dark';
 
 elf.customStyles.define('ef-slider', ':host{touch-action:manipulation;height:24px;margin:1px 0;opacity:.9;opacity:1}:host(:not([disabled]):hover){opacity:1}:host [part=track-wrapper]{height:4px;background:var(--track-color,#333);top:calc((100% - 4px)/ 2)}:host(:not([disabled])) [part=track-fill]{height:inherit;background:var(--thumb-color,#ccc);background-color:var(--thumb-color,#6678ff)}:host([disabled]) [part=thumb],:host([disabled]) [part=thumb]:hover,:host([disabled]) [part=track-fill],:host([disabled]) [part=track-wrapper]::after{background:#333;content:\'\'}:host [part=thumb-container]{height:100%;top:0;margin-left:-4px;width:8px}:host([show-steps]) [part=step-container]{height:inherit}:host([show-steps]:not([disabled])) [part=step]{height:inherit;background-image:linear-gradient(to right,var(--step-color,#6678ff),var(--step-color,#6678ff) 4px,transparent 0,transparent)}:host([show-steps]:not([disabled])) [part=track-wrapper]::after{height:inherit;width:4px;background-color:var(--step-color,#6678ff)}:host [part=pin]{width:26px;height:26px;margin-top:-6px;margin-left:-2px;transform:rotate(-45deg) scale(0) translate(0);transition:transform .1s ease-out;border-radius:50% 50% 50% 0;background-color:var(--pin-color,#ccc);display:none}:host [part=pin-value-marker]{font-family:inherit;font-size:.8em;color:var(--pin-text-color,#fff);line-height:1.25rem;font-weight:400;letter-spacing:.01786em;text-decoration:inherit;text-transform:inherit;transform:rotate(45deg);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host([pin].grabbable) [part=pin]{transform:rotate(-45deg) scale(1) translate(19px,-20px)}:host([pin].grabbable) [part=thumb]{transform:scale(.7);transform:none}:host [part=input]{margin:0;padding:0;width:var(--input-field-width,40px);min-width:40px;text-align:center;height:100%}:host [part=input][name=to],:host [part=input][name=value]{margin-left:16px}:host [part=input][name=from]{margin-right:16px}:host(:not([disabled]):not([readonly]):hover){cursor:pointer}:host [part=thumb]{box-sizing:border-box;transform:scale(.7);background:var(--thumb-color,#ccc);top:calc(4px / 2);border-radius:0;width:8px;height:20px;transform:none;border:1px solid #0d0d0d}:host(:not([disabled]):not([readonly]):not(.grabbable)) [part=thumb]:hover{background-color:var(--thumb-color,#334bff);border-color:var(--thumb-color,#0d0d0d)}:host(.grabbable) [part=thumb]{border-width:2px;transform:scale(1);border:1px solid var(--thumb-color,#0d0d0d);background-color:var(--thumb-color,#0f1e8a);transform:none}');

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

@@ -1,3 +1,3 @@
-import '@refinitiv-ui/elements/lib/number-field/themes/halo/light';
+import '@refinitiv-ui/elements/number-field/themes/halo/light';
 
 elf.customStyles.define('ef-slider', ':host{touch-action:manipulation;height:24px;margin:1px 0;opacity:.9;opacity:1}:host(:not([disabled]):hover){opacity:1}:host [part=track-wrapper]{height:4px;background:var(--track-color,#d9d9d9);top:calc((100% - 4px)/ 2)}:host(:not([disabled])) [part=track-fill]{height:inherit;background:var(--thumb-color,#fafafa);background-color:var(--thumb-color,#334bff)}:host([disabled]) [part=thumb],:host([disabled]) [part=thumb]:hover,:host([disabled]) [part=track-fill],:host([disabled]) [part=track-wrapper]::after{background:#d9d9d9;content:\'\'}:host [part=thumb-container]{height:100%;top:0;margin-left:-4px;width:8px}:host([show-steps]) [part=step-container]{height:inherit}:host([show-steps]:not([disabled])) [part=step]{height:inherit;background-image:linear-gradient(to right,var(--step-color,#334bff),var(--step-color,#334bff) 4px,transparent 0,transparent)}:host([show-steps]:not([disabled])) [part=track-wrapper]::after{height:inherit;width:4px;background-color:var(--step-color,#334bff)}:host [part=pin]{width:26px;height:26px;margin-top:-6px;margin-left:-2px;transform:rotate(-45deg) scale(0) translate(0);transition:transform .1s ease-out;border-radius:50% 50% 50% 0;background-color:var(--pin-color,#fafafa);display:none}:host [part=pin-value-marker]{font-family:inherit;font-size:.8em;color:var(--pin-text-color,#fff);line-height:1.25rem;font-weight:400;letter-spacing:.01786em;text-decoration:inherit;text-transform:inherit;transform:rotate(45deg);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host([pin].grabbable) [part=pin]{transform:rotate(-45deg) scale(1) translate(19px,-20px)}:host([pin].grabbable) [part=thumb]{transform:scale(.7);transform:none}:host [part=input]{margin:0;padding:0;width:var(--input-field-width,40px);min-width:40px;text-align:center;height:100%}:host [part=input][name=to],:host [part=input][name=value]{margin-left:16px}:host [part=input][name=from]{margin-right:16px}:host(:not([disabled]):not([readonly]):hover){cursor:pointer}:host [part=thumb]{box-sizing:border-box;transform:scale(.7);background:var(--thumb-color,#fafafa);top:calc(4px / 2);border-radius:0;width:8px;height:20px;transform:none;border:1px solid #404040}:host([disabled]) [part=thumb]{border-color:#ccc}:host(:not([disabled]):not([readonly]):not(.grabbable)) [part=thumb]:hover{background-color:var(--thumb-color,#334bff);border-color:var(--thumb-color,#334bff)}:host(.grabbable) [part=thumb]{border-width:2px;transform:scale(1);border:1px solid var(--thumb-color,#0f1e8a);background-color:var(--thumb-color,#0f1e8a);transform:none}');

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

@@ -1,3 +1,3 @@
-import '@refinitiv-ui/elements/lib/number-field/themes/solar/charcoal';
+import '@refinitiv-ui/elements/number-field/themes/solar/charcoal';
 
 elf.customStyles.define('ef-slider', ':host{touch-action:manipulation;height:23px;margin:1px 0;opacity:.9}:host(:not([disabled]):hover){opacity:1}:host [part=track-wrapper]{height:3px;background:var(--track-color,#666570)}:host(:not([disabled])) [part=track-fill]{height:inherit;background:var(--thumb-color,#f93)}:host([disabled]) [part=thumb],:host([disabled]) [part=thumb]:hover,:host([disabled]) [part=track-fill],:host([disabled]) [part=track-wrapper]::after{background:#666570;content:\'\'}:host [part=thumb-container]{width:22px;height:100%;margin-left:-9.5px}:host [part=thumb]{top:calc((100% - 20px + 3px)/ 2);height:20px;width:20px;box-sizing:border-box;border:3px solid transparent;border-radius:100%;transform:scale(.7);background:var(--thumb-color,#f93)}:host(.grabbable) [part=thumb]{border-width:2px;transform:scale(1)}:host([show-steps]) [part=step-container]{height:inherit}:host([show-steps]:not([disabled])) [part=step]{height:inherit;background-image:linear-gradient(to right,var(--step-color,#f93),var(--step-color,#f93) 3px,transparent 0,transparent)}:host([show-steps]:not([disabled])) [part=track-wrapper]::after{height:inherit;width:3px;background-color:var(--step-color,#f93)}:host [part=pin]{width:26px;height:26px;margin-top:-6px;margin-left:-2px;transform:rotate(-45deg) scale(0) translate(0);transition:transform .1s ease-out;border-radius:50% 50% 50% 0;background-color:var(--pin-color,#f93)}:host [part=pin-value-marker]{font-family:inherit;font-size:.8em;color:var(--pin-text-color,#fff);line-height:1.25rem;font-weight:400;letter-spacing:.01786em;text-decoration:inherit;text-transform:inherit;transform:rotate(45deg);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host([pin].grabbable) [part=pin]{transform:rotate(-45deg) scale(1) translate(19px,-20px)}:host([pin].grabbable) [part=thumb]{transform:scale(.7)}:host [part=input]{margin:0;padding:0;width:var(--input-field-width,40px);min-width:40px;text-align:center;height:100%}:host [part=input][name=to],:host [part=input][name=value]{margin-left:16px}:host [part=input][name=from]{margin-right:16px}');

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

@@ -1,3 +1,3 @@
-import '@refinitiv-ui/elements/lib/number-field/themes/solar/pearl';
+import '@refinitiv-ui/elements/number-field/themes/solar/pearl';
 
 elf.customStyles.define('ef-slider', ':host{touch-action:manipulation;height:23px;margin:1px 0;opacity:.9}:host(:not([disabled]):hover){opacity:1}:host [part=track-wrapper]{height:3px;background:var(--track-color,#d5d8db)}:host(:not([disabled])) [part=track-fill]{height:inherit;background:var(--thumb-color,#f93)}:host([disabled]) [part=thumb],:host([disabled]) [part=thumb]:hover,:host([disabled]) [part=track-fill],:host([disabled]) [part=track-wrapper]::after{background:#d5d8db;content:\'\'}:host [part=thumb-container]{width:22px;height:100%;margin-left:-9.5px}:host [part=thumb]{top:calc((100% - 20px + 3px)/ 2);height:20px;width:20px;box-sizing:border-box;border:3px solid transparent;border-radius:100%;transform:scale(.7);background:var(--thumb-color,#f93)}:host(.grabbable) [part=thumb]{border-width:2px;transform:scale(1)}:host([show-steps]) [part=step-container]{height:inherit}:host([show-steps]:not([disabled])) [part=step]{height:inherit;background-image:linear-gradient(to right,var(--step-color,#f93),var(--step-color,#f93) 3px,transparent 0,transparent)}:host([show-steps]:not([disabled])) [part=track-wrapper]::after{height:inherit;width:3px;background-color:var(--step-color,#f93)}:host [part=pin]{width:26px;height:26px;margin-top:-6px;margin-left:-2px;transform:rotate(-45deg) scale(0) translate(0);transition:transform .1s ease-out;border-radius:50% 50% 50% 0;background-color:var(--pin-color,#f93)}:host [part=pin-value-marker]{font-family:inherit;font-size:.8em;color:var(--pin-text-color,#fff);line-height:1.25rem;font-weight:400;letter-spacing:.01786em;text-decoration:inherit;text-transform:inherit;transform:rotate(45deg);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host([pin].grabbable) [part=pin]{transform:rotate(-45deg) scale(1) translate(19px,-20px)}:host([pin].grabbable) [part=thumb]{transform:scale(.7)}:host [part=input]{margin:0;padding:0;width:var(--input-field-width,40px);min-width:40px;text-align:center;height:100%}:host [part=input][name=to],:host [part=input][name=value]{margin-left:16px}:host [part=input][name=from]{margin-right:16px}');

package/lib/slider/utils.d.ts

@@ -0,0 +1,35 @@
+/**
+  * Set prevent default action and stop bubbles event
+  * @param event event mouse or touch
+  * @returns {void}
+  */
+declare const preventDefault: (event: Event) => Event;
+/**
+   * Return value that never exceed the maximum boundary
+   * @param value value for check clamp
+   * @param min max value
+   * @param max min value
+   * @returns number between two numbers
+   */
+declare const clamp: (value: number, min: number, max: number) => string;
+/**
+ * Check if number is a decimal number
+ * @param value value for checking
+ * @returns true if value is decimal
+ */
+declare const isDecimalNumber: (value: number) => boolean;
+/**
+ * Count decimal number
+ * @param value value for checking
+ * @returns number of decimal points
+ */
+declare const countDecimalPlace: (value: string | number) => number;
+/**
+ * Check if the value is a valid number and convert to string
+ * If not, return fallback value instead
+ * @param value value for checking
+ * @param fallbackValue fallback value when value is not number;
+ * @returns string of valid number
+ */
+declare const validateNumber: (value: number, fallbackValue: number | string) => string;
+export { clamp, preventDefault, validateNumber, isDecimalNumber, countDecimalPlace };

package/lib/slider/utils.js

@@ -0,0 +1,54 @@
+/**
+  * Set prevent default action and stop bubbles event
+  * @param event event mouse or touch
+  * @returns {void}
+  */
+const preventDefault = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    return event;
+};
+/**
+   * Return value that never exceed the maximum boundary
+   * @param value value for check clamp
+   * @param min max value
+   * @param max min value
+   * @returns number between two numbers
+   */
+const clamp = function (value, min, max) {
+    return Math.max(min, Math.min(value, max)).toString();
+};
+/**
+ * Check if number is a decimal number
+ * @param value value for checking
+ * @returns true if value is decimal
+ */
+const isDecimalNumber = (value) => {
+    return value % 1 !== 0;
+};
+/**
+ * Count decimal number
+ * @param value value for checking
+ * @returns number of decimal points
+ */
+const countDecimalPlace = (value) => {
+    return Number(value).toString().split('.')[1]?.length | 0;
+};
+/**
+ * Check if the value is a valid number and convert to string
+ * If not, return fallback value instead
+ * @param value value for checking
+ * @param fallbackValue fallback value when value is not number;
+ * @returns string of valid number
+ */
+const validateNumber = (value, fallbackValue) => {
+    let newValue;
+    if (!isNaN(value) && !isNaN(Number(value)) && typeof value === 'number') {
+        newValue = value.toString();
+    }
+    else {
+        newValue = fallbackValue;
+    }
+    return newValue.toString();
+};
+export { clamp, preventDefault, validateNumber, isDecimalNumber, countDecimalPlace };

package/lib/sparkline/index.d.ts

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

package/lib/sparkline/index.js

@@ -1,10 +1,10 @@
 import { __decorate } from "tslib";
 import { css, ResponsiveElement, 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 { 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 } from '@refinitiv-ui/utils/lib/color.js';
+import { color } from '@refinitiv-ui/utils/color.js';
 import '@refinitiv-ui/browser-sparkline';
 let Sparkline = class Sparkline extends ResponsiveElement {
     constructor() {
@@ -35,16 +35,15 @@ let Sparkline = class Sparkline extends ResponsiveElement {
      * Get configuration for theme
      */
     get defaultThemeConfig() {
-        var _a, _b, _c, _d, _e;
         return {
             width: this.width,
             height: this.height,
-            lineColor: (_a = color(this.getComputedVariable('--line-color', '#ff9933'))) === null || _a === void 0 ? void 0 : _a.formatHex(),
+            lineColor: color(this.getComputedVariable('--line-color', '#ff9933'))?.formatHex(),
             lineWidth: parseInt(this.getComputedVariable('--line-width', '2px'), 10),
-            referenceLineColor: (_b = color(this.getComputedVariable('--reference-line-color', 'rgba(120, 120, 130, 0.5)'))) === null || _b === void 0 ? void 0 : _b.formatHex(),
-            previousLineColor: (_c = color(this.getComputedVariable('--previous-line-color', '#bfbfbf'))) === null || _c === void 0 ? void 0 : _c.formatHex(),
-            upperLineColor: (_d = color(this.getComputedVariable('--upper-line-color', '#309054'))) === null || _d === void 0 ? void 0 : _d.formatHex(),
-            lowerLineColor: (_e = color(this.getComputedVariable('--lower-line-color', '#d94255'))) === null || _e === void 0 ? void 0 : _e.formatHex(),
+            referenceLineColor: color(this.getComputedVariable('--reference-line-color', 'rgba(120, 120, 130, 0.5)'))?.formatHex(),
+            previousLineColor: color(this.getComputedVariable('--previous-line-color', '#bfbfbf'))?.formatHex(),
+            upperLineColor: color(this.getComputedVariable('--upper-line-color', '#309054'))?.formatHex(),
+            lowerLineColor: color(this.getComputedVariable('--lower-line-color', '#d94255'))?.formatHex(),
             fillColorStyle: this.getComputedVariable('--fill-color-style', 'gradient')
         };
     }

package/lib/swing-gauge/index.d.ts

@@ -280,6 +280,11 @@ export declare class SwingGauge extends ResponsiveElement {
     private get secondaryLegendTemplate();
     render(): TemplateResult;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'ef-swing-gauge': SwingGauge;
+    }
+}
 
 declare global {
   interface HTMLElementTagNameMap {

package/lib/swing-gauge/index.js

@@ -1,10 +1,10 @@
 import { __decorate } from "tslib";
 import { ResponsiveElement, css, html, WarningNotice } from '@refinitiv-ui/core';
-import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
-import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
-import { query } from '@refinitiv-ui/core/lib/decorators/query.js';
-import { state } from '@refinitiv-ui/core/lib/decorators/state.js';
-import { styleMap } from '@refinitiv-ui/core/lib/directives/style-map.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 { styleMap } from '@refinitiv-ui/core/directives/style-map.js';
 import { VERSION } from '../version.js';
 import '../canvas/index.js';
 import '../label/index.js';
@@ -441,7 +441,7 @@ let SwingGauge = class SwingGauge extends ResponsiveElement {
      * @returns number without CSS unit
      */
     getValueFromStyle(styleValue) {
-        return Number(styleValue === null || styleValue === void 0 ? void 0 : styleValue.replace('px', ''));
+        return Number(styleValue?.replace('px', ''));
     }
     /**
      * Compute and update style of containers and labels
@@ -453,8 +453,14 @@ let SwingGauge = class SwingGauge extends ResponsiveElement {
         }
         const primaryPosition = this.getPositionStyle(Segment.PRIMARY, this.primaryLineRadian, this.linePointerOffset, -this.lineLength);
         const secondaryPosition = this.getPositionStyle(Segment.SECONDARY, this.secondaryLineRadian, this.linePointerOffset, 0);
-        this.primaryContainerStyle = Object.assign({ width: `${this.lineLength}px` }, primaryPosition);
-        this.secondaryContainerStyle = Object.assign({ width: `${this.lineLength}px` }, secondaryPosition);
+        this.primaryContainerStyle = {
+            width: `${this.lineLength}px`,
+            ...primaryPosition
+        };
+        this.secondaryContainerStyle = {
+            width: `${this.lineLength}px`,
+            ...secondaryPosition
+        };
         // position container over line pointer
         if (this.primaryPercentage < GAUGE_PERCENTAGE_THRESHOLD) {
             delete this.primaryContainerStyle.top;

package/lib/swing-gauge/themes/halo/dark/index.js

@@ -1,3 +1,3 @@
-import '@refinitiv-ui/elements/lib/canvas/themes/halo/dark';
+import '@refinitiv-ui/elements/canvas/themes/halo/dark';
 
 elf.customStyles.define('ef-swing-gauge', ':host{--primary-color:#6678FF;--secondary-color:#FFFFFF;--border-color:#000000;--center-line:solid;--center-line-color:#000000;--center-line-opacity:0.6;--secondary-color:#0D0D0D;--center-line-color:#FFFFFF;--border-color:#6678FF;--center-line:dotted}:host [part=legend-container-outer]{padding-bottom:30px}:host [part=primary-legend],:host [part=secondary-legend]{margin-top:4px;align-items:center}:host [part=primary-legend-symbol],:host [part=secondary-legend-symbol]{border-radius:50%;margin-right:10px;align-self:baseline;margin-top:1px;border:1px solid var(--border-color,#6678ff);height:10px;width:10px}:host [part=primary-legend-symbol]{background-color:var(--primary-color)}:host [part=secondary-legend-symbol]{background-color:var(--secondary-color)}:host [part=primary-value],:host [part=secondary-value]{font-weight:500}');

package/lib/swing-gauge/themes/halo/light/index.js

@@ -1,3 +1,3 @@
-import '@refinitiv-ui/elements/lib/canvas/themes/halo/light';
+import '@refinitiv-ui/elements/canvas/themes/halo/light';
 
 elf.customStyles.define('ef-swing-gauge', ':host{--primary-color:#334BFF;--secondary-color:#0D0D0D;--border-color:#000000;--center-line:solid;--center-line-color:#000000;--center-line-opacity:0.6;--secondary-color:#0D0D0D;--center-line-color:#FFFFFF;--border-color:#334BFF;--center-line:dotted}:host [part=legend-container-outer]{padding-bottom:30px}:host [part=primary-legend],:host [part=secondary-legend]{margin-top:4px;align-items:center}:host [part=primary-legend-symbol],:host [part=secondary-legend-symbol]{border-radius:50%;margin-right:10px;align-self:baseline;margin-top:1px;height:12px;width:12px}:host [part=primary-legend-symbol]{background-color:var(--primary-color)}:host [part=secondary-legend-symbol]{background-color:var(--secondary-color)}:host [part=primary-value],:host [part=secondary-value]{font-weight:500}');

package/lib/swing-gauge/themes/solar/charcoal/index.js

@@ -1,3 +1,3 @@
-import '@refinitiv-ui/elements/lib/canvas/themes/solar/charcoal';
+import '@refinitiv-ui/elements/canvas/themes/solar/charcoal';
 
 elf.customStyles.define('ef-swing-gauge', ':host{--primary-color:#FF9933;--secondary-color:#3780BF;--border-color:#000000;--center-line:solid;--center-line-color:#000000;--center-line-opacity:0.6;--primary-color:#2EB4C9;--secondary-color:#C93C4B;--border-color:#000000;--center-line:solid;--center-line-color:#000000;--center-line-opacity:0.6}:host [part=legend-container-outer]{padding-bottom:30px}:host [part=primary-legend],:host [part=secondary-legend]{margin-top:4px;align-items:center}:host [part=primary-legend-symbol],:host [part=secondary-legend-symbol]{height:12px;width:12px;border-radius:50%;margin-right:10px;align-self:baseline;margin-top:1px}:host [part=primary-legend-symbol]{background-color:var(--primary-color)}:host [part=secondary-legend-symbol]{background-color:var(--secondary-color)}:host [part=primary-value],:host [part=secondary-value]{font-weight:500}');

package/lib/swing-gauge/themes/solar/pearl/index.js

@@ -1,3 +1,3 @@
-import '@refinitiv-ui/elements/lib/canvas/themes/solar/pearl';
+import '@refinitiv-ui/elements/canvas/themes/solar/pearl';
 
 elf.customStyles.define('ef-swing-gauge', ':host{--primary-color:#EE7600;--secondary-color:#3780BF;--border-color:#000000;--center-line:solid;--center-line-color:#000000;--center-line-opacity:0.6;--primary-color:#2EB4C9;--secondary-color:#C93C4B;--border-color:#000000;--center-line:solid;--center-line-color:#000000;--center-line-opacity:0.6}:host [part=legend-container-outer]{padding-bottom:30px}:host [part=primary-legend],:host [part=secondary-legend]{margin-top:4px;align-items:center}:host [part=primary-legend-symbol],:host [part=secondary-legend-symbol]{height:12px;width:12px;border-radius:50%;margin-right:10px;align-self:baseline;margin-top:1px}:host [part=primary-legend-symbol]{background-color:var(--primary-color)}:host [part=secondary-legend-symbol]{background-color:var(--secondary-color)}:host [part=primary-value],:host [part=secondary-value]{font-weight:500}');

package/lib/tab/index.d.ts

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

package/lib/tab/index.js

@@ -1,9 +1,9 @@
 import { __decorate } from "tslib";
 import { html, css, ControlElement } 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 { isSlotEmpty } from '@refinitiv-ui/utils/lib/is-slot-empty.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 { isSlotEmpty } from '@refinitiv-ui/utils/is-slot-empty.js';
 import { VERSION } from '../version.js';
 import '../icon/index.js';
 import '../label/index.js';

package/lib/tab/themes/halo/dark/index.js

@@ -1,4 +1,4 @@
-import '@refinitiv-ui/elements/lib/icon/themes/halo/dark';
-import '@refinitiv-ui/elements/lib/label/themes/halo/dark';
+import '@refinitiv-ui/elements/icon/themes/halo/dark';
+import '@refinitiv-ui/elements/label/themes/halo/dark';
 
 elf.customStyles.define('ef-tab', ':host{cursor:pointer;background-color:#404040;color:#ccc;height:36px;padding:9px 12px;outline:0;font-size:12rem;font-weight:500;transition:120ms;position:relative;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;align-items:center;justify-content:center;touch-action:manipulation}:host [part=icon]{min-width:1em;font-size:1.5em}:host [part=label-container]{display:flex;align-items:flex-start;flex-direction:column;width:100%;min-width:0}:host(:not([sub-label])) [part=label-container]{align-items:center}:host([icon]) [part=label-container]{padding-left:.3em}:host [part=sub-label]{font-weight:400;font-size:.875em}:host(:not([active]):not(:active):not(:hover)) [part=sub-label]{opacity:.7}:host([sub-label]){height:46px}:host([sub-label]) [part=icon]{font-size:1.8em}:host([sub-label]) [part=close]{font-size:1.25em}:host([sub-label][clears]){padding-right:2.5em}:host([line-clamp="2"]),:host([line-clamp="3"]){height:46px}:host([icon][sub-label]) [part=label-container]{padding-left:.5em}:host([clears]){padding-right:2em}:host [part=close-container]{position:absolute;top:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center}:host [part=close]{margin-right:.5em;min-width:1em;font-size:1em}:host([clears-on-hover]) [part=close]{color:#fff}:host([clears-on-hover]) [part=close-container]{width:2em;opacity:0;transition:120ms;background:#334bff;box-shadow:-1em 0 .75em -.5em #334bff}:host([active]){color:#fff;background-color:#334bff}:host([active]:hover){background-color:#4158ff}:host([active]:hover[clears-on-hover]) [part=close-container]{background-color:#4158ff;box-shadow:-1em 0 .75em -.5em #4158ff}:host([active]:active){background-color:#0f1e8a}:host([active]:active[clears-on-hover]) [part=close-container]{background-color:#0f1e8a;box-shadow:-1em 0 .75em -.5em #0f1e8a}:host([active][disabled]){color:rgba(255,255,255,.5);background-color:rgba(51,75,255,.5)}:host([disabled]){pointer-events:none;color:rgba(204,204,204,.5);background-color:rgba(64,64,64,.5)}:host(:focus:not([focused])),:host([focused=visible]){box-shadow:none;background-color:#4158ff}:host(:focus:not([focused]):not([active]):not(:hover)),:host([focused=visible]:not([active]):not(:hover)){color:#6678ff;background-color:#404040}:host(:hover){color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.8);background-color:#334bff}:host(:hover[clears-on-hover]) [part=close-container]{opacity:1}:host(:active){color:#fff;background-color:#0f1e8a}:host(:active[clears-on-hover]) [part=close-container]{background-color:#0f1e8a;box-shadow:-1em 0 .75em -.5em #0f1e8a}:host([level="1"]){border-right:1px solid #0d0d0d}:host([level="2"]:not(:last-child)){border-right:none}:host([level="2"]:not(:last-child)) [part=label-container]::after{content:\'\';position:absolute;margin:auto;width:1px;background:#404040;height:70%;right:0;top:0;bottom:0;z-index:1}:host([level="2"]:not(:active):not([active]):not(:hover)){background-color:#262626}:host([level="2"][active]:not(:active):not(:hover)){color:#6678ff;background-color:#0d0d0d}:host([level="2"][active]:focus:not([focused])),:host([level="2"][focused=visible]:not(:active):not(:hover)){color:#6678ff}:host([level="3"]){border-bottom:2px solid transparent;color:#ccc;background-color:#0d0d0d}:host([level="3"][clears-on-hover]) [part=close-container]{background:#0d0d0d;box-shadow:-1em 0 .75em -.5em #0d0d0d}:host([level="3"]:focus:not([focused])),:host([level="3"][focused=visible]){color:#fff;background-color:#262626}:host([level="3"]:active),:host([level="3"]:hover),:host([level="3"][active]){color:#fff;background-color:#0d0d0d;border-color:#334bff}:host([level="3"]:active) [part=close-container],:host([level="3"]:hover) [part=close-container],:host([level="3"][active]) [part=close-container]{background:#0d0d0d;box-shadow:-1em 0 .75em -.5em #0d0d0d}:host([level="3"]:active) [part=close],:host([level="3"]:hover) [part=close],:host([level="3"][active]) [part=close]{color:#fff}:host([level="3"]:active){border-color:#0f1e8a}');

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

@@ -1,4 +1,4 @@
-import '@refinitiv-ui/elements/lib/icon/themes/halo/light';
-import '@refinitiv-ui/elements/lib/label/themes/halo/light';
+import '@refinitiv-ui/elements/icon/themes/halo/light';
+import '@refinitiv-ui/elements/label/themes/halo/light';
 
 elf.customStyles.define('ef-tab', ':host{cursor:pointer;background-color:#e6e6e6;color:#0d0d0d;height:36px;padding:9px 12px;outline:0;font-size:12rem;font-weight:500;transition:120ms;position:relative;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;align-items:center;justify-content:center;touch-action:manipulation}:host [part=icon]{min-width:1em;font-size:1.5em}:host [part=label-container]{display:flex;align-items:flex-start;flex-direction:column;width:100%;min-width:0}:host(:not([sub-label])) [part=label-container]{align-items:center}:host([icon]) [part=label-container]{padding-left:.3em}:host [part=sub-label]{font-weight:400;font-size:.875em}:host(:not([active]):not(:active):not(:hover)) [part=sub-label]{opacity:.7}:host([sub-label]){height:46px}:host([sub-label]) [part=icon]{font-size:1.8em}:host([sub-label]) [part=close]{font-size:1.25em}:host([sub-label][clears]){padding-right:2.5em}:host([line-clamp="2"]),:host([line-clamp="3"]){height:46px}:host([icon][sub-label]) [part=label-container]{padding-left:.5em}:host([clears]){padding-right:2em}:host [part=close-container]{position:absolute;top:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center}:host [part=close]{margin-right:.5em;min-width:1em;font-size:1em}:host([clears-on-hover]) [part=close]{color:#fff}:host([clears-on-hover]) [part=close-container]{width:2em;opacity:0;transition:120ms;background:#334bff;box-shadow:-1em 0 .75em -.5em #334bff}:host([active]){color:#fff;background-color:#334bff}:host([active]:hover){background-color:#4158ff}:host([active]:hover[clears-on-hover]) [part=close-container]{background-color:#4158ff;box-shadow:-1em 0 .75em -.5em #4158ff}:host([active]:active){background-color:#0f1e8a}:host([active]:active[clears-on-hover]) [part=close-container]{background-color:#0f1e8a;box-shadow:-1em 0 .75em -.5em #0f1e8a}:host([active][disabled]){color:rgba(255,255,255,.5);background-color:rgba(51,75,255,.5)}:host([disabled]){pointer-events:none;color:rgba(13,13,13,.5);background-color:rgba(230,230,230,.5)}:host(:focus:not([focused])),:host([focused=visible]){box-shadow:none;background-color:#4158ff}:host(:focus:not([focused]):not([active]):not(:hover)),:host([focused=visible]:not([active]):not(:hover)){color:#6678ff;background-color:#e6e6e6}:host(:hover){color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.55);background-color:#334bff}:host(:hover[clears-on-hover]) [part=close-container]{opacity:1}:host(:active){color:#fff;background-color:#0f1e8a}:host(:active[clears-on-hover]) [part=close-container]{background-color:#0f1e8a;box-shadow:-1em 0 .75em -.5em #0f1e8a}:host([level="1"]){border-right:1px solid #fff}:host([level="2"]:not(:last-child)){border-right:none}:host([level="2"]:not(:last-child)) [part=label-container]::after{content:\'\';position:absolute;margin:auto;width:1px;background:#d9d9d9;height:70%;right:0;top:0;bottom:0;z-index:1}:host([level="2"]:not(:active):not([active]):not(:hover)){background-color:#f2f2f2}:host([level="2"][active]:not(:active):not(:hover)){color:#334bff;background-color:#fff}:host([level="2"][active]:focus:not([focused])),:host([level="2"][focused=visible]:not(:active):not(:hover)){color:#6678ff}:host([level="3"]){border-bottom:2px solid transparent;color:#404040;background-color:#fff}:host([level="3"][clears-on-hover]) [part=close-container]{background:#fff;box-shadow:-1em 0 .75em -.5em #fff}:host([level="3"]:focus:not([focused])),:host([level="3"][focused=visible]){color:#0d0d0d;background-color:#f2f2f2}:host([level="3"]:active),:host([level="3"]:hover),:host([level="3"][active]){color:#0d0d0d;background-color:#fff;border-color:#334bff}:host([level="3"]:active) [part=close-container],:host([level="3"]:hover) [part=close-container],:host([level="3"][active]) [part=close-container]{background:#fff;box-shadow:-1em 0 .75em -.5em #fff}:host([level="3"]:active) [part=close],:host([level="3"]:hover) [part=close],:host([level="3"][active]) [part=close]{color:#0d0d0d}:host([level="3"]:active){border-color:#0f1e8a}');

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

@@ -1,4 +1,4 @@
-import '@refinitiv-ui/elements/lib/icon/themes/solar/charcoal';
-import '@refinitiv-ui/elements/lib/label/themes/solar/charcoal';
+import '@refinitiv-ui/elements/icon/themes/solar/charcoal';
+import '@refinitiv-ui/elements/label/themes/solar/charcoal';
 
 elf.customStyles.define('ef-tab', ':host{cursor:pointer;background-color:#3c3c42;color:#c2c2c2;height:23px;padding:7px 15px;outline:0;font-size:13rem;font-weight:500;transition:70ms;position:relative;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;align-items:center;justify-content:center;touch-action:manipulation;border:1px solid #000;border-left:none}:host [part=label-container]{display:flex;align-items:flex-start;flex-direction:column;width:100%;min-width:0}:host(:not([sub-label])) [part=label-container]{align-items:center}:host([icon]) [part=label-container]{padding-left:.3em}:host [part=sub-label]{font-weight:400;font-size:.875em}:host(:not([active]):not(:active):not(:hover)) [part=sub-label]{opacity:.7}:host([sub-label]){height:33px}:host([sub-label]) [part=close]{font-size:1.25em}:host([sub-label][clears]){padding-right:2.5em}:host([line-clamp="2"]),:host([line-clamp="3"]){height:33px}:host([icon][sub-label]) [part=label-container]{padding-left:.5em}:host([clears]){padding-right:2em}:host [part=close-container]{position:absolute;top:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center}:host [part=close]{margin-right:.5em;min-width:1em;font-size:1em}:host([clears-on-hover]) [part=close]{color:#e2e2e2}:host([clears-on-hover]) [part=close-container]{width:2em;opacity:0;transition:70ms;background:#4a4a4f;box-shadow:-1em 0 .75em -.5em #4a4a4f}:host([active]){color:#0a0a0a;background-color:#f93}:host([active]:hover[clears-on-hover]) [part=close-container]{background-color:#ffa041;box-shadow:-1em 0 .75em -.5em #ffa041}:host([active]:active){background-color:#ed8e2f}:host([active]:active[clears-on-hover]) [part=close-container]{background-color:#ed8e2f;box-shadow:-1em 0 .75em -.5em #ed8e2f}:host([active][disabled]){background-color:#ffad5c;color:rgba(10,10,10,.7)}:host([disabled]){pointer-events:none;color:#c2c2c2;background-color:#636368}:host(:focus:not([focused])),:host([focused=visible]){box-shadow:none;background-color:#ffa041}:host(:focus:not([focused]):not([active]):not(:hover)),:host([focused=visible]:not([active]):not(:hover)){color:#e2e2e2;background-color:#3c3c42}:host(:hover){color:#e2e2e2;box-shadow:0 0 0 0 rgba(0,0,0,.9);background-color:#4a4a4f}:host(:hover[clears-on-hover]) [part=close-container]{opacity:1}:host(:active){color:#c2c2c2;background-color:#38383d}:host(:active[clears-on-hover]) [part=close-container]{background-color:#38383d;box-shadow:-1em 0 .75em -.5em #38383d}:host [part=icon]{min-width:1em;font-size:1em}:host([sub-label]) [part=icon]{font-size:1.2em}:host([active]:hover){color:#0a0a0a;background-color:#ffb366}');

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

@@ -1,4 +1,4 @@
-import '@refinitiv-ui/elements/lib/icon/themes/solar/pearl';
-import '@refinitiv-ui/elements/lib/label/themes/solar/pearl';
+import '@refinitiv-ui/elements/icon/themes/solar/pearl';
+import '@refinitiv-ui/elements/label/themes/solar/pearl';
 
 elf.customStyles.define('ef-tab', ':host{cursor:pointer;background-color:#fafbfc;color:#505050;height:23px;padding:7px 15px;outline:0;font-size:13rem;font-weight:500;transition:70ms;position:relative;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;align-items:center;justify-content:center;touch-action:manipulation;border:1px solid #a9afba;border-left:none}:host [part=label-container]{display:flex;align-items:flex-start;flex-direction:column;width:100%;min-width:0}:host(:not([sub-label])) [part=label-container]{align-items:center}:host([icon]) [part=label-container]{padding-left:.3em}:host [part=sub-label]{font-weight:400;font-size:.875em}:host(:not([active]):not(:active):not(:hover)) [part=sub-label]{opacity:.7}:host([sub-label]){height:33px}:host([sub-label]) [part=close]{font-size:1.25em}:host([sub-label][clears]){padding-right:2.5em}:host([line-clamp="2"]),:host([line-clamp="3"]){height:33px}:host([icon][sub-label]) [part=label-container]{padding-left:.5em}:host([clears]){padding-right:2em}:host [part=close-container]{position:absolute;top:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center}:host [part=close]{margin-right:.5em;min-width:1em;font-size:1em}:host([clears-on-hover]) [part=close]{color:#1d1d1d}:host([clears-on-hover]) [part=close-container]{width:2em;opacity:0;transition:70ms;background:#fafbfc;box-shadow:-1em 0 .75em -.5em #fafbfc}:host([active]){color:#505050;background-color:#ffb266}:host([active]:hover[clears-on-hover]) [part=close-container]{background-color:#ffb771;box-shadow:-1em 0 .75em -.5em #ffb771}:host([active]:active){background-color:#eda65f}:host([active]:active[clears-on-hover]) [part=close-container]{background-color:#eda65f;box-shadow:-1em 0 .75em -.5em #eda65f}:host([active][disabled]){color:#a8896a;background-color:#ffc185}:host([disabled]){pointer-events:none;color:#505050;background-color:#fbfcfd}:host(:focus:not([focused])),:host([focused=visible]){box-shadow:none;background-color:#ffb771}:host(:focus:not([focused]):not([active]):not(:hover)),:host([focused=visible]:not([active]):not(:hover)){color:#1d1d1d;background-color:#fafbfc}:host(:hover){color:#1d1d1d;box-shadow:0 0 0 0 rgba(0,0,0,.6);background-color:#fafbfc}:host(:hover[clears-on-hover]) [part=close-container]{opacity:1}:host(:active){color:#505050;background-color:#e8e9ea}:host(:active[clears-on-hover]) [part=close-container]{background-color:#e8e9ea;box-shadow:-1em 0 .75em -.5em #e8e9ea}:host [part=icon]{min-width:1em;font-size:1em}:host([sub-label]) [part=icon]{font-size:1.2em}:host([active]:hover){color:#505050;background-color:#fc9}');

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

@@ -182,6 +182,11 @@ export declare class TabBar extends ResponsiveElement {
      */
     protected render(): TemplateResult;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'ef-tab-bar': TabBar;
+    }
+}
 
 declare global {
   interface HTMLElementTagNameMap {

package/lib/tab-bar/index.js

@@ -1,8 +1,8 @@
 import { __decorate } from "tslib";
 import { html, css, 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 { 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 { tweenAnimate } from './helpers/animate.js';
 import { Tab } from '../tab/index.js';
@@ -229,7 +229,7 @@ let TabBar = class TabBar extends ResponsiveElement {
      */
     setLevel() {
         const tabList = this.getTabElements(); // get all tab elements include disabled tab
-        tabList === null || tabList === void 0 ? void 0 : tabList.forEach((tab) => {
+        tabList?.forEach((tab) => {
             tab.level = this.level;
         });
     }
@@ -391,11 +391,11 @@ let TabBar = class TabBar extends ResponsiveElement {
      */
     render() {
         return html `
-      ${!this.vertical ? html `<ef-button tabIndex="-1" icon="left" part="left-btn" @tap=${this.handleScrollLeft}></ef-button>` : null}
+      ${!this.vertical ? html `<ef-button tabIndex="-1" aria-hidden="true" icon="left" part="left-btn" @tap=${this.handleScrollLeft}></ef-button>` : null}
         <div part="content">
           <slot @slotchange=${this.onSlotChange}></slot>
         </div>
-      ${!this.vertical ? html `<ef-button tabIndex="-1" icon="right" part="right-btn" @tap=${this.handleScrollRight}></ef-button>` : null}
+      ${!this.vertical ? html `<ef-button tabIndex="-1" aria-hidden="true" icon="right" part="right-btn" @tap=${this.handleScrollRight}></ef-button>` : null}
     `;
     }
 };

package/lib/tab-bar/themes/halo/dark/index.js

@@ -1,4 +1,4 @@
-import '@refinitiv-ui/elements/lib/tab/themes/halo/dark';
-import '@refinitiv-ui/elements/lib/button/themes/halo/dark';
+import '@refinitiv-ui/elements/tab/themes/halo/dark';
+import '@refinitiv-ui/elements/button/themes/halo/dark';
 
 elf.customStyles.define('ef-tab-bar', ':host{position:relative;background-color:#1a1a1a}:host [part=content]{display:flex;overflow:hidden}:host [part=left-btn],:host [part=right-btn]{display:none;position:absolute;height:auto;margin:auto;z-index:2;top:0;bottom:0;background-color:#404040;width:36px;border:none}:host [part=left-btn]:hover,:host [part=right-btn]:hover{background-color:#334bff}:host [part=left-btn]:active,:host [part=right-btn]:active{background-color:#0f1e8a}:host [part=left-btn]:focus:not([focused]),:host [part=left-btn][focused=visible],:host [part=right-btn]:focus:not([focused]),:host [part=right-btn][focused=visible]{background-color:#4158ff}:host [part=left-btn]:focus:not([focused]):not([active]):not(:hover),:host [part=left-btn][focused=visible]:not([active]):not(:hover),:host [part=right-btn]:focus:not([focused]):not([active]):not(:hover),:host [part=right-btn][focused=visible]:not([active]):not(:hover){color:#6678ff;background-color:#404040}:host [part=left-btn]{left:0}:host [part=right-btn]{right:0}:host([vertical]){width:180px;flex-shrink:0}:host([vertical]) [part=content]{flex-direction:column}:host([vertical]) [part=content] ::slotted(ef-tab){justify-content:flex-start;border-bottom:1px solid #404040}:host [part=left-btn]::after,:host [part=right-btn]::after{content:\'\';position:absolute;margin:auto;width:1px;background:#404040;height:70%;top:0;bottom:0}:host([level="1"]) [part=left-btn]::after,:host([level="1"]) [part=right-btn]::after{content:none}:host([level="1"]) [part=left-btn]{border-right:1px solid #0d0d0d}:host([level="1"]) [part=right-btn]{border-left:1px solid #0d0d0d}:host([level="2"]) [part=left-btn]::after,:host([level="3"]) [part=left-btn]::after{right:0}:host([level="2"]) [part=right-btn]::after,:host([level="3"]) [part=right-btn]::after{left:0}:host([level="2"]) [part=left-btn]:not(:active):not(:hover),:host([level="2"]) [part=right-btn]:not(:active):not(:hover){background-color:#262626}:host([level="2"]) [part=left-btn]::after,:host([level="2"]) [part=right-btn]::after{height:70%}:host([level="3"]) [part=left-btn],:host([level="3"]) [part=right-btn]{border-color:transparent}:host([level="3"]) [part=left-btn]:not(:active):not(:hover),:host([level="3"]) [part=right-btn]:not(:active):not(:hover){background-color:#0d0d0d}:host([level="3"]) [part=left-btn]::after,:host([level="3"]) [part=right-btn]::after{height:30%}:host([vertical]) [part=content] ::slotted(ef-tab){border-bottom-color:transparent;border-right:none!important;background:linear-gradient(#1a1a1a,#1a1a1a) left calc(100% + 1px)/2% 1px no-repeat,linear-gradient(#1a1a1a,#1a1a1a) right calc(100% + 1px)/2% 1px no-repeat,linear-gradient(#404040,#404040) center calc(100% + 1px)/100% 1px no-repeat}:host([vertical]) [part=content] ::slotted(ef-tab[active]:not(:active):not(:hover)){background:linear-gradient(#0d0d0d,#0d0d0d) left calc(100% + 1px)/2% 1px no-repeat,linear-gradient(#0d0d0d,#0d0d0d) right calc(100% + 1px)/2% 1px no-repeat,linear-gradient(#404040,#404040) center calc(100% + 1px)/100% 1px no-repeat}:host([vertical]) [part=content] ::slotted(ef-tab:not([active]):not(:active):not(:hover)){background-color:#1a1a1a}:host([vertical]) [part=content] ::slotted(ef-tab:hover){color:#fff;background-color:#334bff}:host([vertical]) [part=content] ::slotted(ef-tab:active){background-color:#0f1e8a}:host([vertical][level="1"]) [part=content] ::slotted(ef-tab[active]:not(:active):not(:hover)),:host([vertical][level="3"]) [part=content] ::slotted(ef-tab[active]:not(:active):not(:hover)){color:#6678ff;background-color:#0d0d0d}');

package/lib/tab-bar/themes/halo/light/index.js

@@ -1,4 +1,4 @@
-import '@refinitiv-ui/elements/lib/tab/themes/halo/light';
-import '@refinitiv-ui/elements/lib/button/themes/halo/light';
+import '@refinitiv-ui/elements/tab/themes/halo/light';
+import '@refinitiv-ui/elements/button/themes/halo/light';
 
 elf.customStyles.define('ef-tab-bar', ':host{position:relative;background-color:#f2f2f2}:host [part=content]{display:flex;overflow:hidden}:host [part=left-btn],:host [part=right-btn]{display:none;position:absolute;height:auto;margin:auto;z-index:2;top:0;bottom:0;background-color:#e6e6e6;width:36px;border:none}:host [part=left-btn]:hover,:host [part=right-btn]:hover{background-color:#334bff}:host [part=left-btn]:active,:host [part=right-btn]:active{background-color:#0f1e8a}:host [part=left-btn]:focus:not([focused]),:host [part=left-btn][focused=visible],:host [part=right-btn]:focus:not([focused]),:host [part=right-btn][focused=visible]{background-color:#4158ff}:host [part=left-btn]:focus:not([focused]):not([active]):not(:hover),:host [part=left-btn][focused=visible]:not([active]):not(:hover),:host [part=right-btn]:focus:not([focused]):not([active]):not(:hover),:host [part=right-btn][focused=visible]:not([active]):not(:hover){color:#6678ff;background-color:#e6e6e6}:host [part=left-btn]{left:0}:host [part=right-btn]{right:0}:host([vertical]){width:180px;flex-shrink:0}:host([vertical]) [part=content]{flex-direction:column}:host([vertical]) [part=content] ::slotted(ef-tab){justify-content:flex-start;border-bottom:1px solid #d9d9d9}:host [part=left-btn]::after,:host [part=right-btn]::after{content:\'\';position:absolute;margin:auto;width:1px;background:#d9d9d9;height:70%;top:0;bottom:0}:host([level="1"]) [part=left-btn]::after,:host([level="1"]) [part=right-btn]::after{content:none}:host([level="1"]) [part=left-btn]{border-right:1px solid #fff}:host([level="1"]) [part=right-btn]{border-left:1px solid #fff}:host([level="2"]) [part=left-btn]::after,:host([level="3"]) [part=left-btn]::after{right:0}:host([level="2"]) [part=right-btn]::after,:host([level="3"]) [part=right-btn]::after{left:0}:host([level="2"]) [part=left-btn]:not(:active):not(:hover),:host([level="2"]) [part=right-btn]:not(:active):not(:hover){background-color:#f2f2f2}:host([level="2"]) [part=left-btn]::after,:host([level="2"]) [part=right-btn]::after{height:70%}:host([level="3"]) [part=left-btn],:host([level="3"]) [part=right-btn]{border-color:transparent}:host([level="3"]) [part=left-btn]:not(:active):not(:hover),:host([level="3"]) [part=right-btn]:not(:active):not(:hover){background-color:#fff}:host([level="3"]) [part=left-btn]::after,:host([level="3"]) [part=right-btn]::after{height:30%}:host([vertical]) [part=content] ::slotted(ef-tab){border-bottom-color:transparent;border-right:none!important;background:linear-gradient(#f2f2f2,#f2f2f2) left calc(100% + 1px)/2% 1px no-repeat,linear-gradient(#f2f2f2,#f2f2f2) right calc(100% + 1px)/2% 1px no-repeat,linear-gradient(#d9d9d9,#d9d9d9) center calc(100% + 1px)/100% 1px no-repeat}:host([vertical]) [part=content] ::slotted(ef-tab[active]:not(:active):not(:hover)){background:linear-gradient(#fff,#fff) left calc(100% + 1px)/2% 1px no-repeat,linear-gradient(#fff,#fff) right calc(100% + 1px)/2% 1px no-repeat,linear-gradient(#d9d9d9,#d9d9d9) center calc(100% + 1px)/100% 1px no-repeat}:host([vertical]) [part=content] ::slotted(ef-tab:not([active]):not(:active):not(:hover)){background-color:#f2f2f2}:host([vertical]) [part=content] ::slotted(ef-tab:hover){color:#fff;background-color:#334bff}:host([vertical]) [part=content] ::slotted(ef-tab:active){background-color:#0f1e8a}:host([vertical][level="1"]) [part=content] ::slotted(ef-tab[active]:not(:active):not(:hover)),:host([vertical][level="3"]) [part=content] ::slotted(ef-tab[active]:not(:active):not(:hover)){color:#334bff;background-color:#fff}');

package/lib/tab-bar/themes/solar/charcoal/index.js

@@ -1,4 +1,4 @@
-import '@refinitiv-ui/elements/lib/tab/themes/solar/charcoal';
-import '@refinitiv-ui/elements/lib/button/themes/solar/charcoal';
+import '@refinitiv-ui/elements/tab/themes/solar/charcoal';
+import '@refinitiv-ui/elements/button/themes/solar/charcoal';
 
 elf.customStyles.define('ef-tab-bar', ':host{position:relative;background-color:#151516}:host [part=content]{display:flex;overflow:hidden}:host [part=left-btn],:host [part=right-btn]{display:none;position:absolute;height:auto;margin:auto;z-index:2;top:0;bottom:0;background-color:#3c3c42}:host [part=left-btn]:hover,:host [part=right-btn]:hover{background-color:#4a4a4f}:host [part=left-btn]:active,:host [part=right-btn]:active{background-color:#38383d}:host [part=left-btn]:focus:not([focused]),:host [part=left-btn][focused=visible],:host [part=right-btn]:focus:not([focused]),:host [part=right-btn][focused=visible]{background-color:#ffa041}:host [part=left-btn]:focus:not([focused]):not([active]):not(:hover),:host [part=left-btn][focused=visible]:not([active]):not(:hover),:host [part=right-btn]:focus:not([focused]):not([active]):not(:hover),:host [part=right-btn][focused=visible]:not([active]):not(:hover){color:#e2e2e2;background-color:#3c3c42}:host [part=left-btn]{left:0}:host [part=right-btn]{right:0}:host([vertical]){width:180px;flex-shrink:0}:host([vertical]) [part=content]{flex-direction:column}:host([vertical]) [part=content] ::slotted(ef-tab){justify-content:flex-start;border:none;border-bottom:1px solid #000}:host(:not([vertical])) [part=content] ::slotted(ef-tab:first-of-type){border-left:1px solid #000}');

package/lib/tab-bar/themes/solar/pearl/index.js

@@ -1,4 +1,4 @@
-import '@refinitiv-ui/elements/lib/tab/themes/solar/pearl';
-import '@refinitiv-ui/elements/lib/button/themes/solar/pearl';
+import '@refinitiv-ui/elements/tab/themes/solar/pearl';
+import '@refinitiv-ui/elements/button/themes/solar/pearl';
 
 elf.customStyles.define('ef-tab-bar', ':host{position:relative;background-color:#c2c2c2}:host [part=content]{display:flex;overflow:hidden}:host [part=left-btn],:host [part=right-btn]{display:none;position:absolute;height:auto;margin:auto;z-index:2;top:0;bottom:0;background-color:#fafbfc}:host [part=left-btn]:hover,:host [part=right-btn]:hover{background-color:#fafbfc}:host [part=left-btn]:active,:host [part=right-btn]:active{background-color:#e8e9ea}:host [part=left-btn]:focus:not([focused]),:host [part=left-btn][focused=visible],:host [part=right-btn]:focus:not([focused]),:host [part=right-btn][focused=visible]{background-color:#ffb771}:host [part=left-btn]:focus:not([focused]):not([active]):not(:hover),:host [part=left-btn][focused=visible]:not([active]):not(:hover),:host [part=right-btn]:focus:not([focused]):not([active]):not(:hover),:host [part=right-btn][focused=visible]:not([active]):not(:hover){color:#1d1d1d;background-color:#fafbfc}:host [part=left-btn]{left:0}:host [part=right-btn]{right:0}:host([vertical]){width:180px;flex-shrink:0}:host([vertical]) [part=content]{flex-direction:column}:host([vertical]) [part=content] ::slotted(ef-tab){justify-content:flex-start;border:none;border-bottom:1px solid #a9afba}:host(:not([vertical])) [part=content] ::slotted(ef-tab:first-of-type){border-left:1px solid #a9afba}');

package/lib/text-field/index.d.ts

@@ -1,6 +1,6 @@
 import { JSXInterface } from '../jsx';
 import { FormFieldElement, CSSResultGroup, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
-import { TemplateMap } from '@refinitiv-ui/core/lib/directives/template-map.js';
+import { TemplateMap } from '@refinitiv-ui/core/directives/template-map.js';
 import '../icon/index.js';
 /**
  * Form control element for text.
@@ -74,6 +74,19 @@ export declare class TextField extends FormFieldElement {
      * @returns shouldUpdate
      */
     protected updated(changedProperties: PropertyValues): void;
+    /**
+     * Check if input value should be synchronised with component value
+     * @param changedProperties Properties that has changed
+     * @returns True if input should be synchronised
+     */
+    protected shouldSyncInputValue(changedProperties: PropertyValues): boolean;
+    /**
+     * Synchronise input value with value.
+     * Override the method if value and input value are not the same
+     * @param changedProperties Properties that has changed
+     * @returns {void}
+     */
+    protected syncInputValue(changedProperties: PropertyValues): void;
     /**
      * Check if input should be re-validated
      * @param changedProperties Properties that has changed
@@ -135,6 +148,11 @@ export declare class TextField extends FormFieldElement {
      */
     protected render(): TemplateResult;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'ef-text-field': TextField;
+    }
+}
 
 declare global {
   interface HTMLElementTagNameMap {

package/lib/text-field/index.js

@@ -1,10 +1,10 @@
 import { __decorate } from "tslib";
 import { FormFieldElement, 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 { 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 { VERSION } from '../version.js';
-import { isIE } from '@refinitiv-ui/utils/lib/browser.js';
+import { isIE } from '@refinitiv-ui/utils/browser.js';
 import '../icon/index.js';
 import { registerOverflowTooltip } from '../tooltip/index.js';
 const hasChanged = (newVal, oldVal) => oldVal === undefined ? false : newVal !== oldVal;
@@ -119,13 +119,32 @@ let TextField = class TextField extends FormFieldElement {
      */
     updated(changedProperties) {
         super.updated(changedProperties);
-        if (this.inputValue !== this.value) {
-            this.inputValue = this.value;
+        if (this.shouldSyncInputValue(changedProperties)) {
+            this.syncInputValue(changedProperties);
         }
         if (this.shouldValidateInput(changedProperties)) {
             this.validateInput();
         }
     }
+    /**
+     * Check if input value should be synchronised with component value
+     * @param changedProperties Properties that has changed
+     * @returns True if input should be synchronised
+     */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    shouldSyncInputValue(changedProperties) {
+        return this.inputValue !== this.value;
+    }
+    /**
+     * Synchronise input value with value.
+     * Override the method if value and input value are not the same
+     * @param changedProperties Properties that has changed
+     * @returns {void}
+     */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    syncInputValue(changedProperties) {
+        this.inputValue = this.value;
+    }
     /**
      * Check if input should be re-validated
      * @param changedProperties Properties that has changed
@@ -160,8 +179,7 @@ let TextField = class TextField extends FormFieldElement {
      */
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     onPossibleValueChange(event) {
-        var _a;
-        const value = ((_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.value) || '';
+        const value = this.inputElement?.value || '';
         this.setValueAndNotify(value);
     }
     /**
@@ -170,8 +188,7 @@ let TextField = class TextField extends FormFieldElement {
      * @returns {void}
      */
     validateInput() {
-        var _a;
-        let error = !((_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.checkValidity());
+        let error = !this.inputElement?.checkValidity();
         /* istanbul ignore next */
         if (this.shouldValidateForMinLength(error)) {
             error = !!this.minLength && (this.minLength > this.value.length);
@@ -205,7 +222,14 @@ let TextField = class TextField extends FormFieldElement {
      * @returns template map
      */
     get decorateInputMap() {
-        return Object.assign(Object.assign({}, super.decorateInputMap), { 'type': 'text', 'part': 'input', 'maxlength': this.maxLength, 'minlength': this.minLength, 'pattern': this.pattern || null });
+        return {
+            ...super.decorateInputMap,
+            'type': 'text',
+            'part': 'input',
+            'maxlength': this.maxLength,
+            'minlength': this.minLength,
+            'pattern': this.pattern || null
+        };
     }
     /**
      * Renders icon element if property present

package/lib/text-field/themes/halo/dark/index.js

@@ -1,3 +1,3 @@
-import '@refinitiv-ui/elements/lib/icon/themes/halo/dark';
+import '@refinitiv-ui/elements/icon/themes/halo/dark';
 
 elf.customStyles.define('ef-text-field', ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:12rem;font-weight:400;height:24px;width:152px;max-width:100%;padding:0 8px;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;border-radius:0;background-color:#0d0d0d;text-overflow:ellipsis;border:1px solid #404040;color:#ccc}:host([disabled]){border:1px solid rgba(64,64,64,.5);color:rgba(204,204,204,.5);background-color:rgba(13,13,13,.5)}:host([type=number]){padding-right:0}:host([warning]){border:1px solid #ffc800}:host([warning][disabled]){color:rgba(204,204,204,.5);border:1px solid rgba(127,100,0,.5)}:host([error]),:host([error][warning]){border:1px solid #f5475b}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(204,204,204,.5);border:1px solid rgba(160,28,43,.5)}:host ::-ms-clear{display:none}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=input]{color:inherit;padding:0;margin:0;flex:1 1 auto;min-width:0;width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis;touch-action:manipulation}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:invalid{box-shadow:none}:host [part=icon]{color:#ccc;min-width:1em;padding-left:2px}:host([disabled]) [part=input]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host ::-moz-selection{color:#fff;background-color:#334bff}:host ::selection{color:#fff;background-color:#334bff}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover){border-color:grey;color:#fff}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover) [part=icon]{color:#6678ff}:host([warning]:hover:not([readonly]):not([focused])){color:#fff;border-color:#ffe999}:host([warning][disabled]),:host([warning][readonly]:not([focused])){border-color:rgba(255,233,153,.5)}:host([error]:hover:not([readonly]):not([focused])){color:#fff;border-color:#faa8b1}:host([error][disabled]),:host([error][readonly]:not([focused])),:host([error][warning][disabled]){border-color:rgba(250,168,177,.5)}:host([readonly]:not([focused])){border-color:rgba(64,64,64,.5);background-color:rgba(13,13,13,.5)}:host([readonly]:not([focused])) [part=icon]{color:rgba(204,204,204,.5)}:host([focused]),:host([focused][error][warning]){border-color:#334bff;color:#fff}:host([focused]) [part=icon],:host([focused][error][warning]) [part=icon]{color:#6678ff}');

package/lib/text-field/themes/halo/light/index.js

@@ -1,3 +1,3 @@
-import '@refinitiv-ui/elements/lib/icon/themes/halo/light';
+import '@refinitiv-ui/elements/icon/themes/halo/light';
 
 elf.customStyles.define('ef-text-field', ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:12rem;font-weight:400;height:24px;width:152px;max-width:100%;padding:0 8px;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;border-radius:0;background-color:#fff;text-overflow:ellipsis;border:1px solid #595959;color:#404040}:host([disabled]){border:1px solid rgba(89,89,89,.5);color:rgba(64,64,64,.5);background-color:rgba(255,255,255,.5)}:host([type=number]){padding-right:0}:host([warning]){border:1px solid #cca000}:host([warning][disabled]){color:rgba(64,64,64,.5);border:1px solid rgba(204,160,0,.5)}:host([error]),:host([error][warning]){border:1px solid #d94255}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(64,64,64,.5);border:1px solid rgba(182,50,67,.5)}:host ::-ms-clear{display:none}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=input]{color:inherit;padding:0;margin:0;flex:1 1 auto;min-width:0;width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis;touch-action:manipulation}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:invalid{box-shadow:none}:host [part=icon]{color:#404040;min-width:1em;padding-left:2px}:host([disabled]) [part=input]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host ::-moz-selection{color:#fff;background-color:#334bff}:host ::selection{color:#fff;background-color:#334bff}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover){border-color:#0d0d0d;color:#0d0d0d}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover) [part=icon]{color:#334bff}:host([warning]:hover:not([readonly]):not([focused])){color:#0d0d0d;border-color:#ffe999}:host([warning][disabled]),:host([warning][readonly]:not([focused])){border-color:rgba(255,233,153,.5)}:host([error]:hover:not([readonly]):not([focused])){color:#0d0d0d;border-color:#eeacb4}:host([error][disabled]),:host([error][readonly]:not([focused])),:host([error][warning][disabled]){border-color:rgba(238,172,180,.5)}:host([readonly]:not([focused])){border-color:rgba(89,89,89,.5);background-color:rgba(255,255,255,.5)}:host([readonly]:not([focused])) [part=icon]{color:rgba(64,64,64,.5)}:host([focused]),:host([focused][error][warning]){border-color:#334bff;color:#0d0d0d}:host([focused]) [part=icon],:host([focused][error][warning]) [part=icon]{color:#334bff}');