@refinitiv-ui/elements 5.12.0-alpha.0 → 5.12.0

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

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/item/themes/halo/dark';
+
+elf.customStyles.define('ef-list', ':host{--item-indent:8px;--item-height:24px;color:#ccc;background-color:transparent;touch-action:manipulation;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}:host(:focus){outline:0}:host([readonly]) [part=list-item]{cursor:default}::-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:#334bff}::-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,#334bff,#334bff);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,#334bff,#334bff);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:#334bff;border:1px solid #334bff}::-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:#334bff}::-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:#334bff}::-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:#334bff}::-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:#334bff}::-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}');

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

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/item/themes/halo/light';
+
+elf.customStyles.define('ef-list', ':host{--item-indent:8px;--item-height:24px;color:#404040;background-color:transparent;touch-action:manipulation;scrollbar-face-color:#999;scrollbar-shadow-color:#999;scrollbar-highlight-color:#999;scrollbar-arrow-color:#999;scrollbar-track-color:#f2f2f2;scrollbar-3dlight-color:#f2f2f2;scrollbar-darkshadow-color:#f2f2f2;scrollbar-color:#999 #f2f2f2;scrollbar-width:thin}:host(:focus){outline:0}:host([readonly]) [part=list-item]{cursor:default}::-webkit-scrollbar-corner{background:0 0}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#999;border-radius:0;border:1px solid transparent}::-webkit-scrollbar-thumb:hover{background:#334bff}::-webkit-scrollbar-thumb:active{background:#0f1e8a}::-webkit-scrollbar-track{background:#f2f2f2}::-webkit-scrollbar-thumb:horizontal{background-size:auto 6px;background-repeat:repeat-x;background-image:linear-gradient(to bottom,#999,#999);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:horizontal:hover{background-image:linear-gradient(to bottom,#334bff,#334bff);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,#999,#999);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:vertical:hover{background-image:linear-gradient(to right,#334bff,#334bff);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 #fff;border-bottom:1px solid #fff}::-webkit-scrollbar-track:vertical{border-left:1px solid #fff;border-right:1px solid #fff}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #f2f2f2;height:16px;width:16px;display:none;border:1px solid #fff}::-webkit-scrollbar-button:end:decrement,::-webkit-scrollbar-button:start:increment{display:none}::-webkit-scrollbar-button:hover{background-color:#334bff;border:1px solid #334bff}::-webkit-scrollbar-button:active{background-color:#0f1e8a;border:1px solid #fff}::-webkit-scrollbar-button:horizontal{background-size:2px 1px}::-webkit-scrollbar-button:vertical:start:decrement{border-bottom-color:#fff;background-image:linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959);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:#334bff}::-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:#fff}::-webkit-scrollbar-button:vertical:end:increment{border-top-color:#fff;background-image:linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959);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:#334bff}::-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:#fff}::-webkit-scrollbar-button:horizontal:start:decrement{border-right-color:#fff;background-image:linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959);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:#334bff}::-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:#fff}::-webkit-scrollbar-button:horizontal:end:increment{border-left-color:#fff;background-image:linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959);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:#334bff}::-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:#fff}');

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

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/item/themes/solar/charcoal';
+
+elf.customStyles.define('ef-list', ':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}: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/list/themes/solar/pearl/index.js

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/item/themes/solar/pearl';
+
+elf.customStyles.define('ef-list', ':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}: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/loader/index.d.ts

@@ -0,0 +1,41 @@
+import { JSXInterface } from '../jsx';
+import { BasicElement, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
+/**
+ *  An animated graphical component,
+ *  used to show that an app is performing an action
+ *  in the background such as downloading content.
+ */
+export declare class Loader extends BasicElement {
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
+    /**
+     * Collection of template part names,
+     * used to create and theme different loader styles
+     */
+    protected get templateParts(): readonly string[];
+    protected firstUpdated(changedProperties: PropertyValues): void;
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     *
+     * @return TemplateResult
+     */
+    protected render(): TemplateResult;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ef-loader': Loader;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'ef-loader': Partial<Loader> | JSXInterface.HTMLAttributes<Loader>;
+    }
+  }
+}
+
+export {};

package/lib/loader/index.js

@@ -0,0 +1,61 @@
+import { __decorate } from "tslib";
+import { BasicElement, html } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { VERSION } from '../version.js';
+/**
+ * Global cache for loader template parts
+ */
+let cachedParts;
+/**
+ *  An animated graphical component,
+ *  used to show that an app is performing an action
+ *  in the background such as downloading content.
+ */
+let Loader = class Loader extends BasicElement {
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
+    }
+    /**
+     * Collection of template part names,
+     * used to create and theme different loader styles
+     */
+    get templateParts() {
+        const parts = cachedParts || this.getComputedVariable('--parts')
+            .split(',').map(part => part.trim()).filter(part => part);
+        if (cachedParts !== parts && parts.length) {
+            cachedParts = parts;
+        }
+        return parts;
+    }
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        !cachedParts && this.requestUpdate(); // polyfilled browsers require a second update
+    }
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     *
+     * @return TemplateResult
+     */
+    render() {
+        const dots = [];
+        for (const part of this.templateParts) {
+            dots.push(html `
+        <i part="${part}"></i>
+      `);
+        }
+        return html `
+      <div part="wrapper">${dots}</div>
+    `;
+    }
+};
+Loader = __decorate([
+    customElement('ef-loader', {
+        alias: 'amber-loader'
+    })
+], Loader);
+export { Loader };

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

@@ -0,0 +1,2 @@
+
+elf.customStyles.define('ef-loader', ':host{--parts:bar,shape shape-1,shape shape-2,shape shape-3,bar bar-1,bar bar-2,box box-1,box box-2,box box-3,shape shape-1 flash flash-1,shape shape-2 flash flash-2,shape shape-3 flash flash-3;position:absolute;top:0;right:0;bottom:0;left:0}:host [part=wrapper]{font-size:32px;width:2.75em;height:1em;color:#404040;position:absolute;top:calc(50% - .5em);left:calc(50% - 1.375em);display:block}:host [part~=shape]{color:grey;border:1px solid;width:.5em;height:.5em;transform:rotate(45deg);position:absolute;top:50%;margin:calc(-.25em - 1px)}:host [part~=shape-1]{left:17.67766953%;-webkit-animation:1s linear infinite alternate shape-1;animation:1s linear infinite alternate shape-1}:host [part~=shape-2]{left:50%;-webkit-animation:.5s linear infinite alternate shape-2;animation:.5s linear infinite alternate shape-2}:host [part~=shape-3]{right:17.67766953%;-webkit-animation:1s linear infinite alternate shape-3;animation:1s linear infinite alternate shape-3}:host [part~=flash]{color:#6678ff;box-sizing:border-box;outline:currentColor solid 2px;margin:-.25em}:host [part~=flash-1]{-webkit-animation:1s linear infinite alternate flash-1;animation:1s linear infinite alternate flash-1}:host [part~=flash-2]{-webkit-animation:.5s linear infinite alternate flash-2;animation:.5s linear infinite alternate flash-2}:host [part~=flash-3]{-webkit-animation:1s linear infinite alternate flash-3;animation:1s linear infinite alternate flash-3}:host [part~=box]{position:absolute;border:1px solid;margin:calc(-1em / 32 - 1px);width:calc(1em / 16);height:calc(1em / 16);top:50%}:host [part~=box-1]{left:17.67766953%;-webkit-animation:1s linear infinite alternate box-1;animation:1s linear infinite alternate box-1}:host [part~=box-2]{left:50%;-webkit-animation:.5s linear infinite alternate box-2;animation:.5s linear infinite alternate box-2}:host [part~=box-3]{right:17.67766953%;-webkit-animation:1s linear infinite alternate box-3;animation:1s linear infinite alternate box-3}:host [part~=bar]{position:absolute;top:50%;left:17.67766953%;right:17.67766953%;height:2px;margin-top:-1px;background-color:currentColor}:host [part~=bar-1]{left:17.67766953%;right:50%;background-color:#6678ff;-webkit-animation:1s linear infinite alternate bar-1;animation:1s linear infinite alternate bar-1}:host [part~=bar-2]{right:17.67766953%;left:50%;background-color:#6678ff;-webkit-animation:1s linear infinite alternate bar-2;animation:1s linear infinite alternate bar-2}@-webkit-keyframes shape-1{0%,10%{opacity:0}100%,25%{opacity:1}}@keyframes shape-1{0%,10%{opacity:0}100%,25%{opacity:1}}@-webkit-keyframes shape-2{0%,50%{opacity:1}100%,80%{opacity:0}}@keyframes shape-2{0%,50%{opacity:1}100%,80%{opacity:0}}@-webkit-keyframes shape-3{0%,75%{opacity:1}100%,90%{opacity:0}}@keyframes shape-3{0%,75%{opacity:1}100%,90%{opacity:0}}@-webkit-keyframes flash-1{0%{opacity:1}100%,25%{opacity:0}}@keyframes flash-1{0%{opacity:1}100%,25%{opacity:0}}@-webkit-keyframes flash-2{0%,50%{opacity:0}100%{opacity:1}}@keyframes flash-2{0%,50%{opacity:0}100%{opacity:1}}@-webkit-keyframes flash-3{0%,75%{opacity:0}100%{opacity:1}}@keyframes flash-3{0%,75%{opacity:0}100%{opacity:1}}@-webkit-keyframes box-1{0%,20%{background-color:#ccc;border-color:transparent}100%,25%{background-color:#0d0d0d;border-color:inherit}}@keyframes box-1{0%,20%{background-color:#ccc;border-color:transparent}100%,25%{background-color:#0d0d0d;border-color:inherit}}@-webkit-keyframes box-2{0%,50%{background-color:#0d0d0d;border-color:inherit}100%,60%{background-color:#ccc;border-color:transparent}}@keyframes box-2{0%,50%{background-color:#0d0d0d;border-color:inherit}100%,60%{background-color:#ccc;border-color:transparent}}@-webkit-keyframes box-3{0%,75%{background-color:#0d0d0d;border-color:inherit}100%,80%{background-color:#ccc;border-color:transparent}}@keyframes box-3{0%,75%{background-color:#0d0d0d;border-color:inherit}100%,80%{background-color:#ccc;border-color:transparent}}@-webkit-keyframes bar-1{0%,5%{transform:scaleX(0);transform-origin:left center}24%{transform:scaleX(1);transform-origin:left center}26%{transform:scaleX(1);transform-origin:right center}100%,45%{transform:scaleX(0);transform-origin:right center}}@keyframes bar-1{0%,5%{transform:scaleX(0);transform-origin:left center}24%{transform:scaleX(1);transform-origin:left center}26%{transform:scaleX(1);transform-origin:right center}100%,45%{transform:scaleX(0);transform-origin:right center}}@-webkit-keyframes bar-2{0%,55%{transform:scaleX(0);transform-origin:left center}74%{transform:scaleX(1);transform-origin:left center}76%{transform:scaleX(1);transform-origin:right center}100%,95%{transform:scaleX(0);transform-origin:right center}}@keyframes bar-2{0%,55%{transform:scaleX(0);transform-origin:left center}74%{transform:scaleX(1);transform-origin:left center}76%{transform:scaleX(1);transform-origin:right center}100%,95%{transform:scaleX(0);transform-origin:right center}}');

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

@@ -0,0 +1,2 @@
+
+elf.customStyles.define('ef-loader', ':host{--parts:bar,shape shape-1,shape shape-2,shape shape-3,bar bar-1,bar bar-2,box box-1,box box-2,box box-3,shape shape-1 flash flash-1,shape shape-2 flash flash-2,shape shape-3 flash flash-3;position:absolute;top:0;right:0;bottom:0;left:0}:host [part=wrapper]{font-size:32px;width:2.75em;height:1em;color:#d9d9d9;position:absolute;top:calc(50% - .5em);left:calc(50% - 1.375em);display:block}:host [part~=shape]{color:#ccc;border:1px solid;width:.5em;height:.5em;transform:rotate(45deg);position:absolute;top:50%;margin:calc(-.25em - 1px)}:host [part~=shape-1]{left:17.67766953%;-webkit-animation:1s linear infinite alternate shape-1;animation:1s linear infinite alternate shape-1}:host [part~=shape-2]{left:50%;-webkit-animation:.5s linear infinite alternate shape-2;animation:.5s linear infinite alternate shape-2}:host [part~=shape-3]{right:17.67766953%;-webkit-animation:1s linear infinite alternate shape-3;animation:1s linear infinite alternate shape-3}:host [part~=flash]{color:#334bff;box-sizing:border-box;outline:currentColor solid 2px;margin:-.25em}:host [part~=flash-1]{-webkit-animation:1s linear infinite alternate flash-1;animation:1s linear infinite alternate flash-1}:host [part~=flash-2]{-webkit-animation:.5s linear infinite alternate flash-2;animation:.5s linear infinite alternate flash-2}:host [part~=flash-3]{-webkit-animation:1s linear infinite alternate flash-3;animation:1s linear infinite alternate flash-3}:host [part~=box]{position:absolute;border:1px solid;margin:calc(-1em / 32 - 1px);width:calc(1em / 16);height:calc(1em / 16);top:50%}:host [part~=box-1]{left:17.67766953%;-webkit-animation:1s linear infinite alternate box-1;animation:1s linear infinite alternate box-1}:host [part~=box-2]{left:50%;-webkit-animation:.5s linear infinite alternate box-2;animation:.5s linear infinite alternate box-2}:host [part~=box-3]{right:17.67766953%;-webkit-animation:1s linear infinite alternate box-3;animation:1s linear infinite alternate box-3}:host [part~=bar]{position:absolute;top:50%;left:17.67766953%;right:17.67766953%;height:2px;margin-top:-1px;background-color:currentColor}:host [part~=bar-1]{left:17.67766953%;right:50%;background-color:#334bff;-webkit-animation:1s linear infinite alternate bar-1;animation:1s linear infinite alternate bar-1}:host [part~=bar-2]{right:17.67766953%;left:50%;background-color:#334bff;-webkit-animation:1s linear infinite alternate bar-2;animation:1s linear infinite alternate bar-2}@-webkit-keyframes shape-1{0%,10%{opacity:0}100%,25%{opacity:1}}@keyframes shape-1{0%,10%{opacity:0}100%,25%{opacity:1}}@-webkit-keyframes shape-2{0%,50%{opacity:1}100%,80%{opacity:0}}@keyframes shape-2{0%,50%{opacity:1}100%,80%{opacity:0}}@-webkit-keyframes shape-3{0%,75%{opacity:1}100%,90%{opacity:0}}@keyframes shape-3{0%,75%{opacity:1}100%,90%{opacity:0}}@-webkit-keyframes flash-1{0%{opacity:1}100%,25%{opacity:0}}@keyframes flash-1{0%{opacity:1}100%,25%{opacity:0}}@-webkit-keyframes flash-2{0%,50%{opacity:0}100%{opacity:1}}@keyframes flash-2{0%,50%{opacity:0}100%{opacity:1}}@-webkit-keyframes flash-3{0%,75%{opacity:0}100%{opacity:1}}@keyframes flash-3{0%,75%{opacity:0}100%{opacity:1}}@-webkit-keyframes box-1{0%,20%{background-color:#0d0d0d;border-color:transparent}100%,25%{background-color:#fff;border-color:inherit}}@keyframes box-1{0%,20%{background-color:#0d0d0d;border-color:transparent}100%,25%{background-color:#fff;border-color:inherit}}@-webkit-keyframes box-2{0%,50%{background-color:#fff;border-color:inherit}100%,60%{background-color:#0d0d0d;border-color:transparent}}@keyframes box-2{0%,50%{background-color:#fff;border-color:inherit}100%,60%{background-color:#0d0d0d;border-color:transparent}}@-webkit-keyframes box-3{0%,75%{background-color:#fff;border-color:inherit}100%,80%{background-color:#0d0d0d;border-color:transparent}}@keyframes box-3{0%,75%{background-color:#fff;border-color:inherit}100%,80%{background-color:#0d0d0d;border-color:transparent}}@-webkit-keyframes bar-1{0%,5%{transform:scaleX(0);transform-origin:left center}24%{transform:scaleX(1);transform-origin:left center}26%{transform:scaleX(1);transform-origin:right center}100%,45%{transform:scaleX(0);transform-origin:right center}}@keyframes bar-1{0%,5%{transform:scaleX(0);transform-origin:left center}24%{transform:scaleX(1);transform-origin:left center}26%{transform:scaleX(1);transform-origin:right center}100%,45%{transform:scaleX(0);transform-origin:right center}}@-webkit-keyframes bar-2{0%,55%{transform:scaleX(0);transform-origin:left center}74%{transform:scaleX(1);transform-origin:left center}76%{transform:scaleX(1);transform-origin:right center}100%,95%{transform:scaleX(0);transform-origin:right center}}@keyframes bar-2{0%,55%{transform:scaleX(0);transform-origin:left center}74%{transform:scaleX(1);transform-origin:left center}76%{transform:scaleX(1);transform-origin:right center}100%,95%{transform:scaleX(0);transform-origin:right center}}');

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

@@ -0,0 +1,2 @@
+
+elf.customStyles.define('ef-loader', ':host{--parts:dot dot0,dot dot1,dot dot2;position:absolute;top:50%;left:50%;overflow:hidden;width:70px;height:20px;margin:-10px 0 0 -35px}:host([size=small]){width:30px;height:6px;margin:-3px 0 0 -15px}:host([size=small]) [part~=dot]{width:5px;height:5px}:host([size=medium]){width:42px;height:12px;margin:-6px 0 0 -21px}:host([size=medium]) [part~=dot]{width:10px;height:10px}:host [part=wrapper]{box-sizing:border-box;height:100%;width:100%;display:flex;align-items:center;justify-content:space-between}:host [part=wrapper]:after,:host [part=wrapper]:before{content:\'\'}:host [part~=dot]{box-sizing:border-box;width:17px;height:17px;border-radius:50%;-webkit-animation-duration:1.2s;animation-duration:1.2s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;border:1px solid rgba(194,194,194,.4)}:host [part~=dot0]{-webkit-animation-name:pulse-1;animation-name:pulse-1}:host [part~=dot1]{-webkit-animation-name:pulse-2;animation-name:pulse-2}:host [part~=dot2]{-webkit-animation-name:pulse-3;animation-name:pulse-3}@-webkit-keyframes pulse-1{0%,100%,80%{background-color:transparent}25%{background-color:rgba(194,194,194,.4)}}@keyframes pulse-1{0%,100%,80%{background-color:transparent}25%{background-color:rgba(194,194,194,.4)}}@-webkit-keyframes pulse-2{0%,10%,100%,90%{background-color:transparent}50%{background-color:rgba(194,194,194,.8)}}@keyframes pulse-2{0%,10%,100%,90%{background-color:transparent}50%{background-color:rgba(194,194,194,.8)}}@-webkit-keyframes pulse-3{0%,100%,20%{background-color:transparent}75%{background-color:rgba(194,194,194,.8)}}@keyframes pulse-3{0%,100%,20%{background-color:transparent}75%{background-color:rgba(194,194,194,.8)}}');

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

@@ -0,0 +1,2 @@
+
+elf.customStyles.define('ef-loader', ':host{--parts:dot dot0,dot dot1,dot dot2;position:absolute;top:50%;left:50%;overflow:hidden;width:70px;height:20px;margin:-10px 0 0 -35px}:host([size=small]){width:30px;height:6px;margin:-3px 0 0 -15px}:host([size=small]) [part~=dot]{width:5px;height:5px}:host([size=medium]){width:42px;height:12px;margin:-6px 0 0 -21px}:host([size=medium]) [part~=dot]{width:10px;height:10px}:host [part=wrapper]{box-sizing:border-box;height:100%;width:100%;display:flex;align-items:center;justify-content:space-between}:host [part=wrapper]:after,:host [part=wrapper]:before{content:\'\'}:host [part~=dot]{box-sizing:border-box;width:17px;height:17px;border-radius:50%;-webkit-animation-duration:1.2s;animation-duration:1.2s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;border:1px solid rgba(72,72,72,.4)}:host [part~=dot0]{-webkit-animation-name:pulse-1;animation-name:pulse-1}:host [part~=dot1]{-webkit-animation-name:pulse-2;animation-name:pulse-2}:host [part~=dot2]{-webkit-animation-name:pulse-3;animation-name:pulse-3}@-webkit-keyframes pulse-1{0%,100%,80%{background-color:transparent}25%{background-color:rgba(72,72,72,.4)}}@keyframes pulse-1{0%,100%,80%{background-color:transparent}25%{background-color:rgba(72,72,72,.4)}}@-webkit-keyframes pulse-2{0%,10%,100%,90%{background-color:transparent}50%{background-color:rgba(72,72,72,.8)}}@keyframes pulse-2{0%,10%,100%,90%{background-color:transparent}50%{background-color:rgba(72,72,72,.8)}}@-webkit-keyframes pulse-3{0%,100%,20%{background-color:transparent}75%{background-color:rgba(72,72,72,.8)}}@keyframes pulse-3{0%,100%,20%{background-color:transparent}75%{background-color:rgba(72,72,72,.8)}}');

package/lib/multi-input/helpers/types.d.ts

@@ -0,0 +1,11 @@
+import type { CollectionItem } from '@refinitiv-ui/utils/lib/collection.js';
+export declare type SelectionIndex = number | null;
+export declare type MultiInputEvents = 'item-added' | 'item-removed' | 'item-error';
+export declare type MultiInputData = MultiInputDataItem[];
+export interface MultiInputDataItem extends CollectionItem {
+    value: string;
+    label: string;
+    id?: string;
+    readonly?: boolean;
+    disabled?: boolean;
+}

package/lib/multi-input/helpers/types.js

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

package/lib/multi-input/index.d.ts

@@ -0,0 +1,301 @@
+import { JSXInterface } from '../jsx';
+import { ControlElement, CSSResultGroup, MultiValue, TemplateResult, PropertyValues } from '@refinitiv-ui/core';
+import type { MultiInputData, MultiInputDataItem, SelectionIndex } from './helpers/types';
+import '../pill/index.js';
+import '../text-field/index.js';
+export type { MultiInputData, MultiInputDataItem };
+/**
+ * An input control component to display a selection of pills
+ *
+ * @event value-changed - Fired when new value of text field is changed.
+ * Property `detail.value` will be the new value.
+ *
+ * @event error-changed - Dispatched when error state changes.
+ * Property `detail.error` is error from validation.
+ *
+ * @event item-added - Fired when new pill is added.
+ * Property `detail.item` is new added pill.
+ * Property `detail.items` is new list of all pills.
+ *
+ * @event item-removed - Fired when item is removed.
+ * Property `detail.item` is pill that removed.
+ * Property `detail.items` is new list of all pills.
+ *
+ * @event item-error - Fired when item that attempt to add is invalid.
+ * Property `detail.item` is item with an error.
+ * Property `detail.items` a current list of pills.
+ *
+ * @prop {boolean} [readonly=false] - Hides text field and clear icon from all pills
+ * @attr {boolean} readonly - Hides text field and clear icon from all pills
+ *
+ * @attr {boolean} disabled - Set disabled state
+ * @prop {boolean} [disabled=false] - Set disabled state
+ *
+ * @prop {string} value - Current value of text field
+ * @attr {string} value - Current value of text field
+ *
+ */
+export declare class MultiInput extends ControlElement implements MultiValue {
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
+    /**
+     * A `CSSResultGroup` that will be used
+     * to style the host, slotted children
+     * and the internal template of the element.
+     * @return CSS template
+     */
+    static get styles(): CSSResultGroup;
+    /**
+     * Array of item's values ( readonly )
+     * @readonly
+     * @type {string[]}
+     * @default []
+     */
+    get values(): string[];
+    /**
+     * Hide text input box
+     */
+    pillsOnly: boolean;
+    /**
+     * Specify icon to display inside input box
+     */
+    icon: string;
+    /**
+     * Placeholder text to display in input box
+     */
+    placeholder: string;
+    /**
+     * Set state to error
+     */
+    error: boolean;
+    /**
+     * Set state to warning
+     */
+    warning: boolean;
+    /**
+     * Set character max limit
+     */
+    maxLength: number | null;
+    /**
+     * Set character min limit
+     */
+    minLength: number | null;
+    /**
+     * Selection start index
+     * @default null
+     */
+    get selectionStart(): number | null;
+    set selectionStart(index: SelectionIndex);
+    /**
+     * Selection end index
+     * @default null
+     */
+    get selectionEnd(): number | null;
+    set selectionEnd(index: SelectionIndex);
+    /**
+     * The data object, used to render the list.
+     * @type {MultiInputData | null}
+     * @default null
+     */
+    get data(): MultiInputData | null;
+    set data(value: MultiInputData | null);
+    private _data;
+    /**
+     * the component of the list in rendered template
+     */
+    private list;
+    /**
+     * the component of the search in rendered template
+     */
+    private search?;
+    private composer;
+    /**
+     * @ignore
+     */
+    readonly multiple = true;
+    /**
+     * Removes the item by the value and returns array of removed items
+     * @param value {string} Value of item to remove
+     * @returns array of removed items
+     */
+    removeByValue(value: string): MultiInputData;
+    /**
+     * Add a new item to the input. Return newly added object or null if added invalid object.
+     * @param item to add. Object must have at least value and label
+     * @returns {MultiInputDataItem | null} added item
+     */
+    add(item: MultiInputDataItem): MultiInputDataItem | null;
+    /**
+     * Removes last item. Returns item that removed or null if list was empty
+     * @returns {MultiInputDataItem | null} Removed item or null if list was empty
+     */
+    removeLastItem(): MultiInputDataItem | null;
+    /**
+     * Removes pill by index. Returns item that removed or null if list was empty
+     * @param {number} index of pill to be removed
+     * @returns {MultiInputDataItem | null} Removed item or null if list was empty
+     */
+    removeByIndex(index: number): MultiInputDataItem | null;
+    /**
+     * Remove item from collection and notify
+     * @param item processed entity
+     * @param notifyEvent should notify about changes
+     * @returns removed item or null
+     */
+    private removeItem;
+    /**
+     * Removes item by a property within item
+     * @param value of property
+     * @param property name
+     * @returns array of removed items
+     */
+    private removeByProperty;
+    /**
+     * Add item to collection and notify
+     * @param item processed entity
+     * @param notifyEvent should notify about changes
+     * @returns added item or null
+     */
+    private addItem;
+    /**
+     * validate input according `minLength` and `maxLength` properties
+     * @param {string} value value for validate
+     * change state of `error` property according validation
+     * @returns {void}
+     */
+    private validateInput;
+    /**
+     * @param value value of changed.
+     * @returns {boolean} true if there is no error, false when minLength more than 0 and value is too short
+     */
+    private shouldValidateForMinLength;
+    /** Old value for handle reset value */
+    private oldValue;
+    /**
+    * Current value of text field
+    * @default -
+    * @param value Element value
+    */
+    set value(value: string);
+    get value(): string;
+    /**
+     * @param value value for validate.
+     * @returns true if there is maxLength is null and maxLength is more than value.
+     */
+    private shouldValidateForMaxLength;
+    /**
+     * Called when the element’s DOM has been updated and rendered
+     * @param changedProperties Properties that has changed
+     * @returns shouldUpdate
+     */
+    protected updated(changedProperties: PropertyValues): void;
+    /**
+     * Check if input should be re-validated
+     * @param changedProperties Properties that has changed
+     * @returns True if input should be re-validated
+     */
+    private shouldValidateInput;
+    /**
+     * Set the selection range
+     * @param startSelection Start of selection
+     * @param endSelection End of the selection
+     * @returns {void}
+     */
+    setSelectionRange(startSelection: number, endSelection: number): void;
+    /**
+     * Select the contents of input
+     * @returns void
+     */
+    select(): void;
+    /**
+     * render this component
+     * @returns the main template
+     */
+    protected render(): TemplateResult;
+    /**
+     * render the search element
+     * @returns the template of the search element
+     */
+    private get textFieldTemplate();
+    /**
+     * render pill components
+     * @returns the template of pill components
+     */
+    private pillsTemplate;
+    /**
+     * render the pill component
+     * @param item for render
+     * @param index the position item of values
+     * @returns the template of a pill component
+     */
+    private pillTemplate;
+    /**
+     * handle the clear event of pill
+     * @param event the event contains the current pill
+     * @returns {void}
+     */
+    private onPillClearsHandler;
+    /**
+     * the wrapper for item events
+     * @param item to notify about
+     * @param eventType notify mode - [item-removed|item-added|item-error]
+     * @returns true if event was not prevented
+     */
+    private notify;
+    /**
+     * Detect keydown and delete last item if delete key is pushed
+     * @param event keydown event
+     * @returns {void}
+     */
+    private handleKeyDown;
+    /**
+     * handle when value is changed
+     * @param event Input change event
+     * @returns {void}
+     */
+    private onInputChange;
+    /**
+     * handle keydown event when the key code is the backspace
+     * @param event keyboard backspace keydown for preventing default in case of native functionality removing
+     * @returns {void}
+     */
+    private removeLastItemByKeyboard;
+    /**
+     * handle keydown event when the key code is the enter
+     * @returns {void}
+     */
+    private addItemByKeyboard;
+    /**
+     * check the value of the search element and check readonly and disabled
+     * @returns the condition checks the search value is empty and switched off readonly and disabled of this component
+     */
+    private isSearchValueEmptyWithoutReadonlyAndDisabled;
+    /**
+     * check the value of the search element and check readonly and disabled
+     * @returns the condition checks the search value is empty and switched off readonly and disabled of this component
+     */
+    private isSearchValueNotEmptyWithoutReadonlyAndDisabled;
+    /**
+     * Item check for value and label to ensure it can be rendered
+     * @param item Item to check
+     * @returns true if item exists and contains value and label
+     */
+    private isItem;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ef-multi-input': MultiInput;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'ef-multi-input': Partial<MultiInput> | JSXInterface.ControlHTMLAttributes<MultiInput>;
+    }
+  }
+}
+
+export {};