@refinitiv-ui/elements 6.8.7 → 6.8.9

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 };
 /**

package/lib/tree-select/index.js

@@ -1,23 +1,23 @@
 import { __decorate } from "tslib";
-import { html, css, nothing, triggerResize } from '@refinitiv-ui/core';
+import { css, html, nothing, triggerResize } 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 { styleMap } from '@refinitiv-ui/core/directives/style-map.js';
 import { repeat } from '@refinitiv-ui/core/directives/repeat.js';
-import { VERSION } from '../version.js';
-import { CollectionComposer } from '@refinitiv-ui/utils/collection.js';
+import { styleMap } from '@refinitiv-ui/core/directives/style-map.js';
+import '@refinitiv-ui/phrasebook/locale/en/tree-select.js';
+import { translate } 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 { ComboBox } from '../combo-box/index.js';
+import '../icon/index.js';
+import '../pill/index.js';
+import '../tree/index.js';
 import { TreeRenderer as TreeSelectRenderer } from '../tree/index.js';
 import { CheckedState, TreeManager, TreeManagerMode } from '../tree/managers/tree-manager.js';
-import { translate } from '@refinitiv-ui/translate';
-import '@refinitiv-ui/phrasebook/locale/en/tree-select.js';
+import { VERSION } from '../version.js';
 export { TreeSelectRenderer };
 const MEMO_THROTTLE = 16;
 const POPUP_POSITION = ['bottom-start', 'top-start'];
@@ -111,14 +111,14 @@ let TreeSelect = class TreeSelect extends ComboBox {
     }
     static get styles() {
         return css `
-      [part=list] {
+      [part='list'] {
         display: flex;
         flex-direction: row;
         box-sizing: content-box;
         cursor: default;
       }
 
-      [part=section] {
+      [part='section'] {
         display: flex;
         flex-direction: column;
         width: inherit;
@@ -130,7 +130,7 @@ let TreeSelect = class TreeSelect extends ComboBox {
         overflow: hidden;
       }
 
-      [part=selection-area] {
+      [part='selection-area'] {
         min-height: 0;
         flex-grow: 1;
         flex-shrink: 1;
@@ -140,7 +140,7 @@ let TreeSelect = class TreeSelect extends ComboBox {
         outline: none;
       }
 
-      [part~=control-container] {
+      [part~='control-container'] {
         box-sizing: border-box;
         display: flex;
         flex-shrink: 0;
@@ -149,7 +149,7 @@ let TreeSelect = class TreeSelect extends ComboBox {
         align-items: center;
       }
 
-      [part=pills] {
+      [part='pills'] {
         flex: none;
       }
     `;
@@ -193,7 +193,7 @@ let TreeSelect = class TreeSelect extends ComboBox {
      * @override
      */
     get composerValues() {
-        return this.treeManager.checkedItems.map(item => item.value || '').slice();
+        return this.treeManager.checkedItems.map((item) => item.value || '').slice();
     }
     /**
      * Provide list of currently selected items
@@ -207,7 +207,7 @@ let TreeSelect = class TreeSelect extends ComboBox {
      * @override
      */
     get selectedLabels() {
-        return this.checkedGroupedItems.map(selected => this.getItemPropertyValue(selected, 'label') || '');
+        return this.checkedGroupedItems.map((selected) => this.getItemPropertyValue(selected, 'label') || '');
     }
     /**
      * Returns memoized selected state
@@ -272,7 +272,7 @@ let TreeSelect = class TreeSelect extends ComboBox {
         }
         const checkedGroupItems = [];
         const unchecked = []; // need for performance to not double check same ancestors
-        checkedItems.forEach(item => {
+        checkedItems.forEach((item) => {
             const ancestors = treeManager.getItemAncestors(item);
             for (let i = 0; i < ancestors.length; i += 1) {
                 const ancestor = ancestors[i];
@@ -515,7 +515,8 @@ let TreeSelect = class TreeSelect extends ComboBox {
             if (this.selectionFilterState) {
                 this.addExpandedAncestorsToRender(items);
             }
-            else if (this.query) { // do not expand EMS if there is no filter applied
+            else if (this.query) {
+                // do not expand EMS if there is no filter applied
                 this.addItemDescendantsToRender(items);
                 this.addExpandedAncestorsToRender(items);
             }
@@ -556,7 +557,7 @@ let TreeSelect = class TreeSelect extends ComboBox {
      * @returns {void}
      */
     addNestedItemsToRender(items, excludeItems) {
-        items.forEach(item => {
+        items.forEach((item) => {
             // Skip hidden and exclude item
             if (!item.hidden && !excludeItems.includes(item)) {
                 // Add item and nested children
@@ -731,24 +732,33 @@ let TreeSelect = class TreeSelect extends ComboBox {
      */
     get filtersTemplate() {
         return html `
-        <div part="control-container filter-control">
-          <div part="match-count-wrapper">
-            ${this.matchCountTemplate}
-          </div>
-          ${this.hasSelectable ? html `<div part="filter-wrapper">
-            <div
-              role="button"
-              tabindex="0"
-              active
-              part="control full-filter${!this.selectionFilterState ? ' active' : ''}"
-              @tap="${this.fullClickHandler}">${this.t('FULL_LIST')}</div>
-            <div
-              role="button"
-              tabindex="${this.hasActiveSelection ? 0 : nothing}"
-              part="control selected-filter${this.selectionFilterState ? ' active' : ''}${!this.hasActiveSelection ? ' disabled' : ''}"
-              @tap="${this.selectedClickHandler}">${this.t('SELECTED')}</div>
-          </div>` : html ``}
-        </div>
+      <div part="control-container filter-control">
+        <div part="match-count-wrapper">${this.matchCountTemplate}</div>
+        ${this.hasSelectable
+            ? html `<div part="filter-wrapper">
+              <div
+                role="button"
+                tabindex="0"
+                active
+                part="control full-filter${!this.selectionFilterState ? ' active' : ''}"
+                @tap="${this.fullClickHandler}"
+              >
+                ${this.t('FULL_LIST')}
+              </div>
+              <div
+                role="button"
+                tabindex="${this.hasActiveSelection ? 0 : nothing}"
+                part="control selected-filter${this.selectionFilterState ? ' active' : ''}${!this
+                .hasActiveSelection
+                ? ' disabled'
+                : ''}"
+                @tap="${this.selectedClickHandler}"
+              >
+                ${this.t('SELECTED')}
+              </div>
+            </div>`
+            : html ``}
+      </div>
     `;
     }
     /**
@@ -767,19 +777,24 @@ let TreeSelect = class TreeSelect extends ComboBox {
             role="button"
             tabindex="0"
             part="control expand-toggle"
-            @tap="${this.expansionToggleClickHandler}">${this.t('EXPAND_COLLAPSE', { expansion: this.hasExpansion })}</div>
+            @tap="${this.expansionToggleClickHandler}"
+          >
+            ${this.t('EXPAND_COLLAPSE', { expansion: this.hasExpansion })}
           </div>
+        </div>
       `;
         }
         return html `
-        <div part="control-container tree-control">
-            <ef-checkbox
-              part="selection-toggle"
-              .checked="${this.isAllSelected}"
-              .indeterminate="${this.hasActiveSelection && !this.isAllSelected}"
-              @checked-changed="${this.selectionToggleHandler}">${this.t('SELECT_CONTROL', { selected: this.isAllSelected })}</ef-checkbox>
-          ${expansionControl}
-        </div>
+      <div part="control-container tree-control">
+        <ef-checkbox
+          part="selection-toggle"
+          .checked="${this.isAllSelected}"
+          .indeterminate="${this.hasActiveSelection && !this.isAllSelected}"
+          @checked-changed="${this.selectionToggleHandler}"
+          >${this.t('SELECT_CONTROL', { selected: this.isAllSelected })}</ef-checkbox
+        >
+        ${expansionControl}
+      </div>
     `;
     }
     /**
@@ -787,9 +802,9 @@ let TreeSelect = class TreeSelect extends ComboBox {
      * @returns Render template
      */
     get matchCountTemplate() {
-        return this.query ? html `
-            <span part="match-count">${this.t('MATCHES_NUM', { numMatched: this.filterCount })}</span>
-    ` : html ``;
+        return this.query
+            ? html ` <span part="match-count">${this.t('MATCHES_NUM', { numMatched: this.filterCount })}</span> `
+            : html ``;
     }
     /**
      * Commit controls template
@@ -797,15 +812,8 @@ let TreeSelect = class TreeSelect extends ComboBox {
      */
     get commitControlsTemplate() {
         return html `
-      <ef-button
-        id="done"
-        part="done-button"
-        cta
-        @tap="${this.save}">${this.t('DONE')}</ef-button>
-      <ef-button
-        id="cancel"
-        part="cancel-button"
-        @tap="${this.cancel}">${this.t('CANCEL')}</ef-button>
+      <ef-button id="done" part="done-button" cta @tap="${this.save}">${this.t('DONE')}</ef-button>
+      <ef-button id="cancel" part="cancel-button" @tap="${this.cancel}">${this.t('CANCEL')}</ef-button>
     `;
     }
     /**
@@ -817,14 +825,15 @@ let TreeSelect = class TreeSelect extends ComboBox {
         // visibility will typically be controlled by styling: display: none / block or similar
         if (this.showPills && this.hasPills && this.hasSelectable) {
             return html `<div part="pills">
-        ${repeat(this.pillsData, pill => pill.value, pill => html `
-        <ef-pill
-          tabindex="-1"
-          clears
-          .readonly="${pill.readonly || this.readonly}"
-          .disabled="${pill.disabled || this.disabled}"
-          .value="${pill.value}"
-          @clear="${this.onPillRemoved}">${pill.label}</ef-pill>`)}
+        ${repeat(this.pillsData, (pill) => pill.value, (pill) => html ` <ef-pill
+            tabindex="-1"
+            clears
+            .readonly="${pill.readonly || this.readonly}"
+            .disabled="${pill.disabled || this.disabled}"
+            .value="${pill.value}"
+            @clear="${this.onPillRemoved}"
+            >${pill.label}</ef-pill
+          >`)}
       </div>`;
         }
     }
@@ -836,7 +845,7 @@ let TreeSelect = class TreeSelect extends ComboBox {
     get popupTemplate() {
         if (this.lazyRendered) {
             return html `
-      <ef-overlay
+        <ef-overlay
           role="dialog"
           aria-modal="true"
           part="list"
@@ -854,22 +863,22 @@ let TreeSelect = class TreeSelect extends ComboBox {
           no-overlap
           no-autofocus
         >
-        <div part="section">
-          ${this.filtersTemplate}
-          ${this.treeControlsTemplate}
-          <div part="selection-area">
-            <ef-tree
-              id="internal-list"
-              part="tree"
-              .noRelation=${this.noRelation}
-              .renderer=${this.renderer}
-              .data="${this.composer}"
-              .multiple="${this.multiple}"></ef-tree>
-            ${this.pillsTemplate}
+          <div part="section">
+            ${this.filtersTemplate} ${this.treeControlsTemplate}
+            <div part="selection-area">
+              <ef-tree
+                id="internal-list"
+                part="tree"
+                .noRelation=${this.noRelation}
+                .renderer=${this.renderer}
+                .data="${this.composer}"
+                .multiple="${this.multiple}"
+              ></ef-tree>
+              ${this.pillsTemplate}
+            </div>
+            <div part="control-container footer" id="footer">${this.commitControlsTemplate}</div>
           </div>
-          <div part="control-container footer" id="footer">${this.commitControlsTemplate}</div>
-        </div>
-      </ef-overlay>
+        </ef-overlay>
       `;
         }
     }

package/lib/tree-select/themes/halo/dark/index.js

@@ -8,4 +8,4 @@ import '@refinitiv-ui/elements/counter/themes/halo/dark';
 import '@refinitiv-ui/elements/item/themes/halo/dark';
 import '@refinitiv-ui/elements/icon/themes/halo/dark';
 import '@refinitiv-ui/elements/tooltip/themes/halo/dark';
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-tree-select', styles: ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:12px;font-weight:400;height:24px;max-width:100%;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;border-radius:0;background-color:#0d0d0d;text-overflow:ellipsis;border:1px solid #404040;scrollbar-face-color:#595959;scrollbar-shadow-color:#595959;scrollbar-highlight-color:#595959;scrollbar-arrow-color:#595959;scrollbar-track-color:#1a1a1a;scrollbar-3dlight-color:#1a1a1a;scrollbar-darkshadow-color:#1a1a1a;scrollbar-color:#595959 #1a1a1a;scrollbar-width:thin;color:#ccc;scrollbar-face-color:#595959;scrollbar-shadow-color:#595959;scrollbar-highlight-color:#595959;scrollbar-arrow-color:#595959;scrollbar-track-color:#1a1a1a;scrollbar-3dlight-color:#1a1a1a;scrollbar-darkshadow-color:#1a1a1a;scrollbar-color:#595959 #1a1a1a;scrollbar-width:thin;padding:0;width:228px}:host([disabled]){border:1px solid rgba(64,64,64,.5)}:host([type=number]){padding-right:0}:host([warning]){border:1px solid #7f6400}:host([warning][disabled]){color:rgba(204,204,204,.5);border:1px solid rgba(127,100,0,.5)}:host([error]),:host([error][warning]){border:1px solid #a01c2b}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(204,204,204,.5);border:1px solid rgba(160,28,43,.5)}:host ::-ms-clear{display:none}:host(:not([readonly])[focused]),:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=input]{color:inherit;padding:0;margin:0;flex:1 1 auto;min-width:0;width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis;touch-action:manipulation}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:invalid{box-shadow:none}:host([disabled]) [part=input]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host([readonly]){cursor:default}:host [part=placeholder]{opacity:.5;opacity:.7}:host [part=label],:host [part=placeholder]{margin-right:3px}:host [part~=icon]{color:#ccc;opacity:.7}:host(:not([readonly]):hover) [part~=icon],:host(:not([readonly])[focused]) [part~=icon]{opacity:1}:host(:not([readonly])[focused]) [part~=icon]{color:#334bff}:host([disabled]) [part~=icon]{color:rgba(64,64,64,.5)}:host [part=list]{max-width:var(--list-max-width,300px);max-height:var(--list-max-height)}:host [part~=input-wrapper]{touch-action:manipulation;display:flex;align-items:center;width:100%;height:100%}:host [part~=input]{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:12px;font-weight:400;height:24px;max-width:100%;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#ccc;border-radius:0;text-overflow:ellipsis;border:1px solid #404040;width:100%;background:0 0;border:none}:host [part~=input][disabled]{color:rgba(204,204,204,.5);border:1px solid rgba(64,64,64,.5)}:host [part~=input][type=number]{padding-right:0}:host [part~=input][warning]{border:1px solid #7f6400}:host [part~=input][warning][disabled]{color:rgba(204,204,204,.5);border:1px solid rgba(127,100,0,.5)}:host [part~=input][error],:host [part~=input][error][warning]{border:1px solid #a01c2b}:host [part~=input][error][disabled],:host [part~=input][error][warning][disabled]{color:rgba(204,204,204,.5);border:1px solid rgba(160,28,43,.5)}:host [part~=input] ::-ms-clear{display:none}:host [part~=button]{display:flex;justify-content:center;align-items:center;flex:none}:host [part~=list]{display:flex;flex-flow:column nowrap}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){:host [part~=list] ::slotted(ef-list){max-height:inherit}}:host [part=selection-badge]{flex-shrink:0}:host([disabled]) [part~=selection-badge]{opacity:.4}:host [part~=control-container]{height:24px;padding:0 8px}:host [part~=footer]{height:24px;padding:8px;border-top:1px solid #404040;align-content:space-between;justify-content:flex-end;box-sizing:content-box}:host [part~=filter-wrapper]{margin-right:-8px;padding:4px;display:flex;align-items:center}:host [part~=control]{display:block;position:relative;padding:3px 4px;border:1px solid transparent;border-radius:0;cursor:pointer;outline:0}:host [part~=control]:focus{z-index:1}:host([focused=visible]) [part~=control]:focus{border-color:#334bff}:host [part~=filter-control]{align-content:space-between;border-bottom:1px solid #404040;background:#1a1a1a}:host [part=match-count-wrapper]{display:inline-flex;margin-right:auto}:host [part~=tree-control]{justify-content:space-between;border-bottom:1px solid #404040}:host [part~=control][part~=active]{color:#fff}:host [part~=control][part~=disabled]{cursor:default;color:rgba(204,204,204,.5)}:host [part~=full-filter]::after{content:\'\';border-right:1px solid #404040;position:absolute;top:0;right:-2px;bottom:0}:host [part=selected-count]{display:inline-flex;margin-right:auto}:host [part~=footer] [part*=-button]:first-child{margin-right:0}:host [part=pills]{padding:3px;border-top:1px solid #404040;max-height:72px;overflow-y:auto;background-color:#0d0d0d}:host ::-moz-selection{color:#fff;background-color:#334bff}:host ::selection{color:#fff;background-color:#334bff}:host [part=icon]{color:#ccc;min-width:1em;margin-left:2px;color:inherit}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover){border-color:grey;color:#fff}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover) [part=icon]{color:#6678ff}:host([warning]){border-color:#ffc800}:host([error]),:host([error][warning]){border-color:#f5475b}:host([warning]:hover:not([readonly]):not([focused])){color:#fff;border-color:#ffe999}:host([warning][disabled]),:host([warning][readonly]:not([focused])){border-color:rgba(255,233,153,.5)}:host([error]:hover:not([readonly]):not([focused])){color:#fff;border-color:#faa8b1}:host([error][disabled]),:host([error][readonly]:not([focused])),:host([error][warning][disabled]){border-color:rgba(250,168,177,.5)}:host([disabled]){color:rgba(204,204,204,.5);border-color:rgba(64,64,64,.5);background-color:rgba(13,13,13,.5)}:host([readonly]:not([focused])){border-color:rgba(64,64,64,.5);background-color:rgba(13,13,13,.5)}:host([readonly]:not([focused])) [part=icon]{color:rgba(204,204,204,.5)}:host(:not([readonly])[focused]),:host([focused]),:host([focused][error][warning]){border-color:#334bff;color:#fff}:host([focused]) [part=icon],:host([focused][error][warning]) [part=icon]{color:#6678ff}:host [part=list]{width:var(--panel-width,228px);min-width:var(--panel-width,228px);max-width:var(--list-max-width,var(--panel-width,228px));max-height:var(--list-max-height,450px);color:#ccc;max-width:var(--list-max-width,300px);max-height:var(--list-max-height);border:1px solid #334bff;margin:2px 0;background-color:#262626}:host [part=list] ::slotted(ef-item:not(:first-child):not([type=divider])),:host [part=list] ef-item:not(:first-child):not([type=divider]){box-shadow:0 -1px 0 #404040}:host [part=list] ::slotted(:not(ef-item)){display:none}::-webkit-scrollbar-corner{background:0 0}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#595959;border-radius:0;border:1px solid transparent}::-webkit-scrollbar-thumb:hover{background:#1429bd}::-webkit-scrollbar-thumb:active{background:#0f1e8a}::-webkit-scrollbar-track{background:#1a1a1a}::-webkit-scrollbar-thumb:horizontal{background-size:auto 6px;background-repeat:repeat-x;background-image:linear-gradient(to bottom,#595959,#595959);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:horizontal:hover{background-image:linear-gradient(to bottom,#1429bd,#1429bd);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:horizontal:active{background-image:linear-gradient(to bottom,#0f1e8a,#0f1e8a);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:vertical{background-size:6px auto;background-repeat:repeat-y;background-image:linear-gradient(to right,#595959,#595959);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:vertical:hover{background-image:linear-gradient(to right,#1429bd,#1429bd);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:vertical:active{background-image:linear-gradient(to right,#0f1e8a,#0f1e8a);background-color:transparent;background-position:center}::-webkit-scrollbar-track:horizontal{border-top:1px solid #0d0d0d;border-bottom:1px solid #0d0d0d}::-webkit-scrollbar-track:vertical{border-left:1px solid #0d0d0d;border-right:1px solid #0d0d0d}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #1a1a1a;height:16px;width:16px;display:none;border:1px solid #0d0d0d}::-webkit-scrollbar-button:end:decrement,::-webkit-scrollbar-button:start:increment{display:none}::-webkit-scrollbar-button:hover{background-color:#1429bd;border:1px solid #1429bd}::-webkit-scrollbar-button:active{background-color:#0f1e8a;border:1px solid #0d0d0d}::-webkit-scrollbar-button:horizontal{background-size:2px 1px}::-webkit-scrollbar-button:vertical:start:decrement{border-bottom-color:#0d0d0d;background-image:linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc);background-position:10.55px 8px,9.55px 7px,8.55px 6px,7.55px 5px,6.55px 4px,5.55px 5px,4.55px 6px,3.55px 7px,2.55px 8px}::-webkit-scrollbar-button:vertical:start:decrement:hover{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:10.55px 8px,9.55px 7px,8.55px 6px,7.55px 5px,6.55px 4px,5.55px 5px,4.55px 6px,3.55px 7px,2.55px 8px;border-bottom-color:#1429bd}::-webkit-scrollbar-button:vertical:start:decrement:active{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:10.55px 8px,9.55px 7px,8.55px 6px,7.55px 5px,6.55px 4px,5.55px 5px,4.55px 6px,3.55px 7px,2.55px 8px;border-bottom-color:#0d0d0d}::-webkit-scrollbar-button:vertical:end:increment{border-top-color:#0d0d0d;background-image:linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc);background-position:10.55px 4px,9.55px 5px,8.55px 6px,7.55px 7px,6.55px 8px,5.55px 7px,4.55px 6px,3.55px 5px,2.55px 4px}::-webkit-scrollbar-button:vertical:end:increment:hover{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:10.55px 4px,9.55px 5px,8.55px 6px,7.55px 7px,6.55px 8px,5.55px 7px,4.55px 6px,3.55px 5px,2.55px 4px;border-top-color:#1429bd}::-webkit-scrollbar-button:vertical:end:increment:active{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:10.55px 4px,9.55px 5px,8.55px 6px,7.55px 7px,6.55px 8px,5.55px 7px,4.55px 6px,3.55px 5px,2.55px 4px;border-top-color:#0d0d0d}::-webkit-scrollbar-button:horizontal:start:decrement{border-right-color:#0d0d0d;background-image:linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc);background-position:7.5px 10.55px,6.5px 9.55px,5.5px 8.55px,4.5px 7.55px,3.5px 6.55px,4.5px 5.55px,5.5px 4.55px,6.5px 3.55px,7.5px 2.55px}::-webkit-scrollbar-button:horizontal:start:decrement:hover{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:7.5px 10.55px,6.5px 9.55px,5.5px 8.55px,4.5px 7.55px,3.5px 6.55px,4.5px 5.55px,5.5px 4.55px,6.5px 3.55px,7.5px 2.55px;border-right-color:#1429bd}::-webkit-scrollbar-button:horizontal:start:decrement:active{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:7.5px 10.55px,6.5px 9.55px,5.5px 8.55px,4.5px 7.55px,3.5px 6.55px,4.5px 5.55px,5.5px 4.55px,6.5px 3.55px,7.5px 2.55px;border-right-color:#0d0d0d}::-webkit-scrollbar-button:horizontal:end:increment{border-left-color:#0d0d0d;background-image:linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc);background-position:5px 10.55px,6px 9.55px,7px 8.55px,8px 7.55px,9px 6.55px,8px 5.55px,7px 4.55px,6px 3.55px,5px 2.55px}::-webkit-scrollbar-button:horizontal:end:increment:hover{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:5px 10.55px,6px 9.55px,7px 8.55px,8px 7.55px,9px 6.55px,8px 5.55px,7px 4.55px,6px 3.55px,5px 2.55px;border-left-color:#1429bd}::-webkit-scrollbar-button:horizontal:end:increment:active{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:5px 10.55px,6px 9.55px,7px 8.55px,8px 7.55px,9px 6.55px,8px 5.55px,7px 4.55px,6px 3.55px,5px 2.55px;border-left-color:#0d0d0d}:host [part~=input-wrapper]{border-left-color:inherit}:host [part~=input]{padding:0 8px}:host [part~=button]{height:100%;width:24px}:host [part~=button-toggle]{border-left:1px solid #404040}:host [part~=button-toggle]::before{content:\'\';display:block;position:absolute;top:-1px;right:-1px;bottom:-1px;width:24px;border:1px solid transparent}:host(:not([readonly])[focused]) [part~=button-toggle]{border-left-color:#334bff;color:#334bff}:host(:not([readonly])) [part~=button-toggle]:hover::after{content:\'\';display:block;position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border:1px solid #334bff;pointer-events:none}:host(:not([readonly])) [part~=icon]{color:inherit!important}:host([disabled]) [part~=button-toggle],:host([readonly]) [part~=button-toggle]{border-left-color:rgba(64,64,64,.5)}:host([readonly]) [part~=button-toggle]{color:rgba(204,204,204,.5);cursor:default}:host([focused][readonly]) [part~=button-toggle]{border-left-color:#334bff}:host [part=list] ::slotted(ef-list){display:block}:host [part~=filter-control],:host [part~=tree-control]{background:#1a1a1a;padding:0 8px;min-height:24px;box-sizing:border-box}:host [part=pills],:host [part=pills][focused]{border:none}:host [part=list]{width:var(--panel-width,320px);min-width:var(--panel-width,320px);max-width:var(--list-max-width,var(--panel-width,320px));max-height:var(--list-max-height,400px)}:host [part~=footer]{background:#262626}:host [part~=button-toggle]{border:none}:host [part=cancel-button],:host [part=done-button]{margin:5px}:host(:not([readonly])) [part~=button-clear]:hover{color:#334bff}:host(:not([readonly]):hover) [part~=button-toggle]{color:#334bff}:host(:not([readonly])) [part~=button-toggle]:hover{border:none;color:#334bff;background:0 0}:host(:not([readonly])) [part~=button]:active{color:#fff}:host(:not([readonly])) [part~=button-toggle]:active{color:#334bff;background:0 0}:host [part=list] ::slotted([part=section]){display:flex}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-tree-select', styles: ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:12px;font-weight:400;height:24px;max-width:100%;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;border-radius:0;background-color:#0d0d0d;text-overflow:ellipsis;border:1px solid #404040;scrollbar-face-color:#595959;scrollbar-shadow-color:#595959;scrollbar-highlight-color:#595959;scrollbar-arrow-color:#595959;scrollbar-track-color:#1a1a1a;scrollbar-3dlight-color:#1a1a1a;scrollbar-darkshadow-color:#1a1a1a;scrollbar-color:#595959 #1a1a1a;scrollbar-width:thin;color:#ccc;scrollbar-face-color:#595959;scrollbar-shadow-color:#595959;scrollbar-highlight-color:#595959;scrollbar-arrow-color:#595959;scrollbar-track-color:#1a1a1a;scrollbar-3dlight-color:#1a1a1a;scrollbar-darkshadow-color:#1a1a1a;scrollbar-color:#595959 #1a1a1a;scrollbar-width:thin;padding:0;width:228px}:host([disabled]){border:1px solid rgba(64,64,64,.5)}:host([type=number]){padding-right:0}:host([warning]){border:1px solid #7f6400}:host([warning][disabled]){color:rgba(204,204,204,.5);border:1px solid rgba(127,100,0,.5)}:host([error]),:host([error][warning]){border:1px solid #a01c2b}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(204,204,204,.5);border:1px solid rgba(160,28,43,.5)}:host ::-ms-clear{display:none}:host(:not([readonly])[focused]),:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=input]{color:inherit;padding:0;margin:0;flex:1 1 auto;min-width:0;width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis;touch-action:manipulation}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:invalid{box-shadow:none}:host([disabled]) [part=input]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host([readonly]){cursor:default}:host [part=placeholder]{opacity:.5;opacity:.7}:host [part=label],:host [part=placeholder]{margin-right:3px}:host [part~=icon]{color:#ccc;opacity:.7}:host(:not([readonly]):hover) [part~=icon],:host(:not([readonly])[focused]) [part~=icon]{opacity:1}:host(:not([readonly])[focused]) [part~=icon]{color:#334bff}:host([disabled]) [part~=icon]{color:rgba(64,64,64,.5)}:host [part=list]{max-width:var(--list-max-width,300px);max-height:var(--list-max-height)}:host [part~=input-wrapper]{touch-action:manipulation;display:flex;align-items:center;width:100%;height:100%}:host [part~=input]{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:12px;font-weight:400;height:24px;max-width:100%;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#ccc;border-radius:0;text-overflow:ellipsis;border:1px solid #404040;width:100%;background:0 0;border:none}:host [part~=input][disabled]{color:rgba(204,204,204,.5);border:1px solid rgba(64,64,64,.5)}:host [part~=input][type=number]{padding-right:0}:host [part~=input][warning]{border:1px solid #7f6400}:host [part~=input][warning][disabled]{color:rgba(204,204,204,.5);border:1px solid rgba(127,100,0,.5)}:host [part~=input][error],:host [part~=input][error][warning]{border:1px solid #a01c2b}:host [part~=input][error][disabled],:host [part~=input][error][warning][disabled]{color:rgba(204,204,204,.5);border:1px solid rgba(160,28,43,.5)}:host [part~=input] ::-ms-clear{display:none}:host [part~=button]{display:flex;justify-content:center;align-items:center;flex:none}:host [part~=list]{display:flex;flex-flow:column nowrap}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){:host [part~=list] ::slotted(ef-list){max-height:inherit}}:host [part=selection-badge]{flex-shrink:0}:host([disabled]) [part~=selection-badge]{opacity:.4}:host [part~=control-container]{height:24px;padding:0 8px}:host [part~=footer]{height:24px;padding:8px;border-top:1px solid #404040;align-content:space-between;justify-content:flex-end;box-sizing:content-box}:host [part~=filter-wrapper]{margin-right:-8px;padding:4px;display:flex;align-items:center}:host [part~=control]{display:block;position:relative;padding:3px 4px;border:1px solid transparent;border-radius:0;cursor:pointer;outline:0}:host [part~=control]:focus{z-index:1}:host([focused=visible]) [part~=control]:focus{border-color:#334bff}:host [part~=filter-control]{align-content:space-between;border-bottom:1px solid #404040;background:#1a1a1a}:host [part=match-count-wrapper]{display:inline-flex;margin-right:auto}:host [part~=tree-control]{justify-content:space-between;border-bottom:1px solid #404040}:host [part~=control][part~=active]{color:#fff}:host [part~=control][part~=disabled]{cursor:default;color:rgba(204,204,204,.5)}:host [part~=full-filter]::after{content:\'\';border-right:1px solid #404040;position:absolute;top:0;right:-2px;bottom:0}:host [part=selected-count]{display:inline-flex;margin-right:auto}:host [part~=footer] [part*=\'-button\']:first-child{margin-right:0}:host [part=pills]{padding:3px;border-top:1px solid #404040;max-height:72px;overflow-y:auto;background-color:#0d0d0d}:host ::-moz-selection{color:#fff;background-color:#334bff}:host ::selection{color:#fff;background-color:#334bff}:host [part=icon]{color:#ccc;min-width:1em;margin-left:2px;color:inherit}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover){border-color:grey;color:#fff}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover) [part=icon]{color:#6678ff}:host([warning]){border-color:#ffc800}:host([error]),:host([error][warning]){border-color:#f5475b}:host([warning]:hover:not([readonly]):not([focused])){color:#fff;border-color:#ffe999}:host([warning][disabled]),:host([warning][readonly]:not([focused])){border-color:rgba(255,233,153,.5)}:host([error]:hover:not([readonly]):not([focused])){color:#fff;border-color:#faa8b1}:host([error][disabled]),:host([error][readonly]:not([focused])),:host([error][warning][disabled]){border-color:rgba(250,168,177,.5)}:host([disabled]){color:rgba(204,204,204,.5);border-color:rgba(64,64,64,.5);background-color:rgba(13,13,13,.5)}:host([readonly]:not([focused])){border-color:rgba(64,64,64,.5);background-color:rgba(13,13,13,.5)}:host([readonly]:not([focused])) [part=icon]{color:rgba(204,204,204,.5)}:host(:not([readonly])[focused]),:host([focused]),:host([focused][error][warning]){border-color:#334bff;color:#fff}:host([focused]) [part=icon],:host([focused][error][warning]) [part=icon]{color:#6678ff}:host [part=list]{width:var(--panel-width,228px);min-width:var(--panel-width,228px);max-width:var(--list-max-width,var(--panel-width,228px));max-height:var(--list-max-height,450px);color:#ccc;max-width:var(--list-max-width,300px);max-height:var(--list-max-height);border:1px solid #334bff;margin:2px 0;background-color:#262626}:host [part=list] ::slotted(ef-item:not(:first-child):not([type=divider])),:host [part=list] ef-item:not(:first-child):not([type=divider]){box-shadow:0 -1px 0 #404040}:host [part=list] ::slotted(:not(ef-item)){display:none}::-webkit-scrollbar-corner{background:0 0}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#595959;border-radius:0;border:1px solid transparent}::-webkit-scrollbar-thumb:hover{background:#1429bd}::-webkit-scrollbar-thumb:active{background:#0f1e8a}::-webkit-scrollbar-track{background:#1a1a1a}::-webkit-scrollbar-thumb:horizontal{background-size:auto 6px;background-repeat:repeat-x;background-image:linear-gradient(to bottom,#595959,#595959);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:horizontal:hover{background-image:linear-gradient(to bottom,#1429bd,#1429bd);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:horizontal:active{background-image:linear-gradient(to bottom,#0f1e8a,#0f1e8a);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:vertical{background-size:6px auto;background-repeat:repeat-y;background-image:linear-gradient(to right,#595959,#595959);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:vertical:hover{background-image:linear-gradient(to right,#1429bd,#1429bd);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:vertical:active{background-image:linear-gradient(to right,#0f1e8a,#0f1e8a);background-color:transparent;background-position:center}::-webkit-scrollbar-track:horizontal{border-top:1px solid #0d0d0d;border-bottom:1px solid #0d0d0d}::-webkit-scrollbar-track:vertical{border-left:1px solid #0d0d0d;border-right:1px solid #0d0d0d}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #1a1a1a;height:16px;width:16px;display:none;border:1px solid #0d0d0d}::-webkit-scrollbar-button:end:decrement,::-webkit-scrollbar-button:start:increment{display:none}::-webkit-scrollbar-button:hover{background-color:#1429bd;border:1px solid #1429bd}::-webkit-scrollbar-button:active{background-color:#0f1e8a;border:1px solid #0d0d0d}::-webkit-scrollbar-button:horizontal{background-size:2px 1px}::-webkit-scrollbar-button:vertical:start:decrement{border-bottom-color:#0d0d0d;background-image:linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc);background-position:10.55px 8px,9.55px 7px,8.55px 6px,7.55px 5px,6.55px 4px,5.55px 5px,4.55px 6px,3.55px 7px,2.55px 8px}::-webkit-scrollbar-button:vertical:start:decrement:hover{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:10.55px 8px,9.55px 7px,8.55px 6px,7.55px 5px,6.55px 4px,5.55px 5px,4.55px 6px,3.55px 7px,2.55px 8px;border-bottom-color:#1429bd}::-webkit-scrollbar-button:vertical:start:decrement:active{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:10.55px 8px,9.55px 7px,8.55px 6px,7.55px 5px,6.55px 4px,5.55px 5px,4.55px 6px,3.55px 7px,2.55px 8px;border-bottom-color:#0d0d0d}::-webkit-scrollbar-button:vertical:end:increment{border-top-color:#0d0d0d;background-image:linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc);background-position:10.55px 4px,9.55px 5px,8.55px 6px,7.55px 7px,6.55px 8px,5.55px 7px,4.55px 6px,3.55px 5px,2.55px 4px}::-webkit-scrollbar-button:vertical:end:increment:hover{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:10.55px 4px,9.55px 5px,8.55px 6px,7.55px 7px,6.55px 8px,5.55px 7px,4.55px 6px,3.55px 5px,2.55px 4px;border-top-color:#1429bd}::-webkit-scrollbar-button:vertical:end:increment:active{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:10.55px 4px,9.55px 5px,8.55px 6px,7.55px 7px,6.55px 8px,5.55px 7px,4.55px 6px,3.55px 5px,2.55px 4px;border-top-color:#0d0d0d}::-webkit-scrollbar-button:horizontal:start:decrement{border-right-color:#0d0d0d;background-image:linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc);background-position:7.5px 10.55px,6.5px 9.55px,5.5px 8.55px,4.5px 7.55px,3.5px 6.55px,4.5px 5.55px,5.5px 4.55px,6.5px 3.55px,7.5px 2.55px}::-webkit-scrollbar-button:horizontal:start:decrement:hover{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:7.5px 10.55px,6.5px 9.55px,5.5px 8.55px,4.5px 7.55px,3.5px 6.55px,4.5px 5.55px,5.5px 4.55px,6.5px 3.55px,7.5px 2.55px;border-right-color:#1429bd}::-webkit-scrollbar-button:horizontal:start:decrement:active{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:7.5px 10.55px,6.5px 9.55px,5.5px 8.55px,4.5px 7.55px,3.5px 6.55px,4.5px 5.55px,5.5px 4.55px,6.5px 3.55px,7.5px 2.55px;border-right-color:#0d0d0d}::-webkit-scrollbar-button:horizontal:end:increment{border-left-color:#0d0d0d;background-image:linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc);background-position:5px 10.55px,6px 9.55px,7px 8.55px,8px 7.55px,9px 6.55px,8px 5.55px,7px 4.55px,6px 3.55px,5px 2.55px}::-webkit-scrollbar-button:horizontal:end:increment:hover{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:5px 10.55px,6px 9.55px,7px 8.55px,8px 7.55px,9px 6.55px,8px 5.55px,7px 4.55px,6px 3.55px,5px 2.55px;border-left-color:#1429bd}::-webkit-scrollbar-button:horizontal:end:increment:active{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:5px 10.55px,6px 9.55px,7px 8.55px,8px 7.55px,9px 6.55px,8px 5.55px,7px 4.55px,6px 3.55px,5px 2.55px;border-left-color:#0d0d0d}:host [part~=input-wrapper]{border-left-color:inherit}:host [part~=input]{padding:0 8px}:host [part~=button]{height:100%;width:24px}:host [part~=button-toggle]{border-left:1px solid #404040}:host [part~=button-toggle]::before{content:\'\';display:block;position:absolute;top:-1px;right:-1px;bottom:-1px;width:24px;border:1px solid transparent}:host(:not([readonly])[focused]) [part~=button-toggle]{border-left-color:#334bff;color:#334bff}:host(:not([readonly])) [part~=button-toggle]:hover::after{content:\'\';display:block;position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border:1px solid #334bff;pointer-events:none}:host(:not([readonly])) [part~=icon]{color:inherit!important}:host([disabled]) [part~=button-toggle],:host([readonly]) [part~=button-toggle]{border-left-color:rgba(64,64,64,.5)}:host([readonly]) [part~=button-toggle]{color:rgba(204,204,204,.5);cursor:default}:host([focused][readonly]) [part~=button-toggle]{border-left-color:#334bff}:host [part=list] ::slotted(ef-list){display:block}:host [part~=filter-control],:host [part~=tree-control]{background:#1a1a1a;padding:0 8px;min-height:24px;box-sizing:border-box}:host [part=pills],:host [part=pills][focused]{border:none}:host [part=list]{width:var(--panel-width,320px);min-width:var(--panel-width,320px);max-width:var(--list-max-width,var(--panel-width,320px));max-height:var(--list-max-height,400px)}:host [part~=footer]{background:#262626}:host [part~=button-toggle]{border:none}:host [part=cancel-button],:host [part=done-button]{margin:5px}:host(:not([readonly])) [part~=button-clear]:hover{color:#334bff}:host(:not([readonly]):hover) [part~=button-toggle]{color:#334bff}:host(:not([readonly])) [part~=button-toggle]:hover{border:none;color:#334bff;background:0 0}:host(:not([readonly])) [part~=button]:active{color:#fff}:host(:not([readonly])) [part~=button-toggle]:active{color:#334bff;background:0 0}:host [part=list] ::slotted([part=section]){display:flex}' }}));