@refinitiv-ui/elements 6.5.3 → 6.6.1

package/lib/email-field/themes/solar/pearl/index.js

@@ -1,3 +1,4 @@
 import '@refinitiv-ui/elements/icon/themes/solar/pearl';
+import '@refinitiv-ui/elements/tooltip/themes/solar/pearl';
 
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-email-field', styles: ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:13rem;font-weight:400;height:23px;width:140px;max-width:100%;padding:0 5px;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#484848;border-radius:0;text-overflow:ellipsis;background-color:#fff;border:1px solid #a9afba}:host([type=number]){padding-right:0}:host([error]),:host([error][warning]){border:1px solid #d94255}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(72,72,72,.6);border:1px solid rgba(217,66,85,.6)}:host ::-ms-clear{display:none}: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:#acafb5;min-width:1em}:host([disabled]) [part=input]{-webkit-user-select:none;-moz-user-select:none;user-select:none}:host([disabled]){border:1px solid rgba(169,175,186,.6);color:rgba(72,72,72,.6)}:host([readonly]){border:1px solid rgba(169,175,186,.6)}:host(:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #bfc3cb}:host([warning]){background-color:#fff;border:1px solid #f93}:host([warning][disabled]){border:1px solid rgba(255,153,51,.6);color:rgba(72,72,72,.6)}:host([warning][readonly]){border:1px solid rgba(255,153,51,.6)}:host([warning]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #ffb366}:host([error]),:host([error][warning]:not([focused])){background-color:#fff;border:1px solid #d94255}:host([error][disabled]),:host([error][warning]:not([focused])[disabled]){border:1px solid rgba(217,66,85,.6);color:rgba(72,72,72,.6)}:host([error][readonly]),:host([error][warning]:not([focused])[readonly]){border:1px solid rgba(217,66,85,.6)}:host([error]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover),:host([error][warning]:not([focused]):not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #e37180}:host([highlight]){background-color:#b0ffff;border:1px solid #a9afba}:host([highlight][disabled]){border:1px solid rgba(169,175,186,.6);color:rgba(72,72,72,.6);background-color:rgba(176,255,255,.6)}:host([highlight][readonly]){border:1px solid rgba(169,175,186,.6)}:host([highlight]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #bfc3cb}:host([indirect]){color:#009494;background-color:#effefe;border:1px solid #898623}:host([indirect][disabled]){border:1px solid rgba(137,134,35,.6);color:rgba(0,148,148,.6)}:host([indirect][readonly]){border:1px solid rgba(137,134,35,.6)}:host([indirect]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #a7a45a}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#ffb266;border-style:dotted}:host([disabled]) [part=input]::-webkit-input-placeholder{color:rgba(102,101,112,.6)}:host([disabled]) [part=input]::-moz-placeholder{color:rgba(102,101,112,.6)}:host([disabled]) [part=input]:-ms-input-placeholder{color:rgba(102,101,112,.6)}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-email-field', styles: ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:13px;font-weight:400;height:23px;width:140px;max-width:100%;padding:0 5px;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#484848;border-radius:0;text-overflow:ellipsis;background-color:#fff;border:1px solid #a9afba}:host([type=number]){padding-right:0}:host([error]),:host([error][warning]){border:1px solid #d94255}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(72,72,72,.6);border:1px solid rgba(217,66,85,.6)}:host ::-ms-clear{display:none}: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:#acafb5;min-width:1em}:host([disabled]) [part=input]{-webkit-user-select:none;-moz-user-select:none;user-select:none}:host([disabled]){border:1px solid rgba(169,175,186,.6);color:rgba(72,72,72,.6)}:host([readonly]){border:1px solid rgba(169,175,186,.6)}:host(:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #bfc3cb}:host([warning]){background-color:#fff;border:1px solid #f93}:host([warning][disabled]){border:1px solid rgba(255,153,51,.6);color:rgba(72,72,72,.6)}:host([warning][readonly]){border:1px solid rgba(255,153,51,.6)}:host([warning]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #ffb366}:host([error]),:host([error][warning]:not([focused])){background-color:#fff;border:1px solid #d94255}:host([error][disabled]),:host([error][warning]:not([focused])[disabled]){border:1px solid rgba(217,66,85,.6);color:rgba(72,72,72,.6)}:host([error][readonly]),:host([error][warning]:not([focused])[readonly]){border:1px solid rgba(217,66,85,.6)}:host([error]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover),:host([error][warning]:not([focused]):not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #e37180}:host([highlight]){background-color:#b0ffff;border:1px solid #a9afba}:host([highlight][disabled]){border:1px solid rgba(169,175,186,.6);color:rgba(72,72,72,.6);background-color:rgba(176,255,255,.6)}:host([highlight][readonly]){border:1px solid rgba(169,175,186,.6)}:host([highlight]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #bfc3cb}:host([indirect]){color:#009494;background-color:#effefe;border:1px solid #898623}:host([indirect][disabled]){border:1px solid rgba(137,134,35,.6);color:rgba(0,148,148,.6)}:host([indirect][readonly]){border:1px solid rgba(137,134,35,.6)}:host([indirect]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #a7a45a}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#ffb266;border-style:dotted}:host([disabled]) [part=input]::-webkit-input-placeholder{color:rgba(102,101,112,.6)}:host([disabled]) [part=input]::-moz-placeholder{color:rgba(102,101,112,.6)}:host([disabled]) [part=input]:-ms-input-placeholder{color:rgba(102,101,112,.6)}' }}));

package/lib/events.d.ts

@@ -3,7 +3,7 @@ import type { TapEvent, ResizeEvent, FocusedChangedEvent } from '@refinitiv-ui/c
  * Dispatched when `opened` state changes
  * Prevent default to stop opening/closing pipeline
  */
-declare type OpenedChangedEvent = CustomEvent<{
+type OpenedChangedEvent = CustomEvent<{
     /**
      * `opened` value
      */
@@ -12,7 +12,7 @@ declare type OpenedChangedEvent = CustomEvent<{
 /**
  * Dispatched when `value` changes
  */
-declare type ValueChangedEvent = CustomEvent<{
+type ValueChangedEvent = CustomEvent<{
     /**
      * new `value`
      */
@@ -21,7 +21,7 @@ declare type ValueChangedEvent = CustomEvent<{
 /**
  * Dispatched when `error` state changes
  */
-declare type ErrorChangedEvent = CustomEvent<{
+type ErrorChangedEvent = CustomEvent<{
     /**
      * `error` value
      */
@@ -30,7 +30,7 @@ declare type ErrorChangedEvent = CustomEvent<{
 /**
  * Dispatched when `active` state changes
  */
-declare type ActiveChangedEvent = CustomEvent<{
+type ActiveChangedEvent = CustomEvent<{
     /**
      * `active` value
      */
@@ -39,7 +39,7 @@ declare type ActiveChangedEvent = CustomEvent<{
 /**
  * Dispatched when `query` state changes
  */
-declare type QueryChangedEvent = CustomEvent<{
+type QueryChangedEvent = CustomEvent<{
     /**
      * `query` value
      */
@@ -48,7 +48,7 @@ declare type QueryChangedEvent = CustomEvent<{
 /**
  * Dispatched when `view` state changes
  */
-declare type ViewChangedEvent = CustomEvent<{
+type ViewChangedEvent = CustomEvent<{
     /**
      * `view` value
      */
@@ -57,7 +57,7 @@ declare type ViewChangedEvent = CustomEvent<{
 /**
  * Dispatched when `page` state changes
  */
-declare type PageChangedEvent = CustomEvent<{
+type PageChangedEvent = CustomEvent<{
     /**
      * `page` value
      */
@@ -66,7 +66,7 @@ declare type PageChangedEvent = CustomEvent<{
 /**
  * Dispatched when `from` state changes
  */
-declare type FromChangedEvent = CustomEvent<{
+type FromChangedEvent = CustomEvent<{
     /**
      * `from` value
      */
@@ -75,7 +75,7 @@ declare type FromChangedEvent = CustomEvent<{
 /**
  * Dispatched when `to` state changes
  */
-declare type ToChangedEvent = CustomEvent<{
+type ToChangedEvent = CustomEvent<{
     /**
      * `to` value
      */
@@ -84,7 +84,7 @@ declare type ToChangedEvent = CustomEvent<{
 /**
  * Dispatched when `checked` state changes
  */
-declare type CheckChangedEvent = CustomEvent<{
+type CheckChangedEvent = CustomEvent<{
     /**
      * `checked` value
      */
@@ -93,7 +93,7 @@ declare type CheckChangedEvent = CustomEvent<{
 /**
  * Dispatched when `offset` state changes
  */
-declare type OffsetChangedEvent = CustomEvent<{
+type OffsetChangedEvent = CustomEvent<{
     /**
      * `offset` value
      */
@@ -103,7 +103,7 @@ declare type OffsetChangedEvent = CustomEvent<{
  * Dispatched when `expanded` state changes
  * Prevent default to stop expand/collapse pipeline
  */
-declare type ExpandedChangedEvent = CustomEvent<{
+type ExpandedChangedEvent = CustomEvent<{
     /**
      * `expanded` value
      */
@@ -112,7 +112,7 @@ declare type ExpandedChangedEvent = CustomEvent<{
 /**
  * Dispatched when the user clicks on internal `item`
  */
-declare type ItemTriggerEvent = CustomEvent<{
+type ItemTriggerEvent = CustomEvent<{
     /**
      * `item` value
      */

package/lib/flag/index.js

@@ -161,8 +161,6 @@ __decorate([
     property({ type: String })
 ], Flag.prototype, "src", null);
 Flag = __decorate([
-    customElement('ef-flag', {
-        alias: 'coral-flag'
-    })
+    customElement('ef-flag')
 ], Flag);
 export { Flag };

package/lib/header/index.js

@@ -66,8 +66,6 @@ __decorate([
     property({ type: String, reflect: true })
 ], Header.prototype, "level", void 0);
 Header = __decorate([
-    customElement('ef-header', {
-        alias: 'coral-header'
-    })
+    customElement('ef-header')
 ], Header);
 export { Header };

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

@@ -1,2 +1,2 @@
 
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-header', styles: ':host{color:#ccc;padding:0 0 0 4px;height:28px;font-size:12rem;font-family:inherit;white-space:nowrap;box-sizing:border-box;display:flex;align-items:center;overflow:hidden;background-color:#333;text-transform:uppercase}:host [part=spacer]{flex:none;width:4px}:host [part=label]{flex:1 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-right:8px}:host ::slotted(ef-button[transparent]){color:inherit!important}:host([level="1"]){background-color:#404040}:host([level="3"]){background-color:#262626}:host([level="4"]){background-color:#1a1a1a}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-header', styles: ':host{color:#ccc;padding:0 0 0 4px;height:28px;font-size:12px;font-family:inherit;white-space:nowrap;box-sizing:border-box;display:flex;align-items:center;overflow:hidden;background-color:#333;text-transform:uppercase}:host [part=spacer]{flex:none;width:4px}:host [part=label]{flex:1 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-right:8px}:host ::slotted(ef-button[transparent]){color:inherit!important}:host([level="1"]){background-color:#404040}:host([level="3"]){background-color:#262626}:host([level="4"]){background-color:#1a1a1a}' }}));

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

@@ -1,2 +1,2 @@
 
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-header', styles: ':host{color:#0d0d0d;padding:0 0 0 4px;height:28px;font-size:12rem;font-family:inherit;white-space:nowrap;box-sizing:border-box;display:flex;align-items:center;overflow:hidden;background-color:#e6e6e6;text-transform:uppercase}:host [part=spacer]{flex:none;width:4px}:host [part=label]{flex:1 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-right:8px}:host ::slotted(ef-button[transparent]){color:inherit!important}:host([level="1"]){background-color:#d9d9d9}:host([level="3"]){background-color:#f2f2f2}:host([level="4"]){background-color:#fafafa}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-header', styles: ':host{color:#0d0d0d;padding:0 0 0 4px;height:28px;font-size:12px;font-family:inherit;white-space:nowrap;box-sizing:border-box;display:flex;align-items:center;overflow:hidden;background-color:#e6e6e6;text-transform:uppercase}:host [part=spacer]{flex:none;width:4px}:host [part=label]{flex:1 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-right:8px}:host ::slotted(ef-button[transparent]){color:inherit!important}:host([level="1"]){background-color:#d9d9d9}:host([level="3"]){background-color:#f2f2f2}:host([level="4"]){background-color:#fafafa}' }}));

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

@@ -1,2 +1,2 @@
 
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-header', styles: ':host{padding:0 0 0 5px;height:27px;font-size:14rem;font-family:inherit;white-space:nowrap;box-sizing:border-box;display:flex;align-items:center;overflow:hidden;position:relative;color:#c2c2c2;background-color:#2e2e33}:host [part=spacer]{flex:none;width:5px}:host [part=label]{flex:1 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-right:10px;font-weight:600;text-transform:uppercase}:host ::slotted(ef-button[transparent]){color:inherit!important}:host([level="3"]) [part=label]{text-transform:none}:host([level="1"]){color:#e2e2e2;background-color:#4a4a52;background-image:linear-gradient(rgba(255,255,255,.03) 0,rgba(255,255,255,0) 100%)}:host([level="3"]){color:#8c8c8c;background-color:#212124}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-header', styles: ':host{padding:0 0 0 5px;height:27px;font-size:14px;font-family:inherit;white-space:nowrap;box-sizing:border-box;display:flex;align-items:center;overflow:hidden;position:relative;color:#c2c2c2;background-color:#2e2e33}:host [part=spacer]{flex:none;width:5px}:host [part=label]{flex:1 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-right:10px;font-weight:600;text-transform:uppercase}:host ::slotted(ef-button[transparent]){color:inherit!important}:host([level="3"]) [part=label]{text-transform:none}:host([level="1"]){color:#e2e2e2;background-color:#4a4a52;background-image:linear-gradient(rgba(255,255,255,.03) 0,rgba(255,255,255,0) 100%)}:host([level="3"]){color:#8c8c8c;background-color:#212124}' }}));

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

@@ -1,2 +1,2 @@
 
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-header', styles: ':host{padding:0 0 0 5px;height:27px;font-size:14rem;font-family:inherit;white-space:nowrap;box-sizing:border-box;display:flex;align-items:center;overflow:hidden;position:relative;color:#505050;background-color:#d0d4db}:host [part=spacer]{flex:none;width:5px}:host [part=label]{flex:1 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-right:10px;font-weight:600;text-transform:uppercase}:host ::slotted(ef-button[transparent]){color:inherit!important}:host([level="3"]) [part=label]{text-transform:none}:host([level="1"]){color:#484848;background-color:#bec3cc;background-image:linear-gradient(rgba(255,255,255,.18) 0,rgba(255,255,255,0) 100%)}:host([level="3"]){color:#6e6e78;background-color:#e4e8ed}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-header', styles: ':host{padding:0 0 0 5px;height:27px;font-size:14px;font-family:inherit;white-space:nowrap;box-sizing:border-box;display:flex;align-items:center;overflow:hidden;position:relative;color:#505050;background-color:#d0d4db}:host [part=spacer]{flex:none;width:5px}:host [part=label]{flex:1 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-right:10px;font-weight:600;text-transform:uppercase}:host ::slotted(ef-button[transparent]){color:inherit!important}:host([level="3"]) [part=label]{text-transform:none}:host([level="1"]){color:#484848;background-color:#bec3cc;background-image:linear-gradient(rgba(255,255,255,.18) 0,rgba(255,255,255,0) 100%)}:host([level="3"]){color:#6e6e78;background-color:#e4e8ed}' }}));

package/lib/heatmap/helpers/types.d.ts

@@ -1,18 +1,18 @@
-declare type HeatmapConfig = {
+type HeatmapConfig = {
     data: Array<HeatmapCell[]>;
     yAxis?: HeatmapYAxis;
     xAxis?: HeatmapXAxis;
 };
-declare type HeatmapXAxis = {
+type HeatmapXAxis = {
     labels: string[];
     shortLabels: string[];
     position: 'top' | 'bottom';
 };
-declare type HeatmapYAxis = {
+type HeatmapYAxis = {
     labels: string[];
     position: 'left' | 'right';
 };
-declare type HeatmapCell = {
+type HeatmapCell = {
     rowIndex: number;
     colIndex: number;
     x: number;
@@ -30,11 +30,11 @@ declare type HeatmapCell = {
     customBackgroundColor?: string;
     customForegroundColor?: string;
 };
-declare type HeatmapCustomisableProperties = {
+type HeatmapCustomisableProperties = {
     label?: string;
     backgroundColor?: string;
     foregroundColor?: string;
 };
-declare type HeatmapTooltipCallback = (activeCell: HeatmapCell) => HTMLElement | undefined;
-declare type HeatmapRenderCallback = (cell: HeatmapCell) => HeatmapCustomisableProperties;
+type HeatmapTooltipCallback = (activeCell: HeatmapCell) => HTMLElement | undefined;
+type HeatmapRenderCallback = (cell: HeatmapCell) => HeatmapCustomisableProperties;
 export { HeatmapCell, HeatmapXAxis, HeatmapYAxis, HeatmapConfig, HeatmapTooltipCallback, HeatmapRenderCallback, HeatmapCustomisableProperties };

package/lib/heatmap/index.js

@@ -18,123 +18,6 @@ const DEFAULT_CANVAS_RATIO = 0.75; // ratio — 4:3
  * values contained in a matrix are represented as colors
  */
 let Heatmap = class Heatmap extends ResponsiveElement {
-    constructor() {
-        super();
-        /**
-         * Heatmap configuration options.
-         * @type {HeatmapConfig}
-         */
-        this.config = null;
-        /**
-         * Number of maximum label width that cell can paint in pixel.
-         * e.g. label-width: 30px; cell label hides when text length reaches 30px.
-         */
-        this.labelWidth = 0;
-        /**
-         * Hide all labels in the cells
-         */
-        this.labelHidden = false;
-        /**
-         * Hide all axes
-         */
-        this.axisHidden = false;
-        /**
-         * Minimum point of the cell coloring
-         */
-        this.minPoint = -1;
-        /**
-         * Middle point of the cell coloring
-         */
-        this.midPoint = 0;
-        /**
-         * Maximum point of the cell coloring
-         */
-        this.maxPoint = 1;
-        /**
-         * Enable cell color blending
-         */
-        this.blend = false;
-        /**
-         * Cell minimum color saturation, value can be from 0 - 1
-         */
-        this.saturation = 0.4;
-        /**
-         * Current active cell
-         */
-        this._hoverCell = null;
-        /**
-         * Internal cells data storage
-         */
-        this.cells = [];
-        /**
-         * Canvas's font color according to theme
-         */
-        this.foregroundColor = '';
-        /**
-         * Canvas's background color according to theme
-         */
-        this.backgroundColor = '';
-        /**
-         * Row cells track for easier calculations
-         */
-        this.rowTrack = new Track();
-        /**
-         * Column cells track for easier calculations
-         */
-        this.colTrack = new Track();
-        /**
-         * A flag to check if calculated responsive height it been set.
-         */
-        this.responsiveHeight = false;
-        /**
-         * A flag to check if the component has a size.
-         */
-        this.isSizeCalculated = false;
-        /**
-         * Use to prevent resizes observer in certain use cases
-         */
-        this.updateTimer = 0;
-        /**
-         * Use to throttle heatmap painting
-         */
-        this.renderTask = new MicroTaskRunner();
-        /**
-         * A flag to check if the cell has header enable.
-         */
-        this.hasCellHeader = false;
-        /**
-         * A flag to check if cell's content is within its boundary
-         */
-        this.contentWithinCellBoundary = true;
-        /**
-         * Margin around each cell
-         */
-        this.cellMargin = 1;
-        /**
-         * Above point color that is customisable using CSS variable
-         */
-        this.abovePointColor = '';
-        /**
-         * Middle point color that is customisable using CSS variable
-         */
-        this.midPointColor = '';
-        /**
-         * Below point color that is customisable using CSS variable
-         */
-        this.belowPointColor = '';
-        /** @ignore */
-        this.onResize = this.onResize.bind(this);
-        /** @ignore */
-        this.onMouseMove = this.onMouseMove.bind(this);
-        /** @ignore */
-        this.stopAnimation = this.stopAnimation.bind(this);
-        /** @ignore */
-        this.tooltipRenderer = this.tooltipRenderer.bind(this);
-        /** @ignore */
-        this.tooltipCondition = this.tooltipCondition.bind(this);
-        /** @ignore */
-        this.onMouseLeave = this.onMouseLeave.bind(this);
-    }
     /**
      * Element version number
      * @returns version number
@@ -257,6 +140,123 @@ let Heatmap = class Heatmap extends ResponsiveElement {
         });
         return result;
     }
+    constructor() {
+        super();
+        /**
+         * Heatmap configuration options.
+         * @type {HeatmapConfig}
+         */
+        this.config = null;
+        /**
+         * Number of maximum label width that cell can paint in pixel.
+         * e.g. label-width: 30px; cell label hides when text length reaches 30px.
+         */
+        this.labelWidth = 0;
+        /**
+         * Hide all labels in the cells
+         */
+        this.labelHidden = false;
+        /**
+         * Hide all axes
+         */
+        this.axisHidden = false;
+        /**
+         * Minimum point of the cell coloring
+         */
+        this.minPoint = -1;
+        /**
+         * Middle point of the cell coloring
+         */
+        this.midPoint = 0;
+        /**
+         * Maximum point of the cell coloring
+         */
+        this.maxPoint = 1;
+        /**
+         * Enable cell color blending
+         */
+        this.blend = false;
+        /**
+         * Cell minimum color saturation, value can be from 0 - 1
+         */
+        this.saturation = 0.4;
+        /**
+         * Current active cell
+         */
+        this._hoverCell = null;
+        /**
+         * Internal cells data storage
+         */
+        this.cells = [];
+        /**
+         * Canvas's font color according to theme
+         */
+        this.foregroundColor = '';
+        /**
+         * Canvas's background color according to theme
+         */
+        this.backgroundColor = '';
+        /**
+         * Row cells track for easier calculations
+         */
+        this.rowTrack = new Track();
+        /**
+         * Column cells track for easier calculations
+         */
+        this.colTrack = new Track();
+        /**
+         * A flag to check if calculated responsive height it been set.
+         */
+        this.responsiveHeight = false;
+        /**
+         * A flag to check if the component has a size.
+         */
+        this.isSizeCalculated = false;
+        /**
+         * Use to prevent resizes observer in certain use cases
+         */
+        this.updateTimer = 0;
+        /**
+         * Use to throttle heatmap painting
+         */
+        this.renderTask = new MicroTaskRunner();
+        /**
+         * A flag to check if the cell has header enable.
+         */
+        this.hasCellHeader = false;
+        /**
+         * A flag to check if cell's content is within its boundary
+         */
+        this.contentWithinCellBoundary = true;
+        /**
+         * Margin around each cell
+         */
+        this.cellMargin = 1;
+        /**
+         * Above point color that is customisable using CSS variable
+         */
+        this.abovePointColor = '';
+        /**
+         * Middle point color that is customisable using CSS variable
+         */
+        this.midPointColor = '';
+        /**
+         * Below point color that is customisable using CSS variable
+         */
+        this.belowPointColor = '';
+        /** @ignore */
+        this.onResize = this.onResize.bind(this);
+        /** @ignore */
+        this.onMouseMove = this.onMouseMove.bind(this);
+        /** @ignore */
+        this.stopAnimation = this.stopAnimation.bind(this);
+        /** @ignore */
+        this.tooltipRenderer = this.tooltipRenderer.bind(this);
+        /** @ignore */
+        this.tooltipCondition = this.tooltipCondition.bind(this);
+        /** @ignore */
+        this.onMouseLeave = this.onMouseLeave.bind(this);
+    }
     /**
      * Called when the element’s DOM has been updated and rendered
      * @param changedProperties changed properties
@@ -1089,8 +1089,6 @@ __decorate([
     query('#tooltip-overlay')
 ], Heatmap.prototype, "tooltipOverlay", void 0);
 Heatmap = __decorate([
-    customElement('ef-heatmap', {
-        alias: 'sapphire-heatmap'
-    })
+    customElement('ef-heatmap')
 ], Heatmap);
 export { Heatmap };

package/lib/icon/index.js

@@ -164,8 +164,6 @@ __decorate([
     property({ type: String })
 ], Icon.prototype, "src", null);
 Icon = __decorate([
-    customElement('ef-icon', {
-        alias: 'coral-icon'
-    })
+    customElement('ef-icon')
 ], Icon);
 export { Icon };

package/lib/interactive-chart/custom-elements.json

@@ -61,7 +61,7 @@
       "events": [
         {
           "name": "initialized",
-          "description": "Dispatched when chart is initialized"
+          "description": "Fired when chart is initialized"
         }
       ],
       "slots": [

package/lib/interactive-chart/custom-elements.md

@@ -20,9 +20,9 @@ By lightweight-charts library.
 
 ## Events
 
-| Event         | Description                          |
-|---------------|--------------------------------------|
-| `initialized` | Dispatched when chart is initialized |
+| Event         | Description                     |
+|---------------|---------------------------------|
+| `initialized` | Fired when chart is initialized |
 
 ## Slots
 

package/lib/interactive-chart/helpers/merge.d.ts

@@ -1,7 +1,7 @@
-declare type UnknownObject = {
+type UnknownObject = {
     [key: string]: unknown;
 };
-declare type MergeObject = UnknownObject | Array<unknown>;
+type MergeObject = UnknownObject | Array<unknown>;
 /**
  * Merge objects recursively
  *

package/lib/interactive-chart/helpers/types.d.ts

@@ -1,12 +1,12 @@
 import type { LineData, BarData, HistogramData, DeepPartial, ChartOptions, SeriesPartialOptions, LineSeriesPartialOptions, AreaSeriesPartialOptions, BarSeriesPartialOptions, CandlestickSeriesPartialOptions, HistogramSeriesPartialOptions, LineStyleOptions, AreaStyleOptions, BarStyleOptions, CandlestickStyleOptions, HistogramStyleOptions, ISeriesApi, SeriesType } from 'lightweight-charts';
 import type { RGBColor, HSLColor } from '@refinitiv-ui/utils/color.js';
-declare type SeriesOptions = AreaSeriesPartialOptions | BarSeriesPartialOptions | CandlestickSeriesPartialOptions | HistogramSeriesPartialOptions | LineSeriesPartialOptions;
-declare type SeriesStyleOptions = LineStyleOptions & AreaStyleOptions & BarStyleOptions & CandlestickStyleOptions & HistogramStyleOptions;
-declare type SeriesData = LineData[] | BarData[] | HistogramData[];
-declare type SeriesList = ISeriesApi<SeriesType>;
-declare type SeriesDataItem = BarData | LineData;
-declare type RowLegend = NodeListOf<Element> | HTMLElement | null;
-declare type ColorToStringFunction = (param: string, ...arg: (string | number | undefined)[]) => RGBColor | HSLColor | null;
+type SeriesOptions = AreaSeriesPartialOptions | BarSeriesPartialOptions | CandlestickSeriesPartialOptions | HistogramSeriesPartialOptions | LineSeriesPartialOptions;
+type SeriesStyleOptions = LineStyleOptions & AreaStyleOptions & BarStyleOptions & CandlestickStyleOptions & HistogramStyleOptions;
+type SeriesData = LineData[] | BarData[] | HistogramData[];
+type SeriesList = ISeriesApi<SeriesType>;
+type SeriesDataItem = BarData | LineData;
+type RowLegend = NodeListOf<Element> | HTMLElement | null;
+type ColorToStringFunction = (param: string, ...arg: (string | number | undefined)[]) => RGBColor | HSLColor | null;
 declare enum LegendStyle {
     vertical = "vertical",
     horizontal = "horizontal"

package/lib/interactive-chart/index.d.ts

@@ -9,7 +9,7 @@ export type { InteractiveChartConfig, InteractiveChartSeries, LegendStyle };
  * A charting component that allows you to create several use cases of financial chart.
  * By lightweight-charts library.
  * @slot legend - Slot to use for implementing custom legend.
- * @fires initialized - Dispatched when chart is initialized
+ * @fires initialized - Fired when chart is initialized
  */
 export declare class InteractiveChart extends ResponsiveElement {
     /**

package/lib/interactive-chart/index.js

@@ -16,7 +16,7 @@ const NO_DATA_POINT = '--';
  * A charting component that allows you to create several use cases of financial chart.
  * By lightweight-charts library.
  * @slot legend - Slot to use for implementing custom legend.
- * @fires initialized - Dispatched when chart is initialized
+ * @fires initialized - Fired when chart is initialized
  */
 let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends ResponsiveElement {
     constructor() {
@@ -1082,8 +1082,6 @@ __decorate([
     query('[part=branding-container]', true)
 ], InteractiveChart.prototype, "brandingContainer", void 0);
 InteractiveChart = InteractiveChart_1 = __decorate([
-    customElement('ef-interactive-chart', {
-        alias: 'sapphire-interactive-chart'
-    })
+    customElement('ef-interactive-chart')
 ], InteractiveChart);
 export { InteractiveChart };

package/lib/item/custom-elements.json

@@ -7,7 +7,7 @@
       "attributes": [
         {
           "name": "label",
-          "description": "The text for the label indicating the meaning of the item.\nBy having both `label` and content, `label` always takes priority",
+          "description": "The text for the label indicating the meaning of the item.\nBy having both `label` and content, content always takes priority",
           "type": "string | null"
         },
         {
@@ -40,7 +40,7 @@
         },
         {
           "name": "sub-label",
-          "description": "The`subLabel` property represents the text beneath the label.",
+          "description": "The`subLabel` property represents the text beneath the label.\nBy having both `subLabel` and content, content always takes priority",
           "type": "string | null"
         },
         {
@@ -65,7 +65,7 @@
         {
           "name": "label",
           "attribute": "label",
-          "description": "The text for the label indicating the meaning of the item.\nBy having both `label` and content, `label` always takes priority",
+          "description": "The text for the label indicating the meaning of the item.\nBy having both `label` and content, content always takes priority",
           "type": "string | null"
         },
         {
@@ -104,7 +104,7 @@
         {
           "name": "subLabel",
           "attribute": "sub-label",
-          "description": "The`subLabel` property represents the text beneath the label.",
+          "description": "The`subLabel` property represents the text beneath the label.\nBy having both `subLabel` and content, content always takes priority",
           "type": "string | null"
         },
         {

package/lib/item/custom-elements.md

@@ -13,10 +13,10 @@ to create simple menus or navigation panels.
 | `highlightable (readonly)` |               | `boolean`          |         | Return true if the item can be highlighted. True if not disabled and type is Text |
 | `highlighted`              | `highlighted` | `boolean`          | false   | Highlight the item                               |
 | `icon`                     | `icon`        | `string \| null`   | null    | Set the icon name from the ef-icon list          |
-| `label`                    | `label`       | `string \| null`   | null    | The text for the label indicating the meaning of the item.<br />By having both `label` and content, `label` always takes priority |
+| `label`                    | `label`       | `string \| null`   | null    | The text for the label indicating the meaning of the item.<br />By having both `label` and content, content always takes priority |
 | `multiple`                 | `multiple`    | `boolean`          | false   | Is the item part of a multiple selection         |
 | `selected`                 | `selected`    | `boolean`          | false   | Indicates that the item is selected              |
-| `subLabel`                 | `sub-label`   | `string \| null`   | null    | The`subLabel` property represents the text beneath the label. |
+| `subLabel`                 | `sub-label`   | `string \| null`   | null    | The`subLabel` property represents the text beneath the label.<br />By having both `subLabel` and content, content always takes priority |
 | `type`                     | `type`        | `ItemType \| null` | null    | If defined value can be `text`, `header` or `divider` |
 | `value`                    | `value`       | `string`           | ""      | The content of this attribute represents the value of the item. |
 

package/lib/item/helpers/types.d.ts

@@ -1,5 +1,5 @@
 import type { DataItem } from '@refinitiv-ui/utils/collection.js';
-declare type ItemType = 'text' | 'header' | 'divider';
+type ItemType = 'text' | 'header' | 'divider';
 interface CommonItem extends DataItem {
     /**
      * Type of item. Value can be `text`, `header`, `divider`
@@ -53,5 +53,5 @@ interface ItemDivider extends CommonItem {
 /**
  * Used to construct a collection of items
  */
-declare type ItemData = ItemText | ItemHeader | ItemDivider;
+type ItemData = ItemText | ItemHeader | ItemDivider;
 export type { ItemType, ItemText, ItemHeader, ItemDivider, ItemData };

package/lib/item/index.d.ts

@@ -32,7 +32,7 @@ export declare class Item extends ControlElement {
     static get styles(): CSSResultGroup;
     /**
      * The text for the label indicating the meaning of the item.
-     * By having both `label` and content, `label` always takes priority
+     * By having both `label` and content, content always takes priority
      */
     label: string | null;
     /**
@@ -58,6 +58,7 @@ export declare class Item extends ControlElement {
     highlighted: boolean;
     /**
      * The`subLabel` property represents the text beneath the label.
+     * By having both `subLabel` and content, content always takes priority
      */
     subLabel: string | null;
     /**