@refinitiv-ui/elements 5.8.0 → 5.9.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 (32) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/lib/calendar/constants.d.ts +4 -0
  3. package/lib/calendar/constants.js +5 -0
  4. package/lib/calendar/index.d.ts +106 -17
  5. package/lib/calendar/index.js +486 -120
  6. package/lib/calendar/locales.js +2 -1
  7. package/lib/calendar/themes/halo/dark/index.js +1 -1
  8. package/lib/calendar/themes/halo/light/index.js +1 -1
  9. package/lib/calendar/themes/solar/charcoal/index.js +1 -1
  10. package/lib/calendar/themes/solar/pearl/index.js +1 -1
  11. package/lib/calendar/types.d.ts +11 -8
  12. package/lib/calendar/utils.js +2 -1
  13. package/lib/combo-box/custom-elements.json +23 -1
  14. package/lib/combo-box/custom-elements.md +8 -1
  15. package/lib/combo-box/helpers/renderer.d.ts +8 -0
  16. package/lib/combo-box/helpers/renderer.js +24 -0
  17. package/lib/combo-box/index.d.ts +36 -16
  18. package/lib/combo-box/index.js +60 -32
  19. package/lib/combo-box/themes/halo/dark/index.js +1 -2
  20. package/lib/combo-box/themes/halo/light/index.js +1 -2
  21. package/lib/combo-box/themes/solar/charcoal/index.js +1 -2
  22. package/lib/combo-box/themes/solar/pearl/index.js +1 -2
  23. package/lib/time-picker/custom-elements.json +2 -4
  24. package/lib/time-picker/custom-elements.md +3 -3
  25. package/lib/time-picker/index.d.ts +92 -62
  26. package/lib/time-picker/index.js +278 -158
  27. package/lib/tree-select/themes/halo/dark/index.js +1 -2
  28. package/lib/tree-select/themes/halo/light/index.js +1 -2
  29. package/lib/tree-select/themes/solar/charcoal/index.js +1 -2
  30. package/lib/tree-select/themes/solar/pearl/index.js +1 -2
  31. package/lib/version.js +1 -1
  32. package/package.json +291 -10
package/lib/combo-box/themes/halo/light/index.js CHANGED
@@ -1,8 +1,7 @@
1
1
  import '@refinitiv-ui/elements/lib/overlay/themes/halo/light';
2
2
  import '@refinitiv-ui/elements/lib/list/themes/halo/light';
3
3
  import '@refinitiv-ui/elements/lib/counter/themes/halo/light';
4
- import '@refinitiv-ui/elements/lib/text-field/themes/halo/light';
5
4
  import '@refinitiv-ui/elements/lib/item/themes/halo/light';
6
5
  import '@refinitiv-ui/elements/lib/icon/themes/halo/light';
7
6
 
8
- elf.customStyles.define('ef-combo-box', ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:12rem;font-weight:400;height:24px;width:152px;max-width:100%;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;border-radius:0;background-color:#fff;text-overflow:ellipsis;border:1px solid #595959;scrollbar-face-color:#999;scrollbar-shadow-color:#999;scrollbar-highlight-color:#999;scrollbar-arrow-color:#999;scrollbar-track-color:#f2f2f2;scrollbar-3dlight-color:#f2f2f2;scrollbar-darkshadow-color:#f2f2f2;scrollbar-color:#999 #f2f2f2;scrollbar-width:thin;color:#404040;cursor:pointer;scrollbar-face-color:#999;scrollbar-shadow-color:#999;scrollbar-highlight-color:#999;scrollbar-arrow-color:#999;scrollbar-track-color:#f2f2f2;scrollbar-3dlight-color:#f2f2f2;scrollbar-darkshadow-color:#f2f2f2;scrollbar-color:#999 #f2f2f2;scrollbar-width:thin;padding:0}:host([type=number]){padding-right:0}:host([warning]){border:1px solid #cca000}:host([warning][disabled]){color:rgba(64,64,64,.5);border:1px solid rgba(204,160,0,.5)}:host([error]),:host([error][warning]){border:1px solid #d94255}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(64,64,64,.5);border:1px solid rgba(182,50,67,.5)}:host ::-ms-clear{display:none}:host(:not([readonly])[focused]),:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=input]{color:inherit;margin:0;flex:1 1 auto;min-width:0;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis;touch-action:manipulation;width:100%;padding:0 8px}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:invalid{box-shadow:none}:host([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}');
7
+ elf.customStyles.define('ef-combo-box', ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:12rem;font-weight:400;height:24px;width:152px;max-width:100%;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;border-radius:0;background-color:#fff;text-overflow:ellipsis;border:1px solid #595959;scrollbar-face-color:#999;scrollbar-shadow-color:#999;scrollbar-highlight-color:#999;scrollbar-arrow-color:#999;scrollbar-track-color:#f2f2f2;scrollbar-3dlight-color:#f2f2f2;scrollbar-darkshadow-color:#f2f2f2;scrollbar-color:#999 #f2f2f2;scrollbar-width:thin;color:#404040;cursor:pointer;scrollbar-face-color:#999;scrollbar-shadow-color:#999;scrollbar-highlight-color:#999;scrollbar-arrow-color:#999;scrollbar-track-color:#f2f2f2;scrollbar-3dlight-color:#f2f2f2;scrollbar-darkshadow-color:#f2f2f2;scrollbar-color:#999 #f2f2f2;scrollbar-width:thin;padding:0}:host([disabled]){border:1px solid rgba(89,89,89,.5)}:host([type=number]){padding-right:0}:host([warning]){border:1px solid #cca000}:host([warning][disabled]){color:rgba(64,64,64,.5);border:1px solid rgba(204,160,0,.5)}:host([error]),:host([error][warning]){border:1px solid #b63243}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(64,64,64,.5);border:1px solid rgba(182,50,67,.5)}:host ::-ms-clear{display:none}:host(:not([readonly])[focused]),:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=input]{color:inherit;padding:0;margin:0;flex:1 1 auto;min-width:0;width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis;touch-action:manipulation}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:invalid{box-shadow:none}:host [part=icon]{min-width:1em}:host([disabled]) [part=input]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host([readonly]){cursor:default}:host [part=placeholder]{opacity:.5;opacity:.7}:host [part=label],:host [part=placeholder]{margin-right:3px}:host [part~=icon]{color:#404040;opacity:.7}:host(:not([readonly]):hover) [part~=icon],:host(:not([readonly])[focused]) [part~=icon]{opacity:1}:host(:not([readonly])[focused]) [part~=icon]{color:#334bff}:host([disabled]) [part~=icon]{color:rgba(89,89,89,.5)}:host [part=list]{max-width:var(--list-max-width,300px);max-height:var(--list-max-height)}:host [part~=input-wrapper]{touch-action:manipulation;display:flex;align-items:center;width:100%;height:100%}:host [part~=input]{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:12rem;font-weight:400;height:24px;max-width:100%;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#404040;border-radius:0;text-overflow:ellipsis;border:1px solid #595959;width:100%;background:0 0;border:none}:host [part~=input][disabled]{color:rgba(64,64,64,.5);border:1px solid rgba(89,89,89,.5)}:host [part~=input][type=number]{padding-right:0}:host [part~=input][warning]{border:1px solid #cca000}:host [part~=input][warning][disabled]{color:rgba(64,64,64,.5);border:1px solid rgba(204,160,0,.5)}:host [part~=input][error],:host [part~=input][error][warning]{border:1px solid #b63243}:host [part~=input][error][disabled],:host [part~=input][error][warning][disabled]{color:rgba(64,64,64,.5);border:1px solid rgba(182,50,67,.5)}:host [part~=input] ::-ms-clear{display:none}:host [part~=button]{display:flex;justify-content:center;align-items:center;flex:none;height:100%;width:24px}:host [part~=list]{display:flex;flex-flow:column nowrap}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){:host [part~=list] ::slotted(ef-list){max-height:inherit}}:host [part~=selection-badge]{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]{padding-left:2px;color:#595959}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover){border-color:#0d0d0d;color:#0d0d0d}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover) [part=icon]{color:#334bff}:host([warning]){border-color:#cca000}:host([error]),:host([error][warning]){border-color:#d94255}:host([warning]:hover:not([readonly]):not([focused])){color:#0d0d0d;border-color:#ffe999}:host([warning][disabled]),:host([warning][readonly]:not([focused])){border-color:rgba(255,233,153,.5)}:host([error]:hover:not([readonly]):not([focused])){color:#0d0d0d;border-color:#eeacb4}:host([error][disabled]),:host([error][readonly]:not([focused])),:host([error][warning][disabled]){border-color:rgba(238,172,180,.5)}:host([disabled]){color:rgba(64,64,64,.5);border-color:rgba(89,89,89,.5);background-color:rgba(255,255,255,.5)}:host([readonly]:not([focused])){border-color:rgba(89,89,89,.5);background-color:rgba(255,255,255,.5)}:host([readonly]:not([focused])) [part=icon]{color:rgba(64,64,64,.5)}:host(:not([readonly])[focused]),:host([focused]),:host([focused][error][warning]){border-color:#334bff;color:#0d0d0d}:host([focused]) [part=icon],:host([focused][error][warning]) [part=icon]{color:#334bff}:host([disabled]) [part=icon]{color:rgba(89,89,89,.5)}:host [part=list]{color:#404040;max-width:var(--list-max-width,300px);max-height:var(--list-max-height);border:1px solid #334bff;margin:2px 0;background-color:#f2f2f2}:host [part=list] ::slotted(ef-item:not(:first-child):not([type=divider])),:host [part=list] ef-item:not(:first-child):not([type=divider]){box-shadow:0 -1px 0 #d9d9d9}:host [part=list] ::slotted(:not(ef-item)){display:none}::-webkit-scrollbar-corner{background:0 0}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#999;border-radius:0;border:1px solid transparent}::-webkit-scrollbar-thumb:hover{background:#334bff}::-webkit-scrollbar-thumb:active{background:#0f1e8a}::-webkit-scrollbar-track{background:#f2f2f2}::-webkit-scrollbar-thumb:horizontal{background-size:auto 6px;background-repeat:repeat-x;background-image:linear-gradient(to bottom,#999,#999);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:horizontal:hover{background-image:linear-gradient(to bottom,#334bff,#334bff);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:horizontal:active{background-image:linear-gradient(to bottom,#0f1e8a,#0f1e8a);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:vertical{background-size:6px auto;background-repeat:repeat-y;background-image:linear-gradient(to right,#999,#999);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:vertical:hover{background-image:linear-gradient(to right,#334bff,#334bff);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:vertical:active{background-image:linear-gradient(to right,#0f1e8a,#0f1e8a);background-color:transparent;background-position:center}::-webkit-scrollbar-track:horizontal{border-top:1px solid #fff;border-bottom:1px solid #fff}::-webkit-scrollbar-track:vertical{border-left:1px solid #fff;border-right:1px solid #fff}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #f2f2f2;height:16px;width:16px;display:none;border:1px solid #fff}::-webkit-scrollbar-button:end:decrement,::-webkit-scrollbar-button:start:increment{display:none}::-webkit-scrollbar-button:hover{background-color:#334bff;border:1px solid #334bff}::-webkit-scrollbar-button:active{background-color:#0f1e8a;border:1px solid #fff}::-webkit-scrollbar-button:horizontal{background-size:2px 1px}::-webkit-scrollbar-button:vertical:start:decrement{border-bottom-color:#fff;background-image:linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959);background-position:10.55px 8px,9.55px 7px,8.55px 6px,7.55px 5px,6.55px 4px,5.55px 5px,4.55px 6px,3.55px 7px,2.55px 8px}::-webkit-scrollbar-button:vertical:start:decrement:hover{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:10.55px 8px,9.55px 7px,8.55px 6px,7.55px 5px,6.55px 4px,5.55px 5px,4.55px 6px,3.55px 7px,2.55px 8px;border-bottom-color:#334bff}::-webkit-scrollbar-button:vertical:start:decrement:active{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:10.55px 8px,9.55px 7px,8.55px 6px,7.55px 5px,6.55px 4px,5.55px 5px,4.55px 6px,3.55px 7px,2.55px 8px;border-bottom-color:#fff}::-webkit-scrollbar-button:vertical:end:increment{border-top-color:#fff;background-image:linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959);background-position:10.55px 4px,9.55px 5px,8.55px 6px,7.55px 7px,6.55px 8px,5.55px 7px,4.55px 6px,3.55px 5px,2.55px 4px}::-webkit-scrollbar-button:vertical:end:increment:hover{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:10.55px 4px,9.55px 5px,8.55px 6px,7.55px 7px,6.55px 8px,5.55px 7px,4.55px 6px,3.55px 5px,2.55px 4px;border-top-color:#334bff}::-webkit-scrollbar-button:vertical:end:increment:active{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:10.55px 4px,9.55px 5px,8.55px 6px,7.55px 7px,6.55px 8px,5.55px 7px,4.55px 6px,3.55px 5px,2.55px 4px;border-top-color:#fff}::-webkit-scrollbar-button:horizontal:start:decrement{border-right-color:#fff;background-image:linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959);background-position:7.5px 10.55px,6.5px 9.55px,5.5px 8.55px,4.5px 7.55px,3.5px 6.55px,4.5px 5.55px,5.5px 4.55px,6.5px 3.55px,7.5px 2.55px}::-webkit-scrollbar-button:horizontal:start:decrement:hover{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:7.5px 10.55px,6.5px 9.55px,5.5px 8.55px,4.5px 7.55px,3.5px 6.55px,4.5px 5.55px,5.5px 4.55px,6.5px 3.55px,7.5px 2.55px;border-right-color:#334bff}::-webkit-scrollbar-button:horizontal:start:decrement:active{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:7.5px 10.55px,6.5px 9.55px,5.5px 8.55px,4.5px 7.55px,3.5px 6.55px,4.5px 5.55px,5.5px 4.55px,6.5px 3.55px,7.5px 2.55px;border-right-color:#fff}::-webkit-scrollbar-button:horizontal:end:increment{border-left-color:#fff;background-image:linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959);background-position:5px 10.55px,6px 9.55px,7px 8.55px,8px 7.55px,9px 6.55px,8px 5.55px,7px 4.55px,6px 3.55px,5px 2.55px}::-webkit-scrollbar-button:horizontal:end:increment:hover{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:5px 10.55px,6px 9.55px,7px 8.55px,8px 7.55px,9px 6.55px,8px 5.55px,7px 4.55px,6px 3.55px,5px 2.55px;border-left-color:#334bff}::-webkit-scrollbar-button:horizontal:end:increment:active{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:5px 10.55px,6px 9.55px,7px 8.55px,8px 7.55px,9px 6.55px,8px 5.55px,7px 4.55px,6px 3.55px,5px 2.55px;border-left-color:#fff}:host [part~=input-wrapper]{border-left-color:inherit}:host [part~=input]{padding:0 8px}:host [part~=button-toggle]{border-left:1px solid #595959;border-left-color:inherit}:host [part~=button-toggle]::before{content:\'\';display:block;position:absolute;top:-1px;right:-1px;bottom:-1px;width:24px;border:1px solid transparent}:host(:not([readonly])) [part~=button-clear]:hover{color:#334bff}:host(:not([readonly]):hover) [part~=button-toggle]{color:#334bff}:host(:not([readonly])[focused]) [part~=button-toggle]{border-left-color:#334bff;color:#334bff}:host(:not([readonly])) [part~=button-toggle]:hover{border-left-color:#334bff;color:#fff;background:#334bff}:host(:not([readonly])) [part~=button-toggle]:hover::after{content:\'\';display:block;position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border:1px solid #334bff;pointer-events:none}:host(:not([readonly])) [part~=button-toggle]:active{background:#0f1e8a}:host(:not([readonly])) [part~=button]:active{color:#fff}:host(:not([readonly])) [part~=icon]{color:inherit!important}:host([disabled]) [part~=button-toggle],:host([readonly]) [part~=button-toggle]{border-left-color:rgba(89,89,89,.5)}:host([readonly]) [part~=button-toggle]{color:rgba(64,64,64,.5);cursor:default}:host([focused][readonly]) [part~=button-toggle]{border-left-color:#334bff}:host [part=list] ::slotted(ef-list){display:block}:host [part~=selection-badge]:hover{background-color:#334bff;color:#fff}');
package/lib/combo-box/themes/solar/charcoal/index.js CHANGED
@@ -1,8 +1,7 @@
1
1
  import '@refinitiv-ui/elements/lib/overlay/themes/solar/charcoal';
2
2
  import '@refinitiv-ui/elements/lib/list/themes/solar/charcoal';
3
3
  import '@refinitiv-ui/elements/lib/counter/themes/solar/charcoal';
4
- import '@refinitiv-ui/elements/lib/text-field/themes/solar/charcoal';
5
4
  import '@refinitiv-ui/elements/lib/item/themes/solar/charcoal';
6
5
  import '@refinitiv-ui/elements/lib/icon/themes/solar/charcoal';
7
6
 
8
- elf.customStyles.define('ef-combo-box', ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:13rem;font-weight:400;height:23px;width:140px;max-width:100%;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#c2c2c2;border-radius:0;background-color:#000;text-overflow:ellipsis;border:1px solid #4a4a52;cursor:pointer;scrollbar-face-color:#666570;scrollbar-shadow-color:#666570;scrollbar-highlight-color:#666570;scrollbar-arrow-color:#666570;scrollbar-track-color:#2e2e33;scrollbar-3dlight-color:#2e2e33;scrollbar-darkshadow-color:#2e2e33;scrollbar-color:#666570 #2e2e33;padding:0;scrollbar-face-color:#666570;scrollbar-shadow-color:#666570;scrollbar-highlight-color:#666570;scrollbar-arrow-color:#666570;scrollbar-track-color:#2e2e33;scrollbar-3dlight-color:#2e2e33;scrollbar-darkshadow-color:#2e2e33;scrollbar-color:#666570 #2e2e33;--panel-background-color:#3C3C42}:host([disabled]){color:rgba(194,194,194,.6);border:1px solid rgba(74,74,82,.6)}:host([warning]){border:1px solid #f93}:host([warning][disabled]){color:rgba(194,194,194,.6);border:1px solid rgba(255,153,51,.6)}:host([error]),:host([error][warning]){border:1px solid #f5475b}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(194,194,194,.6);border:1px solid rgba(245,71,91,.6)}:host(:not([readonly])[focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#f93}:host([readonly]){cursor:default}:host [part=placeholder]{opacity:.5}:host [part=label],:host [part=placeholder]{margin-right:3px}:host [part~=icon]{color:#c2c2c2;opacity:.7}:host(:not([readonly]):hover) [part~=icon],:host(:not([readonly])[focused]) [part~=icon]{opacity:1}:host(:not([readonly])[focused]) [part~=icon]{color:#f93}:host [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}');
7
+ elf.customStyles.define('ef-combo-box', ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:13rem;font-weight:400;height:23px;width:140px;max-width:100%;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#c2c2c2;border-radius:0;background-color:#000;text-overflow:ellipsis;border:1px solid #4a4a52;cursor:pointer;scrollbar-face-color:#666570;scrollbar-shadow-color:#666570;scrollbar-highlight-color:#666570;scrollbar-arrow-color:#666570;scrollbar-track-color:#2e2e33;scrollbar-3dlight-color:#2e2e33;scrollbar-darkshadow-color:#2e2e33;scrollbar-color:#666570 #2e2e33;padding:0;scrollbar-face-color:#666570;scrollbar-shadow-color:#666570;scrollbar-highlight-color:#666570;scrollbar-arrow-color:#666570;scrollbar-track-color:#2e2e33;scrollbar-3dlight-color:#2e2e33;scrollbar-darkshadow-color:#2e2e33;scrollbar-color:#666570 #2e2e33;--panel-background-color:#3C3C42}:host([disabled]){color:rgba(194,194,194,.6);border:1px solid rgba(74,74,82,.6)}:host([warning]){border:1px solid #f93}:host([warning][disabled]){color:rgba(194,194,194,.6);border:1px solid rgba(255,153,51,.6)}:host([error]),:host([error][warning]){border:1px solid #f5475b}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(194,194,194,.6);border:1px solid rgba(245,71,91,.6)}:host(:not([readonly])[focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#f93}:host([readonly]){cursor:default}:host [part=placeholder]{opacity:.5}:host [part=label],:host [part=placeholder]{margin-right:3px}:host [part~=icon]{color:#c2c2c2;opacity:.7}:host(:not([readonly]):hover) [part~=icon],:host(:not([readonly])[focused]) [part~=icon]{opacity:1}:host(:not([readonly])[focused]) [part~=icon]{color:#f93}:host [part=list]{max-width:var(--list-max-width,300px);max-height:var(--list-max-height)}:host [part~=input-wrapper]{touch-action:manipulation;display:flex;align-items:center;width:100%;height:100%}:host [part~=input]{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:13rem;font-weight:400;height:23px;max-width:100%;padding:0 5px;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#c2c2c2;border-radius:0;text-overflow:ellipsis;border:1px solid #4a4a52;width:100%;background:0 0;border:none}:host [part~=input][disabled]{color:rgba(194,194,194,.6);border:1px solid rgba(74,74,82,.6)}:host [part~=input][type=number]{padding-right:0}:host [part~=input][warning]{border:1px solid #f93}:host [part~=input][warning][disabled]{color:rgba(194,194,194,.6);border:1px solid rgba(255,153,51,.6)}:host [part~=input][error],:host [part~=input][error][warning]{border:1px solid #f5475b}:host [part~=input][error][disabled],:host [part~=input][error][warning][disabled]{color:rgba(194,194,194,.6);border:1px solid rgba(245,71,91,.6)}:host [part~=input] ::-ms-clear{display:none}:host [part~=button]{height:28px;display:flex;justify-content:center;align-items:center;flex:none}:host [part~=list]{display:flex;flex-flow:column nowrap}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){:host [part~=list] ::slotted(ef-list){max-height:inherit}}:host [part~=selection-badge]{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
@@ -1,8 +1,7 @@
1
1
  import '@refinitiv-ui/elements/lib/overlay/themes/solar/pearl';
2
2
  import '@refinitiv-ui/elements/lib/list/themes/solar/pearl';
3
3
  import '@refinitiv-ui/elements/lib/counter/themes/solar/pearl';
4
- import '@refinitiv-ui/elements/lib/text-field/themes/solar/pearl';
5
4
  import '@refinitiv-ui/elements/lib/item/themes/solar/pearl';
6
5
  import '@refinitiv-ui/elements/lib/icon/themes/solar/pearl';
7
6
 
8
- elf.customStyles.define('ef-combo-box', ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:13rem;font-weight:400;height:23px;width:140px;max-width:100%;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#484848;border-radius:0;background-color:#fff;text-overflow:ellipsis;border:1px solid #a9afba;cursor:pointer;scrollbar-face-color:#8a8a96;scrollbar-shadow-color:#8a8a96;scrollbar-highlight-color:#8a8a96;scrollbar-arrow-color:#8a8a96;scrollbar-track-color:#fff;scrollbar-3dlight-color:#fff;scrollbar-darkshadow-color:#fff;scrollbar-color:#8a8a96 #fff;padding:0;scrollbar-face-color:#8a8a96;scrollbar-shadow-color:#8a8a96;scrollbar-highlight-color:#8a8a96;scrollbar-arrow-color:#8a8a96;scrollbar-track-color:#fff;scrollbar-3dlight-color:#fff;scrollbar-darkshadow-color:#fff;scrollbar-color:#8a8a96 #fff;--panel-background-color:#FAFBFC}:host([disabled]){color:rgba(72,72,72,.6);border:1px solid rgba(169,175,186,.6)}:host([warning]){border:1px solid #f93}:host([warning][disabled]){color:rgba(72,72,72,.6);border:1px solid rgba(255,153,51,.6)}:host([error]),:host([error][warning]){border:1px solid #d94255}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(72,72,72,.6);border:1px solid rgba(217,66,85,.6)}:host(:not([readonly])[focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#ffb266}:host([readonly]){cursor:default}:host [part=placeholder]{opacity:.5}:host [part=label],:host [part=placeholder]{margin-right:3px}:host [part~=icon]{color:#484848;opacity:.7}:host(:not([readonly]):hover) [part~=icon],:host(:not([readonly])[focused]) [part~=icon]{opacity:1}:host(:not([readonly])[focused]) [part~=icon]{color:#f93}:host [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)}');
7
+ elf.customStyles.define('ef-combo-box', ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:13rem;font-weight:400;height:23px;width:140px;max-width:100%;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#484848;border-radius:0;background-color:#fff;text-overflow:ellipsis;border:1px solid #a9afba;cursor:pointer;scrollbar-face-color:#8a8a96;scrollbar-shadow-color:#8a8a96;scrollbar-highlight-color:#8a8a96;scrollbar-arrow-color:#8a8a96;scrollbar-track-color:#fff;scrollbar-3dlight-color:#fff;scrollbar-darkshadow-color:#fff;scrollbar-color:#8a8a96 #fff;padding:0;scrollbar-face-color:#8a8a96;scrollbar-shadow-color:#8a8a96;scrollbar-highlight-color:#8a8a96;scrollbar-arrow-color:#8a8a96;scrollbar-track-color:#fff;scrollbar-3dlight-color:#fff;scrollbar-darkshadow-color:#fff;scrollbar-color:#8a8a96 #fff;--panel-background-color:#FAFBFC}:host([disabled]){color:rgba(72,72,72,.6);border:1px solid rgba(169,175,186,.6)}:host([warning]){border:1px solid #f93}:host([warning][disabled]){color:rgba(72,72,72,.6);border:1px solid rgba(255,153,51,.6)}:host([error]),:host([error][warning]){border:1px solid #d94255}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(72,72,72,.6);border:1px solid rgba(217,66,85,.6)}:host(:not([readonly])[focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#ffb266}:host([readonly]){cursor:default}:host [part=placeholder]{opacity:.5}:host [part=label],:host [part=placeholder]{margin-right:3px}:host [part~=icon]{color:#484848;opacity:.7}:host(:not([readonly]):hover) [part~=icon],:host(:not([readonly])[focused]) [part~=icon]{opacity:1}:host(:not([readonly])[focused]) [part~=icon]{color:#f93}:host [part=list]{max-width:var(--list-max-width,300px);max-height:var(--list-max-height)}:host [part~=input-wrapper]{touch-action:manipulation;display:flex;align-items:center;width:100%;height:100%}:host [part~=input]{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:13rem;font-weight:400;height:23px;max-width:100%;padding:0 5px;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#484848;border-radius:0;text-overflow:ellipsis;border:1px solid #a9afba;width:100%;background:0 0;border:none}:host [part~=input][disabled]{color:rgba(72,72,72,.6);border:1px solid rgba(169,175,186,.6)}:host [part~=input][type=number]{padding-right:0}:host [part~=input][warning]{border:1px solid #f93}:host [part~=input][warning][disabled]{color:rgba(72,72,72,.6);border:1px solid rgba(255,153,51,.6)}:host [part~=input][error],:host [part~=input][error][warning]{border:1px solid #d94255}:host [part~=input][error][disabled],:host [part~=input][error][warning][disabled]{color:rgba(72,72,72,.6);border:1px solid rgba(217,66,85,.6)}:host [part~=input] ::-ms-clear{display:none}:host [part~=button]{height:28px;display:flex;justify-content:center;align-items:center;flex:none}:host [part~=list]{display:flex;flex-flow:column nowrap}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){:host [part~=list] ::slotted(ef-list){max-height:inherit}}:host [part~=selection-badge]{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/time-picker/custom-elements.json CHANGED
@@ -35,8 +35,7 @@
35
35
  {
36
36
  "name": "value",
37
37
  "description": "Value of the element",
38
- "type": "string",
39
- "default": "\"\""
38
+ "type": "string"
40
39
  },
41
40
  {
42
41
  "name": "readonly",
@@ -88,8 +87,7 @@
88
87
  "name": "value",
89
88
  "attribute": "value",
90
89
  "description": "Value of the element",
91
- "type": "string",
92
- "default": "\"\""
90
+ "type": "string"
93
91
  },
94
92
  {
95
93
  "name": "readonly",
package/lib/time-picker/custom-elements.md CHANGED
@@ -9,11 +9,11 @@ Control the time input
9
9
  | `amPm` | `am-pm` | `boolean` | false | Toggles 12hr time display |
10
10
  | `disabled` | `disabled` | `boolean` | false | Set disabled state |
11
11
  | `hours` | `hours` | `number \| null` | null | Hours time segment in 24hr format |
12
- | `minutes` | `minutes` | `number \| null` | null | Minutes time segment |
12
+ | `minutes` | `minutes` | `number \| null` | | Minutes time segment |
13
13
  | `readonly` | `readonly` | `boolean` | false | Set readonly state |
14
- | `seconds` | `seconds` | `number \| null` | null | Seconds time segment |
14
+ | `seconds` | `seconds` | `number \| null` | | Seconds time segment |
15
15
  | `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. |
16
- | `value` | `value` | `string` | "" | Value of the element |
16
+ | `value` | `value` | `string` | | Value of the element |
17
17
 
18
18
  ## Methods
19
19
 
package/lib/time-picker/index.d.ts CHANGED
@@ -1,6 +1,8 @@
1
1
  import { JSXInterface } from '../jsx';
2
2
  import { ControlElement, TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
3
3
  import '../number-field/index.js';
4
+ import { TranslateDirective } from '@refinitiv-ui/translate';
5
+ import '@refinitiv-ui/phrasebook/lib/locale/en/time-picker.js';
4
6
  declare enum Segment {
5
7
  HOURS = "hours",
6
8
  MINUTES = "minutes",
@@ -22,6 +24,10 @@ export declare class TimePicker extends ControlElement {
22
24
  * @returns version number
23
25
  */
24
26
  static get version(): string;
27
+ protected readonly defaultRole: string | null;
28
+ /**
29
+ * If time-picker is in mobile mode
30
+ */
25
31
  private isMobile;
26
32
  /**
27
33
  * Internal hours value, used only in value getters and setters
@@ -55,19 +61,17 @@ export declare class TimePicker extends ControlElement {
55
61
  /**
56
62
  * Minutes time segment
57
63
  * @param minutes minutes value
58
- * @default null
59
64
  * @returns {void}
60
65
  */
61
66
  set minutes(minutes: number | null);
62
67
  /**
63
68
  * Get minutes value
64
- * @returns hours
69
+ * @returns minutes
65
70
  */
66
71
  get minutes(): number | null;
67
72
  /**
68
73
  * Seconds time segment
69
74
  * @param seconds seconds value
70
- * @default null
71
75
  * @returns {void}
72
76
  */
73
77
  set seconds(seconds: number | null);
@@ -87,7 +91,6 @@ export declare class TimePicker extends ControlElement {
87
91
  showSeconds: boolean;
88
92
  /**
89
93
  * Value of the element
90
- * @default -
91
94
  * @param value Element value
92
95
  */
93
96
  set value(value: string);
@@ -112,6 +115,22 @@ export declare class TimePicker extends ControlElement {
112
115
  * Getter for toggle part.
113
116
  */
114
117
  private toggleEl?;
118
+ /**
119
+ * Used for translations
120
+ */
121
+ protected t: TranslateDirective;
122
+ private _selectedSegment;
123
+ /**
124
+ * State to select text in the segment
125
+ * Used to asynchronously select text after render cycle is complete
126
+ * @param segment Selected segment or null
127
+ */
128
+ private set selectedSegment(value);
129
+ private get selectedSegment();
130
+ /**
131
+ * Connected to role. If false, the values are not announced in the screen reader
132
+ */
133
+ private announceValues;
115
134
  /**
116
135
  * Return the current time string, based on the current hours, minutes and seconds.
117
136
  * Used internally to set the value string after updates.
@@ -121,6 +140,10 @@ export declare class TimePicker extends ControlElement {
121
140
  * Seconds are automatically shown when `hh:mm:ss` time format is provided as a value.
122
141
  */
123
142
  private get isShowSeconds();
143
+ /**
144
+ * Get hours taking into account AM/PM placeholder
145
+ */
146
+ private get periodHours();
124
147
  /**
125
148
  * Formats the hours value
126
149
  */
@@ -131,28 +154,41 @@ export declare class TimePicker extends ControlElement {
131
154
  private get formattedMinutes();
132
155
  /**
133
156
  * Formats the seconds value
134
- * @returns Formatted number
135
157
  */
136
158
  private get formattedSeconds();
159
+ /**
160
+ * Observes attribute change for `attributeChangedCallback`
161
+ */
162
+ static get observedAttributes(): string[];
163
+ /**
164
+ * Synchronizes attribute value
165
+ * @param name attribute name
166
+ * @param oldValue old attribute value
167
+ * @param newValue new attribute value
168
+ * @returns {void}
169
+ */
170
+ attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
137
171
  /**
138
172
  * On first updated life-cycle
139
- *
140
173
  * @param changedProperties changed properties
141
174
  * @returns {void}
142
175
  */
143
176
  protected firstUpdated(changedProperties: PropertyValues): void;
144
177
  /**
145
178
  * On updated life-cycle
146
- *
147
179
  * @param changedProperties changed properties
148
180
  * @returns {void}
149
181
  */
150
182
  protected updated(changedProperties: PropertyValues): void;
183
+ /**
184
+ * Select text in input when update element is complete
185
+ * @returns returns a promise void
186
+ */
187
+ private selectSegment;
151
188
  /**
152
189
  * Overwrite validation method for value
153
- *
154
190
  * @param value value
155
- * @returns {boolean} result
191
+ * @returns True if value is valid
156
192
  */
157
193
  protected isValidValue(value: string): boolean;
158
194
  /**
@@ -167,40 +203,41 @@ export declare class TimePicker extends ControlElement {
167
203
  * @param changedProperties changed properties
168
204
  * @returns True if changed
169
205
  */
170
- private hasTimeChanged;
206
+ private static hasTimeChanged;
171
207
  /**
172
208
  * Validates a given unit against a min and max value, returning a fallback if invalid.
173
- *
174
209
  * @param unit Unit to validate
175
210
  * @param min Minimum allowed
176
211
  * @param max Maximum allowed
177
212
  * @param fallback Fallback value to use, if unit is invalid
178
213
  * @returns unit or fallback or 0 value
179
214
  */
180
- private validUnit;
215
+ private static validUnit;
181
216
  /**
182
217
  * Handles value change from native time picker on mobile devices
183
- *
184
218
  * @param event Event Object
185
219
  * @returns {void}
186
220
  */
187
221
  private onMobileTimeChange;
188
222
  /**
189
223
  * Helper, used to update the mobile time picker value
190
- *
191
224
  * @returns {void}
192
225
  */
193
226
  private updateMobileTimePickerValue;
194
227
  /**
195
- * Handles the blur event of any inputs
196
- *
197
- * @param event Event Object
228
+ * Handles action when input focused change
229
+ * @param event Focus change event
198
230
  * @returns {void}
199
231
  */
200
- private onBlur;
232
+ private onInputFocusedChanged;
233
+ /**
234
+ * Handles action when input value changes
235
+ * @param event Value change event
236
+ * @returns {void}
237
+ */
238
+ private onInputValueChanged;
201
239
  /**
202
240
  * Updates a time segment to the provided value
203
- *
204
241
  * @param segment Segment id
205
242
  * @param value Unit to change to
206
243
  * @returns {void}
@@ -208,22 +245,13 @@ export declare class TimePicker extends ControlElement {
208
245
  private updateTimeSegmentTo;
209
246
  /**
210
247
  * Updates the value of a time segment (element)
211
- *
212
248
  * @param segment Segment's name
213
249
  * @returns {void}
214
250
  */
215
251
  private updateSegmentValue;
216
- /**
217
- * Handles the focus event of any inputs
218
- *
219
- * @param event Event Object
220
- * @returns {void}
221
- */
222
- private onFocus;
223
252
  /**
224
253
  * Handles any keydown events
225
254
  * Used for control keys
226
- *
227
255
  * @param event Event Object
228
256
  * @returns {void}
229
257
  */
@@ -231,43 +259,31 @@ export declare class TimePicker extends ControlElement {
231
259
  /**
232
260
  * Handle valid control keys and execute their corresponding commands
233
261
  * Will stop when readonly is set
234
- *
235
- * @param event Event Object
262
+ * @param event Keyboard event
236
263
  * @returns {void}
237
264
  */
238
265
  private manageControlKeys;
239
266
  /**
240
267
  * Handles ENTER key press
241
- *
242
- * @param event Event Object
268
+ * @param event Keyboard event
243
269
  * @returns {void}
244
270
  */
245
271
  private handleEnterKey;
246
272
  /**
247
273
  * Handles UP key press
248
- *
249
- * @param event Event Object
274
+ * @param event Keyboard event
250
275
  * @returns {void}
251
276
  */
252
277
  private handleUpKey;
253
278
  /**
254
279
  * Handle DOWN key press
255
- *
256
- * @param event Event Object
280
+ * @param event Keyboard event
257
281
  * @returns {void}
258
282
  */
259
283
  private handleDownKey;
260
- /**
261
- * Handle Backspace key press
262
- *
263
- * @param event Event Object
264
- * @returns {void}
265
- */
266
- private handleBackspaceKey;
267
284
  /**
268
285
  * Toggles the amPm flag or updates the time segment value.
269
286
  * Essentially a handler for user inputs on the control.
270
- *
271
287
  * @param amount to change value by
272
288
  * @param target Segment id
273
289
  * @returns {void}
@@ -276,7 +292,6 @@ export declare class TimePicker extends ControlElement {
276
292
  /**
277
293
  * Changes a time segment value by a specified amount.
278
294
  * Also updates parent values when rolling through cycles.
279
- *
280
295
  * @param amount Amount to change by
281
296
  * @param segment Segment id
282
297
  * @returns {void}
@@ -292,44 +307,37 @@ export declare class TimePicker extends ControlElement {
292
307
  private getHoursSegment;
293
308
  /**
294
309
  * Updates the value of the hours element
295
- *
296
310
  * @returns {void}
297
311
  */
298
312
  private updateHoursSegmentValue;
299
313
  /**
300
314
  * Updated the value of the minutes element
301
- *
302
315
  * @returns {void}
303
316
  */
304
317
  private updateMinutesSegmentValue;
305
318
  /**
306
319
  * Updates the value of the seconds element
307
- *
308
320
  * @returns {void}
309
321
  */
310
322
  private updateSecondsSegmentValue;
311
323
  /**
312
324
  * Formats a given number and prefixes a 0 on numbers lower than 10
313
- *
314
325
  * @param n Number to format
315
326
  * @returns Formatted number
316
327
  */
317
- private formattedUnit;
328
+ private static formattedUnit;
318
329
  /**
319
330
  * Returns `true` or `false` depending on whether the hours are before, or, after noon
320
- *
321
- * @returns Result
331
+ * @returns True if time is AM
322
332
  */
323
333
  private isAM;
324
334
  /**
325
335
  * Returns opposite of isAM
326
- *
327
- * @returns Result
336
+ * @returns True if time is PM
328
337
  */
329
338
  private isPM;
330
339
  /**
331
340
  * Toggles the AM/PM state
332
- *
333
341
  * @returns {void}
334
342
  */
335
343
  toggle(): void;
@@ -340,24 +348,46 @@ export declare class TimePicker extends ControlElement {
340
348
  * @returns CSS template
341
349
  */
342
350
  static get styles(): CSSResultGroup;
351
+ /**
352
+ * Template for divider segment
353
+ * @returns Divider segment
354
+ */
355
+ private static dividerTemplate;
356
+ /**
357
+ * Template for Hours Segment
358
+ * @returns template hours segment
359
+ */
360
+ private get hoursTemplate();
361
+ /**
362
+ * Template for Minutes Segment
363
+ * @returns template minutes segment
364
+ */
365
+ private get minutesTemplate();
343
366
  /**
344
367
  * Template for Seconds Segment
345
- *
346
- * @returns Seconds segment
368
+ * @returns template seconds segment
347
369
  */
348
- private getSecondsHtml;
370
+ private get secondsTemplate();
349
371
  /**
350
372
  * Template for AmPm Segment
351
- *
352
373
  * @returns Am/Pm segment
353
374
  */
354
- private getAmPmHtml;
375
+ private get getAmPmHtml();
355
376
  /**
356
377
  * Native input's template for mobile
357
- *
358
378
  * @returns input
359
379
  */
360
- private getNativeInputForMobile;
380
+ private get nativeInputForMobile();
381
+ /**
382
+ * A template used to notify currently selected value for screen readers
383
+ * @returns template result
384
+ */
385
+ private get selectionTemplate();
386
+ /**
387
+ * Get time input template
388
+ * @returns template result
389
+ */
390
+ private get inputTemplate();
361
391
  /**
362
392
  * A `TemplateResult` that will be used
363
393
  * to render the updated internal template.