@refinitiv-ui/elements 5.3.3 → 5.3.4

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

@@ -0,0 +1,7 @@
+import '@refinitiv-ui/elements/lib/checkbox/themes/solar/charcoal';
+import '@refinitiv-ui/elements/lib/icon/themes/solar/charcoal';
+import '@refinitiv-ui/elements/lib/item/themes/solar/charcoal';
+
+elf.customStyles.define('ef-tree-item', '@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{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]{margin:0 5px 0 0;flex:none}:host [part=label]{padding:4px 5px;word-break:break-word}: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}');
+
+elf.customStyles.define('ef-tree', ':host{--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;overflow-x:auto}:host(:focus){outline:0}: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

@@ -0,0 +1,7 @@
+import '@refinitiv-ui/elements/lib/checkbox/themes/solar/pearl';
+import '@refinitiv-ui/elements/lib/icon/themes/solar/pearl';
+import '@refinitiv-ui/elements/lib/item/themes/solar/pearl';
+
+elf.customStyles.define('ef-tree-item', '@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{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]{margin:0 5px 0 0;flex:none}:host [part=label]{padding:4px 5px;word-break:break-word}: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}');
+
+elf.customStyles.define('ef-tree', ':host{--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;overflow-x:auto}:host(:focus){outline:0}: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/custom-elements.json

@@ -0,0 +1,107 @@
+{
+  "version": "experimental",
+  "tags": [
+    {
+      "name": "ef-tree-select",
+      "description": "Dropdown control that allows selection from the tree list",
+      "attributes": [
+        {
+          "name": "no-relation",
+          "description": "Breaks the relationship when multiple\nselection mode is enabled",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "show-pills",
+          "description": "Should the control show pills",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "opened",
+          "description": "Set dropdown to open",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "placeholder",
+          "description": "Set placeholder text",
+          "type": "string"
+        }
+      ],
+      "properties": [
+        {
+          "name": "filterCount",
+          "description": "Tracks the number of filter matches\n\nOnly needed if internal filtering is unused",
+          "type": "number",
+          "default": "0"
+        },
+        {
+          "name": "noRelation",
+          "attribute": "no-relation",
+          "description": "Breaks the relationship when multiple\nselection mode is enabled",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "showPills",
+          "attribute": "show-pills",
+          "description": "Should the control show pills",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "values",
+          "description": "Returns a values collection of the currently\nselected item values",
+          "type": "string[]"
+        },
+        {
+          "name": "renderer",
+          "description": "Renderer used to render tree item elements",
+          "type": "TreeSelectRenderer",
+          "default": "\"new TreeSelectRenderer(this)\""
+        },
+        {
+          "name": "opened",
+          "attribute": "opened",
+          "description": "Set dropdown to open",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "placeholder",
+          "attribute": "placeholder",
+          "description": "Set placeholder text",
+          "type": "string"
+        },
+        {
+          "name": "data",
+          "description": "Data object to be used for creating tree",
+          "type": "TreeSelectData[]"
+        }
+      ],
+      "events": [
+        {
+          "name": "confirm",
+          "description": "Fired when selection is confirmed"
+        },
+        {
+          "name": "cancel",
+          "description": "Fired when selection is cancelled"
+        },
+        {
+          "name": "query-changed",
+          "description": "Fired when query in input box changed"
+        },
+        {
+          "name": "value-changed",
+          "description": "Fired when value of control changed"
+        },
+        {
+          "name": "opened-changed",
+          "description": "Fires when opened state changes"
+        }
+      ]
+    }
+  ]
+}

package/lib/tree-select/helpers/types.d.ts

@@ -0,0 +1,4 @@
+import { ComboBoxData } from '../../combo-box';
+import { TreeDataItem } from '../../tree';
+export declare type TreeSelectDataItem = TreeDataItem;
+export declare type TreeSelectData = ComboBoxData<TreeDataItem>;

package/lib/tree-select/helpers/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,400 @@
+import { JSXInterface } from '../jsx';
+import { TemplateResult, CSSResult } from '@refinitiv-ui/core';
+import { TranslateDirective } from '@refinitiv-ui/translate';
+import { CollectionComposer, TimeoutTaskRunner } from '@refinitiv-ui/utils';
+import '@refinitiv-ui/phrasebook/lib/locale/en/tree-select';
+import '../icon';
+import '../text-field';
+import '../pill';
+import '../button';
+import '../checkbox';
+import '../tree';
+import { Overlay } from '../overlay';
+import { ComboBox, ComboBoxFilter as TreeSelectFilter } from '../combo-box';
+import { CheckChangedEvent } from '../events';
+import { TreeRenderer as TreeSelectRenderer } from '../tree';
+import { TreeManager, TreeManagerMode } from '../tree/managers/tree-manager';
+import { TreeSelectData, TreeSelectDataItem } from './helpers/types';
+export { TreeSelectRenderer, TreeSelectData, TreeSelectDataItem, TreeSelectFilter };
+/**
+ * Dropdown control that allows selection from the tree list
+ *
+ * @attr {boolean} [opened=false] - Set dropdown to open
+ * @prop {boolean} [opened=false] - Set dropdown to open
+ * @attr {string} placeholder - Set placeholder text
+ * @prop {string} placeholder - Set placeholder text
+ * @prop {TreeSelectData[]} data - Data object to be used for creating tree
+ * @fires confirm - Fired when selection is confirmed
+ * @fires cancel - Fired when selection is cancelled
+ * @fires query-changed - Fired when query in input box changed
+ * @fires value-changed - Fired when value of control changed
+ * @fires opened-changed - Fires when opened state changes
+ */
+export declare class TreeSelect extends ComboBox<TreeSelectDataItem> {
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
+    constructor();
+    static get styles(): CSSResult | CSSResult[];
+    /**
+     * Tracks the number of filter matches
+     *
+     * Only needed if internal filtering is unused
+     */
+    filterCount: number;
+    /**
+     * Memoized selection and expansion stats
+     * Used for displaying counts and calculating control visibility/content
+     */
+    protected memo: {
+        selected: number;
+        selectable: number;
+        expanded: number;
+        expandable: number;
+    };
+    /**
+     * Extracted values from {@link this.checkedGroupedItems}
+     */
+    protected pillsData: TreeSelectDataItem[];
+    /**
+     * Are there pills visible
+     */
+    protected hasPills: boolean;
+    /**
+     * Store references to items selected and visible at point of selection filter being applied
+     * Allow for items to be removed from the selection, but still be visible
+     */
+    protected editSelectionItems: Set<TreeSelectDataItem>;
+    /**
+     * Composer used for live changes
+     */
+    protected composer: CollectionComposer<TreeSelectDataItem>;
+    /**
+     * Provide access to tree interface
+     */
+    protected treeManager: TreeManager<TreeSelectDataItem>;
+    /**
+     * Modification updates are called a lot
+     *
+     * This throttles the memo updates to reduce lookups
+     */
+    protected memoUpdateThrottle: TimeoutTaskRunner;
+    /**
+     * Used for translations
+     * Beware tPromise!: TranslatePromise from Combo-box. It's different type from this translation.
+     */
+    protected t: TranslateDirective;
+    /**
+     * Breaks the relationship when multiple
+     * selection mode is enabled
+     */
+    noRelation: boolean;
+    /**
+     * Should the control show pills
+     */
+    showPills: boolean;
+    private _values;
+    /**
+     * Returns a values collection of the currently
+     * selected item values
+     * @type {string[]}
+     */
+    get values(): string[];
+    set values(values: string[]);
+    /**
+     * Renderer used to render tree item elements
+     * @type {TreeSelectRenderer}
+     */
+    renderer: TreeSelectRenderer;
+    /**
+     * Internal reference to selection area element
+     */
+    protected selectionAreaEl?: Overlay;
+    /**
+     * Internal reference to popup element
+     */
+    protected popupEl?: Overlay;
+    /**
+     * Set resolved data
+     * @param value resolved data
+     */
+    protected set resolvedData(value: TreeSelectDataItem[]);
+    protected get resolvedData(): TreeSelectDataItem[];
+    /**
+     * The the values from composer ignoring freeTextValue
+     * @override
+     */
+    protected get composerValues(): string[];
+    /**
+     * Provide list of currently selected items
+     */
+    protected get selection(): TreeSelectDataItem[];
+    /**
+     * Get a list of selected item labels
+     * @returns Has selection
+     * @override
+     */
+    protected get selectedLabels(): string[];
+    /**
+     * Returns memoized selected state
+     * @returns Has selection
+     */
+    protected get hasActiveSelection(): boolean;
+    /**
+     * Returns memoized all selected count
+     * @returns Is all selected
+     */
+    protected get allSelected(): boolean;
+    /**
+     * Returns memoized expansion state
+     * @returns Are all expanded
+     */
+    protected get hasExpansion(): boolean;
+    /**
+     * Determines if the expansion controls should be displayed
+     *
+     * @returns Control visible state
+     */
+    protected get expansionControlVisible(): boolean;
+    /**
+     * Determine if the selection filter is active
+     * @returns Selection filter on/off
+     */
+    protected get selectionFilterState(): boolean;
+    /**
+     * Mode to use in the tree manager
+     */
+    protected get mode(): TreeManagerMode;
+    /**
+     * Get a list of selected items.
+     * If all leaves are selected, a parent becomes selected
+     * If mode is INDEPENDENT, grouping is not applied
+     */
+    protected get checkedGroupedItems(): readonly TreeSelectDataItem[];
+    /**
+     * Persist the current selection
+     * Takes the current selection and uses it for {@link TreeSelect.values}
+     * Also uses current selection as a revert position for future changes
+     * @returns {void}
+     */
+    protected persistSelection(): void;
+    /**
+     * Reverse selection. Run on Esc or Cancel
+     * @returns {void}
+     */
+    protected cancelSelection(): void;
+    /**
+     * Update memoized track
+     *
+     * Update states for expansion and selection
+     *
+     * @returns {void}
+     */
+    protected updateMemo(): void;
+    /**
+     * Utility method - closes and resets changes such as query
+     * @returns {void}
+     */
+    protected closeAndReset(): void;
+    /**
+     * Save the current selection
+     * @returns {void}
+     */
+    protected save(): void;
+    /**
+     * Discard the current selection
+     * @returns {void}
+     */
+    protected cancel(): void;
+    /**
+     * Toggle tree level expansion action
+     * @returns {void}
+     */
+    protected expansionToggleClickHandler(): void;
+    /**
+     * Toggle Selection of all tree items
+     * @param event checked-change event
+     * @returns {void}
+     */
+    protected selectionToggleHandler(event: CheckChangedEvent): void;
+    /**
+     * Remove selection filter
+     * @returns {void}
+     */
+    protected fullClickHandler(): void;
+    /**
+     * Apply selection filter
+     * @returns {void}
+     */
+    protected selectedClickHandler(): void;
+    /**
+     * Apply the selection filter by entering edit selection mode
+     * @returns {void}
+     */
+    protected enterEditSelection(): void;
+    /**
+     * Remove selection filtering by exiting edit selection mode
+     * @returns {void}
+     */
+    protected exitEditSelection(): void;
+    /**
+     * Executed when the popup is fully opened
+     * @returns {void}
+     */
+    protected onPopupOpened(): void;
+    /**
+     * Clear selection filter
+     * @returns {void}
+     */
+    protected clearSelectionFilter(): void;
+    /**
+     * Executed when the popup is fully closed
+     * @returns {void}
+     */
+    protected onPopupClosed(): void;
+    /**
+     * Filter the internal items by query
+     * Changes items' hidden state
+     *
+     * @returns {void}
+     */
+    protected filterItems(): void;
+    /**
+     * Utility method
+     * Adds descendants for each item passed
+     * @param items List of child items
+     * @returns {void}
+     */
+    protected addItemDescendantsToRender(items: TreeSelectDataItem[]): void;
+    /**
+     * Utility method
+     * Add nested children of item list
+     * @param items List of items
+     * @param excludeItems List of exclude items
+     * @returns void
+     */
+    protected addNestedItemsToRender(items: readonly TreeSelectDataItem[], excludeItems: readonly TreeSelectDataItem[]): void;
+    /**
+     * Utility method
+     * @param items List of child items
+     * Adds ancestors for each item passed and expand
+     *
+     * @returns {void}
+     */
+    protected addExpandedAncestorsToRender(items: TreeSelectDataItem[]): void;
+    /**
+     * Utility method
+     * @param ancestor parent item
+     * Adds parent and expands
+     *
+     * @returns {void}
+     */
+    protected addExpandedAncestorToRender(ancestor: TreeSelectDataItem): void;
+    /**
+     * Reacts to pill removal by de-selecting the related item
+     * @param event Event containing the pill item
+     *
+     * @returns {void}
+     */
+    protected onPillRemoved(event: CustomEvent): void;
+    /**
+     * Handles key input
+     * @param event Key down event object
+     * @returns {void}
+     */
+    protected onKeyDown(event: KeyboardEvent): void;
+    /**
+     * Navigates up the list.
+     * Opens the list if closed.
+     * @param event keyboard event
+     * @returns {void}
+     */
+    protected up(event: KeyboardEvent): void;
+    /**
+     * Navigates down the list.
+     * Opens the list if closed.
+     * @param event keyboard event
+     * @returns {void}
+     */
+    protected down(event: KeyboardEvent): void;
+    /**
+     * Make sure that after up/down keys the focus gracefully moves to selection area
+     * so the user can then use left/right/Enter keys for keyboard navigation
+     * @returns {void}
+     */
+    private focusOnSelectionArea;
+    /**
+     * Adds a throttled update for pills and memo
+     * @returns {void}
+     */
+    protected modificationUpdate(): void;
+    /**
+     * Update pills if {@link TreeSelect.showPills} showPills is applied
+     *
+     * @returns {void}
+     */
+    protected updatePills(): void;
+    /**
+     * Queries the composer for data items. Uses Infinity depth
+     * @param engine Composer query engine
+     * @returns Collection of matched items
+     * @override
+     */
+    protected queryItems(engine: (item: TreeSelectDataItem, composer: CollectionComposer<TreeSelectDataItem>) => boolean): readonly TreeSelectDataItem[];
+    /**
+     * Queries the composer for data items,
+     * matching by property value. Uses Infinity depth
+     * @param property Property name to query
+     * @param value Property value to match against
+     * @returns Collection of matched items
+     * @override
+     */
+    protected queryItemsByPropertyValue<K extends keyof TreeSelectDataItem>(property: K, value: TreeSelectDataItem[K]): readonly TreeSelectDataItem[];
+    /**
+     * Filter template
+     * @returns Render template
+     */
+    protected get filtersTemplate(): TemplateResult;
+    /**
+     * Tree control template
+     * @returns Render template
+     */
+    protected get treeControlsTemplate(): TemplateResult;
+    /**
+     * Conditional filter matches template
+     * @returns Render template
+     */
+    protected get matchCountTemplate(): TemplateResult;
+    /**
+     * Commit controls template
+     * @returns Render template
+     */
+    protected get commitControlsTemplate(): TemplateResult;
+    /**
+     * Pills template
+     * @returns Render template
+     */
+    protected get pillsTemplate(): TemplateResult | undefined;
+    /**
+     * Returns template for popup
+     * Lazy loads the popup
+     * @returns Popup template or undefined
+     */
+    protected get popupTemplate(): TemplateResult | undefined;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ef-tree-select': TreeSelect;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'ef-tree-select': Partial<TreeSelect> | JSXInterface.HTMLAttributes<TreeSelect>;
+    }
+  }
+}
+
+export {};