@refinitiv-ui/elements 5.6.0 → 5.8.2-alpha.0

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 (185) hide show
  1. package/CHANGELOG.md +51 -0
  2. package/lib/accordion/custom-elements.md +18 -0
  3. package/lib/appstate-bar/custom-elements.md +22 -0
  4. package/lib/autosuggest/custom-elements.json +24 -4
  5. package/lib/autosuggest/custom-elements.md +54 -0
  6. package/lib/autosuggest/index.d.ts +4 -0
  7. package/lib/autosuggest/index.js +4 -0
  8. package/lib/button/custom-elements.json +2 -2
  9. package/lib/button/custom-elements.md +23 -0
  10. package/lib/button-bar/custom-elements.md +9 -0
  11. package/lib/calendar/custom-elements.json +8 -6
  12. package/lib/calendar/custom-elements.md +35 -0
  13. package/lib/calendar/index.d.ts +2 -0
  14. package/lib/calendar/index.js +2 -0
  15. package/lib/canvas/custom-elements.json +7 -5
  16. package/lib/canvas/custom-elements.md +27 -0
  17. package/lib/canvas/index.d.ts +1 -0
  18. package/lib/canvas/index.js +1 -0
  19. package/lib/card/custom-elements.json +3 -1
  20. package/lib/card/custom-elements.md +24 -0
  21. package/lib/card/index.d.ts +2 -0
  22. package/lib/card/index.js +2 -0
  23. package/lib/chart/custom-elements.json +1 -1
  24. package/lib/chart/custom-elements.md +16 -0
  25. package/lib/checkbox/custom-elements.json +12 -8
  26. package/lib/checkbox/custom-elements.md +18 -0
  27. package/lib/checkbox/index.d.ts +3 -1
  28. package/lib/checkbox/index.js +2 -0
  29. package/lib/clock/custom-elements.json +8 -4
  30. package/lib/clock/custom-elements.md +28 -0
  31. package/lib/clock/index.d.ts +2 -0
  32. package/lib/clock/index.js +2 -0
  33. package/lib/clock/themes/halo/dark/index.js +1 -1
  34. package/lib/clock/themes/halo/light/index.js +1 -1
  35. package/lib/clock/themes/solar/charcoal/index.js +1 -1
  36. package/lib/clock/themes/solar/pearl/index.js +1 -1
  37. package/lib/collapse/custom-elements.md +27 -0
  38. package/lib/color-dialog/custom-elements.json +29 -16
  39. package/lib/color-dialog/custom-elements.md +39 -0
  40. package/lib/color-dialog/index.d.ts +8 -8
  41. package/lib/color-dialog/index.js +8 -8
  42. package/lib/combo-box/custom-elements.json +28 -16
  43. package/lib/combo-box/custom-elements.md +35 -0
  44. package/lib/combo-box/index.d.ts +10 -2
  45. package/lib/combo-box/index.js +10 -1
  46. package/lib/combo-box/themes/halo/dark/index.js +1 -1
  47. package/lib/combo-box/themes/halo/light/index.js +1 -1
  48. package/lib/combo-box/themes/solar/charcoal/index.js +1 -1
  49. package/lib/combo-box/themes/solar/pearl/index.js +1 -1
  50. package/lib/counter/custom-elements.json +8 -4
  51. package/lib/counter/custom-elements.md +11 -0
  52. package/lib/counter/index.d.ts +2 -0
  53. package/lib/counter/index.js +2 -0
  54. package/lib/datetime-picker/custom-elements.json +52 -23
  55. package/lib/datetime-picker/custom-elements.md +57 -0
  56. package/lib/datetime-picker/index.d.ts +15 -4
  57. package/lib/datetime-picker/index.js +15 -4
  58. package/lib/dialog/custom-elements.json +34 -12
  59. package/lib/dialog/custom-elements.md +47 -0
  60. package/lib/dialog/index.d.ts +7 -10
  61. package/lib/dialog/index.js +7 -10
  62. package/lib/email-field/custom-elements.json +81 -94
  63. package/lib/email-field/custom-elements.md +37 -0
  64. package/lib/email-field/index.d.ts +43 -115
  65. package/lib/email-field/index.js +44 -244
  66. package/lib/flag/custom-elements.md +10 -0
  67. package/lib/flag/index.d.ts +2 -0
  68. package/lib/flag/index.js +2 -0
  69. package/lib/header/custom-elements.md +18 -0
  70. package/lib/heatmap/custom-elements.md +26 -0
  71. package/lib/icon/custom-elements.md +8 -0
  72. package/lib/icon/index.d.ts +2 -0
  73. package/lib/icon/index.js +2 -0
  74. package/lib/interactive-chart/custom-elements.json +6 -10
  75. package/lib/interactive-chart/custom-elements.md +31 -0
  76. package/lib/interactive-chart/index.d.ts +5 -2
  77. package/lib/interactive-chart/index.js +5 -2
  78. package/lib/item/custom-elements.json +4 -4
  79. package/lib/item/custom-elements.md +29 -0
  80. package/lib/item/index.d.ts +11 -2
  81. package/lib/item/index.js +25 -4
  82. package/lib/label/custom-elements.md +11 -0
  83. package/lib/layout/custom-elements.md +26 -0
  84. package/lib/led-gauge/custom-elements.json +4 -4
  85. package/lib/led-gauge/custom-elements.md +17 -0
  86. package/lib/led-gauge/index.d.ts +1 -0
  87. package/lib/led-gauge/index.js +1 -0
  88. package/lib/list/custom-elements.json +18 -5
  89. package/lib/list/custom-elements.md +32 -0
  90. package/lib/list/helpers/list-renderer.js +2 -0
  91. package/lib/list/index.d.ts +19 -2
  92. package/lib/list/index.js +34 -1
  93. package/lib/loader/custom-elements.md +5 -0
  94. package/lib/multi-input/custom-elements.json +7 -6
  95. package/lib/multi-input/custom-elements.md +43 -0
  96. package/lib/multi-input/index.d.ts +4 -0
  97. package/lib/multi-input/index.js +4 -0
  98. package/lib/notification/custom-elements.md +26 -0
  99. package/lib/number-field/custom-elements.json +99 -54
  100. package/lib/number-field/custom-elements.md +42 -0
  101. package/lib/number-field/index.d.ts +92 -47
  102. package/lib/number-field/index.js +113 -80
  103. package/lib/overlay/custom-elements.json +26 -13
  104. package/lib/overlay/custom-elements.md +54 -0
  105. package/lib/overlay/elements/overlay.d.ts +5 -0
  106. package/lib/overlay-menu/custom-elements.json +70 -20
  107. package/lib/overlay-menu/custom-elements.md +44 -0
  108. package/lib/overlay-menu/index.d.ts +13 -11
  109. package/lib/overlay-menu/index.js +13 -11
  110. package/lib/pagination/custom-elements.md +27 -0
  111. package/lib/panel/custom-elements.md +11 -0
  112. package/lib/password-field/custom-elements.json +62 -67
  113. package/lib/password-field/custom-elements.md +39 -0
  114. package/lib/password-field/index.d.ts +42 -94
  115. package/lib/password-field/index.js +48 -194
  116. package/lib/pill/custom-elements.json +8 -6
  117. package/lib/pill/custom-elements.md +22 -0
  118. package/lib/pill/index.d.ts +1 -1
  119. package/lib/pill/index.js +1 -1
  120. package/lib/progress-bar/custom-elements.md +18 -0
  121. package/lib/radio-button/custom-elements.json +8 -6
  122. package/lib/radio-button/custom-elements.md +19 -0
  123. package/lib/radio-button/index.d.ts +6 -5
  124. package/lib/radio-button/index.js +5 -4
  125. package/lib/rating/custom-elements.md +17 -0
  126. package/lib/search-field/custom-elements.json +70 -74
  127. package/lib/search-field/custom-elements.md +41 -0
  128. package/lib/search-field/index.d.ts +43 -100
  129. package/lib/search-field/index.js +46 -215
  130. package/lib/select/custom-elements.json +5 -4
  131. package/lib/select/custom-elements.md +24 -0
  132. package/lib/select/index.d.ts +11 -3
  133. package/lib/select/index.js +65 -26
  134. package/lib/sidebar-layout/custom-elements.json +2 -6
  135. package/lib/sidebar-layout/custom-elements.md +21 -0
  136. package/lib/sidebar-layout/index.d.ts +2 -1
  137. package/lib/slider/custom-elements.json +4 -4
  138. package/lib/slider/custom-elements.md +28 -0
  139. package/lib/slider/index.d.ts +1 -1
  140. package/lib/slider/index.js +1 -1
  141. package/lib/sparkline/custom-elements.json +4 -4
  142. package/lib/sparkline/custom-elements.md +16 -0
  143. package/lib/sparkline/index.d.ts +3 -1
  144. package/lib/sparkline/index.js +2 -0
  145. package/lib/swing-gauge/custom-elements.json +5 -3
  146. package/lib/swing-gauge/custom-elements.md +17 -0
  147. package/lib/swing-gauge/index.d.ts +3 -1
  148. package/lib/swing-gauge/index.js +3 -1
  149. package/lib/tab/custom-elements.json +2 -2
  150. package/lib/tab/custom-elements.md +22 -0
  151. package/lib/tab-bar/custom-elements.md +11 -0
  152. package/lib/text-field/custom-elements.json +78 -89
  153. package/lib/text-field/custom-elements.md +35 -0
  154. package/lib/text-field/index.d.ts +50 -92
  155. package/lib/text-field/index.js +81 -230
  156. package/lib/time-picker/custom-elements.json +4 -4
  157. package/lib/time-picker/custom-elements.md +28 -0
  158. package/lib/time-picker/index.d.ts +3 -0
  159. package/lib/time-picker/index.js +3 -0
  160. package/lib/toggle/custom-elements.json +8 -6
  161. package/lib/toggle/custom-elements.md +19 -0
  162. package/lib/toggle/index.d.ts +2 -1
  163. package/lib/toggle/index.js +1 -0
  164. package/lib/tooltip/custom-elements.md +14 -0
  165. package/lib/tornado-chart/custom-elements.md +18 -0
  166. package/lib/tree/custom-elements.json +4 -3
  167. package/lib/tree/custom-elements.md +32 -0
  168. package/lib/tree/elements/tree.d.ts +1 -0
  169. package/lib/tree/elements/tree.js +1 -0
  170. package/lib/tree/managers/tree-manager.d.ts +20 -2
  171. package/lib/tree/managers/tree-manager.js +55 -28
  172. package/lib/tree/themes/halo/dark/index.js +1 -1
  173. package/lib/tree/themes/halo/light/index.js +1 -1
  174. package/lib/tree/themes/solar/charcoal/index.js +1 -1
  175. package/lib/tree/themes/solar/pearl/index.js +1 -1
  176. package/lib/tree-select/custom-elements.json +10 -6
  177. package/lib/tree-select/custom-elements.md +26 -0
  178. package/lib/tree-select/index.d.ts +5 -3
  179. package/lib/tree-select/index.js +3 -2
  180. package/lib/tree-select/themes/halo/dark/index.js +1 -1
  181. package/lib/tree-select/themes/halo/light/index.js +1 -1
  182. package/lib/tree-select/themes/solar/charcoal/index.js +1 -1
  183. package/lib/tree-select/themes/solar/pearl/index.js +1 -1
  184. package/lib/version.js +1 -1
  185. package/package.json +293 -12
package/lib/combo-box/themes/halo/light/index.js CHANGED
@@ -5,4 +5,4 @@ import '@refinitiv-ui/elements/lib/text-field/themes/halo/light';
5
5
  import '@refinitiv-ui/elements/lib/item/themes/halo/light';
6
6
  import '@refinitiv-ui/elements/lib/icon/themes/halo/light';
7
7
 
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([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=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:16px;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}:host [part=selection-badge]:hover{background-color:#334bff;color:#fff}');
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([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=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:16px;min-width:20px}: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]: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}:host [part=selection-badge]:hover{background-color:#334bff;color:#fff}');
package/lib/combo-box/themes/solar/charcoal/index.js CHANGED
@@ -5,4 +5,4 @@ import '@refinitiv-ui/elements/lib/text-field/themes/solar/charcoal';
5
5
  import '@refinitiv-ui/elements/lib/item/themes/solar/charcoal';
6
6
  import '@refinitiv-ui/elements/lib/icon/themes/solar/charcoal';
7
7
 
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}');
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 [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}: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(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}:host([disabled]) [part~=icon]{opacity:.4;color:#c2c2c2}');
package/lib/combo-box/themes/solar/pearl/index.js CHANGED
@@ -5,4 +5,4 @@ import '@refinitiv-ui/elements/lib/text-field/themes/solar/pearl';
5
5
  import '@refinitiv-ui/elements/lib/item/themes/solar/pearl';
6
6
  import '@refinitiv-ui/elements/lib/icon/themes/solar/pearl';
7
7
 
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}');
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 [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}: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 CHANGED
@@ -8,12 +8,14 @@
8
8
  {
9
9
  "name": "value",
10
10
  "description": "The value of counter as string number",
11
- "type": "string"
11
+ "type": "string",
12
+ "default": "\"\""
12
13
  },
13
14
  {
14
15
  "name": "max",
15
16
  "description": "Set maximum counter value.\nThis value will be displayed with suffix `+` if count value is larger than max.",
16
- "type": "string"
17
+ "type": "string",
18
+ "default": "\"\""
17
19
  }
18
20
  ],
19
21
  "properties": [
@@ -21,13 +23,15 @@
21
23
  "name": "value",
22
24
  "attribute": "value",
23
25
  "description": "The value of counter as string number",
24
- "type": "string"
26
+ "type": "string",
27
+ "default": "\"\""
25
28
  },
26
29
  {
27
30
  "name": "max",
28
31
  "attribute": "max",
29
32
  "description": "Set maximum counter value.\nThis value will be displayed with suffix `+` if count value is larger than max.",
30
- "type": "string"
33
+ "type": "string",
34
+ "default": "\"\""
31
35
  }
32
36
  ]
33
37
  }
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 CHANGED
@@ -21,6 +21,7 @@ export declare class Counter extends BasicElement {
21
21
  /**
22
22
  * The value of counter as string number
23
23
  * @param value counter value
24
+ * @default -
24
25
  */
25
26
  set value(value: string);
26
27
  /**
@@ -32,6 +33,7 @@ export declare class Counter extends BasicElement {
32
33
  * Set maximum counter value.
33
34
  * This value will be displayed with suffix `+` if count value is larger than max.
34
35
  * @param value counter value
36
+ * @default -
35
37
  */
36
38
  set max(value: string);
37
39
  /**
package/lib/counter/index.js CHANGED
@@ -30,6 +30,7 @@ let Counter = class Counter extends BasicElement {
30
30
  /**
31
31
  * The value of counter as string number
32
32
  * @param value counter value
33
+ * @default -
33
34
  */
34
35
  set value(value) {
35
36
  value = this.validateValue(value, 'value');
@@ -50,6 +51,7 @@ let Counter = class Counter extends BasicElement {
50
51
  * Set maximum counter value.
51
52
  * This value will be displayed with suffix `+` if count value is larger than max.
52
53
  * @param value counter value
54
+ * @default -
53
55
  */
54
56
  set max(value) {
55
57
  value = this.validateValue(value, 'max');
package/lib/datetime-picker/custom-elements.json CHANGED
@@ -8,12 +8,14 @@
8
8
  {
9
9
  "name": "min",
10
10
  "description": "Set minimum date",
11
- "type": "string"
11
+ "type": "string",
12
+ "default": "\"\""
12
13
  },
13
14
  {
14
15
  "name": "max",
15
16
  "description": "Set maximum date",
16
- "type": "string"
17
+ "type": "string",
18
+ "default": "\"\""
17
19
  },
18
20
  {
19
21
  "name": "weekdays-only",
@@ -41,12 +43,14 @@
41
43
  {
42
44
  "name": "value",
43
45
  "description": "Current date time value",
44
- "type": "string"
46
+ "type": "string",
47
+ "default": "\"\""
45
48
  },
46
49
  {
47
50
  "name": "values",
48
51
  "description": "Set multiple selected values",
49
- "type": "string[]"
52
+ "type": "string[]",
53
+ "default": "[]"
50
54
  },
51
55
  {
52
56
  "name": "am-pm",
@@ -63,7 +67,8 @@
63
67
  {
64
68
  "name": "placeholder",
65
69
  "description": "Placeholder to display when no value is set",
66
- "type": "string"
70
+ "type": "string",
71
+ "default": "\"\""
67
72
  },
68
73
  {
69
74
  "name": "opened",
@@ -104,7 +109,8 @@
104
109
  {
105
110
  "name": "format",
106
111
  "description": "Set the datetime format\nBased on dane-fns datetime formats",
107
- "type": "string"
112
+ "type": "string",
113
+ "default": "\"\""
108
114
  },
109
115
  {
110
116
  "name": "timepicker",
@@ -120,19 +126,20 @@
120
126
  {
121
127
  "name": "view",
122
128
  "description": "Set the current calendar view.\nAccepted format: 'yyyy-MM'",
123
- "type": "string"
129
+ "type": "string",
130
+ "default": "\"\""
124
131
  },
125
132
  {
126
133
  "name": "readonly",
127
134
  "description": "Set readonly state",
128
135
  "type": "boolean",
129
- "default": "\"false\""
136
+ "default": "false"
130
137
  },
131
138
  {
132
139
  "name": "disabled",
133
140
  "description": "Set disabled state",
134
141
  "type": "boolean",
135
- "default": "\"false\""
142
+ "default": "false"
136
143
  }
137
144
  ],
138
145
  "properties": [
@@ -140,13 +147,15 @@
140
147
  "name": "min",
141
148
  "attribute": "min",
142
149
  "description": "Set minimum date",
143
- "type": "string"
150
+ "type": "string",
151
+ "default": "\"\""
144
152
  },
145
153
  {
146
154
  "name": "max",
147
155
  "attribute": "max",
148
156
  "description": "Set maximum date",
149
- "type": "string"
157
+ "type": "string",
158
+ "default": "\"\""
150
159
  },
151
160
  {
152
161
  "name": "weekdaysOnly",
@@ -180,21 +189,19 @@
180
189
  "type": "boolean",
181
190
  "default": "false"
182
191
  },
183
- {
184
- "name": "multiple",
185
- "type": "boolean"
186
- },
187
192
  {
188
193
  "name": "value",
189
194
  "attribute": "value",
190
195
  "description": "Current date time value",
191
- "type": "string"
196
+ "type": "string",
197
+ "default": "\"\""
192
198
  },
193
199
  {
194
200
  "name": "values",
195
201
  "attribute": "values",
196
202
  "description": "Set multiple selected values",
197
- "type": "string[]"
203
+ "type": "string[]",
204
+ "default": "[]"
198
205
  },
199
206
  {
200
207
  "name": "amPm",
@@ -214,7 +221,8 @@
214
221
  "name": "placeholder",
215
222
  "attribute": "placeholder",
216
223
  "description": "Placeholder to display when no value is set",
217
- "type": "string"
224
+ "type": "string",
225
+ "default": "\"\""
218
226
  },
219
227
  {
220
228
  "name": "opened",
@@ -262,7 +270,8 @@
262
270
  "name": "format",
263
271
  "attribute": "format",
264
272
  "description": "Set the datetime format\nBased on dane-fns datetime formats",
265
- "type": "string"
273
+ "type": "string",
274
+ "default": "\"\""
266
275
  },
267
276
  {
268
277
  "name": "timepicker",
@@ -281,26 +290,28 @@
281
290
  "name": "view",
282
291
  "attribute": "view",
283
292
  "description": "Set the current calendar view.\nAccepted format: 'yyyy-MM'",
284
- "type": "string"
293
+ "type": "string",
294
+ "default": "\"\""
285
295
  },
286
296
  {
287
297
  "name": "views",
288
298
  "description": "Set the current calendar views for duplex mode\nAccepted format: 'yyyy-MM'",
289
- "type": "string[]"
299
+ "type": "string[]",
300
+ "default": "[]"
290
301
  },
291
302
  {
292
303
  "name": "readonly",
293
304
  "attribute": "readonly",
294
305
  "description": "Set readonly state",
295
306
  "type": "boolean",
296
- "default": "\"false\""
307
+ "default": "false"
297
308
  },
298
309
  {
299
310
  "name": "disabled",
300
311
  "attribute": "disabled",
301
312
  "description": "Set disabled state",
302
313
  "type": "boolean",
303
- "default": "\"false\""
314
+ "default": "false"
304
315
  }
305
316
  ],
306
317
  "events": [
@@ -321,6 +332,24 @@
321
332
  "description": "Dispatched when internal view changes"
322
333
  }
323
334
  ],
335
+ "slots": [
336
+ {
337
+ "name": "header",
338
+ "description": "Slot to add custom contents at the top of popup"
339
+ },
340
+ {
341
+ "name": "right",
342
+ "description": "Slot to add custom contents at the right of popup"
343
+ },
344
+ {
345
+ "name": "footer",
346
+ "description": "Slot to add custom contents at the bottom of popup"
347
+ },
348
+ {
349
+ "name": "left",
350
+ "description": "Slot to add custom contents at the left of popup"
351
+ }
352
+ ],
324
353
  "methods": [
325
354
  {
326
355
  "name": "validateInput",
package/lib/datetime-picker/custom-elements.md ADDED
@@ -0,0 +1,57 @@
1
+ # ef-datetime-picker
2
+
3
+ Control to pick date and time
4
+
5
+ ## Properties
6
+
7
+ | Property | Attribute | Type | Default | Description |
8
+ |------------------------|--------------------------|----------------------------------|---------|--------------------------------------------------|
9
+ | `amPm` | `am-pm` | `boolean` | false | Toggles 12hr time display |
10
+ | `disabled` | `disabled` | `boolean` | false | Set disabled state |
11
+ | `duplex` | `duplex` | `"" \| "consecutive" \| "split"` | null | Display two calendar pickers. |
12
+ | `error` | `error` | `boolean` | false | Set state to error |
13
+ | `filter` | | `DatetimePickerFilter \| null` | null | Custom filter, used for enabling/disabling certain dates |
14
+ | `firstDayOfWeek` | `first-day-of-week` | `number \| undefined` | | Set the first day of the week.<br />0 - for Sunday, 6 - for Saturday |
15
+ | `format` | `format` | `string` | "" | Set the datetime format<br />Based on dane-fns datetime formats |
16
+ | `inputDisabled` | `input-disabled` | `boolean` | false | Disable input part of the picker |
17
+ | `inputTriggerDisabled` | `input-trigger-disabled` | `boolean` | false | Only open picker panel when calendar icon is clicked.<br />Clicking on the input will no longer open the picker. |
18
+ | `max` | `max` | `string` | "" | Set maximum date |
19
+ | `min` | `min` | `string` | "" | Set minimum date |
20
+ | `opened` | `opened` | `boolean` | false | Toggles the opened state of the list |
21
+ | `placeholder` | `placeholder` | `string` | "" | Placeholder to display when no value is set |
22
+ | `popupDisabled` | `popup-disabled` | `boolean` | false | Disable the popup |
23
+ | `range` | `range` | `boolean` | false | Set to switch to range select mode |
24
+ | `readonly` | `readonly` | `boolean` | false | Set readonly state |
25
+ | `showSeconds` | `show-seconds` | `boolean` | false | Flag to show seconds time segment in display.<br />Seconds are automatically shown when `hh:mm:ss` time format is provided as a value. |
26
+ | `timepicker` | `timepicker` | `boolean` | false | Toggle to display the time picker |
27
+ | `value` | `value` | `string` | "" | Current date time value |
28
+ | `values` | `values` | `string[]` | [] | Set multiple selected values |
29
+ | `view` | `view` | `string` | "" | Set the current calendar view.<br />Accepted format: 'yyyy-MM' |
30
+ | `views` | | `string[]` | [] | Set the current calendar views for duplex mode<br />Accepted format: 'yyyy-MM' |
31
+ | `warning` | `warning` | `boolean` | false | Set state to warning |
32
+ | `weekdaysOnly` | `weekdays-only` | `boolean` | false | Only enable weekdays |
33
+ | `weekendsOnly` | `weekends-only` | `boolean` | false | Only enable weekends |
34
+
35
+ ## Methods
36
+
37
+ | Method | Type | Description |
38
+ |-----------------|------------|--------------------------------------------------|
39
+ | `validateInput` | `(): void` | Validates the input, marking the element as invalid if its value does not meet the validation criteria. |
40
+
41
+ ## Events
42
+
43
+ | Event | Description |
44
+ |------------------|--------------------------------------------------|
45
+ | `error-changed` | Dispatched when error state changes |
46
+ | `opened-changed` | Dispatched when when opened attribute changes internally |
47
+ | `value-changed` | Dispatched when value changes |
48
+ | `view-changed` | Dispatched when internal view changes |
49
+
50
+ ## Slots
51
+
52
+ | Name | Description |
53
+ |----------|--------------------------------------------------|
54
+ | `footer` | Slot to add custom contents at the bottom of popup |
55
+ | `header` | Slot to add custom contents at the top of popup |
56
+ | `left` | Slot to add custom contents at the left of popup |
57
+ | `right` | Slot to add custom contents at the right of popup |
package/lib/datetime-picker/index.d.ts CHANGED
@@ -22,10 +22,10 @@ export type { DatetimePickerFilter, DatetimePickerDuplex };
22
22
  * @attr {boolean} disabled - Set disabled state
23
23
  * @prop {boolean} [disabled=false] - Set disabled state
24
24
  *
25
- * @slots header - Header slot
26
- * @slots right - Right slot
27
- * @slots footer - Footer slot
28
- * @slots left - Left slot
25
+ * @slot header - Slot to add custom contents at the top of popup
26
+ * @slot right - Slot to add custom contents at the right of popup
27
+ * @slot footer - Slot to add custom contents at the bottom of popup
28
+ * @slot left - Slot to add custom contents at the left of popup
29
29
  */
30
30
  export declare class DatetimePicker extends ControlElement implements MultiValue {
31
31
  /**
@@ -50,6 +50,7 @@ export declare class DatetimePicker extends ControlElement implements MultiValue
50
50
  /**
51
51
  * Set minimum date
52
52
  * @param min date
53
+ * @default -
53
54
  */
54
55
  set min(min: string);
55
56
  get min(): string;
@@ -58,6 +59,7 @@ export declare class DatetimePicker extends ControlElement implements MultiValue
58
59
  /**
59
60
  * Set maximum date
60
61
  * @param max date
62
+ * @default -
61
63
  */
62
64
  set max(max: string);
63
65
  get max(): string;
@@ -90,10 +92,14 @@ export declare class DatetimePicker extends ControlElement implements MultiValue
90
92
  * @param multiple Multiple
91
93
  */
92
94
  set multiple(multiple: boolean);
95
+ /**
96
+ * @ignore
97
+ */
93
98
  get multiple(): boolean;
94
99
  /**
95
100
  * Current date time value
96
101
  * @param value Calendar value
102
+ * @default -
97
103
  */
98
104
  set value(value: string);
99
105
  get value(): string;
@@ -103,6 +109,7 @@ export declare class DatetimePicker extends ControlElement implements MultiValue
103
109
  * Set multiple selected values
104
110
  * @param values Values to set
105
111
  * @type {string[]}
112
+ * @default []
106
113
  */
107
114
  set values(values: string[]);
108
115
  get values(): string[];
@@ -119,6 +126,7 @@ export declare class DatetimePicker extends ControlElement implements MultiValue
119
126
  /**
120
127
  * Placeholder to display when no value is set
121
128
  * @param placeholder Placeholder
129
+ * @default -
122
130
  */
123
131
  set placeholder(placeholder: string);
124
132
  get placeholder(): string;
@@ -152,6 +160,7 @@ export declare class DatetimePicker extends ControlElement implements MultiValue
152
160
  * Set the datetime format
153
161
  * Based on dane-fns datetime formats
154
162
  * @param format Date format
163
+ * @default -
155
164
  */
156
165
  set format(format: string);
157
166
  get format(): string;
@@ -168,6 +177,7 @@ export declare class DatetimePicker extends ControlElement implements MultiValue
168
177
  * Set the current calendar view.
169
178
  * Accepted format: 'yyyy-MM'
170
179
  * @param view view date
180
+ * @default -
171
181
  */
172
182
  set view(view: string);
173
183
  get view(): string;
@@ -177,6 +187,7 @@ export declare class DatetimePicker extends ControlElement implements MultiValue
177
187
  * Accepted format: 'yyyy-MM'
178
188
  * @param views view dates
179
189
  * @type {string[]}
190
+ * @default []
180
191
  */
181
192
  set views(views: string[]);
182
193
  get views(): string[];