@refinitiv-ui/elements 7.2.1 → 7.3.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.
- package/CHANGELOG.md +17 -0
- package/lib/combo-box/themes/halo/dark/index.js +1 -1
- package/lib/combo-box/themes/halo/light/index.js +1 -1
- package/lib/icon/themes/halo/dark/index.js +1 -1
- package/lib/icon/themes/halo/light/index.js +1 -1
- package/lib/icon/themes/solar/charcoal/index.js +1 -1
- package/lib/icon/themes/solar/pearl/index.js +1 -1
- package/lib/interactive-chart/helpers/types.d.ts +8 -17
- package/lib/interactive-chart/helpers/types.js +1 -6
- package/lib/interactive-chart/index.d.ts +4 -5
- package/lib/interactive-chart/index.js +15 -35
- package/lib/slider/custom-elements.json +12 -0
- package/lib/slider/custom-elements.md +3 -0
- package/lib/slider/index.d.ts +17 -0
- package/lib/slider/index.js +41 -0
- package/lib/tree-select/custom-elements.json +13 -0
- package/lib/tree-select/custom-elements.md +1 -0
- package/lib/tree-select/index.d.ts +23 -0
- package/lib/tree-select/index.js +38 -1
- package/lib/tree-select/themes/halo/dark/index.js +1 -1
- package/lib/tree-select/themes/halo/light/index.js +1 -1
- package/lib/version.js +1 -1
- package/package.json +17 -17
- package/tsconfig.tsbuildinfo +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,23 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [7.3.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@7.2.2...@refinitiv-ui/elements@7.3.0) (2023-08-21)
|
|
7
|
+
|
|
8
|
+
### Bug Fixes
|
|
9
|
+
|
|
10
|
+
- add packages list to lerna config for blackduck scanning ([#897](https://github.com/Refinitiv/refinitiv-ui/issues/897)) ([8ac2f2f](https://github.com/Refinitiv/refinitiv-ui/commit/8ac2f2f3159415792e85a8036ed84be92663712e))
|
|
11
|
+
|
|
12
|
+
### Features
|
|
13
|
+
|
|
14
|
+
- **slider:** add input event ([#888](https://github.com/Refinitiv/refinitiv-ui/issues/888)) ([80f743a](https://github.com/Refinitiv/refinitiv-ui/commit/80f743a68a71dfbeff80d6828f832618ce1dc1e9))
|
|
15
|
+
- **tree-select:** add max property ([#907](https://github.com/Refinitiv/refinitiv-ui/issues/907)) ([441e424](https://github.com/Refinitiv/refinitiv-ui/commit/441e4242068cf86d133850201eb8532e09c388c1))
|
|
16
|
+
|
|
17
|
+
## [7.2.2](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@7.2.1...@refinitiv-ui/elements@7.2.2) (2023-08-11)
|
|
18
|
+
|
|
19
|
+
### Bug Fixes
|
|
20
|
+
|
|
21
|
+
- **icon:** change sprite cdn domain ([#891](https://github.com/Refinitiv/refinitiv-ui/issues/891)) ([cb62df3](https://github.com/Refinitiv/refinitiv-ui/commit/cb62df332d8442906b4d8d71c17f4c5cc4f9b075))
|
|
22
|
+
|
|
6
23
|
## [7.2.1](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@7.2.0...@refinitiv-ui/elements@7.2.1) (2023-08-07)
|
|
7
24
|
|
|
8
25
|
### Bug Fixes
|
|
@@ -4,4 +4,4 @@ import '@refinitiv-ui/elements/counter/themes/halo/dark';
|
|
|
4
4
|
import '@refinitiv-ui/elements/item/themes/halo/dark';
|
|
5
5
|
import '@refinitiv-ui/elements/icon/themes/halo/dark';
|
|
6
6
|
import '@refinitiv-ui/elements/tooltip/themes/halo/dark';
|
|
7
|
-
dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-combo-box', styles: ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:12px;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:#0d0d0d;text-overflow:ellipsis;border:1px solid #404040;scrollbar-color:#595959 #1a1a1a;scrollbar-width:thin;color:#ccc;scrollbar-color:#595959 #1a1a1a;scrollbar-width:thin;padding:0}:host([disabled]){border:1px solid rgba(64,64,64,.5)}:host([type=number]){padding-right:0}:host([warning]){border:1px solid #7f6400}:host([warning][disabled]){color:rgba(204,204,204,.5);border:1px solid rgba(127,100,0,.5)}:host([error]),:host([error][warning]){border:1px solid #a01c2b}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(204,204,204,.5);border:1px solid rgba(160,28,43,.5)}:host(:not([readonly])[focused]),:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=input]{color:inherit;padding:0;margin:0;flex:1 1 auto;min-width:0;width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis;touch-action:manipulation}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:invalid{box-shadow:none}:host([disabled]) [part=input]{-webkit-user-select:none;-moz-user-select:none;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:#ccc;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(64,64,64,.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:12px;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:#ccc;border-radius:0;text-overflow:ellipsis;border:1px solid #404040;width:100%;background:0 0;border:none;padding:0 8px}:host [part~=input][disabled]{color:rgba(204,204,204,.5);border:1px solid rgba(64,64,64,.5)}:host [part~=input][type=number]{padding-right:0}:host [part~=input][warning]{border:1px solid #7f6400}:host [part~=input][warning][disabled]{color:rgba(204,204,204,.5);border:1px solid rgba(127,100,0,.5)}:host [part~=input][error],:host [part~=input][error][warning]{border:1px solid #a01c2b}:host [part~=input][error][disabled],:host [part~=input][error][warning][disabled]{color:rgba(204,204,204,.5);border:1px solid rgba(160,28,43,.5)}: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}:host [part=selection-badge]{flex-shrink:0}:host([disabled]) [part~=selection-badge]{opacity:.4}:host ::-moz-selection{color:#fff;background-color:#334bff}:host ::selection{color:#fff;background-color:#334bff}:host [part=icon]{color:#ccc;min-width:1em;margin-left:2px;color:inherit}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover){border-color:grey;color:#fff}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover) [part=icon]{color:#6678ff}:host([warning]){border-color:#ffc800}:host([error]),:host([error][warning]){border-color:#f5475b}:host([warning]:hover:not([readonly]):not([focused])){color:#fff;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:#fff;border-color:#faa8b1}:host([error][disabled]),:host([error][readonly]:not([focused])),:host([error][warning][disabled]){border-color:rgba(250,168,177,.5)}:host([disabled]){color:rgba(204,204,204,.5);border-color:rgba(64,64,64,.5);background-color:rgba(13,13,13,.5)}:host([readonly]:not([focused])){border-color:rgba(64,64,64,.5);background-color:rgba(13,13,13,.5)}:host([readonly]:not([focused])) [part=icon]{color:rgba(204,204,204,.5)}:host(:not([readonly])[focused]),:host([focused]),:host([focused][error][warning]){border-color:#334bff;color:#fff}:host([focused]) [part=icon],:host([focused][error][warning]) [part=icon]{color:#6678ff}:host [part=list]{color:#ccc;max-width:var(--list-max-width,300px);max-height:var(--list-max-height);border:1px solid #334bff;margin:2px 0;background-color:#262626}: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 #404040}: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:#595959;border-radius:0;border:1px solid transparent}::-webkit-scrollbar-thumb:hover{background:#1429bd}::-webkit-scrollbar-thumb:active{background:#0f1e8a}::-webkit-scrollbar-track{background:#1a1a1a}::-webkit-scrollbar-thumb:horizontal{background-size:auto 6px;background-repeat:repeat-x;background-image:linear-gradient(to bottom,#595959,#595959);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:horizontal:hover{background-image:linear-gradient(to bottom,#1429bd,#1429bd);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:horizontal:active{background-image:linear-gradient(to bottom,#0f1e8a,#0f1e8a);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:vertical{background-size:6px auto;background-repeat:repeat-y;background-image:linear-gradient(to right,#595959,#595959);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:vertical:hover{background-image:linear-gradient(to right,#1429bd,#1429bd);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:vertical:active{background-image:linear-gradient(to right,#0f1e8a,#0f1e8a);background-color:transparent;background-position:center}::-webkit-scrollbar-track:horizontal{border-top:1px solid #0d0d0d;border-bottom:1px solid #0d0d0d}::-webkit-scrollbar-track:vertical{border-left:1px solid #0d0d0d;border-right:1px solid #0d0d0d}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #1a1a1a;height:16px;width:16px;display:none;border:1px solid #0d0d0d}::-webkit-scrollbar-button:end:decrement,::-webkit-scrollbar-button:start:increment{display:none}::-webkit-scrollbar-button:hover{background-color:#1429bd;border:1px solid #1429bd}::-webkit-scrollbar-button:active{background-color:#0f1e8a;border:1px solid #0d0d0d}::-webkit-scrollbar-button:horizontal{background-size:2px 1px}::-webkit-scrollbar-button:vertical:start:decrement{border-bottom-color:#0d0d0d;background-image:linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc);background-position:10.55px 8px,9.55px 7px,8.55px 6px,7.55px 5px,6.55px 4px,5.55px 5px,4.55px 6px,3.55px 7px,2.55px 8px}::-webkit-scrollbar-button:vertical:start:decrement:hover{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:10.55px 8px,9.55px 7px,8.55px 6px,7.55px 5px,6.55px 4px,5.55px 5px,4.55px 6px,3.55px 7px,2.55px 8px;border-bottom-color:#1429bd}::-webkit-scrollbar-button:vertical:start:decrement:active{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:10.55px 8px,9.55px 7px,8.55px 6px,7.55px 5px,6.55px 4px,5.55px 5px,4.55px 6px,3.55px 7px,2.55px 8px;border-bottom-color:#0d0d0d}::-webkit-scrollbar-button:vertical:end:increment{border-top-color:#0d0d0d;background-image:linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc);background-position:10.55px 4px,9.55px 5px,8.55px 6px,7.55px 7px,6.55px 8px,5.55px 7px,4.55px 6px,3.55px 5px,2.55px 4px}::-webkit-scrollbar-button:vertical:end:increment:hover{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:10.55px 4px,9.55px 5px,8.55px 6px,7.55px 7px,6.55px 8px,5.55px 7px,4.55px 6px,3.55px 5px,2.55px 4px;border-top-color:#1429bd}::-webkit-scrollbar-button:vertical:end:increment:active{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:10.55px 4px,9.55px 5px,8.55px 6px,7.55px 7px,6.55px 8px,5.55px 7px,4.55px 6px,3.55px 5px,2.55px 4px;border-top-color:#0d0d0d}::-webkit-scrollbar-button:horizontal:start:decrement{border-right-color:#0d0d0d;background-image:linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc);background-position:7.5px 10.55px,6.5px 9.55px,5.5px 8.55px,4.5px 7.55px,3.5px 6.55px,4.5px 5.55px,5.5px 4.55px,6.5px 3.55px,7.5px 2.55px}::-webkit-scrollbar-button:horizontal:start:decrement:hover{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:7.5px 10.55px,6.5px 9.55px,5.5px 8.55px,4.5px 7.55px,3.5px 6.55px,4.5px 5.55px,5.5px 4.55px,6.5px 3.55px,7.5px 2.55px;border-right-color:#1429bd}::-webkit-scrollbar-button:horizontal:start:decrement:active{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:7.5px 10.55px,6.5px 9.55px,5.5px 8.55px,4.5px 7.55px,3.5px 6.55px,4.5px 5.55px,5.5px 4.55px,6.5px 3.55px,7.5px 2.55px;border-right-color:#0d0d0d}::-webkit-scrollbar-button:horizontal:end:increment{border-left-color:#0d0d0d;background-image:linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc);background-position:5px 10.55px,6px 9.55px,7px 8.55px,8px 7.55px,9px 6.55px,8px 5.55px,7px 4.55px,6px 3.55px,5px 2.55px}::-webkit-scrollbar-button:horizontal:end:increment:hover{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:5px 10.55px,6px 9.55px,7px 8.55px,8px 7.55px,9px 6.55px,8px 5.55px,7px 4.55px,6px 3.55px,5px 2.55px;border-left-color:#1429bd}::-webkit-scrollbar-button:horizontal:end:increment:active{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:5px 10.55px,6px 9.55px,7px 8.55px,8px 7.55px,9px 6.55px,8px 5.55px,7px 4.55px,6px 3.55px,5px 2.55px;border-left-color:#0d0d0d}:host [part~=input-wrapper]{border-left-color:inherit}:host [part~=button-toggle]{border-left:1px solid #404040;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:#1429bd}: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(64,64,64,.5)}:host([readonly]) [part~=button-toggle]{color:rgba(204,204,204,.5);cursor:default}:host([focused][readonly]) [part~=button-toggle]{border-left-color:#334bff}' }}));
|
|
7
|
+
dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-combo-box', styles: ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:12px;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:#0d0d0d;text-overflow:ellipsis;border:1px solid #404040;scrollbar-color:#595959 #1a1a1a;scrollbar-width:thin;color:#ccc;scrollbar-color:#595959 #1a1a1a;scrollbar-width:thin;padding:0}:host([disabled]){border:1px solid rgba(64,64,64,.5)}:host([type=number]){padding-right:0}:host([warning]){border:1px solid #7f6400}:host([warning][disabled]){color:rgba(204,204,204,.5);border:1px solid rgba(127,100,0,.5)}:host([error]),:host([error][warning]){border:1px solid #a01c2b}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(204,204,204,.5);border:1px solid rgba(160,28,43,.5)}:host(:not([readonly])[focused]),:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=input]{color:inherit;padding:0;margin:0;flex:1 1 auto;min-width:0;width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis;touch-action:manipulation}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:invalid{box-shadow:none}:host([disabled]) [part=input]{-webkit-user-select:none;-moz-user-select:none;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:#ccc;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(64,64,64,.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:12px;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:#ccc;border-radius:0;text-overflow:ellipsis;border:1px solid #404040;width:100%;background:0 0;border:none;padding:0 8px}:host [part~=input][disabled]{color:rgba(204,204,204,.5);border:1px solid rgba(64,64,64,.5)}:host [part~=input][type=number]{padding-right:0}:host [part~=input][warning]{border:1px solid #7f6400}:host [part~=input][warning][disabled]{color:rgba(204,204,204,.5);border:1px solid rgba(127,100,0,.5)}:host [part~=input][error],:host [part~=input][error][warning]{border:1px solid #a01c2b}:host [part~=input][error][disabled],:host [part~=input][error][warning][disabled]{color:rgba(204,204,204,.5);border:1px solid rgba(160,28,43,.5)}: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}:host [part=selection-badge]{flex-shrink:0}:host([disabled]) [part~=selection-badge]{opacity:.4}:host ::-moz-selection{color:#fff;background-color:#334bff}:host ::selection{color:#fff;background-color:#334bff}:host [part=icon]{color:#ccc;min-width:1em;margin-left:2px;color:inherit}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover){border-color:grey;color:#fff}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover) [part=icon]{color:#6678ff}:host([warning]){border-color:#ffc800}:host([error]),:host([error][warning]){border-color:#f5475b}:host([warning]:hover:not([readonly]):not([focused])){color:#fff;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:#fff;border-color:#faa8b1}:host([error][disabled]),:host([error][readonly]:not([focused])),:host([error][warning][disabled]){border-color:rgba(250,168,177,.5)}:host([disabled]){color:rgba(204,204,204,.5);border-color:rgba(64,64,64,.5);background-color:rgba(13,13,13,.5)}:host([readonly]:not([focused])){border-color:rgba(64,64,64,.5);background-color:rgba(13,13,13,.5)}:host([readonly]:not([focused])) [part=icon]{color:rgba(204,204,204,.5)}:host(:not([readonly])[focused]),:host([focused]),:host([focused][error][warning]){border-color:#334bff;color:#fff}:host([focused]) [part=icon],:host([focused][error][warning]) [part=icon]{color:#6678ff}:host [part=list]{color:#ccc;max-width:var(--list-max-width,300px);max-height:var(--list-max-height);border:1px solid #334bff;margin:2px 0;background-color:#262626}: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 #404040}: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:#595959;border-radius:0;border:1px solid transparent}::-webkit-scrollbar-thumb:hover{background:#1429bd}::-webkit-scrollbar-thumb:active{background:#0f1e8a}::-webkit-scrollbar-track{background:#1a1a1a}::-webkit-scrollbar-thumb:horizontal{background-size:auto 6px;background-repeat:repeat-x;background-image:linear-gradient(to bottom,#595959,#595959);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:horizontal:hover{background-image:linear-gradient(to bottom,#1429bd,#1429bd);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:horizontal:active{background-image:linear-gradient(to bottom,#0f1e8a,#0f1e8a);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:vertical{background-size:6px auto;background-repeat:repeat-y;background-image:linear-gradient(to right,#595959,#595959);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:vertical:hover{background-image:linear-gradient(to right,#1429bd,#1429bd);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:vertical:active{background-image:linear-gradient(to right,#0f1e8a,#0f1e8a);background-color:transparent;background-position:center}::-webkit-scrollbar-track:horizontal{border-top:1px solid #0d0d0d;border-bottom:1px solid #0d0d0d}::-webkit-scrollbar-track:vertical{border-left:1px solid #0d0d0d;border-right:1px solid #0d0d0d}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #1a1a1a;height:16px;width:16px;display:none;border:1px solid #0d0d0d}::-webkit-scrollbar-button:end:decrement,::-webkit-scrollbar-button:start:increment{display:none}::-webkit-scrollbar-button:hover{background-color:#1429bd;border:1px solid #1429bd}::-webkit-scrollbar-button:active{background-color:#0f1e8a;border:1px solid #0d0d0d}::-webkit-scrollbar-button:horizontal{background-size:2px 1px}::-webkit-scrollbar-button:vertical:start:decrement{border-bottom-color:#0d0d0d;background-image:linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc);background-position:10.55px 8px,9.55px 7px,8.55px 6px,7.55px 5px,6.55px 4px,5.55px 5px,4.55px 6px,3.55px 7px,2.55px 8px}::-webkit-scrollbar-button:vertical:start:decrement:hover{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:10.55px 8px,9.55px 7px,8.55px 6px,7.55px 5px,6.55px 4px,5.55px 5px,4.55px 6px,3.55px 7px,2.55px 8px;border-bottom-color:#1429bd}::-webkit-scrollbar-button:vertical:start:decrement:active{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:10.55px 8px,9.55px 7px,8.55px 6px,7.55px 5px,6.55px 4px,5.55px 5px,4.55px 6px,3.55px 7px,2.55px 8px;border-bottom-color:#0d0d0d}::-webkit-scrollbar-button:vertical:end:increment{border-top-color:#0d0d0d;background-image:linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc);background-position:10.55px 4px,9.55px 5px,8.55px 6px,7.55px 7px,6.55px 8px,5.55px 7px,4.55px 6px,3.55px 5px,2.55px 4px}::-webkit-scrollbar-button:vertical:end:increment:hover{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:10.55px 4px,9.55px 5px,8.55px 6px,7.55px 7px,6.55px 8px,5.55px 7px,4.55px 6px,3.55px 5px,2.55px 4px;border-top-color:#1429bd}::-webkit-scrollbar-button:vertical:end:increment:active{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:10.55px 4px,9.55px 5px,8.55px 6px,7.55px 7px,6.55px 8px,5.55px 7px,4.55px 6px,3.55px 5px,2.55px 4px;border-top-color:#0d0d0d}::-webkit-scrollbar-button:horizontal:start:decrement{border-right-color:#0d0d0d;background-image:linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc);background-position:7.5px 10.55px,6.5px 9.55px,5.5px 8.55px,4.5px 7.55px,3.5px 6.55px,4.5px 5.55px,5.5px 4.55px,6.5px 3.55px,7.5px 2.55px}::-webkit-scrollbar-button:horizontal:start:decrement:hover{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:7.5px 10.55px,6.5px 9.55px,5.5px 8.55px,4.5px 7.55px,3.5px 6.55px,4.5px 5.55px,5.5px 4.55px,6.5px 3.55px,7.5px 2.55px;border-right-color:#1429bd}::-webkit-scrollbar-button:horizontal:start:decrement:active{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:7.5px 10.55px,6.5px 9.55px,5.5px 8.55px,4.5px 7.55px,3.5px 6.55px,4.5px 5.55px,5.5px 4.55px,6.5px 3.55px,7.5px 2.55px;border-right-color:#0d0d0d}::-webkit-scrollbar-button:horizontal:end:increment{border-left-color:#0d0d0d;background-image:linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc);background-position:5px 10.55px,6px 9.55px,7px 8.55px,8px 7.55px,9px 6.55px,8px 5.55px,7px 4.55px,6px 3.55px,5px 2.55px}::-webkit-scrollbar-button:horizontal:end:increment:hover{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:5px 10.55px,6px 9.55px,7px 8.55px,8px 7.55px,9px 6.55px,8px 5.55px,7px 4.55px,6px 3.55px,5px 2.55px;border-left-color:#1429bd}::-webkit-scrollbar-button:horizontal:end:increment:active{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:5px 10.55px,6px 9.55px,7px 8.55px,8px 7.55px,9px 6.55px,8px 5.55px,7px 4.55px,6px 3.55px,5px 2.55px;border-left-color:#0d0d0d}:host [part~=input-wrapper]{border-left-color:inherit}:host [part~=button-toggle]{border-left:1px solid #404040;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:#1429bd}: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~=input]{border:none}:host([disabled]) [part~=button-toggle],:host([readonly]) [part~=button-toggle]{border-left-color:rgba(64,64,64,.5)}:host([readonly]) [part~=button-toggle]{color:rgba(204,204,204,.5);cursor:default}:host([focused][readonly]) [part~=button-toggle]{border-left-color:#334bff}:host [part=list] ef-list-item:not(:first-child):not([type=divider]){box-shadow:0 -1px 0 #404040}' }}));
|
|
@@ -4,4 +4,4 @@ import '@refinitiv-ui/elements/counter/themes/halo/light';
|
|
|
4
4
|
import '@refinitiv-ui/elements/item/themes/halo/light';
|
|
5
5
|
import '@refinitiv-ui/elements/icon/themes/halo/light';
|
|
6
6
|
import '@refinitiv-ui/elements/tooltip/themes/halo/light';
|
|
7
|
-
dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-combo-box', styles: ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:12px;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-color:#999 #f2f2f2;scrollbar-width:thin;color:#404040;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(:not([readonly])[focused]),:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=input]{color:inherit;padding:0;margin:0;flex:1 1 auto;min-width:0;width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis;touch-action:manipulation}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:invalid{box-shadow:none}:host([disabled]) [part=input]{-webkit-user-select:none;-moz-user-select:none;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:12px;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;padding:0 8px}: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~=button]{display:flex;justify-content:center;align-items:center;flex:none;height:100%;width:24px}:host [part~=list]{display:flex;flex-flow:column nowrap}:host [part=selection-badge]{flex-shrink:0}:host([disabled]) [part~=selection-badge]{opacity:.4}:host ::-moz-selection{color:#fff;background-color:#334bff}:host ::selection{color:#fff;background-color:#334bff}:host [part=icon]{min-width:1em;margin-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:#1429bd}::-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,#1429bd,#1429bd);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,#1429bd,#1429bd);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:#1429bd;border:1px solid #1429bd}::-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:#1429bd}::-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:#1429bd}::-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:#1429bd}::-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:#1429bd}::-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:#1429bd}: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}' }}));
|
|
7
|
+
dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-combo-box', styles: ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:12px;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-color:#999 #f2f2f2;scrollbar-width:thin;color:#404040;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(:not([readonly])[focused]),:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=input]{color:inherit;padding:0;margin:0;flex:1 1 auto;min-width:0;width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis;touch-action:manipulation}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:invalid{box-shadow:none}:host([disabled]) [part=input]{-webkit-user-select:none;-moz-user-select:none;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:12px;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;padding:0 8px}: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~=button]{display:flex;justify-content:center;align-items:center;flex:none;height:100%;width:24px}:host [part~=list]{display:flex;flex-flow:column nowrap}:host [part=selection-badge]{flex-shrink:0}:host([disabled]) [part~=selection-badge]{opacity:.4}:host ::-moz-selection{color:#fff;background-color:#334bff}:host ::selection{color:#fff;background-color:#334bff}:host [part=icon]{min-width:1em;margin-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:#1429bd}::-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,#1429bd,#1429bd);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,#1429bd,#1429bd);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:#1429bd;border:1px solid #1429bd}::-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:#1429bd}::-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:#1429bd}::-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:#1429bd}::-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:#1429bd}::-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:#1429bd}: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~=input]{border:none}: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] ef-list-item:not(:first-child):not([type=divider]){box-shadow:0 -1px 0 #d9d9d9}' }}));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-icon', styles: ':host{--cdn-sprite-prefix:\'https://cdn.refinitiv.
|
|
1
|
+
dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-icon', styles: ':host{--cdn-sprite-prefix:\'https://cdn.refinitiv.net/public/libs/elf/assets/elf-theme-halo/resources/sprites/icons.svg\';--cdn-sprite-prefix:\'https://cdn.refinitiv.net/public/libs/elf/assets/elf-theme-halo/resources/sprites/icons.svg\';font-size:16px}:host circle[fill]:not([fill=none]),:host ellipse[fill]:not([fill=none]),:host g[fill]:not([fill=none]),:host line[fill]:not([fill=none]),:host path[fill]:not([fill=none]),:host polygon[fill]:not([fill=none]),:host polyline[fill]:not([fill=none]),:host rect[fill]:not([fill=none]){fill:currentColor}:host circle[stroke]:not([stroke=none]),:host ellipse[stroke]:not([stroke=none]),:host g[stroke]:not([stroke=none]),:host line[stroke]:not([stroke=none]),:host path[stroke]:not([stroke=none]),:host polygon[stroke]:not([stroke=none]),:host polyline[stroke]:not([stroke=none]),:host rect[stroke]:not([stroke=none]){stroke:currentColor}:host([icon=powerpoint]){color:#ff3535}:host([icon=excel]){color:#00a626}:host([icon=pdf]){color:#ff3535}:host([icon=word]){color:#0094c4}:host([icon=twitter]){color:#1da1f2}:host([focused=visible]){outline:#334bff solid 1px}:host([icon]) circle,:host([icon]) ellipse,:host([icon]) g,:host([icon]) line,:host([icon]) path,:host([icon]) polygon,:host([icon]) polyline,:host([icon]) rect{vector-effect:non-scaling-stroke}' }}));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-icon', styles: ':host{--cdn-sprite-prefix:\'https://cdn.refinitiv.
|
|
1
|
+
dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-icon', styles: ':host{--cdn-sprite-prefix:\'https://cdn.refinitiv.net/public/libs/elf/assets/elf-theme-halo/resources/sprites/icons.svg\';--cdn-sprite-prefix:\'https://cdn.refinitiv.net/public/libs/elf/assets/elf-theme-halo/resources/sprites/icons.svg\';font-size:16px}:host circle[fill]:not([fill=none]),:host ellipse[fill]:not([fill=none]),:host g[fill]:not([fill=none]),:host line[fill]:not([fill=none]),:host path[fill]:not([fill=none]),:host polygon[fill]:not([fill=none]),:host polyline[fill]:not([fill=none]),:host rect[fill]:not([fill=none]){fill:currentColor}:host circle[stroke]:not([stroke=none]),:host ellipse[stroke]:not([stroke=none]),:host g[stroke]:not([stroke=none]),:host line[stroke]:not([stroke=none]),:host path[stroke]:not([stroke=none]),:host polygon[stroke]:not([stroke=none]),:host polyline[stroke]:not([stroke=none]),:host rect[stroke]:not([stroke=none]){stroke:currentColor}:host([icon=powerpoint]){color:#ff3535}:host([icon=excel]){color:#00a626}:host([icon=pdf]){color:#ff3535}:host([icon=word]){color:#0094c4}:host([icon=twitter]){color:#1da1f2}:host([focused=visible]){outline:#334bff solid 1px}:host([icon]) circle,:host([icon]) ellipse,:host([icon]) g,:host([icon]) line,:host([icon]) path,:host([icon]) polygon,:host([icon]) polyline,:host([icon]) rect{vector-effect:non-scaling-stroke}' }}));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-icon', styles: ':host{--cdn-sprite-prefix:\'https://cdn.refinitiv.
|
|
1
|
+
dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-icon', styles: ':host{--cdn-sprite-prefix:\'https://cdn.refinitiv.net/public/libs/elf/assets/elf-theme-halo/resources/sprites/icons.svg\';--cdn-sprite-prefix:\'https://cdn.refinitiv.net/public/libs/elf/assets/elf-theme-solar/resources/sprites/icons.svg\'}:host circle[fill]:not([fill=none]),:host ellipse[fill]:not([fill=none]),:host g[fill]:not([fill=none]),:host line[fill]:not([fill=none]),:host path[fill]:not([fill=none]),:host polygon[fill]:not([fill=none]),:host polyline[fill]:not([fill=none]),:host rect[fill]:not([fill=none]){fill:currentColor}:host circle[stroke]:not([stroke=none]),:host ellipse[stroke]:not([stroke=none]),:host g[stroke]:not([stroke=none]),:host line[stroke]:not([stroke=none]),:host path[stroke]:not([stroke=none]),:host polygon[stroke]:not([stroke=none]),:host polyline[stroke]:not([stroke=none]),:host rect[stroke]:not([stroke=none]){stroke:currentColor}:host([icon=powerpoint]){color:#ff3535}:host([icon=excel]){color:#00a626}:host([icon=pdf]){color:#ff3535}:host([icon=word]){color:#0094c4}:host([icon=twitter]){color:#1da1f2}:host([focused=visible]){outline:#f93 solid 1px}' }}));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-icon', styles: ':host{--cdn-sprite-prefix:\'https://cdn.refinitiv.
|
|
1
|
+
dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-icon', styles: ':host{--cdn-sprite-prefix:\'https://cdn.refinitiv.net/public/libs/elf/assets/elf-theme-halo/resources/sprites/icons.svg\';--cdn-sprite-prefix:\'https://cdn.refinitiv.net/public/libs/elf/assets/elf-theme-solar/resources/sprites/icons.svg\'}:host circle[fill]:not([fill=none]),:host ellipse[fill]:not([fill=none]),:host g[fill]:not([fill=none]),:host line[fill]:not([fill=none]),:host path[fill]:not([fill=none]),:host polygon[fill]:not([fill=none]),:host polyline[fill]:not([fill=none]),:host rect[fill]:not([fill=none]){fill:currentColor}:host circle[stroke]:not([stroke=none]),:host ellipse[stroke]:not([stroke=none]),:host g[stroke]:not([stroke=none]),:host line[stroke]:not([stroke=none]),:host path[stroke]:not([stroke=none]),:host polygon[stroke]:not([stroke=none]),:host polyline[stroke]:not([stroke=none]),:host rect[stroke]:not([stroke=none]){stroke:currentColor}:host([icon=powerpoint]){color:#ff3535}:host([icon=excel]){color:#00a626}:host([icon=pdf]){color:#ff3535}:host([icon=word]){color:#0094c4}:host([icon=twitter]){color:#1da1f2}:host([focused=visible]){outline:#ffb266 solid 1px}' }}));
|
|
@@ -1,21 +1,12 @@
|
|
|
1
1
|
import type { HSLColor, RGBColor } from '@refinitiv-ui/utils/color.js';
|
|
2
|
-
import type {
|
|
3
|
-
type
|
|
4
|
-
type
|
|
5
|
-
type SeriesData = LineData[] | BarData[] | HistogramData[];
|
|
2
|
+
import type { ChartOptions, DeepPartial, ISeriesApi, SeriesDataItemTypeMap, SeriesOptionsMap, SeriesType } from 'lightweight-charts';
|
|
3
|
+
type UnionToIntersection<U> = (U extends unknown ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
|
|
4
|
+
type SeriesOptions = UnionToIntersection<SeriesOptionsMap[keyof SeriesOptionsMap]>;
|
|
6
5
|
type SeriesList = ISeriesApi<SeriesType>;
|
|
7
|
-
type SeriesDataItem =
|
|
6
|
+
type SeriesDataItem = SeriesDataItemTypeMap[keyof SeriesDataItemTypeMap];
|
|
8
7
|
type RowLegend = NodeListOf<Element> | HTMLElement | null;
|
|
9
8
|
type ColorToStringFunction = (param: string, ...arg: (string | number | undefined)[]) => RGBColor | HSLColor | null;
|
|
10
|
-
|
|
11
|
-
vertical = "vertical",
|
|
12
|
-
horizontal = "horizontal"
|
|
13
|
-
}
|
|
14
|
-
interface Time {
|
|
15
|
-
day: number;
|
|
16
|
-
month: number;
|
|
17
|
-
year: number;
|
|
18
|
-
}
|
|
9
|
+
type LegendStyle = 'vertical' | 'horizontal';
|
|
19
10
|
interface InteractiveChartConfig {
|
|
20
11
|
series: InteractiveChartSeries[];
|
|
21
12
|
options?: DeepPartial<ChartOptions>;
|
|
@@ -40,7 +31,7 @@ interface InteractiveChartSeries {
|
|
|
40
31
|
symbolName?: string;
|
|
41
32
|
legendVisible?: boolean;
|
|
42
33
|
legendPriceFormatter?: (price: string | number) => string | number;
|
|
43
|
-
data:
|
|
44
|
-
seriesOptions?:
|
|
34
|
+
data: SeriesDataItem[];
|
|
35
|
+
seriesOptions?: SeriesOptions;
|
|
45
36
|
}
|
|
46
|
-
export { InteractiveChartConfig, InteractiveChartSeries,
|
|
37
|
+
export { InteractiveChartConfig, InteractiveChartSeries, Theme, RowLegend, SeriesList, SeriesDataItem, SeriesOptions, ColorToStringFunction, LegendStyle };
|
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
import { JSXInterface } from '../jsx';
|
|
2
|
-
import { IChartApi, MouseEventParams } from 'lightweight-charts';
|
|
3
2
|
import { CSSResultGroup, ElementSize, PropertyValues, ResponsiveElement, TemplateResult } from '@refinitiv-ui/core';
|
|
4
3
|
import '../tooltip/index.js';
|
|
5
|
-
import { LegendStyle } from './helpers/types.js';
|
|
6
|
-
import type {
|
|
7
|
-
export type { InteractiveChartConfig, InteractiveChartSeries,
|
|
4
|
+
import type { InteractiveChartConfig, InteractiveChartSeries, LegendStyle, RowLegend, SeriesDataItem, SeriesList, SeriesOptions, Theme } from './helpers/types.js';
|
|
5
|
+
import type { IChartApi, MouseEventParams } from 'lightweight-charts';
|
|
6
|
+
export type { InteractiveChartConfig, InteractiveChartSeries, Theme, SeriesOptions, SeriesDataItem };
|
|
8
7
|
/**
|
|
9
8
|
* A charting component that allows you to create several use cases of financial chart.
|
|
10
9
|
* By lightweight-charts library.
|
|
@@ -247,7 +246,7 @@ export declare class InteractiveChart extends ResponsiveElement {
|
|
|
247
246
|
* @param index index of series
|
|
248
247
|
* @returns {void}
|
|
249
248
|
*/
|
|
250
|
-
protected renderTextLegend(chartType: string, rowLegendElem: RowLegend, value: SeriesDataItem |
|
|
249
|
+
protected renderTextLegend(chartType: string, rowLegendElem: RowLegend, value: SeriesDataItem | string, priceColor: string, index: number): void;
|
|
251
250
|
/**
|
|
252
251
|
* Create span OHLC in row legend used by several series types such as bars or candlesticks
|
|
253
252
|
* @param rowLegend Legend element
|
|
@@ -9,7 +9,6 @@ import { color as parseColor } from '@refinitiv-ui/utils/color.js';
|
|
|
9
9
|
import '../tooltip/index.js';
|
|
10
10
|
import { VERSION } from '../version.js';
|
|
11
11
|
import { merge } from './helpers/merge.js';
|
|
12
|
-
import { LegendStyle } from './helpers/types.js';
|
|
13
12
|
const NOT_AVAILABLE_DATA = 'N/A';
|
|
14
13
|
const NO_DATA_POINT = '--';
|
|
15
14
|
/**
|
|
@@ -138,7 +137,7 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
|
|
|
138
137
|
}
|
|
139
138
|
}
|
|
140
139
|
get legendStyle() {
|
|
141
|
-
return this._legendStyle ||
|
|
140
|
+
return this._legendStyle || 'vertical';
|
|
142
141
|
}
|
|
143
142
|
/**
|
|
144
143
|
* @returns return config of property component
|
|
@@ -488,8 +487,7 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
|
|
|
488
487
|
}
|
|
489
488
|
// Update config seriesOptions not have seriesOptions
|
|
490
489
|
if (!this.internalConfig.series[index].seriesOptions) {
|
|
491
|
-
this.internalConfig.series[index].seriesOptions =
|
|
492
|
-
seriesThemeOptions;
|
|
490
|
+
this.internalConfig.series[index].seriesOptions = seriesThemeOptions;
|
|
493
491
|
}
|
|
494
492
|
else {
|
|
495
493
|
merge(seriesOptions, seriesThemeOptions);
|
|
@@ -650,8 +648,7 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
|
|
|
650
648
|
this.hasDataPoint = true;
|
|
651
649
|
const lastData = dataSet[dataSet.length - 1];
|
|
652
650
|
const priceColor = this.getColorInSeries(lastData, chartType, idx);
|
|
653
|
-
|
|
654
|
-
this.renderTextLegend(chartType, rowLegendElem, lastDataValue, priceColor, idx);
|
|
651
|
+
this.renderTextLegend(chartType, rowLegendElem, lastData, priceColor, idx);
|
|
655
652
|
}
|
|
656
653
|
else {
|
|
657
654
|
const span = document.createElement('span');
|
|
@@ -670,22 +667,7 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
|
|
|
670
667
|
let priceColor = '';
|
|
671
668
|
// When have price on event moved on the crosshair
|
|
672
669
|
if (eventMove?.seriesData.get(this.seriesList[idx]) && eventMove.time) {
|
|
673
|
-
|
|
674
|
-
switch (chartType) {
|
|
675
|
-
case 'line':
|
|
676
|
-
case 'area':
|
|
677
|
-
case 'volume':
|
|
678
|
-
value = data.value;
|
|
679
|
-
break;
|
|
680
|
-
case 'bar':
|
|
681
|
-
case 'candlestick': {
|
|
682
|
-
const { open, high, low, close } = data;
|
|
683
|
-
value = { open, high, low, close };
|
|
684
|
-
break;
|
|
685
|
-
}
|
|
686
|
-
default:
|
|
687
|
-
break;
|
|
688
|
-
}
|
|
670
|
+
value = eventMove.seriesData.get(this.seriesList[idx]);
|
|
689
671
|
priceColor = this.getColorInSeries(eventMove, chartType, idx);
|
|
690
672
|
this.isCrosshairVisible = true;
|
|
691
673
|
this.hasDataPoint = true;
|
|
@@ -699,18 +681,15 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
|
|
|
699
681
|
// Get latest value when mouse move out of scope
|
|
700
682
|
else {
|
|
701
683
|
const latestData = dataSet[dataSet.length - 1];
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
? latestData
|
|
707
|
-
: latestData.value;
|
|
708
|
-
this.isCrosshairVisible = false;
|
|
709
|
-
this.hasDataPoint = true;
|
|
710
|
-
}
|
|
684
|
+
priceColor = this.getColorInSeries(latestData, chartType, idx);
|
|
685
|
+
value = latestData;
|
|
686
|
+
this.isCrosshairVisible = false;
|
|
687
|
+
this.hasDataPoint = true;
|
|
711
688
|
}
|
|
712
689
|
// Render legend by series type
|
|
713
|
-
|
|
690
|
+
if (value) {
|
|
691
|
+
this.renderTextLegend(chartType, rowLegend, value, priceColor, idx);
|
|
692
|
+
}
|
|
714
693
|
}
|
|
715
694
|
/* c8 ignore stop */
|
|
716
695
|
}
|
|
@@ -744,7 +723,8 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
|
|
|
744
723
|
}
|
|
745
724
|
}
|
|
746
725
|
else {
|
|
747
|
-
|
|
726
|
+
const price = value.value ?? value;
|
|
727
|
+
this.createTextPrice(rowLegendElem, price, priceColor, index);
|
|
748
728
|
}
|
|
749
729
|
}
|
|
750
730
|
/**
|
|
@@ -775,6 +755,7 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
|
|
|
775
755
|
: null;
|
|
776
756
|
if (formatter) {
|
|
777
757
|
rowData = {
|
|
758
|
+
time: rowData.time,
|
|
778
759
|
open: formatter(rowData.open),
|
|
779
760
|
high: formatter(rowData.high),
|
|
780
761
|
low: formatter(rowData.low),
|
|
@@ -976,10 +957,9 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
|
|
|
976
957
|
const dataSet = series.data || [];
|
|
977
958
|
const latestData = dataSet[dataSet.length - 1];
|
|
978
959
|
if (latestData) {
|
|
979
|
-
const value = chartType === 'bar' || chartType === 'candlestick' ? latestData : latestData.value; // latestData
|
|
980
960
|
const priceColor = this.getColorInSeries(latestData, chartType, idx);
|
|
981
961
|
// Render legend by series type
|
|
982
|
-
this.renderTextLegend(chartType, this.rowLegend,
|
|
962
|
+
this.renderTextLegend(chartType, this.rowLegend, latestData, priceColor, idx);
|
|
983
963
|
}
|
|
984
964
|
}
|
|
985
965
|
}
|
|
@@ -174,6 +174,18 @@
|
|
|
174
174
|
{
|
|
175
175
|
"name": "to-changed",
|
|
176
176
|
"description": "Fired when the user changes to's value. The event is not triggered if `to` property is changed programmatically."
|
|
177
|
+
},
|
|
178
|
+
{
|
|
179
|
+
"name": "input",
|
|
180
|
+
"description": "Fired when the user inputs a value by interacting with the slider or updating its input field."
|
|
181
|
+
},
|
|
182
|
+
{
|
|
183
|
+
"name": "from-input",
|
|
184
|
+
"description": "Fired when the user inputs from's value by interacting with the slider or updating its input field."
|
|
185
|
+
},
|
|
186
|
+
{
|
|
187
|
+
"name": "to-input",
|
|
188
|
+
"description": "Fired when the user inputs to's value by interacting with the slider or updating its input field."
|
|
177
189
|
}
|
|
178
190
|
]
|
|
179
191
|
}
|
|
@@ -24,5 +24,8 @@ Allows users to make selections from a range of values
|
|
|
24
24
|
| Event | Description |
|
|
25
25
|
|-----------------|--------------------------------------------------|
|
|
26
26
|
| `from-changed` | Fired when the user changes from's value. The event is not triggered if `from` property is changed programmatically. |
|
|
27
|
+
| `from-input` | Fired when the user inputs from's value by interacting with the slider or updating its input field. |
|
|
28
|
+
| `input` | Fired when the user inputs a value by interacting with the slider or updating its input field. |
|
|
27
29
|
| `to-changed` | Fired when the user changes to's value. The event is not triggered if `to` property is changed programmatically. |
|
|
30
|
+
| `to-input` | Fired when the user inputs to's value by interacting with the slider or updating its input field. |
|
|
28
31
|
| `value-changed` | Fired when the user commits a value change. The event is not triggered if `value` property is changed programmatically. |
|
package/lib/slider/index.d.ts
CHANGED
|
@@ -18,6 +18,9 @@ import '../number-field/index.js';
|
|
|
18
18
|
* @fires value-changed - Fired when the user commits a value change. The event is not triggered if `value` property is changed programmatically.
|
|
19
19
|
* @fires from-changed - Fired when the user changes from's value. The event is not triggered if `from` property is changed programmatically.
|
|
20
20
|
* @fires to-changed - Fired when the user changes to's value. The event is not triggered if `to` property is changed programmatically.
|
|
21
|
+
* @fires input - Fired when the user inputs a value by interacting with the slider or updating its input field.
|
|
22
|
+
* @fires from-input - Fired when the user inputs from's value by interacting with the slider or updating its input field.
|
|
23
|
+
* @fires to-input - Fired when the user inputs to's value by interacting with the slider or updating its input field.
|
|
21
24
|
*/
|
|
22
25
|
export declare class Slider extends ControlElement {
|
|
23
26
|
/**
|
|
@@ -37,6 +40,9 @@ export declare class Slider extends ControlElement {
|
|
|
37
40
|
private valuePrevious;
|
|
38
41
|
private fromPrevious;
|
|
39
42
|
private toPrevious;
|
|
43
|
+
private valuePreviousInput;
|
|
44
|
+
private fromPreviousInput;
|
|
45
|
+
private toPreviousInput;
|
|
40
46
|
/**
|
|
41
47
|
* Specified size of increment or decrement jump between value.
|
|
42
48
|
*/
|
|
@@ -270,6 +276,12 @@ export declare class Slider extends ControlElement {
|
|
|
270
276
|
* @returns {void}
|
|
271
277
|
*/
|
|
272
278
|
private onNumberFieldBlur;
|
|
279
|
+
/**
|
|
280
|
+
* On number-field input
|
|
281
|
+
* @param event input event
|
|
282
|
+
* @returns {void}
|
|
283
|
+
*/
|
|
284
|
+
private onNumberFieldInput;
|
|
273
285
|
/**
|
|
274
286
|
* On number-field keydown
|
|
275
287
|
* @param event keyboard event
|
|
@@ -288,6 +300,11 @@ export declare class Slider extends ControlElement {
|
|
|
288
300
|
* @returns {void}
|
|
289
301
|
*/
|
|
290
302
|
private dispatchDataChangedEvent;
|
|
303
|
+
/**
|
|
304
|
+
* Dispatch data {input, from-input, to-input} changing event
|
|
305
|
+
* @returns {void}
|
|
306
|
+
*/
|
|
307
|
+
private dispatchDataInputEvent;
|
|
291
308
|
/**
|
|
292
309
|
* Start dragging event on slider
|
|
293
310
|
* @param event event dragstart
|
package/lib/slider/index.js
CHANGED
|
@@ -27,6 +27,9 @@ import { clamp, countDecimalPlace, isDecimalNumber, preventDefault } from './uti
|
|
|
27
27
|
* @fires value-changed - Fired when the user commits a value change. The event is not triggered if `value` property is changed programmatically.
|
|
28
28
|
* @fires from-changed - Fired when the user changes from's value. The event is not triggered if `from` property is changed programmatically.
|
|
29
29
|
* @fires to-changed - Fired when the user changes to's value. The event is not triggered if `to` property is changed programmatically.
|
|
30
|
+
* @fires input - Fired when the user inputs a value by interacting with the slider or updating its input field.
|
|
31
|
+
* @fires from-input - Fired when the user inputs from's value by interacting with the slider or updating its input field.
|
|
32
|
+
* @fires to-input - Fired when the user inputs to's value by interacting with the slider or updating its input field.
|
|
30
33
|
*/
|
|
31
34
|
let Slider = class Slider extends ControlElement {
|
|
32
35
|
/**
|
|
@@ -227,6 +230,9 @@ let Slider = class Slider extends ControlElement {
|
|
|
227
230
|
this.valuePrevious = '';
|
|
228
231
|
this.fromPrevious = '';
|
|
229
232
|
this.toPrevious = '';
|
|
233
|
+
this.valuePreviousInput = ''; // dynamically accessed
|
|
234
|
+
this.fromPreviousInput = ''; // dynamically accessed
|
|
235
|
+
this.toPreviousInput = ''; // dynamically accessed
|
|
230
236
|
/**
|
|
231
237
|
* Specified size of increment or decrement jump between value.
|
|
232
238
|
*/
|
|
@@ -649,6 +655,21 @@ let Slider = class Slider extends ControlElement {
|
|
|
649
655
|
}
|
|
650
656
|
event.preventDefault();
|
|
651
657
|
}
|
|
658
|
+
/**
|
|
659
|
+
* On number-field input
|
|
660
|
+
* @param event input event
|
|
661
|
+
* @returns {void}
|
|
662
|
+
*/
|
|
663
|
+
onNumberFieldInput(event) {
|
|
664
|
+
if (this.readonly) {
|
|
665
|
+
return;
|
|
666
|
+
}
|
|
667
|
+
const { value, name } = event.target;
|
|
668
|
+
const currentData = name;
|
|
669
|
+
this.notifyPropertyInput(currentData, value);
|
|
670
|
+
event.preventDefault();
|
|
671
|
+
event.stopPropagation();
|
|
672
|
+
}
|
|
652
673
|
/**
|
|
653
674
|
* On number-field keydown
|
|
654
675
|
* @param event keyboard event
|
|
@@ -699,6 +720,20 @@ let Slider = class Slider extends ControlElement {
|
|
|
699
720
|
this[previousData] = this[currentData];
|
|
700
721
|
}
|
|
701
722
|
}
|
|
723
|
+
/**
|
|
724
|
+
* Dispatch data {input, from-input, to-input} changing event
|
|
725
|
+
* @returns {void}
|
|
726
|
+
*/
|
|
727
|
+
dispatchDataInputEvent() {
|
|
728
|
+
const name = this.changedThumb?.getAttribute('name') || '';
|
|
729
|
+
const currentData = name;
|
|
730
|
+
const previousDataInput = `${name}PreviousInput`;
|
|
731
|
+
// Dispatch event only when changing the input value
|
|
732
|
+
if (this[previousDataInput] !== this[currentData]) {
|
|
733
|
+
this.notifyPropertyInput(name, this[currentData]);
|
|
734
|
+
this[previousDataInput] = this[currentData];
|
|
735
|
+
}
|
|
736
|
+
}
|
|
702
737
|
/**
|
|
703
738
|
* Start dragging event on slider
|
|
704
739
|
* @param event event dragstart
|
|
@@ -714,14 +749,17 @@ let Slider = class Slider extends ControlElement {
|
|
|
714
749
|
const distanceTo = Math.abs(relativeMousePosition - this.toNumber);
|
|
715
750
|
if (distanceFrom < distanceTo) {
|
|
716
751
|
this.changedThumb = this.fromThumbRef.value;
|
|
752
|
+
this.fromPreviousInput = this.from;
|
|
717
753
|
}
|
|
718
754
|
else if (distanceFrom > distanceTo) {
|
|
719
755
|
this.changedThumb = this.toThumbRef.value;
|
|
756
|
+
this.toPreviousInput = this.to;
|
|
720
757
|
}
|
|
721
758
|
// When from === to, use latest value of changedThumb and z-index will determine thumb on top
|
|
722
759
|
}
|
|
723
760
|
else {
|
|
724
761
|
this.changedThumb = this.valueThumbRef.value;
|
|
762
|
+
this.valuePreviousInput = this.value;
|
|
725
763
|
}
|
|
726
764
|
this.onDrag(event);
|
|
727
765
|
if (event.changedTouches) {
|
|
@@ -772,6 +810,7 @@ let Slider = class Slider extends ControlElement {
|
|
|
772
810
|
const newThumbPosition = this.stepRange !== 0 ? nearestValue : thumbPosition;
|
|
773
811
|
const value = this.getValueFromPosition(newThumbPosition);
|
|
774
812
|
this.persistChangedData(value);
|
|
813
|
+
this.dispatchDataInputEvent();
|
|
775
814
|
}
|
|
776
815
|
/**
|
|
777
816
|
* Saves changed data into correct field
|
|
@@ -1179,6 +1218,8 @@ let Slider = class Slider extends ControlElement {
|
|
|
1179
1218
|
aria-hidden="true"
|
|
1180
1219
|
@blur=${this.onNumberFieldBlur}
|
|
1181
1220
|
@keydown=${this.onNumberFieldKeyDown}
|
|
1221
|
+
@input=${this.onNumberFieldInput}
|
|
1222
|
+
@value-changed=${this.onNumberFieldInput}
|
|
1182
1223
|
part="input"
|
|
1183
1224
|
name="${name}"
|
|
1184
1225
|
no-spinner
|
|
@@ -17,6 +17,12 @@
|
|
|
17
17
|
"type": "boolean",
|
|
18
18
|
"default": "false"
|
|
19
19
|
},
|
|
20
|
+
{
|
|
21
|
+
"name": "max",
|
|
22
|
+
"description": "Set maximum number of selected items",
|
|
23
|
+
"type": "string | null",
|
|
24
|
+
"default": "\"\""
|
|
25
|
+
},
|
|
20
26
|
{
|
|
21
27
|
"name": "opened",
|
|
22
28
|
"description": "Set dropdown to open",
|
|
@@ -63,6 +69,13 @@
|
|
|
63
69
|
"type": "TreeSelectRenderer",
|
|
64
70
|
"default": "\"new TreeSelectRenderer(this)\""
|
|
65
71
|
},
|
|
72
|
+
{
|
|
73
|
+
"name": "max",
|
|
74
|
+
"attribute": "max",
|
|
75
|
+
"description": "Set maximum number of selected items",
|
|
76
|
+
"type": "string | null",
|
|
77
|
+
"default": "\"\""
|
|
78
|
+
},
|
|
66
79
|
{
|
|
67
80
|
"name": "opened",
|
|
68
81
|
"attribute": "opened",
|
|
@@ -8,6 +8,7 @@ Dropdown control that allows selection from the tree list
|
|
|
8
8
|
|---------------|---------------|----------------------|--------------------------------|--------------------------------------------------|
|
|
9
9
|
| `data` | | `TreeSelectData[]` | [] | Data object to be used for creating tree |
|
|
10
10
|
| `filterCount` | | `number` | 0 | Tracks the number of filter matches<br /><br />Only needed if internal filtering is unused |
|
|
11
|
+
| `max` | `max` | `string \| null` | "" | Set maximum number of selected items |
|
|
11
12
|
| `noRelation` | `no-relation` | `boolean` | false | Breaks the relationship when multiple<br />selection mode is enabled |
|
|
12
13
|
| `opened` | `opened` | `boolean` | false | Set dropdown to open |
|
|
13
14
|
| `placeholder` | `placeholder` | `string` | "" | Set placeholder text |
|