@refinitiv-ui/elements 5.0.0-beta.3 → 5.0.0-dev.204

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (596) hide show
  1. package/CHANGELOG.md +325 -73
  2. package/README.md +13 -2
  3. package/lib/accordion/custom-elements.json +0 -13
  4. package/lib/accordion/custom-elements.md +18 -0
  5. package/lib/accordion/index.d.ts +13 -10
  6. package/lib/accordion/index.js +15 -18
  7. package/lib/appstate-bar/custom-elements.json +1 -1
  8. package/lib/appstate-bar/custom-elements.md +22 -0
  9. package/lib/appstate-bar/index.d.ts +15 -6
  10. package/lib/appstate-bar/index.js +17 -11
  11. package/lib/autosuggest/custom-elements.json +24 -4
  12. package/lib/autosuggest/custom-elements.md +54 -0
  13. package/lib/autosuggest/helpers/types.d.ts +22 -1
  14. package/lib/autosuggest/helpers/types.js +0 -1
  15. package/lib/autosuggest/helpers/utils.d.ts +2 -2
  16. package/lib/autosuggest/helpers/utils.js +1 -3
  17. package/lib/autosuggest/index.d.ts +21 -9
  18. package/lib/autosuggest/index.js +45 -31
  19. package/lib/button/custom-elements.json +3 -3
  20. package/lib/button/custom-elements.md +23 -0
  21. package/lib/button/index.d.ts +27 -20
  22. package/lib/button/index.js +92 -74
  23. package/lib/button/themes/halo/dark/index.js +1 -1
  24. package/lib/button/themes/halo/light/index.js +1 -1
  25. package/lib/button/themes/solar/charcoal/index.js +1 -1
  26. package/lib/button/themes/solar/pearl/index.js +1 -1
  27. package/lib/button-bar/custom-elements.md +9 -0
  28. package/lib/button-bar/index.d.ts +60 -4
  29. package/lib/button-bar/index.js +164 -19
  30. package/lib/calendar/constants.d.ts +26 -0
  31. package/lib/calendar/constants.js +28 -0
  32. package/lib/calendar/custom-elements.json +8 -6
  33. package/lib/calendar/custom-elements.md +35 -0
  34. package/lib/calendar/index.d.ts +119 -21
  35. package/lib/calendar/index.js +512 -157
  36. package/lib/calendar/locales.d.ts +1 -31
  37. package/lib/calendar/locales.js +3 -107
  38. package/lib/calendar/themes/halo/dark/index.js +1 -1
  39. package/lib/calendar/themes/halo/light/index.js +1 -1
  40. package/lib/calendar/themes/solar/charcoal/index.js +1 -1
  41. package/lib/calendar/themes/solar/pearl/index.js +1 -1
  42. package/lib/calendar/types.d.ts +12 -13
  43. package/lib/calendar/types.js +1 -7
  44. package/lib/calendar/utils.d.ts +31 -1
  45. package/lib/calendar/utils.js +105 -3
  46. package/lib/canvas/custom-elements.json +9 -7
  47. package/lib/canvas/custom-elements.md +27 -0
  48. package/lib/canvas/index.d.ts +14 -6
  49. package/lib/canvas/index.js +17 -12
  50. package/lib/card/custom-elements.json +21 -9
  51. package/lib/card/custom-elements.md +24 -0
  52. package/lib/card/helpers/types.d.ts +1 -1
  53. package/lib/card/helpers/types.js +0 -1
  54. package/lib/card/index.d.ts +67 -20
  55. package/lib/card/index.js +132 -35
  56. package/lib/card/themes/halo/dark/index.js +1 -1
  57. package/lib/card/themes/halo/light/index.js +1 -1
  58. package/lib/card/themes/solar/charcoal/index.js +1 -1
  59. package/lib/card/themes/solar/pearl/index.js +1 -1
  60. package/lib/chart/custom-elements.json +3 -3
  61. package/lib/chart/custom-elements.md +16 -0
  62. package/lib/chart/helpers/index.d.ts +2 -0
  63. package/lib/chart/helpers/index.js +2 -0
  64. package/lib/chart/helpers/legend.d.ts +2 -2
  65. package/lib/chart/helpers/legend.js +2 -3
  66. package/lib/chart/helpers/merge.d.ts +15 -0
  67. package/lib/chart/helpers/merge.js +28 -0
  68. package/lib/chart/helpers/types.d.ts +40 -12
  69. package/lib/chart/helpers/types.js +0 -1
  70. package/lib/chart/index.d.ts +34 -26
  71. package/lib/chart/index.js +58 -55
  72. package/lib/chart/plugins/doughnut-center-label.js +4 -5
  73. package/lib/checkbox/custom-elements.json +4 -4
  74. package/lib/checkbox/custom-elements.md +18 -0
  75. package/lib/checkbox/index.d.ts +29 -14
  76. package/lib/checkbox/index.js +65 -34
  77. package/lib/checkbox/themes/halo/dark/index.js +1 -1
  78. package/lib/checkbox/themes/halo/light/index.js +1 -1
  79. package/lib/clock/custom-elements.json +21 -4
  80. package/lib/clock/custom-elements.md +28 -0
  81. package/lib/clock/index.d.ts +25 -6
  82. package/lib/clock/index.js +44 -18
  83. package/lib/clock/themes/halo/dark/index.js +1 -1
  84. package/lib/clock/themes/halo/light/index.js +1 -1
  85. package/lib/clock/themes/solar/charcoal/index.js +1 -1
  86. package/lib/clock/themes/solar/pearl/index.js +1 -1
  87. package/lib/clock/utils/TickManager.js +2 -3
  88. package/lib/clock/utils/timestamps.js +0 -1
  89. package/lib/collapse/custom-elements.md +27 -0
  90. package/lib/collapse/index.d.ts +15 -8
  91. package/lib/collapse/index.js +18 -13
  92. package/lib/color-dialog/custom-elements.json +29 -16
  93. package/lib/color-dialog/custom-elements.md +39 -0
  94. package/lib/color-dialog/elements/color-palettes.d.ts +13 -6
  95. package/lib/color-dialog/elements/color-palettes.js +16 -13
  96. package/lib/color-dialog/elements/grayscale-palettes.d.ts +13 -6
  97. package/lib/color-dialog/elements/grayscale-palettes.js +17 -13
  98. package/lib/color-dialog/elements/palettes.d.ts +15 -3
  99. package/lib/color-dialog/elements/palettes.js +65 -45
  100. package/lib/color-dialog/helpers/color-helpers.d.ts +7 -53
  101. package/lib/color-dialog/helpers/color-helpers.js +12 -110
  102. package/lib/color-dialog/helpers/value-model.d.ts +1 -1
  103. package/lib/color-dialog/helpers/value-model.js +18 -17
  104. package/lib/color-dialog/index.d.ts +27 -20
  105. package/lib/color-dialog/index.js +54 -45
  106. package/lib/combo-box/custom-elements.json +51 -17
  107. package/lib/combo-box/custom-elements.md +42 -0
  108. package/lib/combo-box/helpers/filter.d.ts +4 -4
  109. package/lib/combo-box/helpers/filter.js +0 -1
  110. package/lib/combo-box/helpers/keyboard-event.js +0 -1
  111. package/lib/combo-box/helpers/renderer.d.ts +8 -0
  112. package/lib/combo-box/helpers/renderer.js +24 -0
  113. package/lib/combo-box/helpers/types.d.ts +2 -2
  114. package/lib/combo-box/helpers/types.js +0 -1
  115. package/lib/combo-box/index.d.ts +63 -32
  116. package/lib/combo-box/index.js +102 -60
  117. package/lib/combo-box/themes/halo/dark/index.js +2 -3
  118. package/lib/combo-box/themes/halo/light/index.js +2 -3
  119. package/lib/combo-box/themes/solar/charcoal/index.js +2 -3
  120. package/lib/combo-box/themes/solar/pearl/index.js +2 -3
  121. package/lib/counter/custom-elements.json +39 -0
  122. package/lib/counter/custom-elements.md +11 -0
  123. package/lib/counter/index.d.ts +91 -0
  124. package/lib/counter/index.js +154 -0
  125. package/lib/counter/themes/halo/dark/index.js +3 -0
  126. package/lib/counter/themes/halo/light/index.js +3 -0
  127. package/lib/counter/themes/solar/charcoal/index.js +3 -0
  128. package/lib/counter/themes/solar/pearl/index.js +3 -0
  129. package/lib/counter/utils.d.ts +13 -0
  130. package/lib/counter/utils.js +52 -0
  131. package/lib/datetime-picker/custom-elements.json +53 -24
  132. package/lib/datetime-picker/custom-elements.md +57 -0
  133. package/lib/datetime-picker/index.d.ts +34 -16
  134. package/lib/datetime-picker/index.js +56 -38
  135. package/lib/datetime-picker/locales.d.ts +1 -1
  136. package/lib/datetime-picker/locales.js +12 -2
  137. package/lib/datetime-picker/themes/solar/charcoal/index.js +1 -1
  138. package/lib/datetime-picker/themes/solar/pearl/index.js +1 -1
  139. package/lib/datetime-picker/types.d.ts +1 -1
  140. package/lib/datetime-picker/types.js +0 -1
  141. package/lib/datetime-picker/utils.js +1 -2
  142. package/lib/dialog/custom-elements.json +34 -12
  143. package/lib/dialog/custom-elements.md +47 -0
  144. package/lib/dialog/draggable-element.js +25 -16
  145. package/lib/dialog/index.d.ts +25 -21
  146. package/lib/dialog/index.js +36 -32
  147. package/lib/email-field/custom-elements.json +81 -94
  148. package/lib/email-field/custom-elements.md +37 -0
  149. package/lib/email-field/index.d.ts +47 -112
  150. package/lib/email-field/index.js +48 -241
  151. package/lib/email-field/themes/halo/dark/index.js +1 -1
  152. package/lib/email-field/themes/halo/light/index.js +1 -1
  153. package/lib/email-field/themes/solar/charcoal/index.js +1 -1
  154. package/lib/email-field/themes/solar/pearl/index.js +1 -1
  155. package/lib/events.d.ts +121 -0
  156. package/lib/events.js +1 -0
  157. package/lib/flag/custom-elements.md +10 -0
  158. package/lib/flag/index.d.ts +14 -5
  159. package/lib/flag/index.js +19 -12
  160. package/lib/flag/utils/FlagLoader.d.ts +1 -1
  161. package/lib/flag/utils/FlagLoader.js +1 -2
  162. package/lib/header/custom-elements.md +18 -0
  163. package/lib/header/index.d.ts +10 -3
  164. package/lib/header/index.js +12 -8
  165. package/lib/heatmap/custom-elements.json +13 -0
  166. package/lib/heatmap/custom-elements.md +26 -0
  167. package/lib/heatmap/helpers/color.d.ts +1 -1
  168. package/lib/heatmap/helpers/color.js +1 -2
  169. package/lib/heatmap/helpers/text.d.ts +1 -1
  170. package/lib/heatmap/helpers/text.js +0 -1
  171. package/lib/heatmap/helpers/track.js +2 -3
  172. package/lib/heatmap/helpers/types.js +0 -1
  173. package/lib/heatmap/index.d.ts +32 -13
  174. package/lib/heatmap/index.js +61 -35
  175. package/lib/icon/custom-elements.json +6 -4
  176. package/lib/icon/custom-elements.md +8 -0
  177. package/lib/icon/index.d.ts +17 -7
  178. package/lib/icon/index.js +36 -18
  179. package/lib/icon/utils/IconLoader.d.ts +6 -1
  180. package/lib/icon/utils/IconLoader.js +24 -18
  181. package/lib/index.d.ts +2 -0
  182. package/lib/index.js +2 -1
  183. package/lib/interactive-chart/custom-elements.json +5 -11
  184. package/lib/interactive-chart/custom-elements.md +31 -0
  185. package/lib/interactive-chart/helpers/merge.d.ts +15 -0
  186. package/lib/interactive-chart/helpers/merge.js +28 -0
  187. package/lib/interactive-chart/helpers/types.d.ts +10 -9
  188. package/lib/interactive-chart/helpers/types.js +6 -2
  189. package/lib/interactive-chart/index.d.ts +37 -18
  190. package/lib/interactive-chart/index.js +61 -51
  191. package/lib/item/custom-elements.json +4 -4
  192. package/lib/item/custom-elements.md +29 -0
  193. package/lib/item/helpers/types.d.ts +1 -1
  194. package/lib/item/helpers/types.js +0 -1
  195. package/lib/item/index.d.ts +26 -9
  196. package/lib/item/index.js +43 -16
  197. package/lib/label/custom-elements.json +7 -16
  198. package/lib/label/custom-elements.md +11 -0
  199. package/lib/label/index.d.ts +41 -73
  200. package/lib/label/index.js +150 -187
  201. package/lib/layout/custom-elements.md +26 -0
  202. package/lib/layout/index.d.ts +11 -4
  203. package/lib/layout/index.js +13 -9
  204. package/lib/led-gauge/custom-elements.json +4 -4
  205. package/lib/led-gauge/custom-elements.md +17 -0
  206. package/lib/led-gauge/index.d.ts +13 -5
  207. package/lib/led-gauge/index.js +16 -11
  208. package/lib/list/custom-elements.json +37 -5
  209. package/lib/list/custom-elements.md +33 -0
  210. package/lib/list/extensible-function.js +2 -1
  211. package/lib/list/helpers/list-renderer.d.ts +2 -2
  212. package/lib/list/helpers/list-renderer.js +4 -3
  213. package/lib/list/helpers/types.d.ts +2 -2
  214. package/lib/list/helpers/types.js +0 -1
  215. package/lib/list/index.d.ts +47 -12
  216. package/lib/list/index.js +100 -39
  217. package/lib/list/renderer.d.ts +2 -2
  218. package/lib/list/renderer.js +1 -2
  219. package/lib/loader/custom-elements.md +5 -0
  220. package/lib/loader/index.d.ts +8 -1
  221. package/lib/loader/index.js +11 -8
  222. package/lib/multi-input/custom-elements.json +7 -6
  223. package/lib/multi-input/custom-elements.md +43 -0
  224. package/lib/multi-input/helpers/types.d.ts +1 -1
  225. package/lib/multi-input/helpers/types.js +0 -1
  226. package/lib/multi-input/index.d.ts +19 -8
  227. package/lib/multi-input/index.js +28 -18
  228. package/lib/multi-input/themes/solar/charcoal/index.js +1 -1
  229. package/lib/multi-input/themes/solar/pearl/index.js +1 -1
  230. package/lib/notification/custom-elements.md +26 -0
  231. package/lib/notification/elements/notification-tray.d.ts +10 -4
  232. package/lib/notification/elements/notification-tray.js +15 -11
  233. package/lib/notification/elements/notification.d.ts +19 -7
  234. package/lib/notification/elements/notification.js +25 -13
  235. package/lib/notification/helpers/status.d.ts +1 -1
  236. package/lib/notification/helpers/status.js +1 -2
  237. package/lib/notification/helpers/types.d.ts +1 -1
  238. package/lib/notification/helpers/types.js +0 -1
  239. package/lib/notification/index.d.ts +2 -2
  240. package/lib/notification/index.js +2 -3
  241. package/lib/number-field/custom-elements.json +99 -54
  242. package/lib/number-field/custom-elements.md +42 -0
  243. package/lib/number-field/index.d.ts +104 -52
  244. package/lib/number-field/index.js +129 -88
  245. package/lib/number-field/themes/halo/dark/index.js +1 -1
  246. package/lib/number-field/themes/halo/light/index.js +1 -1
  247. package/lib/number-field/themes/solar/charcoal/index.js +1 -1
  248. package/lib/number-field/themes/solar/pearl/index.js +1 -1
  249. package/lib/overlay/custom-elements.json +26 -13
  250. package/lib/overlay/custom-elements.md +54 -0
  251. package/lib/overlay/elements/overlay-backdrop.d.ts +12 -5
  252. package/lib/overlay/elements/overlay-backdrop.js +13 -9
  253. package/lib/overlay/elements/overlay-viewport.d.ts +11 -4
  254. package/lib/overlay/elements/overlay-viewport.js +12 -9
  255. package/lib/overlay/elements/overlay.d.ts +18 -6
  256. package/lib/overlay/elements/overlay.js +35 -28
  257. package/lib/overlay/helpers/functions.js +0 -1
  258. package/lib/overlay/helpers/types.js +0 -1
  259. package/lib/overlay/index.d.ts +2 -2
  260. package/lib/overlay/index.js +1 -2
  261. package/lib/overlay/managers/backdrop-manager.d.ts +2 -2
  262. package/lib/overlay/managers/backdrop-manager.js +2 -3
  263. package/lib/overlay/managers/close-manager.d.ts +1 -1
  264. package/lib/overlay/managers/close-manager.js +1 -2
  265. package/lib/overlay/managers/focus-manager.d.ts +1 -1
  266. package/lib/overlay/managers/focus-manager.js +3 -5
  267. package/lib/overlay/managers/interaction-lock-manager.js +2 -3
  268. package/lib/overlay/managers/viewport-manager.d.ts +3 -3
  269. package/lib/overlay/managers/viewport-manager.js +6 -3
  270. package/lib/overlay/managers/zindex-manager.d.ts +1 -1
  271. package/lib/overlay/managers/zindex-manager.js +1 -4
  272. package/lib/overlay-menu/custom-elements.json +126 -12
  273. package/lib/overlay-menu/custom-elements.md +44 -0
  274. package/lib/overlay-menu/helpers/types.d.ts +3 -3
  275. package/lib/overlay-menu/helpers/types.js +0 -1
  276. package/lib/overlay-menu/index.d.ts +44 -12
  277. package/lib/overlay-menu/index.js +66 -35
  278. package/lib/overlay-menu/managers/menu-manager.d.ts +2 -2
  279. package/lib/overlay-menu/managers/menu-manager.js +8 -8
  280. package/lib/pagination/custom-elements.json +16 -33
  281. package/lib/pagination/custom-elements.md +26 -0
  282. package/lib/pagination/index.d.ts +156 -81
  283. package/lib/pagination/index.js +373 -214
  284. package/lib/pagination/themes/halo/dark/index.js +1 -1
  285. package/lib/pagination/themes/halo/light/index.js +1 -1
  286. package/lib/pagination/themes/solar/charcoal/index.js +1 -1
  287. package/lib/pagination/themes/solar/pearl/index.js +1 -1
  288. package/lib/panel/custom-elements.md +11 -0
  289. package/lib/panel/index.d.ts +11 -4
  290. package/lib/panel/index.js +13 -9
  291. package/lib/password-field/custom-elements.json +62 -67
  292. package/lib/password-field/custom-elements.md +39 -0
  293. package/lib/password-field/index.d.ts +46 -90
  294. package/lib/password-field/index.js +52 -190
  295. package/lib/password-field/themes/halo/dark/index.js +1 -1
  296. package/lib/password-field/themes/halo/light/index.js +1 -1
  297. package/lib/password-field/themes/solar/charcoal/index.js +1 -1
  298. package/lib/password-field/themes/solar/pearl/index.js +1 -1
  299. package/lib/pill/custom-elements.json +9 -7
  300. package/lib/pill/custom-elements.md +22 -0
  301. package/lib/pill/index.d.ts +15 -7
  302. package/lib/pill/index.js +21 -27
  303. package/lib/pill/themes/halo/dark/index.js +1 -1
  304. package/lib/pill/themes/halo/light/index.js +1 -1
  305. package/lib/progress-bar/custom-elements.md +18 -0
  306. package/lib/progress-bar/index.d.ts +11 -15
  307. package/lib/progress-bar/index.js +14 -25
  308. package/lib/radio-button/custom-elements.json +4 -4
  309. package/lib/radio-button/custom-elements.md +19 -0
  310. package/lib/radio-button/index.d.ts +33 -9
  311. package/lib/radio-button/index.js +97 -24
  312. package/lib/radio-button/radio-button-registry.d.ts +3 -2
  313. package/lib/radio-button/radio-button-registry.js +57 -5
  314. package/lib/radio-button/themes/halo/dark/index.js +1 -1
  315. package/lib/radio-button/themes/halo/light/index.js +1 -1
  316. package/lib/rating/custom-elements.md +17 -0
  317. package/lib/rating/index.d.ts +11 -4
  318. package/lib/rating/index.js +16 -10
  319. package/lib/search-field/custom-elements.json +70 -74
  320. package/lib/search-field/custom-elements.md +41 -0
  321. package/lib/search-field/index.d.ts +47 -97
  322. package/lib/search-field/index.js +50 -212
  323. package/lib/search-field/themes/halo/dark/index.js +1 -1
  324. package/lib/search-field/themes/halo/light/index.js +1 -1
  325. package/lib/search-field/themes/solar/charcoal/index.js +1 -1
  326. package/lib/search-field/themes/solar/pearl/index.js +1 -1
  327. package/lib/select/custom-elements.json +5 -4
  328. package/lib/select/custom-elements.md +24 -0
  329. package/lib/select/helpers/types.d.ts +1 -1
  330. package/lib/select/helpers/types.js +0 -1
  331. package/lib/select/index.d.ts +26 -11
  332. package/lib/select/index.js +93 -52
  333. package/lib/select/themes/halo/dark/index.js +1 -1
  334. package/lib/select/themes/halo/light/index.js +1 -1
  335. package/lib/sidebar-layout/custom-elements.json +2 -6
  336. package/lib/sidebar-layout/custom-elements.md +21 -0
  337. package/lib/sidebar-layout/index.d.ts +15 -7
  338. package/lib/sidebar-layout/index.js +16 -10
  339. package/lib/slider/custom-elements.json +4 -4
  340. package/lib/slider/custom-elements.md +28 -0
  341. package/lib/slider/index.d.ts +18 -5
  342. package/lib/slider/index.js +69 -16
  343. package/lib/sparkline/custom-elements.json +4 -4
  344. package/lib/sparkline/custom-elements.md +16 -0
  345. package/lib/sparkline/index.d.ts +14 -5
  346. package/lib/sparkline/index.js +17 -10
  347. package/lib/swing-gauge/const.d.ts +22 -0
  348. package/lib/swing-gauge/const.js +26 -0
  349. package/lib/swing-gauge/custom-elements.json +51 -22
  350. package/lib/swing-gauge/custom-elements.md +17 -0
  351. package/lib/swing-gauge/helpers.d.ts +8 -0
  352. package/lib/swing-gauge/helpers.js +105 -0
  353. package/lib/swing-gauge/index.d.ts +220 -72
  354. package/lib/swing-gauge/index.js +648 -168
  355. package/lib/swing-gauge/themes/halo/dark/index.js +1 -1
  356. package/lib/swing-gauge/themes/halo/light/index.js +1 -1
  357. package/lib/swing-gauge/themes/solar/charcoal/index.js +1 -1
  358. package/lib/swing-gauge/themes/solar/pearl/index.js +1 -1
  359. package/lib/swing-gauge/types.d.ts +34 -0
  360. package/lib/swing-gauge/types.js +1 -0
  361. package/lib/tab/custom-elements.json +10 -21
  362. package/lib/tab/custom-elements.md +22 -0
  363. package/lib/tab/index.d.ts +19 -14
  364. package/lib/tab/index.js +31 -40
  365. package/lib/tab/themes/halo/dark/index.js +1 -1
  366. package/lib/tab/themes/halo/light/index.js +1 -1
  367. package/lib/tab/themes/solar/charcoal/index.js +1 -1
  368. package/lib/tab/themes/solar/pearl/index.js +1 -1
  369. package/lib/tab-bar/custom-elements.json +0 -6
  370. package/lib/tab-bar/custom-elements.md +11 -0
  371. package/lib/tab-bar/helpers/animate.d.ts +1 -1
  372. package/lib/tab-bar/helpers/animate.js +5 -2
  373. package/lib/tab-bar/index.d.ts +12 -5
  374. package/lib/tab-bar/index.js +18 -21
  375. package/lib/tab-bar/themes/solar/charcoal/index.js +1 -1
  376. package/lib/tab-bar/themes/solar/pearl/index.js +1 -1
  377. package/lib/text-field/custom-elements.json +78 -89
  378. package/lib/text-field/custom-elements.md +35 -0
  379. package/lib/text-field/index.d.ts +67 -80
  380. package/lib/text-field/index.js +106 -157
  381. package/lib/text-field/themes/halo/dark/index.js +1 -1
  382. package/lib/text-field/themes/halo/light/index.js +1 -1
  383. package/lib/text-field/themes/solar/charcoal/index.js +1 -1
  384. package/lib/text-field/themes/solar/pearl/index.js +1 -1
  385. package/lib/time-picker/custom-elements.json +6 -8
  386. package/lib/time-picker/custom-elements.md +28 -0
  387. package/lib/time-picker/index.d.ts +105 -65
  388. package/lib/time-picker/index.js +297 -169
  389. package/lib/time-picker/themes/solar/charcoal/index.js +1 -1
  390. package/lib/time-picker/themes/solar/pearl/index.js +1 -1
  391. package/lib/toggle/custom-elements.json +4 -4
  392. package/lib/toggle/custom-elements.md +19 -0
  393. package/lib/toggle/index.d.ts +22 -5
  394. package/lib/toggle/index.js +58 -13
  395. package/lib/toggle/themes/halo/dark/index.js +1 -1
  396. package/lib/toggle/themes/halo/light/index.js +1 -1
  397. package/lib/toggle/themes/solar/charcoal/index.js +1 -1
  398. package/lib/toggle/themes/solar/pearl/index.js +1 -1
  399. package/lib/tooltip/custom-elements.md +14 -0
  400. package/lib/tooltip/elements/title-tooltip.js +2 -3
  401. package/lib/tooltip/elements/tooltip-element.d.ts +2 -3
  402. package/lib/tooltip/elements/tooltip-element.js +0 -2
  403. package/lib/tooltip/helpers/overflow-tooltip.d.ts +1 -1
  404. package/lib/tooltip/helpers/overflow-tooltip.js +1 -2
  405. package/lib/tooltip/helpers/renderer.d.ts +1 -1
  406. package/lib/tooltip/helpers/renderer.js +0 -1
  407. package/lib/tooltip/helpers/types.d.ts +1 -1
  408. package/lib/tooltip/helpers/types.js +0 -1
  409. package/lib/tooltip/index.d.ts +18 -11
  410. package/lib/tooltip/index.js +27 -23
  411. package/lib/tooltip/managers/tooltip-manager.d.ts +2 -2
  412. package/lib/tooltip/managers/tooltip-manager.js +17 -11
  413. package/lib/tornado-chart/custom-elements.md +18 -0
  414. package/lib/tornado-chart/elements/tornado-chart.d.ts +12 -5
  415. package/lib/tornado-chart/elements/tornado-chart.js +15 -11
  416. package/lib/tornado-chart/elements/tornado-item.d.ts +13 -6
  417. package/lib/tornado-chart/elements/tornado-item.js +17 -12
  418. package/lib/tornado-chart/index.d.ts +2 -2
  419. package/lib/tornado-chart/index.js +2 -3
  420. package/lib/tree/custom-elements.json +30 -2
  421. package/lib/tree/custom-elements.md +32 -0
  422. package/lib/tree/elements/tree-item.d.ts +53 -5
  423. package/lib/tree/elements/tree-item.js +114 -34
  424. package/lib/tree/elements/tree.d.ts +65 -20
  425. package/lib/tree/elements/tree.js +151 -34
  426. package/lib/tree/helpers/filter.d.ts +8 -0
  427. package/lib/tree/helpers/filter.js +33 -0
  428. package/lib/tree/helpers/renderer.d.ts +2 -2
  429. package/lib/tree/helpers/renderer.js +4 -4
  430. package/lib/tree/helpers/types.d.ts +13 -1
  431. package/lib/tree/helpers/types.js +0 -1
  432. package/lib/tree/index.d.ts +4 -4
  433. package/lib/tree/index.js +3 -4
  434. package/lib/tree/managers/tree-manager.d.ts +22 -10
  435. package/lib/tree/managers/tree-manager.js +56 -41
  436. package/lib/tree/themes/halo/dark/index.js +1 -1
  437. package/lib/tree/themes/halo/light/index.js +1 -1
  438. package/lib/tree/themes/solar/charcoal/index.js +1 -1
  439. package/lib/tree/themes/solar/pearl/index.js +1 -1
  440. package/lib/tree-select/custom-elements.json +14 -5
  441. package/lib/tree-select/custom-elements.md +26 -0
  442. package/lib/tree-select/helpers/types.d.ts +2 -2
  443. package/lib/tree-select/helpers/types.js +0 -1
  444. package/lib/tree-select/index.d.ts +55 -27
  445. package/lib/tree-select/index.js +107 -45
  446. package/lib/tree-select/themes/halo/dark/index.js +3 -2
  447. package/lib/tree-select/themes/halo/light/index.js +3 -2
  448. package/lib/tree-select/themes/solar/charcoal/index.js +3 -2
  449. package/lib/tree-select/themes/solar/pearl/index.js +3 -2
  450. package/lib/version.d.ts +1 -0
  451. package/lib/version.js +1 -0
  452. package/package.json +601 -25
  453. package/lib/accordion/index.js.map +0 -1
  454. package/lib/appstate-bar/index.js.map +0 -1
  455. package/lib/autosuggest/helpers/const.d.ts +0 -2
  456. package/lib/autosuggest/helpers/const.js +0 -4
  457. package/lib/autosuggest/helpers/const.js.map +0 -1
  458. package/lib/autosuggest/helpers/types.js.map +0 -1
  459. package/lib/autosuggest/helpers/utils.js.map +0 -1
  460. package/lib/autosuggest/index.js.map +0 -1
  461. package/lib/button/index.js.map +0 -1
  462. package/lib/button-bar/index.js.map +0 -1
  463. package/lib/calendar/index.js.map +0 -1
  464. package/lib/calendar/locales.js.map +0 -1
  465. package/lib/calendar/types.js.map +0 -1
  466. package/lib/calendar/utils.js.map +0 -1
  467. package/lib/canvas/index.js.map +0 -1
  468. package/lib/card/helpers/types.js.map +0 -1
  469. package/lib/card/index.js.map +0 -1
  470. package/lib/chart/helpers/legend.js.map +0 -1
  471. package/lib/chart/helpers/types.js.map +0 -1
  472. package/lib/chart/index.js.map +0 -1
  473. package/lib/chart/plugins/doughnut-center-label.js.map +0 -1
  474. package/lib/checkbox/index.js.map +0 -1
  475. package/lib/clock/index.js.map +0 -1
  476. package/lib/clock/utils/TickManager.js.map +0 -1
  477. package/lib/clock/utils/timestamps.js.map +0 -1
  478. package/lib/collapse/index.js.map +0 -1
  479. package/lib/color-dialog/elements/color-palettes.js.map +0 -1
  480. package/lib/color-dialog/elements/grayscale-palettes.js.map +0 -1
  481. package/lib/color-dialog/elements/palettes.js.map +0 -1
  482. package/lib/color-dialog/helpers/color-helpers.js.map +0 -1
  483. package/lib/color-dialog/helpers/value-model.js.map +0 -1
  484. package/lib/color-dialog/index.js.map +0 -1
  485. package/lib/combo-box/helpers/filter.js.map +0 -1
  486. package/lib/combo-box/helpers/keyboard-event.js.map +0 -1
  487. package/lib/combo-box/helpers/types.js.map +0 -1
  488. package/lib/combo-box/index.js.map +0 -1
  489. package/lib/datetime-picker/index.js.map +0 -1
  490. package/lib/datetime-picker/locales.js.map +0 -1
  491. package/lib/datetime-picker/types.js.map +0 -1
  492. package/lib/datetime-picker/utils.js.map +0 -1
  493. package/lib/dialog/draggable-element.js.map +0 -1
  494. package/lib/dialog/index.js.map +0 -1
  495. package/lib/email-field/index.js.map +0 -1
  496. package/lib/flag/index.js.map +0 -1
  497. package/lib/flag/utils/FlagLoader.js.map +0 -1
  498. package/lib/header/index.js.map +0 -1
  499. package/lib/heatmap/helpers/color.js.map +0 -1
  500. package/lib/heatmap/helpers/text.js.map +0 -1
  501. package/lib/heatmap/helpers/track.js.map +0 -1
  502. package/lib/heatmap/helpers/types.js.map +0 -1
  503. package/lib/heatmap/index.js.map +0 -1
  504. package/lib/icon/index.js.map +0 -1
  505. package/lib/icon/utils/IconLoader.js.map +0 -1
  506. package/lib/index.js.map +0 -1
  507. package/lib/interactive-chart/helpers/types.js.map +0 -1
  508. package/lib/interactive-chart/index.js.map +0 -1
  509. package/lib/item/helpers/types.js.map +0 -1
  510. package/lib/item/index.js.map +0 -1
  511. package/lib/label/helpers/text.d.ts +0 -35
  512. package/lib/label/helpers/text.js +0 -57
  513. package/lib/label/helpers/text.js.map +0 -1
  514. package/lib/label/index.js.map +0 -1
  515. package/lib/layout/index.js.map +0 -1
  516. package/lib/led-gauge/index.js.map +0 -1
  517. package/lib/list/extensible-function.js.map +0 -1
  518. package/lib/list/helpers/list-renderer.js.map +0 -1
  519. package/lib/list/helpers/types.js.map +0 -1
  520. package/lib/list/index.js.map +0 -1
  521. package/lib/list/renderer.js.map +0 -1
  522. package/lib/loader/index.js.map +0 -1
  523. package/lib/multi-input/helpers/types.js.map +0 -1
  524. package/lib/multi-input/index.js.map +0 -1
  525. package/lib/notification/elements/notification-tray.js.map +0 -1
  526. package/lib/notification/elements/notification.js.map +0 -1
  527. package/lib/notification/helpers/status.js.map +0 -1
  528. package/lib/notification/helpers/types.js.map +0 -1
  529. package/lib/notification/index.js.map +0 -1
  530. package/lib/number-field/index.js.map +0 -1
  531. package/lib/overlay/elements/overlay-backdrop.js.map +0 -1
  532. package/lib/overlay/elements/overlay-viewport.js.map +0 -1
  533. package/lib/overlay/elements/overlay.js.map +0 -1
  534. package/lib/overlay/helpers/functions.js.map +0 -1
  535. package/lib/overlay/helpers/types.js.map +0 -1
  536. package/lib/overlay/index.js.map +0 -1
  537. package/lib/overlay/managers/backdrop-manager.js.map +0 -1
  538. package/lib/overlay/managers/close-manager.js.map +0 -1
  539. package/lib/overlay/managers/focus-manager.js.map +0 -1
  540. package/lib/overlay/managers/interaction-lock-manager.js.map +0 -1
  541. package/lib/overlay/managers/viewport-manager.js.map +0 -1
  542. package/lib/overlay/managers/zindex-manager.js.map +0 -1
  543. package/lib/overlay-menu/helpers/types.js.map +0 -1
  544. package/lib/overlay-menu/helpers/uuid.d.ts +0 -7
  545. package/lib/overlay-menu/helpers/uuid.js +0 -14
  546. package/lib/overlay-menu/helpers/uuid.js.map +0 -1
  547. package/lib/overlay-menu/index.js.map +0 -1
  548. package/lib/overlay-menu/managers/menu-manager.js.map +0 -1
  549. package/lib/pagination/helpers/types.d.ts +0 -9
  550. package/lib/pagination/helpers/types.js +0 -2
  551. package/lib/pagination/helpers/types.js.map +0 -1
  552. package/lib/pagination/index.js.map +0 -1
  553. package/lib/panel/index.js.map +0 -1
  554. package/lib/password-field/index.js.map +0 -1
  555. package/lib/pill/index.js.map +0 -1
  556. package/lib/progress-bar/index.js.map +0 -1
  557. package/lib/radio-button/index.js.map +0 -1
  558. package/lib/radio-button/radio-button-registry.js.map +0 -1
  559. package/lib/rating/index.js.map +0 -1
  560. package/lib/search-field/index.js.map +0 -1
  561. package/lib/select/helpers/types.js.map +0 -1
  562. package/lib/select/index.js.map +0 -1
  563. package/lib/sidebar-layout/index.js.map +0 -1
  564. package/lib/slider/index.js.map +0 -1
  565. package/lib/sparkline/index.js.map +0 -1
  566. package/lib/swing-gauge/helpers/canvas.d.ts +0 -8
  567. package/lib/swing-gauge/helpers/canvas.js +0 -115
  568. package/lib/swing-gauge/helpers/canvas.js.map +0 -1
  569. package/lib/swing-gauge/helpers/types.d.ts +0 -33
  570. package/lib/swing-gauge/helpers/types.js +0 -2
  571. package/lib/swing-gauge/helpers/types.js.map +0 -1
  572. package/lib/swing-gauge/index.js.map +0 -1
  573. package/lib/tab/index.js.map +0 -1
  574. package/lib/tab-bar/helpers/animate.js.map +0 -1
  575. package/lib/tab-bar/index.js.map +0 -1
  576. package/lib/text-field/index.js.map +0 -1
  577. package/lib/time-picker/index.js.map +0 -1
  578. package/lib/toggle/index.js.map +0 -1
  579. package/lib/tooltip/elements/title-tooltip.js.map +0 -1
  580. package/lib/tooltip/elements/tooltip-element.js.map +0 -1
  581. package/lib/tooltip/helpers/overflow-tooltip.js.map +0 -1
  582. package/lib/tooltip/helpers/renderer.js.map +0 -1
  583. package/lib/tooltip/helpers/types.js.map +0 -1
  584. package/lib/tooltip/index.js.map +0 -1
  585. package/lib/tooltip/managers/tooltip-manager.js.map +0 -1
  586. package/lib/tornado-chart/elements/tornado-chart.js.map +0 -1
  587. package/lib/tornado-chart/elements/tornado-item.js.map +0 -1
  588. package/lib/tornado-chart/index.js.map +0 -1
  589. package/lib/tree/elements/tree-item.js.map +0 -1
  590. package/lib/tree/elements/tree.js.map +0 -1
  591. package/lib/tree/helpers/renderer.js.map +0 -1
  592. package/lib/tree/helpers/types.js.map +0 -1
  593. package/lib/tree/index.js.map +0 -1
  594. package/lib/tree/managers/tree-manager.js.map +0 -1
  595. package/lib/tree-select/helpers/types.js.map +0 -1
  596. package/lib/tree-select/index.js.map +0 -1
package/lib/combo-box/themes/halo/light/index.js CHANGED
@@ -1,8 +1,7 @@
1
1
  import '@refinitiv-ui/elements/lib/overlay/themes/halo/light';
2
2
  import '@refinitiv-ui/elements/lib/list/themes/halo/light';
3
- import '@refinitiv-ui/elements/lib/pill/themes/halo/light';
4
- import '@refinitiv-ui/elements/lib/text-field/themes/halo/light';
3
+ import '@refinitiv-ui/elements/lib/counter/themes/halo/light';
5
4
  import '@refinitiv-ui/elements/lib/item/themes/halo/light';
6
5
  import '@refinitiv-ui/elements/lib/icon/themes/halo/light';
7
6
 
8
- elf.customStyles.define('ef-combo-box', ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:12rem;font-weight:400;height:24px;width:152px;max-width:100%;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;border-radius:0;background-color:#fff;text-overflow:ellipsis;border:1px solid #595959;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;color:#404040;cursor:pointer;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;padding:0}:host([type=number]){padding-right:0}:host([warning]){border:1px solid #cca000}:host([warning][disabled]){color:rgba(64,64,64,.5);border:1px solid rgba(204,160,0,.5)}:host([error]),:host([error][warning]){border:1px solid #d94255}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(64,64,64,.5);border:1px solid rgba(182,50,67,.5)}:host ::-ms-clear{display:none}:host(:not([readonly])[focused]),:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=input]{color:inherit;margin:0;flex:1 1 auto;min-width:0;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis;touch-action:manipulation;width:100%;padding:0 8px}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:invalid{box-shadow:none}:host([readonly]){cursor:default}:host [part=placeholder]{opacity:.5;opacity:.7}:host [part=label],:host [part=placeholder]{margin-right:3px}:host [part~=icon]{color:#404040;opacity:.7}:host(:not([readonly]):hover) [part~=icon],:host(:not([readonly])[focused]) [part~=icon]{opacity:1}:host(:not([readonly])[focused]) [part~=icon]{color:#334bff}:host([disabled]) [part~=icon]{color:rgba(89,89,89,.5)}:host [part=input-wrapper]{touch-action:manipulation;display:flex;align-items:center;width:100%;height:100%}:host [part~=button]{display:flex;justify-content:center;align-items:center;flex:none;height:100%;width:24px}:host [part=list]{max-width:var(--list-max-width,300px);max-height:var(--list-max-height);display:flex;flex-flow:column nowrap;color:#404040;max-width:var(--list-max-width,300px);max-height:var(--list-max-height);border:1px solid #334bff;margin:2px 0;background-color:#f2f2f2}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){:host [part=list] ::slotted(ef-list){max-height:inherit}}:host [part=selection-badge]{min-width:21px;flex-shrink:0;height:17px;min-width:20px}:host ::-moz-selection{color:#fff;background-color:#334bff}:host ::selection{color:#fff;background-color:#334bff}:host [part=icon]{min-width:1em;padding-left:2px;color:#595959}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover){border-color:#0d0d0d;color:#0d0d0d}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover) [part=icon]{color:#334bff}:host([warning]:hover:not([readonly]):not([focused])){color:#0d0d0d;border-color:#ffe999}:host([warning][disabled]),:host([warning][readonly]:not([focused])){border-color:rgba(255,233,153,.5)}:host([error]:hover:not([readonly]):not([focused])){color:#0d0d0d;border-color:#eeacb4}:host([error][disabled]),:host([error][readonly]:not([focused])),:host([error][warning][disabled]){border-color:rgba(238,172,180,.5)}:host([disabled]){border:1px solid rgba(89,89,89,.5);color:rgba(64,64,64,.5);background-color:rgba(255,255,255,.5)}:host([readonly]:not([focused])){border-color:rgba(89,89,89,.5);background-color:rgba(255,255,255,.5)}:host([readonly]:not([focused])) [part=icon]{color:rgba(64,64,64,.5)}:host(:not([readonly])[focused]),:host([focused]),:host([focused][error][warning]){border-color:#334bff;color:#0d0d0d}:host([focused]) [part=icon],:host([focused][error][warning]) [part=icon]{color:#334bff}:host([disabled]) [part=icon]{color:rgba(89,89,89,.5)}:host [part=list] ::slotted(ef-item:not(:first-child):not([type=divider])),:host [part=list] ef-item:not(:first-child):not([type=divider]){box-shadow:0 -1px 0 #d9d9d9}:host [part=list] ::slotted(:not(ef-item)){display:none}::-webkit-scrollbar-corner{background:0 0}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#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}:host [part=input-wrapper]{border-left-color:inherit}:host [part~=button-toggle]{border-left:1px solid #595959;border-left-color:inherit}:host [part~=button-toggle]::before{content:\'\';display:block;position:absolute;top:-1px;right:-1px;bottom:-1px;width:24px;border:1px solid transparent}:host(:not([readonly])) [part~=button-clear]:hover{color:#334bff}:host(:not([readonly]):hover) [part~=button-toggle]{color:#334bff}:host(:not([readonly])[focused]) [part~=button-toggle]{border-left-color:#334bff;color:#334bff}:host(:not([readonly])) [part~=button-toggle]:hover{border-left-color:#334bff;color:#fff;background:#334bff}:host(:not([readonly])) [part~=button-toggle]:hover::after{content:\'\';display:block;position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border:1px solid #334bff;pointer-events:none}:host(:not([readonly])) [part~=button-toggle]:active{background:#0f1e8a}:host(:not([readonly])) [part~=button]:active{color:#fff}:host(:not([readonly])) [part~=icon]{color:inherit!important}:host([disabled]) [part~=button-toggle],:host([readonly]) [part~=button-toggle]{border-left-color:rgba(89,89,89,.5)}:host([readonly]) [part~=button-toggle]{color:rgba(64,64,64,.5);cursor:default}:host([focused][readonly]) [part~=button-toggle]{border-left-color:#334bff}:host [part=list] ::slotted(ef-list){display:block}');
7
+ elf.customStyles.define('ef-combo-box', ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:12rem;font-weight:400;height:24px;width:152px;max-width:100%;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;border-radius:0;background-color:#fff;text-overflow:ellipsis;border:1px solid #595959;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;color:#404040;cursor:pointer;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;padding:0}:host([disabled]){border:1px solid rgba(89,89,89,.5)}:host([type=number]){padding-right:0}:host([warning]){border:1px solid #cca000}:host([warning][disabled]){color:rgba(64,64,64,.5);border:1px solid rgba(204,160,0,.5)}:host([error]),:host([error][warning]){border:1px solid #b63243}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(64,64,64,.5);border:1px solid rgba(182,50,67,.5)}:host ::-ms-clear{display:none}:host(:not([readonly])[focused]),:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=input]{color:inherit;padding:0;margin:0;flex:1 1 auto;min-width:0;width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis;touch-action:manipulation}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:invalid{box-shadow:none}:host([disabled]) [part=input]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host([readonly]){cursor:default}:host [part=placeholder]{opacity:.5;opacity:.7}:host [part=label],:host [part=placeholder]{margin-right:3px}:host [part~=icon]{color:#404040;opacity:.7}:host(:not([readonly]):hover) [part~=icon],:host(:not([readonly])[focused]) [part~=icon]{opacity:1}:host(:not([readonly])[focused]) [part~=icon]{color:#334bff}:host([disabled]) [part~=icon]{color:rgba(89,89,89,.5)}:host [part=list]{max-width:var(--list-max-width,300px);max-height:var(--list-max-height)}:host [part~=input-wrapper]{touch-action:manipulation;display:flex;align-items:center;width:100%;height:100%}:host [part~=input]{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:12rem;font-weight:400;height:24px;max-width:100%;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#404040;border-radius:0;text-overflow:ellipsis;border:1px solid #595959;width:100%;background:0 0;border:none}:host [part~=input][disabled]{color:rgba(64,64,64,.5);border:1px solid rgba(89,89,89,.5)}:host [part~=input][type=number]{padding-right:0}:host [part~=input][warning]{border:1px solid #cca000}:host [part~=input][warning][disabled]{color:rgba(64,64,64,.5);border:1px solid rgba(204,160,0,.5)}:host [part~=input][error],:host [part~=input][error][warning]{border:1px solid #b63243}:host [part~=input][error][disabled],:host [part~=input][error][warning][disabled]{color:rgba(64,64,64,.5);border:1px solid rgba(182,50,67,.5)}:host [part~=input] ::-ms-clear{display:none}:host [part~=button]{display:flex;justify-content:center;align-items:center;flex:none;height:100%;width:24px}:host [part~=list]{display:flex;flex-flow:column nowrap}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){:host [part~=list] ::slotted(ef-list){max-height:inherit}}:host [part=selection-badge]{flex-shrink:0}:host([disabled]) [part~=selection-badge]{opacity:.4}:host ::-moz-selection{color:#fff;background-color:#334bff}:host ::selection{color:#fff;background-color:#334bff}:host [part=icon]{min-width:1em;padding-left:2px;color:#595959}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover){border-color:#0d0d0d;color:#0d0d0d}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover) [part=icon]{color:#334bff}:host([warning]){border-color:#cca000}:host([error]),:host([error][warning]){border-color:#d94255}:host([warning]:hover:not([readonly]):not([focused])){color:#0d0d0d;border-color:#ffe999}:host([warning][disabled]),:host([warning][readonly]:not([focused])){border-color:rgba(255,233,153,.5)}:host([error]:hover:not([readonly]):not([focused])){color:#0d0d0d;border-color:#eeacb4}:host([error][disabled]),:host([error][readonly]:not([focused])),:host([error][warning][disabled]){border-color:rgba(238,172,180,.5)}:host([disabled]){color:rgba(64,64,64,.5);border-color:rgba(89,89,89,.5);background-color:rgba(255,255,255,.5)}:host([readonly]:not([focused])){border-color:rgba(89,89,89,.5);background-color:rgba(255,255,255,.5)}:host([readonly]:not([focused])) [part=icon]{color:rgba(64,64,64,.5)}:host(:not([readonly])[focused]),:host([focused]),:host([focused][error][warning]){border-color:#334bff;color:#0d0d0d}:host([focused]) [part=icon],:host([focused][error][warning]) [part=icon]{color:#334bff}:host([disabled]) [part=icon]{color:rgba(89,89,89,.5)}:host [part=list]{color:#404040;max-width:var(--list-max-width,300px);max-height:var(--list-max-height);border:1px solid #334bff;margin:2px 0;background-color:#f2f2f2}:host [part=list] ::slotted(ef-item:not(:first-child):not([type=divider])),:host [part=list] ef-item:not(:first-child):not([type=divider]){box-shadow:0 -1px 0 #d9d9d9}:host [part=list] ::slotted(:not(ef-item)){display:none}::-webkit-scrollbar-corner{background:0 0}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#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}:host [part~=input-wrapper]{border-left-color:inherit}:host [part~=input]{padding:0 8px}:host [part~=button-toggle]{border-left:1px solid #595959;border-left-color:inherit}:host [part~=button-toggle]::before{content:\'\';display:block;position:absolute;top:-1px;right:-1px;bottom:-1px;width:24px;border:1px solid transparent}:host(:not([readonly])) [part~=button-clear]:hover{color:#334bff}:host(:not([readonly]):hover) [part~=button-toggle]{color:#334bff}:host(:not([readonly])[focused]) [part~=button-toggle]{border-left-color:#334bff;color:#334bff}:host(:not([readonly])) [part~=button-toggle]:hover{border-left-color:#334bff;color:#fff;background:#334bff}:host(:not([readonly])) [part~=button-toggle]:hover::after{content:\'\';display:block;position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border:1px solid #334bff;pointer-events:none}:host(:not([readonly])) [part~=button-toggle]:active{background:#0f1e8a}:host(:not([readonly])) [part~=button]:active{color:#fff}:host(:not([readonly])) [part~=icon]{color:inherit!important}:host([disabled]) [part~=button-toggle],:host([readonly]) [part~=button-toggle]{border-left-color:rgba(89,89,89,.5)}:host([readonly]) [part~=button-toggle]{color:rgba(64,64,64,.5);cursor:default}:host([focused][readonly]) [part~=button-toggle]{border-left-color:#334bff}:host [part=list] ::slotted(ef-list){display:block}');
package/lib/combo-box/themes/solar/charcoal/index.js CHANGED
@@ -1,8 +1,7 @@
1
1
  import '@refinitiv-ui/elements/lib/overlay/themes/solar/charcoal';
2
2
  import '@refinitiv-ui/elements/lib/list/themes/solar/charcoal';
3
- import '@refinitiv-ui/elements/lib/pill/themes/solar/charcoal';
4
- import '@refinitiv-ui/elements/lib/text-field/themes/solar/charcoal';
3
+ import '@refinitiv-ui/elements/lib/counter/themes/solar/charcoal';
5
4
  import '@refinitiv-ui/elements/lib/item/themes/solar/charcoal';
6
5
  import '@refinitiv-ui/elements/lib/icon/themes/solar/charcoal';
7
6
 
8
- elf.customStyles.define('ef-combo-box', ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:13rem;font-weight:400;height:23px;width:140px;max-width:100%;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#c2c2c2;border-radius:0;background-color:#000;text-overflow:ellipsis;border:1px solid #4a4a52;cursor:pointer;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;padding:0;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;--panel-background-color:#3C3C42}:host([disabled]){color:rgba(194,194,194,.6);border:1px solid rgba(74,74,82,.6)}:host([warning]){border:1px solid #f93}:host([warning][disabled]){color:rgba(194,194,194,.6);border:1px solid rgba(255,153,51,.6)}:host([error]),:host([error][warning]){border:1px solid #f5475b}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(194,194,194,.6);border:1px solid rgba(245,71,91,.6)}:host(:not([readonly])[focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#f93}:host([readonly]){cursor:default}:host [part=placeholder]{opacity:.5}:host [part=label],:host [part=placeholder]{margin-right:3px}:host [part~=icon]{color:#c2c2c2;opacity:.7}:host(:not([readonly]):hover) [part~=icon],:host(:not([readonly])[focused]) [part~=icon]{opacity:1}:host(:not([readonly])[focused]) [part~=icon]{color:#f93}:host([disabled]) [part~=icon]{color:rgba(74,74,82,.6)}:host [part=input-wrapper]{touch-action:manipulation;display:flex;align-items:center;width:100%;height:100%}:host [part=input]{width:100%}:host [part~=button]{height:28px;display:flex;justify-content:center;align-items:center;flex:none}:host [part=list]{max-width:var(--list-max-width,300px);max-height:var(--list-max-height);display:flex;flex-flow:column nowrap}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){:host [part=list] ::slotted(ef-list){max-height:inherit}}:host [part=selection-badge]{min-width:22px;flex-shrink:0}::-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}:host [part~=button-toggle]{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0;background-color:#3c3c42;color:#c2c2c2;border:1px solid #000;height:23px;box-shadow:0 0 0 0 rgba(0,0,0,.6);outline:0;font-family:inherit;font-size:13rem;font-weight:400;min-width:23px;margin:1px 1px 1px 0;transition:70ms;text-align:center;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-flex;justify-content:center;align-items:center;vertical-align:bottom;position:relative;overflow:hidden;background-image:linear-gradient(rgba(255,255,255,.1) 10%,rgba(255,255,255,0) 100%);min-width:0;min-height:0;padding:0}@media (-ms-high-contrast:none),(pointer:fine){:host [part~=button-toggle]:focus:not([focused]),:host [part~=button-toggle][focused=visible]{background-color:#3c3c42;color:#c2c2c2;box-shadow:inset 0 0 0 1px #000;border-color:#f93;outline:0}:host [part~=button-toggle]:hover{background-color:#4d4d55;color:#e2e2e2;box-shadow:0 0 0 0 rgba(0,0,0,.9)}:host [part~=button-toggle]:hover:not(:focus){border-color:#000;outline:0}}@media all{:host [part~=button-toggle]:active{background-color:#38383d;color:#c2c2c2;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host [part~=button-toggle]:active:not(:focus){border-color:#000;outline:0}:host [part~=button-toggle][disabled]{background-color:#3c3c42;color:#c2c2c2;border-color:#333;box-shadow:none;outline:0;pointer-events:none}}:host [part~=button-toggle][cta]{background-color:#f93;color:#0a0a0a;border-color:#000;box-shadow:0 0 0 0 rgba(0,0,0,.6);outline:0;background-image:linear-gradient(rgba(255,255,255,.1) 10%,rgba(255,255,255,0) 100%)}@media (-ms-high-contrast:none),(pointer:fine){:host [part~=button-toggle][cta]:focus:not([focused]),:host [part~=button-toggle][cta][focused=visible]{background-color:#f93;color:#c2c2c2;box-shadow:inset 0 0 0 1px #000;border-color:#f93;outline:0}:host [part~=button-toggle][cta]:hover{background-color:#ffab57;color:#e2e2e2;box-shadow:0 0 0 0 rgba(0,0,0,.9)}:host [part~=button-toggle][cta]:hover:not(:focus){border-color:#000;outline:0}}@media all{:host [part~=button-toggle][cta]:active{background-color:#ed8e2f;color:#0a0a0a;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host [part~=button-toggle][cta]:active:not(:focus){border-color:#000;outline:0}:host [part~=button-toggle][cta][disabled]{background-color:#f93;color:#0a0a0a;border-color:#333;box-shadow:none;outline:0;pointer-events:none}}:host [part~=button-toggle][toggles]{background-color:#3c3c42;color:#c2c2c2;border-color:#000;box-shadow:0 0 0 0 rgba(0,0,0,.6);outline:0}@media (-ms-high-contrast:none),(pointer:fine){:host [part~=button-toggle][toggles]:focus:not([focused]),:host [part~=button-toggle][toggles][focused=visible]{background-color:#3c3c42;color:#c2c2c2;box-shadow:inset 0 0 0 1px #000;border-color:#f93;outline:0}:host [part~=button-toggle][toggles]:hover{background-color:#4d4d55;color:#e2e2e2;box-shadow:0 0 0 0 rgba(0,0,0,.9)}:host [part~=button-toggle][toggles]:hover:not(:focus){border-color:#000;outline:0}}@media all{:host [part~=button-toggle][toggles]:active{background-color:#38383d;color:#c2c2c2;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host [part~=button-toggle][toggles]:active:not(:focus){border-color:#000;outline:0}:host [part~=button-toggle][toggles][disabled]{background-color:#3c3c42;color:#c2c2c2;border-color:#333;box-shadow:none;outline:0;pointer-events:none}}:host [part~=button-toggle][toggles][active]{border-color:#000;box-shadow:0 0 0 0 rgba(0,0,0,.6);outline:0}@media (-ms-high-contrast:none),(pointer:fine){:host [part~=button-toggle][toggles][active]:focus:not([focused]),:host [part~=button-toggle][toggles][active][focused=visible]{background-color:#38383d;color:#c2c2c2;box-shadow:inset 0 0 0 1px #000;border-color:#f93;outline:0}:host [part~=button-toggle][toggles][active]:hover{background-color:#494950;color:#e2e2e2;box-shadow:0 0 0 0 rgba(0,0,0,.9)}:host [part~=button-toggle][toggles][active]:hover:not(:focus){border-color:#000;outline:0}}@media all{:host [part~=button-toggle][toggles][active]:active{background-color:#343439;color:#f93;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host [part~=button-toggle][toggles][active]:active:not(:focus){border-color:#000;outline:0}:host [part~=button-toggle][toggles][active][disabled]{background-color:#38383d;color:#f93;border-color:#333;box-shadow:none;outline:0;pointer-events:none}}@media (-ms-high-contrast:none),(pointer:fine){:host [part~=button-toggle][cta]:hover{color:#0a0a0a}:host [part~=button-toggle][cta]:focus:not([focused]),:host [part~=button-toggle][cta][focused=visible]{border-color:#000;box-shadow:inset 0 0 0 1px #000;color:#0a0a0a}:host [part~=button-toggle]:focus:not([focused]),:host [part~=button-toggle][focused=visible]{border-style:dotted;box-shadow:inset 0 0 0 1px #000}}:host [part~=button-toggle][cta]:active{background-color:#f93;background-image:linear-gradient(rgba(255,255,255,.1) 10%,rgba(255,255,255,0) 100%)}:host [part~=button-toggle][cta][disabled]{opacity:.4}:host [part~=button-toggle][disabled]{opacity:.4}:host [part~=button-toggle][toggles][active]{color:#f93!important;background-color:#38383d!important;background-image:linear-gradient(rgba(255,255,255,0) 0,rgba(255,255,255,.1) 90%)}:host [part~=button-toggle]:active{background-image:linear-gradient(rgba(255,255,255,.1) 10%,rgba(255,255,255,0) 100%)}:host [part~=button]{height:calc(100% - 2px);width:19px}:host [part=selection-badge]{height:17px;min-width:17px;margin-top:0}');
7
+ elf.customStyles.define('ef-combo-box', ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:13rem;font-weight:400;height:23px;width:140px;max-width:100%;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#c2c2c2;border-radius:0;background-color:#000;text-overflow:ellipsis;border:1px solid #4a4a52;cursor:pointer;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;padding:0;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;--panel-background-color:#3C3C42}:host([disabled]){color:rgba(194,194,194,.6);border:1px solid rgba(74,74,82,.6)}:host([warning]){border:1px solid #f93}:host([warning][disabled]){color:rgba(194,194,194,.6);border:1px solid rgba(255,153,51,.6)}:host([error]),:host([error][warning]){border:1px solid #f5475b}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(194,194,194,.6);border:1px solid rgba(245,71,91,.6)}:host(:not([readonly])[focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#f93}:host([readonly]){cursor:default}:host [part=placeholder]{opacity:.5}:host [part=label],:host [part=placeholder]{margin-right:3px}:host [part~=icon]{color:#c2c2c2;opacity:.7}:host(:not([readonly]):hover) [part~=icon],:host(:not([readonly])[focused]) [part~=icon]{opacity:1}:host(:not([readonly])[focused]) [part~=icon]{color:#f93}:host [part=list]{max-width:var(--list-max-width,300px);max-height:var(--list-max-height)}:host [part~=input-wrapper]{touch-action:manipulation;display:flex;align-items:center;width:100%;height:100%}:host [part~=input]{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:13rem;font-weight:400;height:23px;max-width:100%;padding:0 5px;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#c2c2c2;border-radius:0;text-overflow:ellipsis;border:1px solid #4a4a52;width:100%;background:0 0;border:none}:host [part~=input][disabled]{color:rgba(194,194,194,.6);border:1px solid rgba(74,74,82,.6)}:host [part~=input][type=number]{padding-right:0}:host [part~=input][warning]{border:1px solid #f93}:host [part~=input][warning][disabled]{color:rgba(194,194,194,.6);border:1px solid rgba(255,153,51,.6)}:host [part~=input][error],:host [part~=input][error][warning]{border:1px solid #f5475b}:host [part~=input][error][disabled],:host [part~=input][error][warning][disabled]{color:rgba(194,194,194,.6);border:1px solid rgba(245,71,91,.6)}:host [part~=input] ::-ms-clear{display:none}:host [part~=button]{height:28px;display:flex;justify-content:center;align-items:center;flex:none}:host [part~=list]{display:flex;flex-flow:column nowrap}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){:host [part~=list] ::slotted(ef-list){max-height:inherit}}:host [part=selection-badge]{flex-shrink:0}:host([disabled]) [part~=selection-badge]{opacity:.4}::-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}:host [part~=button-toggle]{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0;background-color:#3c3c42;color:#c2c2c2;border:1px solid #000;height:23px;box-shadow:0 0 0 0 rgba(0,0,0,.6);outline:0;font-family:inherit;font-size:13rem;font-weight:400;min-width:23px;margin:1px 1px 1px 0;transition:70ms;text-align:center;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-flex;justify-content:center;align-items:center;vertical-align:bottom;position:relative;overflow:hidden;background-image:linear-gradient(rgba(255,255,255,.1) 10%,rgba(255,255,255,0) 100%);min-width:0;min-height:0;padding:0}@media (-ms-high-contrast:none),(pointer:fine){:host [part~=button-toggle]:focus:not([focused]),:host [part~=button-toggle][focused=visible]{background-color:#3c3c42;color:#c2c2c2;box-shadow:inset 0 0 0 1px #000;border-color:#f93;outline:0}:host [part~=button-toggle]:hover{background-color:#4d4d55;color:#e2e2e2;box-shadow:0 0 0 0 rgba(0,0,0,.9)}:host [part~=button-toggle]:hover:not(:focus){border-color:#000;outline:0}}@media all{:host [part~=button-toggle]:active{background-color:#38383d;color:#c2c2c2;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host [part~=button-toggle]:active:not(:focus){border-color:#000;outline:0}:host [part~=button-toggle][disabled]{background-color:#3c3c42;color:#c2c2c2;border-color:#333;box-shadow:none;outline:0;pointer-events:none}}:host [part~=button-toggle][cta]{background-color:#f93;color:#0a0a0a;border-color:#000;box-shadow:0 0 0 0 rgba(0,0,0,.6);outline:0;background-image:linear-gradient(rgba(255,255,255,.1) 10%,rgba(255,255,255,0) 100%)}@media (-ms-high-contrast:none),(pointer:fine){:host [part~=button-toggle][cta]:focus:not([focused]),:host [part~=button-toggle][cta][focused=visible]{background-color:#f93;color:#c2c2c2;box-shadow:inset 0 0 0 1px #000;border-color:#f93;outline:0}:host [part~=button-toggle][cta]:hover{background-color:#ffab57;color:#e2e2e2;box-shadow:0 0 0 0 rgba(0,0,0,.9)}:host [part~=button-toggle][cta]:hover:not(:focus){border-color:#000;outline:0}}@media all{:host [part~=button-toggle][cta]:active{background-color:#ed8e2f;color:#0a0a0a;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host [part~=button-toggle][cta]:active:not(:focus){border-color:#000;outline:0}:host [part~=button-toggle][cta][disabled]{background-color:#f93;color:#0a0a0a;border-color:#333;box-shadow:none;outline:0;pointer-events:none}}:host [part~=button-toggle][toggles]{background-color:#3c3c42;color:#c2c2c2;border-color:#000;box-shadow:0 0 0 0 rgba(0,0,0,.6);outline:0}@media (-ms-high-contrast:none),(pointer:fine){:host [part~=button-toggle][toggles]:focus:not([focused]),:host [part~=button-toggle][toggles][focused=visible]{background-color:#3c3c42;color:#c2c2c2;box-shadow:inset 0 0 0 1px #000;border-color:#f93;outline:0}:host [part~=button-toggle][toggles]:hover{background-color:#4d4d55;color:#e2e2e2;box-shadow:0 0 0 0 rgba(0,0,0,.9)}:host [part~=button-toggle][toggles]:hover:not(:focus){border-color:#000;outline:0}}@media all{:host [part~=button-toggle][toggles]:active{background-color:#38383d;color:#c2c2c2;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host [part~=button-toggle][toggles]:active:not(:focus){border-color:#000;outline:0}:host [part~=button-toggle][toggles][disabled]{background-color:#3c3c42;color:#c2c2c2;border-color:#333;box-shadow:none;outline:0;pointer-events:none}}:host [part~=button-toggle][toggles][active]{border-color:#000;box-shadow:0 0 0 0 rgba(0,0,0,.6);outline:0}@media (-ms-high-contrast:none),(pointer:fine){:host [part~=button-toggle][toggles][active]:focus:not([focused]),:host [part~=button-toggle][toggles][active][focused=visible]{background-color:#38383d;color:#c2c2c2;box-shadow:inset 0 0 0 1px #000;border-color:#f93;outline:0}:host [part~=button-toggle][toggles][active]:hover{background-color:#494950;color:#e2e2e2;box-shadow:0 0 0 0 rgba(0,0,0,.9)}:host [part~=button-toggle][toggles][active]:hover:not(:focus){border-color:#000;outline:0}}@media all{:host [part~=button-toggle][toggles][active]:active{background-color:#343439;color:#f93;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host [part~=button-toggle][toggles][active]:active:not(:focus){border-color:#000;outline:0}:host [part~=button-toggle][toggles][active][disabled]{background-color:#38383d;color:#f93;border-color:#333;box-shadow:none;outline:0;pointer-events:none}}@media (-ms-high-contrast:none),(pointer:fine){:host [part~=button-toggle][cta]:hover{color:#0a0a0a}:host [part~=button-toggle][cta]:focus:not([focused]),:host [part~=button-toggle][cta][focused=visible]{border-color:#000;box-shadow:inset 0 0 0 1px #000;color:#0a0a0a}:host [part~=button-toggle]:focus:not([focused]),:host [part~=button-toggle][focused=visible]{border-style:dotted;box-shadow:inset 0 0 0 1px #000}}:host [part~=button-toggle][cta]:active{background-color:#f93;background-image:linear-gradient(rgba(0,0,0,.3) 0,rgba(0,0,0,0) 100%)}:host [part~=button-toggle][cta][disabled]{opacity:.4}:host [part~=button-toggle][disabled]{opacity:.4}:host [part~=button-toggle][toggles][active]{color:#f93!important;background-color:#38383d!important;background-image:linear-gradient(rgba(255,255,255,0) 0,rgba(255,255,255,.1) 90%)}:host [part~=button-toggle]:active{background-image:linear-gradient(rgba(255,255,255,.1) 10%,rgba(255,255,255,0) 100%)}:host [part~=button]{height:calc(100% - 2px);width:19px}:host [part~=selection-badge]{height:17px;min-width:17px;margin-top:0}:host([disabled]) [part~=icon]{opacity:.4;color:#c2c2c2}');
package/lib/combo-box/themes/solar/pearl/index.js CHANGED
@@ -1,8 +1,7 @@
1
1
  import '@refinitiv-ui/elements/lib/overlay/themes/solar/pearl';
2
2
  import '@refinitiv-ui/elements/lib/list/themes/solar/pearl';
3
- import '@refinitiv-ui/elements/lib/pill/themes/solar/pearl';
4
- import '@refinitiv-ui/elements/lib/text-field/themes/solar/pearl';
3
+ import '@refinitiv-ui/elements/lib/counter/themes/solar/pearl';
5
4
  import '@refinitiv-ui/elements/lib/item/themes/solar/pearl';
6
5
  import '@refinitiv-ui/elements/lib/icon/themes/solar/pearl';
7
6
 
8
- elf.customStyles.define('ef-combo-box', ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:13rem;font-weight:400;height:23px;width:140px;max-width:100%;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#484848;border-radius:0;background-color:#fff;text-overflow:ellipsis;border:1px solid #a9afba;cursor:pointer;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;padding:0;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;--panel-background-color:#FAFBFC}:host([disabled]){color:rgba(72,72,72,.6);border:1px solid rgba(169,175,186,.6)}:host([warning]){border:1px solid #f93}:host([warning][disabled]){color:rgba(72,72,72,.6);border:1px solid rgba(255,153,51,.6)}:host([error]),:host([error][warning]){border:1px solid #d94255}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(72,72,72,.6);border:1px solid rgba(217,66,85,.6)}:host(:not([readonly])[focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#ffb266}:host([readonly]){cursor:default}:host [part=placeholder]{opacity:.5}:host [part=label],:host [part=placeholder]{margin-right:3px}:host [part~=icon]{color:#484848;opacity:.7}:host(:not([readonly]):hover) [part~=icon],:host(:not([readonly])[focused]) [part~=icon]{opacity:1}:host(:not([readonly])[focused]) [part~=icon]{color:#f93}:host([disabled]) [part~=icon]{color:rgba(169,175,186,.6)}:host [part=input-wrapper]{touch-action:manipulation;display:flex;align-items:center;width:100%;height:100%}:host [part=input]{width:100%}:host [part~=button]{height:28px;display:flex;justify-content:center;align-items:center;flex:none}:host [part=list]{max-width:var(--list-max-width,300px);max-height:var(--list-max-height);display:flex;flex-flow:column nowrap}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){:host [part=list] ::slotted(ef-list){max-height:inherit}}:host [part=selection-badge]{min-width:22px;flex-shrink:0}::-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}:host [part~=button-toggle]{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0;background-color:#fafbfc;color:#505050;border:1px solid #a9afba;height:23px;box-shadow:0 0 0 0 rgba(0,0,0,.3);outline:0;font-family:inherit;font-size:13rem;font-weight:400;min-width:23px;margin:1px 1px 1px 0;transition:70ms;text-align:center;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-flex;justify-content:center;align-items:center;vertical-align:bottom;position:relative;overflow:hidden;background-image:linear-gradient(rgba(0,0,0,0) 0,rgba(0,0,0,.1) 100%);min-width:0;min-height:0;padding:0}@media (-ms-high-contrast:none),(pointer:fine){:host [part~=button-toggle]:focus:not([focused]),:host [part~=button-toggle][focused=visible]{background-color:#fafbfc;color:#505050;box-shadow:inset 0 0 0 1px #a9afba;border-color:#ee7600;outline:0}:host [part~=button-toggle]:hover{background-color:#fff;color:#1d1d1d;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host [part~=button-toggle]:hover:not(:focus){border-color:#a9afba;outline:0}}@media all{:host [part~=button-toggle]:active{background-color:#fff;color:#1d1d1d;box-shadow:0 0 0 0 rgba(0,0,0,.3)}:host [part~=button-toggle]:active:not(:focus){border-color:#a9afba;outline:0}:host [part~=button-toggle][disabled]{background-color:#fafbfc;color:#505050;border-color:#babfc8;box-shadow:none;outline:0;pointer-events:none}}:host [part~=button-toggle][cta]{background-color:#ffb266;color:#505050;border-color:#a9afba;box-shadow:0 0 0 0 rgba(0,0,0,.3);outline:0;background-image:linear-gradient(rgba(255,255,255,.4) 0,rgba(255,255,255,0) 100%)}@media (-ms-high-contrast:none),(pointer:fine){:host [part~=button-toggle][cta]:focus:not([focused]),:host [part~=button-toggle][cta][focused=visible]{background-color:#ffb266;color:#505050;box-shadow:inset 0 0 0 1px #a9afba;border-color:#ee7600;outline:0}:host [part~=button-toggle][cta]:hover{background-color:#ffc48a;color:#1d1d1d;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host [part~=button-toggle][cta]:hover:not(:focus){border-color:#a9afba;outline:0}}@media all{:host [part~=button-toggle][cta]:active{background-color:#fff;color:#1d1d1d;box-shadow:0 0 0 0 rgba(0,0,0,.3)}:host [part~=button-toggle][cta]:active:not(:focus){border-color:#a9afba;outline:0}:host [part~=button-toggle][cta][disabled]{background-color:#ffb266;color:#505050;border-color:#babfc8;box-shadow:none;outline:0;pointer-events:none}}:host [part~=button-toggle][toggles]{background-color:#fafbfc;color:#505050;border-color:#a9afba;box-shadow:0 0 0 0 rgba(0,0,0,.3);outline:0}@media (-ms-high-contrast:none),(pointer:fine){:host [part~=button-toggle][toggles]:focus:not([focused]),:host [part~=button-toggle][toggles][focused=visible]{background-color:#fafbfc;color:#505050;box-shadow:inset 0 0 0 1px #a9afba;border-color:#ee7600;outline:0}:host [part~=button-toggle][toggles]:hover{background-color:#fff;color:#1d1d1d;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host [part~=button-toggle][toggles]:hover:not(:focus){border-color:#a9afba;outline:0}}@media all{:host [part~=button-toggle][toggles]:active{background-color:#fff;color:#1d1d1d;box-shadow:0 0 0 0 rgba(0,0,0,.3)}:host [part~=button-toggle][toggles]:active:not(:focus){border-color:#a9afba;outline:0}:host [part~=button-toggle][toggles][disabled]{background-color:#fafbfc;color:#505050;border-color:#babfc8;box-shadow:none;outline:0;pointer-events:none}}:host [part~=button-toggle][toggles][active]{border-color:#a9afba;box-shadow:0 0 0 0 rgba(0,0,0,.3);outline:0}@media (-ms-high-contrast:none),(pointer:fine){:host [part~=button-toggle][toggles][active]:focus:not([focused]),:host [part~=button-toggle][toggles][active][focused=visible]{background-color:#fff;color:#f93;box-shadow:inset 0 0 0 1px #a9afba;border-color:#ee7600;outline:0}:host [part~=button-toggle][toggles][active]:hover{background-color:#fff;color:#c60;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host [part~=button-toggle][toggles][active]:hover:not(:focus){border-color:#a9afba;outline:0}}@media all{:host [part~=button-toggle][toggles][active]:active{background-color:#fff;color:#c60;box-shadow:0 0 0 0 rgba(0,0,0,.3)}:host [part~=button-toggle][toggles][active]:active:not(:focus){border-color:#a9afba;outline:0}:host [part~=button-toggle][toggles][active][disabled]{background-color:#fff;color:#f93;border-color:#babfc8;box-shadow:none;outline:0;pointer-events:none}}@media (-ms-high-contrast:none),(pointer:fine){:host [part~=button-toggle][cta]:hover{color:#505050}:host [part~=button-toggle][cta]:focus:not([focused]),:host [part~=button-toggle][cta][focused=visible]{border-color:#a9afba;box-shadow:inset 0 0 0 1px #a9afba;color:#505050}:host [part~=button-toggle]:focus:not([focused]),:host [part~=button-toggle][focused=visible]{border-style:dotted;box-shadow:inset 0 0 0 1px #a9afba}}:host [part~=button-toggle][cta]:active{background-color:#ffb266;background-image:linear-gradient(rgba(255,255,255,0) 0,rgba(255,255,255,.4) 100%)}:host [part~=button-toggle][cta][disabled]{opacity:.4}:host [part~=button-toggle][disabled]{opacity:.4}:host [part~=button-toggle][toggles][active]{color:#f93!important;background-color:#fff!important;background-image:linear-gradient(rgba(0,0,0,.1) 0,rgba(0,0,0,0) 100%)}:host [part~=button-toggle]:active{background-image:none}:host [part~=button]{height:calc(100% - 2px);width:19px}:host [part=selection-badge]{height:17px;min-width:17px;margin-top:0}');
7
+ elf.customStyles.define('ef-combo-box', ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:13rem;font-weight:400;height:23px;width:140px;max-width:100%;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#484848;border-radius:0;background-color:#fff;text-overflow:ellipsis;border:1px solid #a9afba;cursor:pointer;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;padding:0;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;--panel-background-color:#FAFBFC}:host([disabled]){color:rgba(72,72,72,.6);border:1px solid rgba(169,175,186,.6)}:host([warning]){border:1px solid #f93}:host([warning][disabled]){color:rgba(72,72,72,.6);border:1px solid rgba(255,153,51,.6)}:host([error]),:host([error][warning]){border:1px solid #d94255}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(72,72,72,.6);border:1px solid rgba(217,66,85,.6)}:host(:not([readonly])[focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#ffb266}:host([readonly]){cursor:default}:host [part=placeholder]{opacity:.5}:host [part=label],:host [part=placeholder]{margin-right:3px}:host [part~=icon]{color:#484848;opacity:.7}:host(:not([readonly]):hover) [part~=icon],:host(:not([readonly])[focused]) [part~=icon]{opacity:1}:host(:not([readonly])[focused]) [part~=icon]{color:#f93}:host [part=list]{max-width:var(--list-max-width,300px);max-height:var(--list-max-height)}:host [part~=input-wrapper]{touch-action:manipulation;display:flex;align-items:center;width:100%;height:100%}:host [part~=input]{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:13rem;font-weight:400;height:23px;max-width:100%;padding:0 5px;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#484848;border-radius:0;text-overflow:ellipsis;border:1px solid #a9afba;width:100%;background:0 0;border:none}:host [part~=input][disabled]{color:rgba(72,72,72,.6);border:1px solid rgba(169,175,186,.6)}:host [part~=input][type=number]{padding-right:0}:host [part~=input][warning]{border:1px solid #f93}:host [part~=input][warning][disabled]{color:rgba(72,72,72,.6);border:1px solid rgba(255,153,51,.6)}:host [part~=input][error],:host [part~=input][error][warning]{border:1px solid #d94255}:host [part~=input][error][disabled],:host [part~=input][error][warning][disabled]{color:rgba(72,72,72,.6);border:1px solid rgba(217,66,85,.6)}:host [part~=input] ::-ms-clear{display:none}:host [part~=button]{height:28px;display:flex;justify-content:center;align-items:center;flex:none}:host [part~=list]{display:flex;flex-flow:column nowrap}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){:host [part~=list] ::slotted(ef-list){max-height:inherit}}:host [part=selection-badge]{flex-shrink:0}:host([disabled]) [part~=selection-badge]{opacity:.4}::-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}:host [part~=button-toggle]{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0;background-color:#fafbfc;color:#505050;border:1px solid #a9afba;height:23px;box-shadow:0 0 0 0 rgba(0,0,0,.3);outline:0;font-family:inherit;font-size:13rem;font-weight:400;min-width:23px;margin:1px 1px 1px 0;transition:70ms;text-align:center;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-flex;justify-content:center;align-items:center;vertical-align:bottom;position:relative;overflow:hidden;background-image:linear-gradient(rgba(0,0,0,0) 0,rgba(0,0,0,.1) 100%);min-width:0;min-height:0;padding:0}@media (-ms-high-contrast:none),(pointer:fine){:host [part~=button-toggle]:focus:not([focused]),:host [part~=button-toggle][focused=visible]{background-color:#fafbfc;color:#505050;box-shadow:inset 0 0 0 1px #a9afba;border-color:#ee7600;outline:0}:host [part~=button-toggle]:hover{background-color:#fff;color:#1d1d1d;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host [part~=button-toggle]:hover:not(:focus){border-color:#a9afba;outline:0}}@media all{:host [part~=button-toggle]:active{background-color:#fff;color:#1d1d1d;box-shadow:0 0 0 0 rgba(0,0,0,.3)}:host [part~=button-toggle]:active:not(:focus){border-color:#a9afba;outline:0}:host [part~=button-toggle][disabled]{background-color:#fafbfc;color:#505050;border-color:#babfc8;box-shadow:none;outline:0;pointer-events:none}}:host [part~=button-toggle][cta]{background-color:#ffb266;color:#505050;border-color:#a9afba;box-shadow:0 0 0 0 rgba(0,0,0,.3);outline:0;background-image:linear-gradient(rgba(255,255,255,.4) 0,rgba(255,255,255,0) 100%)}@media (-ms-high-contrast:none),(pointer:fine){:host [part~=button-toggle][cta]:focus:not([focused]),:host [part~=button-toggle][cta][focused=visible]{background-color:#ffb266;color:#505050;box-shadow:inset 0 0 0 1px #a9afba;border-color:#ee7600;outline:0}:host [part~=button-toggle][cta]:hover{background-color:#ffc48a;color:#1d1d1d;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host [part~=button-toggle][cta]:hover:not(:focus){border-color:#a9afba;outline:0}}@media all{:host [part~=button-toggle][cta]:active{background-color:#fff;color:#1d1d1d;box-shadow:0 0 0 0 rgba(0,0,0,.3)}:host [part~=button-toggle][cta]:active:not(:focus){border-color:#a9afba;outline:0}:host [part~=button-toggle][cta][disabled]{background-color:#ffb266;color:#505050;border-color:#babfc8;box-shadow:none;outline:0;pointer-events:none}}:host [part~=button-toggle][toggles]{background-color:#fafbfc;color:#505050;border-color:#a9afba;box-shadow:0 0 0 0 rgba(0,0,0,.3);outline:0}@media (-ms-high-contrast:none),(pointer:fine){:host [part~=button-toggle][toggles]:focus:not([focused]),:host [part~=button-toggle][toggles][focused=visible]{background-color:#fafbfc;color:#505050;box-shadow:inset 0 0 0 1px #a9afba;border-color:#ee7600;outline:0}:host [part~=button-toggle][toggles]:hover{background-color:#fff;color:#1d1d1d;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host [part~=button-toggle][toggles]:hover:not(:focus){border-color:#a9afba;outline:0}}@media all{:host [part~=button-toggle][toggles]:active{background-color:#fff;color:#1d1d1d;box-shadow:0 0 0 0 rgba(0,0,0,.3)}:host [part~=button-toggle][toggles]:active:not(:focus){border-color:#a9afba;outline:0}:host [part~=button-toggle][toggles][disabled]{background-color:#fafbfc;color:#505050;border-color:#babfc8;box-shadow:none;outline:0;pointer-events:none}}:host [part~=button-toggle][toggles][active]{border-color:#a9afba;box-shadow:0 0 0 0 rgba(0,0,0,.3);outline:0}@media (-ms-high-contrast:none),(pointer:fine){:host [part~=button-toggle][toggles][active]:focus:not([focused]),:host [part~=button-toggle][toggles][active][focused=visible]{background-color:#fff;color:#f93;box-shadow:inset 0 0 0 1px #a9afba;border-color:#ee7600;outline:0}:host [part~=button-toggle][toggles][active]:hover{background-color:#fff;color:#c60;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host [part~=button-toggle][toggles][active]:hover:not(:focus){border-color:#a9afba;outline:0}}@media all{:host [part~=button-toggle][toggles][active]:active{background-color:#fff;color:#c60;box-shadow:0 0 0 0 rgba(0,0,0,.3)}:host [part~=button-toggle][toggles][active]:active:not(:focus){border-color:#a9afba;outline:0}:host [part~=button-toggle][toggles][active][disabled]{background-color:#fff;color:#f93;border-color:#babfc8;box-shadow:none;outline:0;pointer-events:none}}@media (-ms-high-contrast:none),(pointer:fine){:host [part~=button-toggle][cta]:hover{color:#505050}:host [part~=button-toggle][cta]:focus:not([focused]),:host [part~=button-toggle][cta][focused=visible]{border-color:#a9afba;box-shadow:inset 0 0 0 1px #a9afba;color:#505050}:host [part~=button-toggle]:focus:not([focused]),:host [part~=button-toggle][focused=visible]{border-style:dotted;box-shadow:inset 0 0 0 1px #a9afba}}:host [part~=button-toggle][cta]:active{background-color:#ffb266;background-image:linear-gradient(rgba(255,255,255,0) 0,rgba(255,255,255,.4) 100%)}:host [part~=button-toggle][cta][disabled]{opacity:.4}:host [part~=button-toggle][disabled]{opacity:.4}:host [part~=button-toggle][toggles][active]{color:#f93!important;background-color:#fff!important;background-image:linear-gradient(rgba(0,0,0,.1) 0,rgba(0,0,0,0) 100%)}:host [part~=button-toggle]:active{background-image:none}:host [part~=button]{height:calc(100% - 2px);width:19px}:host [part~=selection-badge]{height:17px;min-width:17px;margin-top:0}:host([disabled]) [part~=icon]{opacity:.4;color:#505050}:host([disabled]) [part~=button-toggle]{border-color:rgba(169,175,186,.6)}');
package/lib/counter/custom-elements.json ADDED
@@ -0,0 +1,39 @@
1
+ {
2
+ "version": "experimental",
3
+ "tags": [
4
+ {
5
+ "name": "ef-counter",
6
+ "description": "Counter is an item count badge,\nsupport maximun display number and notation of large numbers.",
7
+ "attributes": [
8
+ {
9
+ "name": "value",
10
+ "description": "The value of counter as string number",
11
+ "type": "string",
12
+ "default": "\"\""
13
+ },
14
+ {
15
+ "name": "max",
16
+ "description": "Set maximum counter value.\nThis value will be displayed with suffix `+` if count value is larger than max.",
17
+ "type": "string",
18
+ "default": "\"\""
19
+ }
20
+ ],
21
+ "properties": [
22
+ {
23
+ "name": "value",
24
+ "attribute": "value",
25
+ "description": "The value of counter as string number",
26
+ "type": "string",
27
+ "default": "\"\""
28
+ },
29
+ {
30
+ "name": "max",
31
+ "attribute": "max",
32
+ "description": "Set maximum counter value.\nThis value will be displayed with suffix `+` if count value is larger than max.",
33
+ "type": "string",
34
+ "default": "\"\""
35
+ }
36
+ ]
37
+ }
38
+ ]
39
+ }
package/lib/counter/custom-elements.md ADDED
@@ -0,0 +1,11 @@
1
+ # ef-counter
2
+
3
+ Counter is an item count badge,
4
+ support maximun display number and notation of large numbers.
5
+
6
+ ## Properties
7
+
8
+ | Property | Attribute | Type | Default | Description |
9
+ |----------|-----------|----------|---------|--------------------------------------------------|
10
+ | `max` | `max` | `string` | "" | Set maximum counter value.<br />This value will be displayed with suffix `+` if count value is larger than max. |
11
+ | `value` | `value` | `string` | "" | The value of counter as string number |
package/lib/counter/index.d.ts ADDED
@@ -0,0 +1,91 @@
1
+ import { JSXInterface } from '../jsx';
2
+ import { BasicElement, TemplateResult, CSSResultGroup } from '@refinitiv-ui/core';
3
+ /**
4
+ * Counter is an item count badge,
5
+ * support maximun display number and notation of large numbers.
6
+ */
7
+ export declare class Counter extends BasicElement {
8
+ /**
9
+ * Element version number
10
+ * @returns version number
11
+ */
12
+ static get version(): string;
13
+ /**
14
+ * Internal value of the element.
15
+ */
16
+ private _value;
17
+ /**
18
+ * Internal max of the element.
19
+ */
20
+ private _max;
21
+ /**
22
+ * The value of counter as string number
23
+ * @param value counter value
24
+ * @default -
25
+ */
26
+ set value(value: string);
27
+ /**
28
+ * The value of counter as string number
29
+ * @returns {string} counter value
30
+ */
31
+ get value(): string;
32
+ /**
33
+ * Set maximum counter value.
34
+ * This value will be displayed with suffix `+` if count value is larger than max.
35
+ * @param value counter value
36
+ * @default -
37
+ */
38
+ set max(value: string);
39
+ /**
40
+ * Set maximum counter value.
41
+ * This value will be displayed with suffix `+` if count value is larger than max.
42
+ * @returns {string} max value
43
+ */
44
+ get max(): string;
45
+ /**
46
+ * Cast and validate value to string
47
+ * @param value Value that is not string which may be set by app developer, e.g. number or invalid string or null or undefined
48
+ * @param propName name of property that being validate
49
+ * @returns string representation of the value or return empty string if value is invalid string number
50
+ */
51
+ protected validateValue(value: unknown, propName?: string): string;
52
+ /**
53
+ * Check if passed value is a valid number
54
+ * @param value Value to check
55
+ * @returns {boolean} false if value is invalid
56
+ */
57
+ protected isValidNumber(value: string): boolean;
58
+ /**
59
+ * Format display counter value
60
+ * @param value value to format
61
+ * @returns {string} formatted value
62
+ */
63
+ protected formatValue(value: string): string;
64
+ /**
65
+ * A `CSSResultGroup` that will be used
66
+ * to style the host, slotted children
67
+ * and the internal template of the element.
68
+ * @returns CSS template
69
+ */
70
+ static get styles(): CSSResultGroup;
71
+ /**
72
+ * A `TemplateResult` that will be used
73
+ * to render the updated internal template.
74
+ * @return Render template
75
+ */
76
+ protected render(): TemplateResult;
77
+ }
78
+
79
+ declare global {
80
+ interface HTMLElementTagNameMap {
81
+ 'ef-counter': Counter;
82
+ }
83
+
84
+ namespace JSX {
85
+ interface IntrinsicElements {
86
+ 'ef-counter': Partial<Counter> | JSXInterface.HTMLAttributes<Counter>;
87
+ }
88
+ }
89
+ }
90
+
91
+ export {};
package/lib/counter/index.js ADDED
@@ -0,0 +1,154 @@
1
+ import { __decorate } from "tslib";
2
+ import { BasicElement, html, css, WarningNotice } from '@refinitiv-ui/core';
3
+ import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
4
+ import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
5
+ import { VERSION } from '../version.js';
6
+ import { truncateDecimal, convertToCompactNotation } from './utils.js';
7
+ /**
8
+ * Counter is an item count badge,
9
+ * support maximun display number and notation of large numbers.
10
+ */
11
+ let Counter = class Counter extends BasicElement {
12
+ constructor() {
13
+ super(...arguments);
14
+ /**
15
+ * Internal value of the element.
16
+ */
17
+ this._value = '';
18
+ /**
19
+ * Internal max of the element.
20
+ */
21
+ this._max = '';
22
+ }
23
+ /**
24
+ * Element version number
25
+ * @returns version number
26
+ */
27
+ static get version() {
28
+ return VERSION;
29
+ }
30
+ /**
31
+ * The value of counter as string number
32
+ * @param value counter value
33
+ * @default -
34
+ */
35
+ set value(value) {
36
+ value = this.validateValue(value, 'value');
37
+ const oldValue = this._value;
38
+ if (oldValue !== value) {
39
+ this._value = value;
40
+ this.requestUpdate('value', oldValue);
41
+ }
42
+ }
43
+ /**
44
+ * The value of counter as string number
45
+ * @returns {string} counter value
46
+ */
47
+ get value() {
48
+ return this._value;
49
+ }
50
+ /**
51
+ * Set maximum counter value.
52
+ * This value will be displayed with suffix `+` if count value is larger than max.
53
+ * @param value counter value
54
+ * @default -
55
+ */
56
+ set max(value) {
57
+ value = this.validateValue(value, 'max');
58
+ const oldValue = this._max;
59
+ if (oldValue !== value) {
60
+ this._max = value;
61
+ this.requestUpdate('max', oldValue);
62
+ }
63
+ }
64
+ /**
65
+ * Set maximum counter value.
66
+ * This value will be displayed with suffix `+` if count value is larger than max.
67
+ * @returns {string} max value
68
+ */
69
+ get max() {
70
+ return this._max;
71
+ }
72
+ /**
73
+ * Cast and validate value to string
74
+ * @param value Value that is not string which may be set by app developer, e.g. number or invalid string or null or undefined
75
+ * @param propName name of property that being validate
76
+ * @returns string representation of the value or return empty string if value is invalid string number
77
+ */
78
+ validateValue(value, propName = '') {
79
+ // Has a number been passed?
80
+ if (typeof value === 'number') {
81
+ value = value.toString(); // stringify the number
82
+ }
83
+ // Do we have a valid number string?
84
+ if (typeof value === 'string' && this.isValidNumber(value)) {
85
+ return value;
86
+ }
87
+ new WarningNotice(`${this.localName} : The specified value "${value}" of ${propName} property is not valid. Default value will be used instead.`).show();
88
+ return '';
89
+ }
90
+ /**
91
+ * Check if passed value is a valid number
92
+ * @param value Value to check
93
+ * @returns {boolean} false if value is invalid
94
+ */
95
+ isValidNumber(value) {
96
+ const number = Number(value);
97
+ return !isNaN(number) && isFinite(number) && number >= 0;
98
+ }
99
+ /**
100
+ * Format display counter value
101
+ * @param value value to format
102
+ * @returns {string} formatted value
103
+ */
104
+ formatValue(value) {
105
+ if (value === '') {
106
+ return '0';
107
+ }
108
+ // Truncate decimal to integer.
109
+ const countValue = truncateDecimal(value);
110
+ const maxValue = this.max ? truncateDecimal(this.max) : Infinity;
111
+ // Format value if value greater than max
112
+ // If max is null, it will show the value
113
+ return countValue > maxValue ? `${convertToCompactNotation(maxValue)}+` : convertToCompactNotation(countValue);
114
+ }
115
+ /**
116
+ * A `CSSResultGroup` that will be used
117
+ * to style the host, slotted children
118
+ * and the internal template of the element.
119
+ * @returns CSS template
120
+ */
121
+ static get styles() {
122
+ return css `
123
+ :host {
124
+ display: inline-block;
125
+ position: relative;
126
+ }
127
+ [part="number"] {
128
+ text-overflow: ellipsis;
129
+ white-space: nowrap;
130
+ overflow: hidden;
131
+ }
132
+ `;
133
+ }
134
+ /**
135
+ * A `TemplateResult` that will be used
136
+ * to render the updated internal template.
137
+ * @return Render template
138
+ */
139
+ render() {
140
+ return html `<span part="number">${this.formatValue(this.value)}</span>`;
141
+ }
142
+ };
143
+ __decorate([
144
+ property({ type: String })
145
+ ], Counter.prototype, "value", null);
146
+ __decorate([
147
+ property({ type: String })
148
+ ], Counter.prototype, "max", null);
149
+ Counter = __decorate([
150
+ customElement('ef-counter', {
151
+ alias: 'coral-counter'
152
+ })
153
+ ], Counter);
154
+ export { Counter };
package/lib/counter/themes/halo/dark/index.js ADDED
@@ -0,0 +1,3 @@
1
+ import '@refinitiv-ui/elements/lib/icon/themes/halo/dark';
2
+
3
+ elf.customStyles.define('ef-counter', ':host{touch-action:manipulation;background:#262626;border-radius:10px;transition:120ms;margin:2px;font-family:inherit;font-weight:400;padding:0 3px;min-width:21px;max-width:180px;outline:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;vertical-align:middle;position:relative;overflow:hidden;max-width:120px;border:1px solid #ccc;min-width:14px;height:16px;line-height:20px;color:#fff;font-size:10rem}:host(:hover){background-color:#334bff;border-color:#334bff;color:#fff}');
package/lib/counter/themes/halo/light/index.js ADDED
@@ -0,0 +1,3 @@
1
+ import '@refinitiv-ui/elements/lib/icon/themes/halo/light';
2
+
3
+ elf.customStyles.define('ef-counter', ':host{touch-action:manipulation;background:#f2f2f2;border-radius:10px;transition:120ms;margin:2px;font-family:inherit;font-weight:400;padding:0 3px;min-width:21px;max-width:180px;outline:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;vertical-align:middle;position:relative;overflow:hidden;max-width:120px;border:1px solid #ccc;min-width:14px;height:16px;line-height:20px;color:#404040;font-size:10rem}:host(:hover){background-color:#334bff;border-color:#334bff;color:#fff}');
package/lib/counter/themes/solar/charcoal/index.js ADDED
@@ -0,0 +1,3 @@
1
+ import '@refinitiv-ui/elements/lib/icon/themes/solar/charcoal';
2
+
3
+ elf.customStyles.define('ef-counter', ':host{touch-action:manipulation;background:#c2c2c2;border-radius:2px;transition:70ms;margin:3px 3px 0 0;font-family:inherit;font-size:13rem;font-weight:400;padding:0 4px;min-width:22px;max-width:180px;outline:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;vertical-align:middle;position:relative;overflow:hidden;color:#000;height:17px;max-width:120px}');
package/lib/counter/themes/solar/pearl/index.js ADDED
@@ -0,0 +1,3 @@
1
+ import '@refinitiv-ui/elements/lib/icon/themes/solar/pearl';
2
+
3
+ elf.customStyles.define('ef-counter', ':host{touch-action:manipulation;background:#a9afba;border-radius:2px;transition:70ms;margin:3px 3px 0 0;font-family:inherit;font-size:13rem;font-weight:400;padding:0 4px;min-width:22px;max-width:180px;outline:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;vertical-align:middle;position:relative;overflow:hidden;color:#fff;height:17px;max-width:120px}');
package/lib/counter/utils.d.ts ADDED
@@ -0,0 +1,13 @@
1
+ /**
2
+ * Truncate decimal value
3
+ * @param value A decimal value, either string or number
4
+ * @returns {number} Integer value as number
5
+ */
6
+ declare const truncateDecimal: (value: string | number) => number;
7
+ /**
8
+ * Convert a large number to abbreviate numbers if value greater than 999
9
+ * @param value An integer or decimal value as number
10
+ * @returns {string} Formatted value if greater than 999, otherwise return string value
11
+ */
12
+ declare const convertToCompactNotation: (value: number) => string;
13
+ export { truncateDecimal, convertToCompactNotation };
package/lib/counter/utils.js ADDED
@@ -0,0 +1,52 @@
1
+ const THOUSAND = { value: 1000, notation: 'K' };
2
+ const MILLION = { value: 1e6, notation: 'M' };
3
+ const BILLION = { value: 1e9, notation: 'B' };
4
+ const TRILLION = { value: 1e12, notation: 'T' };
5
+ /**
6
+ * Truncate decimal value
7
+ * @param value A decimal value, either string or number
8
+ * @returns {number} Integer value as number
9
+ */
10
+ const truncateDecimal = (value) => {
11
+ // stringify the number
12
+ value = typeof value === 'number' ? value.toString() : value;
13
+ // Truncate decimal e.g. '9.9' -> '9'
14
+ return parseInt(value, 10);
15
+ };
16
+ /**
17
+ * Compute a decimal place of number that will be prefix of the notation
18
+ * @param value A decimal value as number
19
+ * @returns {string} A computed string, either integer or decimal value
20
+ */
21
+ const computeDecimalPlace = (value) => {
22
+ // If value is less than 10 and the number after decimal is not 0 e.g. 1.45, return 1 decimal place
23
+ // Else, if the value is greater than 10 or value is less than 10 and the number after decimal is 0 e.g. 1.01, return integer
24
+ if (value < 10 && value % 1 >= 0.1) {
25
+ const splittedNumbers = value.toString().split('.');
26
+ return `${splittedNumbers[0]}.${splittedNumbers[1].substring(0, 1)}`;
27
+ }
28
+ else {
29
+ return truncateDecimal(value).toString();
30
+ }
31
+ };
32
+ /**
33
+ * Convert a large number to abbreviate numbers if value greater than 999
34
+ * @param value An integer or decimal value as number
35
+ * @returns {string} Formatted value if greater than 999, otherwise return string value
36
+ */
37
+ const convertToCompactNotation = (value) => {
38
+ if (value >= TRILLION.value) {
39
+ return `${computeDecimalPlace(value / TRILLION.value)}${TRILLION.notation}`;
40
+ }
41
+ if (value >= BILLION.value) {
42
+ return `${computeDecimalPlace(value / BILLION.value)}${BILLION.notation}`;
43
+ }
44
+ if (value >= MILLION.value) {
45
+ return `${computeDecimalPlace(value / MILLION.value)}${MILLION.notation}`;
46
+ }
47
+ if (value >= THOUSAND.value) {
48
+ return `${computeDecimalPlace(value / THOUSAND.value)}${THOUSAND.notation}`;
49
+ }
50
+ return value.toString();
51
+ };
52
+ export { truncateDecimal, convertToCompactNotation };