@refinitiv-ui/elements 6.8.8 → 6.8.9

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

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

@@ -1,4 +1,4 @@
 import '@refinitiv-ui/elements/checkbox/themes/solar/charcoal';
 import '@refinitiv-ui/elements/icon/themes/solar/charcoal';
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-tree-item', styles: '@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){:host(:after){content:\'\';min-height:inherit;font-size:0}}:host([selected]){color:#f93}:host([readonly]){cursor:default}:host([focused]),:host([highlighted]){background-color:rgba(255,255,255,.1)}:host([focused]:not([selected])),:host([highlighted]:not([selected])){color:#fff}:host [part=center],:host [part=sub-label]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host([disabled]){color:rgba(194,194,194,.5)}:host([type=divider]),:host([type=header]){pointer-events:none;min-height:auto}:host([type=divider]) [part=sub-label],:host([type=header]) [part=sub-label]{display:none}:host([type=header]){color:#c2c2c2;background-color:#4a4a52;font-size:100%;font-weight:400;border:1px solid #0a0a0a;height:22px;align-items:flex-end;margin:0;min-height:0;text-transform:uppercase}:host([type=divider]){border:none;padding:0;margin:0;height:5px;background:linear-gradient(#2e2e33,#2e2e33) 0 center/calc(100% - (0px * 2)) 1px no-repeat}:host [part=checkbox],:host [part=icon],:host [part=left] ::slotted(*){margin:0 .5em 0 0}:host [part=right] ::slotted(*){margin-left:.5em}:host [part=sub-label]{font-size:80%}:host{line-height:normal;outline:0;cursor:pointer;padding:0 7px;min-height:22px;box-sizing:border-box;touch-action:manipulation;min-width:300px;display:flex;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;min-height:29px;background-color:#151516;border-bottom:1px solid #0a0a0a}:host(:after){content:\'\';min-height:inherit;font-size:0}:host [part=indent]{height:0;width:0;flex:none;font-size:22px}:host [part=toggle]{width:22px;height:22px;margin-top:0;margin-bottom:0;margin-left:0;max-height:100%;display:flex;align-items:center;justify-content:center;flex:none}:host [part~=toggle-icon]{transition:transform .2s}:host [part~=toggle-icon-expanded]{transform:rotate(90deg)}:host [part=checkbox]{flex:none;margin:0 8px 0 0}:host [part=label-icon]{flex-shrink:0;margin:0 4px 0 0}:host [part=label]{width:100%;word-break:break-word;padding:4px 6px 4px 0}:host([depth="0"]){background-color:#212124}:host([highlighted]){background-color:#2e2d33}:host([focused=visible]){outline:#f93 dotted 1px;outline-offset:-1px;border-color:transparent}:host(:last-of-type){border-color:transparent}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-tree-item', styles: '@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){:host(:after){content:\'\';min-height:inherit;font-size:0}}:host([selected]){color:#f93}:host([readonly]){cursor:default}:host([focused]),:host([highlighted]){background-color:rgba(255,255,255,.1)}:host([focused]:not([selected])),:host([highlighted]:not([selected])){color:#fff}:host [part=center],:host [part=sub-label]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host([disabled]){color:rgba(194,194,194,.5)}:host([type=divider]),:host([type=header]){pointer-events:none;min-height:auto}:host([type=divider]) [part=sub-label],:host([type=header]) [part=sub-label]{display:none}:host([type=header]){color:#c2c2c2;background-color:#4a4a52;font-size:100%;font-weight:400;border:1px solid #0a0a0a;height:22px;align-items:flex-end;margin:0;min-height:0;text-transform:uppercase}:host([type=divider]){border:none;padding:0;margin:0;height:5px;background:linear-gradient(#2e2e33,#2e2e33) 0 center/calc(100% - (0px * 2)) 1px no-repeat}:host [part=checkbox],:host [part=icon],:host [part=left] ::slotted(*){margin:0 .5em 0 0}:host [part=right] ::slotted(*){margin-left:.5em}:host [part=sub-label]{font-size:80%}:host{line-height:normal;outline:0;cursor:pointer;padding:0 7px;min-height:22px;box-sizing:border-box;touch-action:manipulation;min-width:300px;display:flex;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;min-height:29px;background-color:#151516;border-bottom:1px solid #0a0a0a}:host(:after){content:\'\';min-height:inherit;font-size:0}:host [part=indent]{height:0;width:0;flex:none;font-size:22px}:host [part=toggle]{width:22px;height:22px;margin-top:0;margin-bottom:0;margin-left:0;max-height:100%;display:flex;align-items:center;justify-content:center;flex:none}:host [part~=toggle-icon]{transition:transform .2s}:host [part~=toggle-icon-expanded]{transform:rotate(90deg)}:host [part=checkbox]{flex:none;margin:0 8px 0 0}:host [part=label-icon]{flex-shrink:0;margin:0 4px 0 0}:host [part=label]{width:100%;word-break:break-word;padding:4px 6px 4px 0}:host([depth=\'0\']){background-color:#212124}:host([highlighted]){background-color:#2e2d33}:host([focused=visible]){outline:#f93 dotted 1px;outline-offset:-1px;border-color:transparent}:host(:last-of-type){border-color:transparent}' }}));
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-tree', styles: ':host{overflow-x:auto;--item-indent:7px;--item-height:22px;color:#c2c2c2;background-color:transparent;touch-action:manipulation;scrollbar-face-color:#666570;scrollbar-shadow-color:#666570;scrollbar-highlight-color:#666570;scrollbar-arrow-color:#666570;scrollbar-track-color:#2e2e33;scrollbar-3dlight-color:#2e2e33;scrollbar-darkshadow-color:#2e2e33;scrollbar-color:#666570 #2e2e33}:host(:focus){outline:0}:host([focused=visible]){outline:#f93 solid 1px}:host([readonly]) [part=list-item]{cursor:default}::-webkit-scrollbar{width:13px;height:13px}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #2e2e33;height:12px;width:12px;display:block}::-webkit-scrollbar-thumb{background:#666570;border-radius:7px;border:2px solid #2e2e33}::-webkit-scrollbar-thumb:hover{background:#e2e2e2}::-webkit-scrollbar-thumb:active{background:#f93}::-webkit-scrollbar-track{background:#2e2e33}::-webkit-scrollbar-corner{background:#2e2e33}::-webkit-scrollbar-button:end:decrement,::-webkit-scrollbar-button:start:increment{display:none}::-webkit-scrollbar-button:horizontal{background-size:2px 1px}::-webkit-scrollbar-button:vertical:start:decrement{background-image:linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:start:decrement:hover{background-image:linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:start:decrement:active{background-image:linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:end:increment{background-image:linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:vertical:end:increment:hover{background-image:linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:vertical:end:increment:active{background-image:linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:horizontal:start:decrement{background-image:linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:hover{background-image:linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:active{background-image:linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment{background-image:linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:hover{background-image:linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:active{background-image:linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}' }}));

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

@@ -1,4 +1,4 @@
 import '@refinitiv-ui/elements/checkbox/themes/solar/pearl';
 import '@refinitiv-ui/elements/icon/themes/solar/pearl';
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-tree-item', styles: '@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){:host(:after){content:\'\';min-height:inherit;font-size:0}}:host([selected]){color:#ee7600}:host([readonly]){cursor:default}:host([focused]),:host([highlighted]){background-color:rgba(0,0,0,.08)}:host([focused]:not([selected])),:host([highlighted]:not([selected])){color:#000}:host [part=center],:host [part=sub-label]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host([disabled]){color:rgba(72,72,72,.5)}:host([type=divider]),:host([type=header]){pointer-events:none;min-height:auto}:host([type=divider]) [part=sub-label],:host([type=header]) [part=sub-label]{display:none}:host([type=header]){color:#484848;background-color:#f2f3f7;font-size:100%;font-weight:400;border:1px solid #d5d8db;height:22px;align-items:flex-end;margin:0;min-height:0;text-transform:uppercase}:host([type=divider]){border:none;padding:0;margin:0;height:5px;background:linear-gradient(#a9afba,#a9afba) 0 center/calc(100% - (0px * 2)) 1px no-repeat}:host [part=checkbox],:host [part=icon],:host [part=left] ::slotted(*){margin:0 .5em 0 0}:host [part=right] ::slotted(*){margin-left:.5em}:host [part=sub-label]{font-size:80%}:host{line-height:normal;outline:0;cursor:pointer;padding:0 7px;min-height:22px;box-sizing:border-box;touch-action:manipulation;min-width:300px;display:flex;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;min-height:29px;background-color:#fafbfc;border-bottom:1px solid #d5d8db}:host(:after){content:\'\';min-height:inherit;font-size:0}:host [part=indent]{height:0;width:0;flex:none;font-size:22px}:host [part=toggle]{width:22px;height:22px;margin-top:0;margin-bottom:0;margin-left:0;max-height:100%;display:flex;align-items:center;justify-content:center;flex:none}:host [part~=toggle-icon]{transition:transform .2s}:host [part~=toggle-icon-expanded]{transform:rotate(90deg)}:host [part=checkbox]{flex:none;margin:0 8px 0 0}:host [part=label-icon]{flex-shrink:0;margin:0 4px 0 0}:host [part=label]{width:100%;word-break:break-word;padding:4px 6px 4px 0}:host([depth="0"]){background-color:#f2f3f7}:host([highlighted]){background-color:#e4e8ed}:host([focused=visible]){outline:#f93 dotted 1px;outline-offset:-1px;border-color:transparent}:host(:last-of-type){border-color:transparent}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-tree-item', styles: '@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){:host(:after){content:\'\';min-height:inherit;font-size:0}}:host([selected]){color:#ee7600}:host([readonly]){cursor:default}:host([focused]),:host([highlighted]){background-color:rgba(0,0,0,.08)}:host([focused]:not([selected])),:host([highlighted]:not([selected])){color:#000}:host [part=center],:host [part=sub-label]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host([disabled]){color:rgba(72,72,72,.5)}:host([type=divider]),:host([type=header]){pointer-events:none;min-height:auto}:host([type=divider]) [part=sub-label],:host([type=header]) [part=sub-label]{display:none}:host([type=header]){color:#484848;background-color:#f2f3f7;font-size:100%;font-weight:400;border:1px solid #d5d8db;height:22px;align-items:flex-end;margin:0;min-height:0;text-transform:uppercase}:host([type=divider]){border:none;padding:0;margin:0;height:5px;background:linear-gradient(#a9afba,#a9afba) 0 center/calc(100% - (0px * 2)) 1px no-repeat}:host [part=checkbox],:host [part=icon],:host [part=left] ::slotted(*){margin:0 .5em 0 0}:host [part=right] ::slotted(*){margin-left:.5em}:host [part=sub-label]{font-size:80%}:host{line-height:normal;outline:0;cursor:pointer;padding:0 7px;min-height:22px;box-sizing:border-box;touch-action:manipulation;min-width:300px;display:flex;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;min-height:29px;background-color:#fafbfc;border-bottom:1px solid #d5d8db}:host(:after){content:\'\';min-height:inherit;font-size:0}:host [part=indent]{height:0;width:0;flex:none;font-size:22px}:host [part=toggle]{width:22px;height:22px;margin-top:0;margin-bottom:0;margin-left:0;max-height:100%;display:flex;align-items:center;justify-content:center;flex:none}:host [part~=toggle-icon]{transition:transform .2s}:host [part~=toggle-icon-expanded]{transform:rotate(90deg)}:host [part=checkbox]{flex:none;margin:0 8px 0 0}:host [part=label-icon]{flex-shrink:0;margin:0 4px 0 0}:host [part=label]{width:100%;word-break:break-word;padding:4px 6px 4px 0}:host([depth=\'0\']){background-color:#f2f3f7}:host([highlighted]){background-color:#e4e8ed}:host([focused=visible]){outline:#f93 dotted 1px;outline-offset:-1px;border-color:transparent}:host(:last-of-type){border-color:transparent}' }}));
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-tree', styles: ':host{overflow-x:auto;--item-indent:7px;--item-height:22px;color:#484848;background-color:transparent;touch-action:manipulation;scrollbar-face-color:#8a8a96;scrollbar-shadow-color:#8a8a96;scrollbar-highlight-color:#8a8a96;scrollbar-arrow-color:#8a8a96;scrollbar-track-color:#fff;scrollbar-3dlight-color:#fff;scrollbar-darkshadow-color:#fff;scrollbar-color:#8a8a96 #fff}:host(:focus){outline:0}:host([focused=visible]){outline:#f93 solid 1px}:host([readonly]) [part=list-item]{cursor:default}::-webkit-scrollbar{width:13px;height:13px}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #fff;height:12px;width:12px;display:block}::-webkit-scrollbar-thumb{background:#8a8a96;border-radius:7px;border:2px solid #fff}::-webkit-scrollbar-thumb:hover{background:#a9afba}::-webkit-scrollbar-thumb:active{background:#ee7600}::-webkit-scrollbar-track{background:#fff}::-webkit-scrollbar-corner{background:#fff}::-webkit-scrollbar-button:end:decrement,::-webkit-scrollbar-button:start:increment{display:none}::-webkit-scrollbar-button:horizontal{background-size:2px 1px}::-webkit-scrollbar-button:vertical:start:decrement{background-image:linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:start:decrement:hover{background-image:linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:start:decrement:active{background-image:linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:end:increment{background-image:linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:vertical:end:increment:hover{background-image:linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:vertical:end:increment:active{background-image:linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:horizontal:start:decrement{background-image:linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:hover{background-image:linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:active{background-image:linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment{background-image:linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:hover{background-image:linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:active{background-image:linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}' }}));

package/lib/tree-select/index.d.ts

@@ -1,20 +1,20 @@
 import { JSXInterface } from '../jsx';
-import { TemplateResult, CSSResultGroup } from '@refinitiv-ui/core';
-import { CollectionComposer } from '@refinitiv-ui/utils/collection.js';
+import { CSSResultGroup, TemplateResult } from '@refinitiv-ui/core';
+import '@refinitiv-ui/phrasebook/locale/en/tree-select.js';
+import { TranslateDirective } from '@refinitiv-ui/translate';
 import { TimeoutTaskRunner } from '@refinitiv-ui/utils/async.js';
-import '../icon/index.js';
-import '../pill/index.js';
+import { CollectionComposer } from '@refinitiv-ui/utils/collection.js';
 import '../button/index.js';
 import '../checkbox/index.js';
-import '../tree/index.js';
-import type { Overlay } from '../overlay';
 import { ComboBox, ComboBoxFilter as TreeSelectFilter } from '../combo-box/index.js';
-import type { CheckChangedEvent } from '../events';
+import '../icon/index.js';
+import '../pill/index.js';
+import '../tree/index.js';
 import { TreeRenderer as TreeSelectRenderer } from '../tree/index.js';
 import { TreeManager, TreeManagerMode } from '../tree/managers/tree-manager.js';
+import type { CheckChangedEvent } from '../events';
+import type { Overlay } from '../overlay';
 import type { TreeSelectData, TreeSelectDataItem } from './helpers/types';
-import { TranslateDirective } from '@refinitiv-ui/translate';
-import '@refinitiv-ui/phrasebook/locale/en/tree-select.js';
 export { TreeSelectRenderer };
 export type { TreeSelectFilter, TreeSelectDataItem, TreeSelectData };
 /**