@refinitiv-ui/elements 6.9.0-next.0 → 6.9.0

package/lib/tooltip/index.js

@@ -1,22 +1,22 @@
 var Tooltip_1;
 import { __decorate } from "tslib";
-import { BasicElement, html, css, matches } from '@refinitiv-ui/core';
+import { BasicElement, css, html, matches } from '@refinitiv-ui/core';
 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 { isSlotEmpty } from '@refinitiv-ui/utils/is-slot-empty.js';
 import '../overlay/index.js';
+import { VERSION } from '../version.js';
 import './elements/title-tooltip.js';
-import { register, deregister } from './managers/tooltip-manager.js';
+import { deregister as deregisterOverflowTooltip, register as registerOverflowTooltip } from './helpers/overflow-tooltip.js';
 import { tooltipRenderer } from './helpers/renderer.js';
-import { register as registerOverflowTooltip, deregister as deregisterOverflowTooltip } from './helpers/overflow-tooltip.js';
+import { deregister, register } from './managers/tooltip-manager.js';
 const PositionMap = {
-    'auto': ['bottom-start', 'top-start'],
-    'above': ['top-middle'],
-    'right': ['right-middle'],
-    'below': ['bottom-middle'],
-    'left': ['left-middle']
+    auto: ['bottom-start', 'top-start'],
+    above: ['top-middle'],
+    right: ['right-middle'],
+    below: ['bottom-middle'],
+    left: ['left-middle']
 };
 /**
  * Tooltip displays extra information when the
@@ -32,24 +32,24 @@ let Tooltip = Tooltip_1 = class Tooltip extends BasicElement {
         this.clicked = false;
         this.defaultRole = 'tooltip';
         /**
-        * CSS selector to match the tooltip
-        */
+         * CSS selector to match the tooltip
+         */
         this.selector = '';
         /**
-        * The position of the tooltip. Use the following values:
-        * `auto` (default) - display based on mouse enter coordinates
-        * `above` - display above the element
-        * `right` - display to the right of the element
-        * `below` - display beneath the element
-        * `left` - display to the left of the element
-        */
+         * The position of the tooltip. Use the following values:
+         * `auto` (default) - display based on mouse enter coordinates
+         * `above` - display above the element
+         * `right` - display to the right of the element
+         * `below` - display beneath the element
+         * `left` - display to the left of the element
+         */
         this.position = 'auto';
         /**
-        * Set the transition style.
-        * Value can be `fade`, `zoom`, `slide-down`, `slide-up`, `slide-right`,
-        * `slide-left`, `slide-right-down`, `slide-right-up`, `slide-left-down`, `slide-left-up`, or null in case of no transition
-        *  @type {TooltipTransitionStyle}
-        */
+         * Set the transition style.
+         * Value can be `fade`, `zoom`, `slide-down`, `slide-up`, `slide-right`,
+         * `slide-left`, `slide-right-down`, `slide-right-up`, `slide-left-down`, `slide-left-up`, or null in case of no transition
+         *  @type {TooltipTransitionStyle}
+         */
         this.transitionStyle = 'fade';
         this._x = 0;
         this._y = 0;
@@ -124,11 +124,11 @@ let Tooltip = Tooltip_1 = class Tooltip extends BasicElement {
         flex: none;
         visibility: hidden;
       }
-      [part=tooltip] {
+      [part='tooltip'] {
         visibility: visible;
         overflow: visible;
       }
-      [part=position-adjuster] {
+      [part='position-adjuster'] {
         position: fixed;
         z-index: -1;
         top: 0;
@@ -357,7 +357,8 @@ let Tooltip = Tooltip_1 = class Tooltip extends BasicElement {
                 return;
             }
             const matchTargetRect = matchTarget.getBoundingClientRect();
-            if (lastMatchTarget === matchTarget && !Tooltip_1.elementHasMoved(matchTargetRect, this.matchTargetRect)) {
+            if (lastMatchTarget === matchTarget &&
+                !Tooltip_1.elementHasMoved(matchTargetRect, this.matchTargetRect)) {
                 return;
             }
             this.matchTargetRect = matchTargetRect;
@@ -422,18 +423,21 @@ let Tooltip = Tooltip_1 = class Tooltip extends BasicElement {
      */
     render() {
         return html `<ef-overlay
-      part="tooltip"
-      .noCancelOnEscKey=${true}
-      .noCancelOnOutsideClick=${true}
-      .withShadow=${true}
-      .noInteractionLock=${true}
-      .noFocusManagement=${true}
-      ?opened=${this._opened}
-      .position=${this.tipPosition}
-      .transitionStyle=${this.transitionStyle}
-      .positionTarget=${this._positionTarget}
-      .x=${this._x}
-      .y=${this._y}><slot id="contentSlot"></slot></ef-overlay><div part="position-adjuster"></div>`;
+        part="tooltip"
+        .noCancelOnEscKey=${true}
+        .noCancelOnOutsideClick=${true}
+        .withShadow=${true}
+        .noInteractionLock=${true}
+        .noFocusManagement=${true}
+        ?opened=${this._opened}
+        .position=${this.tipPosition}
+        .transitionStyle=${this.transitionStyle}
+        .positionTarget=${this._positionTarget}
+        .x=${this._x}
+        .y=${this._y}
+        ><slot id="contentSlot"></slot
+      ></ef-overlay>
+      <div part="position-adjuster"></div>`;
     }
     /**
      * true if tooltip is opened, false otherwise

package/lib/tooltip/managers/tooltip-manager.d.ts

@@ -1,5 +1,5 @@
-import type { Tooltip } from '../index.js';
 import type { DocumentCallbacks } from '../helpers/types';
+import type { Tooltip } from '../index.js';
 /**
  * Register the new tooltip
  * @param tooltip Tooltip

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

@@ -1,3 +1,2 @@
 import '@refinitiv-ui/elements/overlay/themes/halo/dark';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-tooltip', styles: ':host [part=tooltip]{--panel-background-color:#FFFFFF;pointer-events:none;border:1px solid hsla(220,12%,75%,.15);padding:4px 8px;background-color:#fff;border-radius:0;overflow:hidden;max-width:320px;overflow-wrap:break-word;word-wrap:break-word;margin:4px;border:none;min-height:18px;line-height:18px;color:#0d0d0d}:host(:not([position])) [part=tooltip],:host([position=auto]) [part=tooltip]{margin-top:20px;margin-left:0}' }}));

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

@@ -1,3 +1,2 @@
 import '@refinitiv-ui/elements/overlay/themes/halo/light';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-tooltip', styles: ':host [part=tooltip]{--panel-background-color:#FFF4CC;pointer-events:none;border:1px solid hsla(220,12%,75%,.15);padding:4px 8px;background-color:#fff4cc;border-radius:0;overflow:hidden;max-width:320px;overflow-wrap:break-word;word-wrap:break-word;margin:4px;border:none;min-height:18px;line-height:18px;color:#0d0d0d}:host(:not([position])) [part=tooltip],:host([position=auto]) [part=tooltip]{margin-top:20px;margin-left:0}' }}));

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

@@ -1,3 +1,2 @@
 import '@refinitiv-ui/elements/overlay/themes/solar/charcoal';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-tooltip', styles: ':host [part=tooltip]{--panel-background-color:#3C3C42;pointer-events:none;border:1px solid #000;padding:5px 8px;background-color:#3c3c42;border-radius:0;overflow:hidden;max-width:250px;overflow-wrap:break-word;word-wrap:break-word;margin:7px}:host(:not([position])) [part=tooltip],:host([position=auto]) [part=tooltip]{margin-top:20px;margin-left:0}' }}));

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

@@ -1,3 +1,2 @@
 import '@refinitiv-ui/elements/overlay/themes/solar/pearl';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-tooltip', styles: ':host [part=tooltip]{--panel-background-color:#FFFFFF;pointer-events:none;border:1px solid #a9afba;padding:5px 8px;background-color:#fff;border-radius:0;overflow:hidden;max-width:250px;overflow-wrap:break-word;word-wrap:break-word;margin:7px}:host(:not([position])) [part=tooltip],:host([position=auto]) [part=tooltip]{margin-top:20px;margin-left:0}' }}));

package/lib/tornado-chart/elements/tornado-chart.d.ts

@@ -1,5 +1,5 @@
 import { JSXInterface } from '../../jsx';
-import { ResponsiveElement, TemplateResult, CSSResultGroup, ElementSize } from '@refinitiv-ui/core';
+import { CSSResultGroup, ElementSize, ResponsiveElement, TemplateResult } from '@refinitiv-ui/core';
 import './tornado-item.js';
 /**
  * A data visualization that helps to

package/lib/tornado-chart/elements/tornado-chart.js

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { ResponsiveElement, html, css } from '@refinitiv-ui/core';
+import { ResponsiveElement, css, html } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { VERSION } from '../../version.js';

package/lib/tornado-chart/elements/tornado-item.d.ts

@@ -1,7 +1,7 @@
 import { JSXInterface } from '../../jsx';
-import { BasicElement, TemplateResult, CSSResultGroup } from '@refinitiv-ui/core';
-import '../../progress-bar/index.js';
+import { BasicElement, CSSResultGroup, TemplateResult } from '@refinitiv-ui/core';
 import '../../layout/index.js';
+import '../../progress-bar/index.js';
 /**
  * A part of <ef-tornado-chart />,
  * consists mainly of primary, secondary ef-progress-bar and labels.

package/lib/tornado-chart/elements/tornado-item.js

@@ -1,10 +1,10 @@
 import { __decorate } from "tslib";
-import { BasicElement, html, css, nothing } from '@refinitiv-ui/core';
+import { BasicElement, css, html, nothing } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
-import { VERSION } from '../../version.js';
-import '../../progress-bar/index.js';
 import '../../layout/index.js';
+import '../../progress-bar/index.js';
+import { VERSION } from '../../version.js';
 /**
  * A part of <ef-tornado-chart />,
  * consists mainly of primary, secondary ef-progress-bar and labels.
@@ -132,18 +132,18 @@ let TornadoItem = class TornadoItem extends BasicElement {
       :host {
         display: block;
       }
-      :host([vertical]) [part=seperator] {
+      :host([vertical]) [part='seperator'] {
         display: none;
       }
-      :host([vertical]) [part=container] {
+      :host([vertical]) [part='container'] {
         align-items: inherit;
       }
-      [part=container] {
+      [part='container'] {
         padding: 0;
         align-items: center;
       }
-      [part=primary-bar],
-      [part=secondary-bar] {
+      [part='primary-bar'],
+      [part='secondary-bar'] {
         width: 100%;
       }
     `;
@@ -166,7 +166,8 @@ let TornadoItem = class TornadoItem extends BasicElement {
             part="primary-bar"
             alignment=${this.primaryBarAlignment}
             label="${this.primaryLabel || nothing}"
-            value="${this.primaryValue || nothing}">
+            value="${this.primaryValue || nothing}"
+          >
           </ef-progress-bar>
         </ef-layout>
         <div part="seperator"></div>
@@ -175,7 +176,8 @@ let TornadoItem = class TornadoItem extends BasicElement {
             part="secondary-bar"
             alignment="${this.secondaryBarAlignment}"
             label="${this.secondaryLabel || nothing}"
-            value="${this.secondaryValue || nothing}">
+            value="${this.secondaryValue || nothing}"
+          >
           </ef-progress-bar>
         </ef-layout>
       </ef-layout>

package/lib/tornado-chart/themes/halo/dark/index.js

@@ -1,6 +1,4 @@
 import '@refinitiv-ui/elements/layout/themes/halo/dark';
 import '@refinitiv-ui/elements/progress-bar/themes/halo/dark';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-tornado-chart', styles: ':host{--primary-color:#6678FF;--secondary-color:#6678FF;--responsive-width:450;font-size:12px;--primary-color:#6678FF;--secondary-color:#FFFFFF}:host [part=legend]{display:flex;justify-content:flex-end;margin-bottom:25px}:host [part=legend-item]{display:inline-flex;overflow:hidden;align-items:center;margin-right:10px}:host [part=legend][vertical]{justify-content:flex-start;flex-wrap:wrap}:host [part=primary-symbol],:host [part=secondary-symbol]{flex:none;width:15px;height:15px;border-radius:1px;margin-right:5px}:host [part=primary-symbol]{background-color:var(--primary-color)}:host [part=secondary-symbol]{background-color:var(--secondary-color)}:host [part=primary-label],:host [part=secondary-label]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}' }}));
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-tornado-item', styles: ':host{margin:0;padding:0 5px;--primary-color:var(\'--primary-color\', #6678FF);--secondary-color:var(\'--secondary-color\', #6678FF)}:host(:hover),:host([highlighted]){background-color:rgba(204,204,204,.05)}:host [part=label]{text-align:left;margin:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host [part=primary-bar],:host [part=secondary-bar]{width:100%;height:20px}:host [part=primary-bar]{color:var(--primary-color);margin-left:50px}:host [part=secondary-bar]{color:var(--secondary-color);margin-right:50px}:host [part=seperator]{height:30px;border-left:2px solid #404040}:host([vertical]){border-left:2px solid #404040;padding-bottom:5px}:host([vertical]) [part=label]{margin:3px}:host([vertical]) [part=seperator]{display:none}:host([vertical]) [part=container]{align-items:inherit}:host([vertical]) [part=primary-bar]{margin:0 50px 0 0}:host([vertical]) [part=secondary-bar]{margin:3px 50px 0 0}:host([highlighted]) [part=label],:host([highlighted]) [part=primary-bar],:host([highlighted]) [part=secondary-bar]{font-weight:600}' }}));

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

@@ -1,6 +1,4 @@
 import '@refinitiv-ui/elements/layout/themes/halo/light';
 import '@refinitiv-ui/elements/progress-bar/themes/halo/light';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-tornado-chart', styles: ':host{--primary-color:#334BFF;--secondary-color:#6678FF;--responsive-width:450;font-size:12px;--primary-color:#334BFF;--secondary-color:#000000}:host [part=legend]{display:flex;justify-content:flex-end;margin-bottom:25px}:host [part=legend-item]{display:inline-flex;overflow:hidden;align-items:center;margin-right:10px}:host [part=legend][vertical]{justify-content:flex-start;flex-wrap:wrap}:host [part=primary-symbol],:host [part=secondary-symbol]{flex:none;width:15px;height:15px;border-radius:1px;margin-right:5px}:host [part=primary-symbol]{background-color:var(--primary-color)}:host [part=secondary-symbol]{background-color:var(--secondary-color)}:host [part=primary-label],:host [part=secondary-label]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}' }}));
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-tornado-item', styles: ':host{margin:0;padding:0 5px;--primary-color:var(\'--primary-color\', #334BFF);--secondary-color:var(\'--secondary-color\', #6678FF)}:host(:hover),:host([highlighted]){background-color:rgba(13,13,13,.05)}:host [part=label]{text-align:left;margin:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host [part=primary-bar],:host [part=secondary-bar]{width:100%;height:20px}:host [part=primary-bar]{color:var(--primary-color);margin-left:50px}:host [part=secondary-bar]{color:var(--secondary-color);margin-right:50px}:host [part=seperator]{height:30px;border-left:2px solid #d9d9d9}:host([vertical]){border-left:2px solid #d9d9d9;padding-bottom:5px}:host([vertical]) [part=label]{margin:3px}:host([vertical]) [part=seperator]{display:none}:host([vertical]) [part=container]{align-items:inherit}:host([vertical]) [part=primary-bar]{margin:0 50px 0 0}:host([vertical]) [part=secondary-bar]{margin:3px 50px 0 0}:host([highlighted]) [part=label],:host([highlighted]) [part=primary-bar],:host([highlighted]) [part=secondary-bar]{font-weight:600}' }}));

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

@@ -1,6 +1,4 @@
 import '@refinitiv-ui/elements/layout/themes/solar/charcoal';
 import '@refinitiv-ui/elements/progress-bar/themes/solar/charcoal';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-tornado-chart', styles: ':host{--primary-color:#FF9933;--secondary-color:#b35900;--responsive-width:450;font-size:14px;--secondary-color:#BEC3CC}:host [part=legend]{display:flex;justify-content:flex-end;margin-bottom:25px}:host [part=legend-item]{display:inline-flex;overflow:hidden;align-items:center;margin-right:10px}:host [part=legend][vertical]{justify-content:flex-start;flex-wrap:wrap}:host [part=primary-symbol],:host [part=secondary-symbol]{flex:none;width:15px;height:15px;border-radius:1px;margin-right:5px}:host [part=primary-symbol]{background-color:var(--primary-color)}:host [part=secondary-symbol]{background-color:var(--secondary-color)}:host [part=primary-label],:host [part=secondary-label]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}' }}));
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-tornado-item', styles: ':host{margin:0;padding:0 5px;--primary-color:var(\'--primary-color\', #FF9933);--secondary-color:var(\'--secondary-color\', #b35900);--secondary-color:var(\'--secondary-color\', #BEC3CC)}:host(:hover),:host([highlighted]){background-color:rgba(194,194,194,.05)}:host [part=label]{text-align:left;margin:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host [part=primary-bar],:host [part=secondary-bar]{width:100%;height:20px}:host [part=primary-bar]{color:var(--primary-color);margin-left:50px}:host [part=secondary-bar]{color:var(--secondary-color);margin-right:50px}:host [part=seperator]{height:30px;border-left:2px solid #0a0a0a}:host([highlighted]) [part=label],:host([highlighted]) [part=primary-bar],:host([highlighted]) [part=secondary-bar]{font-weight:700}:host([vertical]){border-left:2px solid #0a0a0a;padding-bottom:5px}:host([vertical]) [part=label]{margin:3px}:host([vertical]) [part=seperator]{display:none}:host([vertical]) [part=container]{align-items:inherit}:host([vertical]) [part=primary-bar]{margin:0 50px 0 0}:host([vertical]) [part=secondary-bar]{margin:3px 50px 0 0}' }}));

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

@@ -1,6 +1,4 @@
 import '@refinitiv-ui/elements/layout/themes/solar/pearl';
 import '@refinitiv-ui/elements/progress-bar/themes/solar/pearl';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-tornado-chart', styles: ':host{--primary-color:#EE7600;--secondary-color:#EE7600;--responsive-width:450;font-size:14px;--secondary-color:#BEC3CC}:host [part=legend]{display:flex;justify-content:flex-end;margin-bottom:25px}:host [part=legend-item]{display:inline-flex;overflow:hidden;align-items:center;margin-right:10px}:host [part=legend][vertical]{justify-content:flex-start;flex-wrap:wrap}:host [part=primary-symbol],:host [part=secondary-symbol]{flex:none;width:15px;height:15px;border-radius:1px;margin-right:5px}:host [part=primary-symbol]{background-color:var(--primary-color)}:host [part=secondary-symbol]{background-color:var(--secondary-color)}:host [part=primary-label],:host [part=secondary-label]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}' }}));
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-tornado-item', styles: ':host{margin:0;padding:0 5px;--primary-color:var(\'--primary-color\', #EE7600);--secondary-color:var(\'--secondary-color\', #EE7600);--secondary-color:var(\'--secondary-color\', #BEC3CC)}:host(:hover),:host([highlighted]){background-color:rgba(72,72,72,.05)}:host [part=label]{text-align:left;margin:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host [part=primary-bar],:host [part=secondary-bar]{width:100%;height:20px}:host [part=primary-bar]{color:var(--primary-color);margin-left:50px}:host [part=secondary-bar]{color:var(--secondary-color);margin-right:50px}:host [part=seperator]{height:30px;border-left:2px solid #d5d8db}:host([highlighted]) [part=label],:host([highlighted]) [part=primary-bar],:host([highlighted]) [part=secondary-bar]{font-weight:700}:host([vertical]){border-left:2px solid #d5d8db;padding-bottom:5px}:host([vertical]) [part=label]{margin:3px}:host([vertical]) [part=seperator]{display:none}:host([vertical]) [part=container]{align-items:inherit}:host([vertical]) [part=primary-bar]{margin:0 50px 0 0}:host([vertical]) [part=secondary-bar]{margin:3px 50px 0 0}' }}));

package/lib/tree/elements/tree-item.d.ts

@@ -1,9 +1,9 @@
 import { JSXInterface } from '../../jsx';
-import { TemplateResult, ControlElement, PropertyValues } from '@refinitiv-ui/core';
-import '../../icon/index.js';
+import { ControlElement, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
 import '../../checkbox/index.js';
-import type { TreeDataItem } from '../helpers/types';
+import '../../icon/index.js';
 import { CheckedState } from '../managers/tree-manager.js';
+import type { TreeDataItem } from '../helpers/types';
 /**
  * Displays a tree list item.
  * Groups display expansion arrows.

package/lib/tree/elements/tree-item.js

@@ -1,11 +1,11 @@
 import { __decorate } from "tslib";
-import { html, ControlElement } from '@refinitiv-ui/core';
+import { ControlElement, html } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
-import { VERSION } from '../../version.js';
+import '../../checkbox/index.js';
 import '../../icon/index.js';
 import { preload } from '../../icon/index.js';
-import '../../checkbox/index.js';
+import { VERSION } from '../../version.js';
 import { CheckedState } from '../managers/tree-manager.js';
 preload('right');
 const emptyTemplate = html ``;
@@ -75,9 +75,13 @@ let TreeItem = class TreeItem extends ControlElement {
      */
     get toggleTemplate() {
         return html `
-    <div expand-toggle part="toggle" style="pointer-events:all;visibility:${this.parent ? 'visible' : 'hidden'}">
-      <ef-icon part="toggle-icon${this.expanded ? ' toggle-icon-expanded' : ''}" icon="right"></ef-icon>
-    </div>
+      <div
+        expand-toggle
+        part="toggle"
+        style="pointer-events:all;visibility:${this.parent ? 'visible' : 'hidden'}"
+      >
+        <ef-icon part="toggle-icon${this.expanded ? ' toggle-icon-expanded' : ''}" icon="right"></ef-icon>
+      </div>
     `;
     }
     /**
@@ -88,14 +92,15 @@ let TreeItem = class TreeItem extends ControlElement {
             return emptyTemplate;
         }
         return html `
-    <ef-checkbox
-      part="checkbox"
-      tabindex="-1"
-      .disabled="${this.disabled}"
-      .readonly="${this.readonly}"
-      .indeterminate="${this.indeterminate}"
-      .checked="${this.checked}"
-      style="pointer-events:none"></ef-checkbox>
+      <ef-checkbox
+        part="checkbox"
+        tabindex="-1"
+        .disabled="${this.disabled}"
+        .readonly="${this.readonly}"
+        .indeterminate="${this.indeterminate}"
+        .checked="${this.checked}"
+        style="pointer-events:none"
+      ></ef-checkbox>
     `;
     }
     /**
@@ -195,14 +200,11 @@ let TreeItem = class TreeItem extends ControlElement {
      */
     render() {
         return html `
-      ${this.indentTemplate}
-      ${this.toggleTemplate}
-      ${this.checkboxTemplate}
-      ${this.iconTemplate}
+      ${this.indentTemplate} ${this.toggleTemplate} ${this.checkboxTemplate} ${this.iconTemplate}
       <div part="label">
         <slot>${this.label}</slot>
       </div>
-  `;
+    `;
     }
 };
 __decorate([

package/lib/tree/elements/tree.d.ts

@@ -3,9 +3,9 @@ import { PropertyValues, TapEvent } from '@refinitiv-ui/core';
 import { CollectionComposer } from '@refinitiv-ui/utils/collection.js';
 import { List } from '../../list/index.js';
 import { TreeRenderer } from '../helpers/renderer.js';
-import type { TreeData, TreeDataItem, TreeFilter } from '../helpers/types';
 import { TreeManagerMode } from '../managers/tree-manager.js';
 import './tree-item.js';
+import type { TreeData, TreeDataItem, TreeFilter } from '../helpers/types';
 /**
  * Displays a tree structure
  * to be used for menus and group selections

package/lib/tree/elements/tree.js

@@ -1,10 +1,10 @@
 import { __decorate } from "tslib";
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
-import { VERSION } from '../../version.js';
 import { List, valueFormatWarning } from '../../list/index.js';
-import { TreeRenderer } from '../helpers/renderer.js';
+import { VERSION } from '../../version.js';
 import { defaultFilter } from '../helpers/filter.js';
+import { TreeRenderer } from '../helpers/renderer.js';
 import { TreeManager, TreeManagerMode } from '../managers/tree-manager.js';
 import './tree-item.js';
 const EXPAND_TOGGLE_ATTR = 'expand-toggle';
@@ -109,7 +109,7 @@ let Tree = class Tree extends List {
         }
         // Single selection - check item
         if (this.manager.checkItem(item)) {
-            this.manager.checkedItems.forEach(checkedItem => {
+            this.manager.checkedItems.forEach((checkedItem) => {
                 checkedItem !== item && this.forceUncheckItem(checkedItem);
             });
             return true;
@@ -133,9 +133,9 @@ let Tree = class Tree extends List {
      */
     dispatchExpandedChangedEvent(item) {
         /**
-        * Property `detail.value` is the current expanded state.
-        * Property `detail.item` is the original data item of which the property has been modified.
-        */
+         * Property `detail.value` is the current expanded state.
+         * Property `detail.item` is the original data item of which the property has been modified.
+         */
         const event = new CustomEvent('expanded-changed', {
             bubbles: false,
             cancelable: false,
@@ -154,7 +154,9 @@ let Tree = class Tree extends List {
      * @returns True or False depending if the event was handled
      */
     handleExpandCollapse(event) {
-        const containsToggle = event.composedPath().some((target) => target instanceof HTMLElement && target.hasAttribute(EXPAND_TOGGLE_ATTR));
+        const containsToggle = event
+            .composedPath()
+            .some((target) => target instanceof HTMLElement && target.hasAttribute(EXPAND_TOGGLE_ATTR));
         const itemElement = containsToggle && this.findItemElementFromTarget(event.target);
         const item = itemElement && this.itemFromElement(itemElement);
         if (item) {
@@ -323,7 +325,7 @@ let Tree = class Tree extends List {
      * @returns {void}
      */
     addNestedItemsToRender(items, excludeItems, includeHidden = false) {
-        items.forEach(item => {
+        items.forEach((item) => {
             // Skip hidden and exclude item
             if (!item.hidden && !excludeItems.includes(item)) {
                 // Add item and nested children
@@ -373,7 +375,7 @@ let Tree = class Tree extends List {
      * @default []
      */
     get values() {
-        return this.manager.checkedItems.map(item => {
+        return this.manager.checkedItems.map((item) => {
             return this.composer.getItemPropertyValue(item, 'value') || '';
         });
     }
@@ -420,8 +422,7 @@ let Tree = class Tree extends List {
      * Mode to use in the tree manager
      */
     get mode() {
-        return !this.multiple || !this.noRelation
-            ? TreeManagerMode.RELATIONAL : TreeManagerMode.INDEPENDENT;
+        return !this.multiple || !this.noRelation ? TreeManagerMode.RELATIONAL : TreeManagerMode.INDEPENDENT;
     }
 };
 __decorate([

package/lib/tree/helpers/renderer.js

@@ -1,7 +1,7 @@
 import { uuid } from '@refinitiv-ui/utils/uuid.js';
-import { TreeManager, TreeManagerMode, CheckedState } from '../managers/tree-manager.js';
-import { Renderer } from '../../list/renderer.js';
 import { getItemId } from '../../list/helpers/item-id.js';
+import { Renderer } from '../../list/renderer.js';
+import { CheckedState, TreeManager, TreeManagerMode } from '../managers/tree-manager.js';
 export class TreeRenderer extends Renderer {
     constructor(scope) {
         /**
@@ -26,7 +26,8 @@ export class TreeRenderer extends Renderer {
             element.depth = composer.getItemDepth(item);
             element.parent = composer.getItemChildren(item).length > 0;
             element.expanded = manager.isItemExpanded(item);
-            element.checkedState = !multiple && element.parent ? CheckedState.UNCHECKED : manager.getItemCheckedState(item);
+            element.checkedState =
+                !multiple && element.parent ? CheckedState.UNCHECKED : manager.getItemCheckedState(item);
             element.icon = composer.getItemPropertyValue(item, 'icon');
             element.label = composer.getItemPropertyValue(item, 'label');
             element.disabled = composer.getItemPropertyValue(item, 'disabled') === true;

package/lib/tree/index.d.ts

@@ -1,6 +1,6 @@
+import type { TreeData, TreeDataItem } from './helpers/types';
 export * from './elements/tree.js';
 export * from './elements/tree-item.js';
 export { TreeRenderer } from './helpers/renderer.js';
 export { TreeManager, TreeManagerMode, CheckedState } from './managers/tree-manager.js';
-import type { TreeData, TreeDataItem } from './helpers/types';
 export type { TreeData, TreeDataItem };

package/lib/tree/managers/tree-manager.d.ts

@@ -1,5 +1,5 @@
-import type { CollectionComposer } from '@refinitiv-ui/utils/collection.js';
 import type { TreeDataItem } from '../helpers/types';
+import type { CollectionComposer } from '@refinitiv-ui/utils/collection.js';
 export declare enum CheckedState {
     CHECKED = 1,
     UNCHECKED = 0,

package/lib/tree/managers/tree-manager.js

@@ -40,7 +40,7 @@ export class TreeManager {
      * Return all items which have children
      */
     get parentItems() {
-        return this.items.filter(item => this.isItemParent(item));
+        return this.items.filter((item) => this.isItemParent(item));
     }
     /**
      * Returns all checked items.
@@ -116,7 +116,7 @@ export class TreeManager {
      */
     isItemChecked(item) {
         if (this.manageRelationships && this.isItemParent(item)) {
-            return !this.getItemChildren(item).some(child => !this.isItemChecked(child));
+            return !this.getItemChildren(item).some((child) => !this.isItemChecked(child));
         }
         return this.composer.getItemPropertyValue(item, 'selected') === true;
     }
@@ -127,7 +127,7 @@ export class TreeManager {
      */
     isItemCheckedIndeterminate(item) {
         if (this.manageRelationships && this.isItemParent(item)) {
-            return this.getItemDescendants(item).some(desc => this.isItemChecked(desc));
+            return this.getItemDescendants(item).some((desc) => this.isItemChecked(desc));
         }
         return false;
     }
@@ -138,7 +138,7 @@ export class TreeManager {
      */
     canCheckItem(item) {
         if (this.manageRelationships && this.isItemParent(item)) {
-            return this.getItemChildren(item).some(child => this.canCheckItem(child));
+            return this.getItemChildren(item).some((child) => this.canCheckItem(child));
         }
         return this.isItemCheckable(item) && this.composer.getItemPropertyValue(item, 'selected') !== true;
     }
@@ -149,7 +149,7 @@ export class TreeManager {
      */
     canUncheckItem(item) {
         if (this.manageRelationships && this.isItemParent(item)) {
-            return this.getItemChildren(item).some(child => this.canUncheckItem(child));
+            return this.getItemChildren(item).some((child) => this.canUncheckItem(child));
         }
         return this.isItemCheckable(item) && this.composer.getItemPropertyValue(item, 'selected') === true;
     }
@@ -177,7 +177,7 @@ export class TreeManager {
      */
     forceUpdateOnPath(item) {
         const path = [...this.getItemAncestors(item), item];
-        path.forEach(item => this.composer.updateItemTimestamp(item));
+        path.forEach((item) => this.composer.updateItemTimestamp(item));
     }
     /**
      * Sets the mode (algorithm) the manager should use
@@ -187,7 +187,7 @@ export class TreeManager {
     setMode(mode) {
         this.mode = mode;
         // Force update of all visible parent items, making sure any indeterminate states are remove.
-        this.parentItems.forEach(item => this.updateItem(item));
+        this.parentItems.forEach((item) => this.updateItem(item));
     }
     /**
      * Updates the data item, forcing a render
@@ -222,9 +222,9 @@ export class TreeManager {
      * @returns `True` if the item is not disabled or readonly
      */
     isItemCheckable(item) {
-        return !this.composer.isItemLocked(item)
-            && this.composer.getItemPropertyValue(item, 'disabled') !== true
-            && this.composer.getItemPropertyValue(item, 'readonly') !== true;
+        return (!this.composer.isItemLocked(item) &&
+            this.composer.getItemPropertyValue(item, 'disabled') !== true &&
+            this.composer.getItemPropertyValue(item, 'readonly') !== true);
     }
     /**
      * Is the item expanded?
@@ -232,8 +232,7 @@ export class TreeManager {
      * @returns `True` if the item is expanded and its children should be visible
      */
     isItemExpanded(item) {
-        return this.isItemParent(item)
-            && this.composer.getItemPropertyValue(item, 'expanded') === true;
+        return this.isItemParent(item) && this.composer.getItemPropertyValue(item, 'expanded') === true;
     }
     /**
      * Is the item a parent?
@@ -323,14 +322,14 @@ export class TreeManager {
      * @returns {void}
      */
     expandAllItems() {
-        this.parentItems.forEach(item => this.expandItem(item));
+        this.parentItems.forEach((item) => this.expandItem(item));
     }
     /**
      * Collapses all items in the tree
      * @returns {void}
      */
     collapseAllItems() {
-        this.parentItems.forEach(item => this.collapseItem(item));
+        this.parentItems.forEach((item) => this.collapseItem(item));
     }
     /**
      * Checks the item
@@ -345,7 +344,7 @@ export class TreeManager {
             this.composer.setItemPropertyValue(item, 'selected', true);
             if (manageRelationships) {
                 this.forceUpdateOnPath(item);
-                this.getItemDescendants(item).forEach(descendant => this._checkItem(descendant, false));
+                this.getItemDescendants(item).forEach((descendant) => this._checkItem(descendant, false));
             }
             return true;
         }
@@ -364,7 +363,7 @@ export class TreeManager {
             this.composer.setItemPropertyValue(item, 'selected', false);
             if (manageRelationships) {
                 this.forceUpdateOnPath(item);
-                this.getItemDescendants(item).forEach(descendant => this._uncheckItem(descendant, false));
+                this.getItemDescendants(item).forEach((descendant) => this._uncheckItem(descendant, false));
             }
             this.updateItem(item);
             return true;
@@ -384,7 +383,7 @@ export class TreeManager {
      * @returns {void}
      */
     checkAllItems() {
-        this.editableItems.forEach(item => this.checkItem(item));
+        this.editableItems.forEach((item) => this.checkItem(item));
     }
     /**
      * Unchecks all items
@@ -393,6 +392,6 @@ export class TreeManager {
     uncheckAllItems() {
         // uncheck items from top levels when manage relationships to avoid redundant re-renders
         const items = this.manageRelationships ? this.composer.queryItems(() => true, 0) : this.checkedItems;
-        items.forEach(item => this.uncheckItem(item));
+        items.forEach((item) => this.uncheckItem(item));
     }
 }