@refinitiv-ui/elements 6.9.0-next.0 → 6.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.
- package/CHANGELOG.md +218 -380
- package/LICENSE +1 -1
- package/README.md +12 -10
- package/lib/accordion/index.d.ts +1 -1
- package/lib/accordion/index.js +4 -7
- package/lib/accordion/themes/halo/dark/index.js +0 -1
- package/lib/accordion/themes/halo/light/index.js +0 -1
- package/lib/accordion/themes/solar/charcoal/index.js +0 -1
- package/lib/accordion/themes/solar/pearl/index.js +0 -1
- package/lib/appstate-bar/index.d.ts +2 -2
- package/lib/appstate-bar/index.js +10 -4
- package/lib/appstate-bar/themes/halo/dark/index.js +0 -1
- package/lib/appstate-bar/themes/halo/light/index.js +0 -1
- package/lib/appstate-bar/themes/solar/charcoal/index.js +0 -1
- package/lib/appstate-bar/themes/solar/pearl/index.js +0 -1
- package/lib/autosuggest/index.d.ts +7 -7
- package/lib/autosuggest/index.js +89 -84
- package/lib/autosuggest/themes/halo/dark/index.js +0 -1
- package/lib/autosuggest/themes/halo/light/index.js +0 -1
- package/lib/autosuggest/themes/solar/charcoal/index.js +1 -2
- package/lib/autosuggest/themes/solar/pearl/index.js +1 -2
- package/lib/button/index.js +7 -10
- package/lib/button/themes/halo/dark/index.js +0 -1
- package/lib/button/themes/halo/light/index.js +0 -1
- package/lib/button/themes/solar/charcoal/index.js +0 -1
- package/lib/button/themes/solar/pearl/index.js +0 -1
- package/lib/button-bar/index.d.ts +1 -1
- package/lib/button-bar/index.js +12 -12
- package/lib/button-bar/themes/halo/dark/index.js +0 -1
- package/lib/button-bar/themes/halo/light/index.js +0 -1
- package/lib/button-bar/themes/solar/charcoal/index.js +0 -1
- package/lib/button-bar/themes/solar/pearl/index.js +0 -1
- package/lib/calendar/index.d.ts +39 -39
- package/lib/calendar/index.js +165 -132
- package/lib/calendar/themes/halo/dark/index.js +0 -1
- package/lib/calendar/themes/halo/light/index.js +0 -1
- package/lib/calendar/themes/solar/charcoal/index.js +0 -1
- package/lib/calendar/themes/solar/pearl/index.js +0 -1
- package/lib/calendar/utils.js +2 -2
- package/lib/canvas/index.d.ts +1 -1
- package/lib/canvas/index.js +2 -4
- package/lib/canvas/themes/halo/dark/index.js +0 -1
- package/lib/canvas/themes/halo/light/index.js +0 -1
- package/lib/canvas/themes/solar/charcoal/index.js +0 -1
- package/lib/canvas/themes/solar/pearl/index.js +0 -1
- package/lib/card/helpers/types.d.ts +2 -2
- package/lib/card/index.d.ts +5 -5
- package/lib/card/index.js +34 -28
- package/lib/card/themes/halo/dark/index.js +0 -1
- package/lib/card/themes/halo/light/index.js +0 -1
- package/lib/card/themes/solar/charcoal/index.js +0 -1
- package/lib/card/themes/solar/pearl/index.js +0 -1
- package/lib/chart/helpers/legend.js +10 -8
- package/lib/chart/index.d.ts +3 -3
- package/lib/chart/index.js +17 -17
- package/lib/chart/plugins/doughnut-center-label.js +7 -6
- package/lib/chart/themes/halo/dark/index.js +0 -1
- package/lib/chart/themes/halo/light/index.js +0 -1
- package/lib/chart/themes/solar/charcoal/index.js +0 -1
- package/lib/chart/themes/solar/pearl/index.js +0 -1
- package/lib/checkbox/index.d.ts +1 -1
- package/lib/checkbox/index.js +12 -13
- package/lib/checkbox/themes/halo/dark/index.js +0 -1
- package/lib/checkbox/themes/halo/light/index.js +0 -1
- package/lib/checkbox/themes/solar/charcoal/index.js +0 -1
- package/lib/checkbox/themes/solar/pearl/index.js +0 -1
- package/lib/clock/index.d.ts +55 -55
- package/lib/clock/index.js +84 -95
- package/lib/clock/themes/halo/dark/index.js +1 -2
- package/lib/clock/themes/halo/light/index.js +1 -2
- package/lib/clock/themes/solar/charcoal/index.js +1 -2
- package/lib/clock/themes/solar/pearl/index.js +1 -2
- package/lib/collapse/index.d.ts +1 -1
- package/lib/collapse/index.js +28 -19
- package/lib/collapse/themes/halo/dark/index.js +1 -2
- package/lib/collapse/themes/halo/light/index.js +1 -2
- package/lib/collapse/themes/solar/charcoal/index.js +0 -1
- package/lib/collapse/themes/solar/pearl/index.js +0 -1
- package/lib/color-dialog/elements/color-palettes.d.ts +1 -1
- package/lib/color-dialog/elements/color-palettes.js +5 -6
- package/lib/color-dialog/elements/grayscale-palettes.d.ts +1 -1
- package/lib/color-dialog/elements/grayscale-palettes.js +9 -9
- package/lib/color-dialog/elements/palettes.js +5 -4
- package/lib/color-dialog/helpers/value-model.js +7 -9
- package/lib/color-dialog/index.d.ts +6 -6
- package/lib/color-dialog/index.js +53 -37
- package/lib/color-dialog/themes/halo/dark/index.js +0 -1
- package/lib/color-dialog/themes/halo/light/index.js +0 -1
- package/lib/color-dialog/themes/solar/charcoal/index.js +0 -1
- package/lib/color-dialog/themes/solar/pearl/index.js +0 -1
- package/lib/color-picker/index.d.ts +2 -2
- package/lib/color-picker/index.js +40 -34
- package/lib/color-picker/themes/halo/dark/index.js +0 -1
- package/lib/color-picker/themes/halo/light/index.js +0 -1
- package/lib/color-picker/themes/solar/charcoal/index.js +0 -1
- package/lib/color-picker/themes/solar/pearl/index.js +0 -1
- package/lib/combo-box/helpers/filter.d.ts +2 -2
- package/lib/combo-box/helpers/types.d.ts +1 -1
- package/lib/combo-box/index.d.ts +9 -9
- package/lib/combo-box/index.js +61 -55
- package/lib/combo-box/themes/halo/dark/index.js +0 -1
- package/lib/combo-box/themes/halo/light/index.js +0 -1
- package/lib/combo-box/themes/solar/charcoal/index.js +0 -1
- package/lib/combo-box/themes/solar/pearl/index.js +0 -1
- package/lib/configuration/custom-elements.json +15 -0
- package/lib/configuration/custom-elements.md +7 -0
- package/lib/{config/elements/config.d.ts → configuration/elements/configuration.d.ts} +14 -7
- package/lib/{config/elements/config.js → configuration/elements/configuration.js} +17 -15
- package/lib/configuration/helpers/context.d.ts +5 -0
- package/lib/configuration/helpers/context.js +3 -0
- package/lib/{config/helpers/context.d.ts → configuration/helpers/types.d.ts} +0 -3
- package/lib/configuration/helpers/types.js +1 -0
- package/lib/configuration/index.d.ts +3 -0
- package/lib/{config → configuration}/index.js +1 -1
- package/lib/counter/index.d.ts +4 -4
- package/lib/counter/index.js +9 -7
- package/lib/counter/themes/halo/dark/index.js +0 -1
- package/lib/counter/themes/halo/light/index.js +0 -1
- package/lib/counter/themes/solar/charcoal/index.js +0 -1
- package/lib/counter/themes/solar/pearl/index.js +0 -1
- package/lib/datetime-field/index.d.ts +4 -5
- package/lib/datetime-field/index.js +32 -23
- package/lib/datetime-field/themes/halo/dark/index.js +0 -1
- package/lib/datetime-field/themes/halo/light/index.js +0 -1
- package/lib/datetime-field/themes/solar/charcoal/index.js +0 -1
- package/lib/datetime-field/themes/solar/pearl/index.js +0 -1
- package/lib/datetime-field/utils.js +11 -1
- package/lib/datetime-picker/index.d.ts +75 -75
- package/lib/datetime-picker/index.js +154 -135
- package/lib/datetime-picker/locales.js +5 -5
- package/lib/datetime-picker/themes/halo/dark/index.js +0 -1
- package/lib/datetime-picker/themes/halo/light/index.js +0 -1
- package/lib/datetime-picker/themes/solar/charcoal/index.js +0 -1
- package/lib/datetime-picker/themes/solar/pearl/index.js +0 -1
- package/lib/datetime-picker/utils.js +9 -9
- package/lib/dialog/custom-elements.json +0 -11
- package/lib/dialog/custom-elements.md +3 -4
- package/lib/dialog/draggable-element.js +1 -2
- package/lib/dialog/index.d.ts +7 -7
- package/lib/dialog/index.js +48 -38
- package/lib/dialog/themes/halo/dark/index.js +0 -1
- package/lib/dialog/themes/halo/light/index.js +0 -1
- package/lib/dialog/themes/solar/charcoal/index.js +0 -1
- package/lib/dialog/themes/solar/pearl/index.js +0 -1
- package/lib/email-field/index.d.ts +1 -1
- package/lib/email-field/index.js +6 -6
- package/lib/email-field/themes/halo/dark/index.js +0 -1
- package/lib/email-field/themes/halo/light/index.js +0 -1
- package/lib/email-field/themes/solar/charcoal/index.js +0 -1
- package/lib/email-field/themes/solar/pearl/index.js +0 -1
- package/lib/events.d.ts +1 -1
- package/lib/flag/custom-elements.json +0 -12
- package/lib/flag/custom-elements.md +0 -3
- package/lib/flag/index.d.ts +12 -8
- package/lib/flag/index.js +20 -12
- package/lib/flag/themes/halo/dark/index.js +0 -1
- package/lib/flag/themes/halo/light/index.js +0 -1
- package/lib/flag/themes/solar/charcoal/index.js +0 -1
- package/lib/flag/themes/solar/pearl/index.js +0 -1
- package/lib/flag/utils/FlagLoader.js +1 -1
- package/lib/header/index.d.ts +1 -1
- package/lib/header/index.js +2 -2
- package/lib/header/themes/halo/dark/index.js +1 -2
- package/lib/header/themes/halo/light/index.js +1 -2
- package/lib/header/themes/solar/charcoal/index.js +1 -2
- package/lib/header/themes/solar/pearl/index.js +1 -2
- package/lib/heatmap/helpers/color.d.ts +1 -1
- package/lib/heatmap/helpers/color.js +11 -5
- package/lib/heatmap/helpers/track.js +3 -3
- package/lib/heatmap/helpers/types.d.ts +10 -10
- package/lib/heatmap/index.d.ts +9 -9
- package/lib/heatmap/index.js +104 -65
- package/lib/heatmap/themes/halo/dark/index.js +0 -1
- package/lib/heatmap/themes/halo/light/index.js +0 -1
- package/lib/heatmap/themes/solar/charcoal/index.js +0 -1
- package/lib/heatmap/themes/solar/pearl/index.js +0 -1
- package/lib/icon/custom-elements.json +0 -13
- package/lib/icon/custom-elements.md +0 -1
- package/lib/icon/index.d.ts +16 -6
- package/lib/icon/index.js +22 -11
- package/lib/icon/themes/halo/dark/index.js +0 -1
- package/lib/icon/themes/halo/light/index.js +0 -1
- package/lib/icon/themes/solar/charcoal/index.js +0 -1
- package/lib/icon/themes/solar/pearl/index.js +0 -1
- package/lib/icon/utils/IconLoader.d.ts +1 -0
- package/lib/icon/utils/IconLoader.js +9 -1
- package/lib/interactive-chart/custom-elements.json +5 -0
- package/lib/interactive-chart/custom-elements.md +1 -0
- package/lib/interactive-chart/helpers/types.d.ts +3 -3
- package/lib/interactive-chart/index.d.ts +40 -36
- package/lib/interactive-chart/index.js +78 -59
- package/lib/interactive-chart/themes/halo/dark/index.js +0 -1
- package/lib/interactive-chart/themes/halo/light/index.js +0 -1
- package/lib/interactive-chart/themes/solar/charcoal/index.js +0 -1
- package/lib/interactive-chart/themes/solar/pearl/index.js +0 -1
- package/lib/item/helpers/types.d.ts +1 -1
- package/lib/item/index.d.ts +3 -3
- package/lib/item/index.js +24 -20
- package/lib/item/themes/halo/dark/index.js +0 -1
- package/lib/item/themes/halo/light/index.js +0 -1
- package/lib/item/themes/solar/charcoal/index.js +0 -1
- package/lib/item/themes/solar/pearl/index.js +0 -1
- package/lib/jsx.d.ts +6 -4
- package/lib/label/index.d.ts +1 -1
- package/lib/label/index.js +11 -8
- package/lib/label/themes/halo/dark/index.js +0 -1
- package/lib/label/themes/halo/light/index.js +0 -1
- package/lib/label/themes/solar/charcoal/index.js +0 -1
- package/lib/label/themes/solar/pearl/index.js +0 -1
- package/lib/layout/index.d.ts +7 -7
- package/lib/layout/index.js +7 -7
- package/lib/layout/themes/halo/dark/index.js +0 -1
- package/lib/layout/themes/halo/light/index.js +0 -1
- package/lib/layout/themes/solar/charcoal/index.js +0 -1
- package/lib/layout/themes/solar/pearl/index.js +0 -1
- package/lib/led-gauge/index.d.ts +1 -1
- package/lib/led-gauge/index.js +10 -10
- package/lib/led-gauge/themes/halo/dark/index.js +0 -1
- package/lib/led-gauge/themes/halo/light/index.js +0 -1
- package/lib/led-gauge/themes/solar/charcoal/index.js +0 -1
- package/lib/led-gauge/themes/solar/pearl/index.js +0 -1
- package/lib/list/elements/list.d.ts +3 -3
- package/lib/list/elements/list.js +10 -12
- package/lib/list/helpers/renderer.js +2 -2
- package/lib/list/helpers/types.d.ts +1 -1
- package/lib/list/index.d.ts +1 -1
- package/lib/list/renderer.d.ts +7 -7
- package/lib/list/themes/halo/dark/index.js +0 -2
- package/lib/list/themes/halo/light/index.js +0 -2
- package/lib/list/themes/solar/charcoal/index.js +0 -2
- package/lib/list/themes/solar/pearl/index.js +0 -2
- package/lib/loader/index.js +7 -8
- package/lib/loader/themes/halo/dark/index.js +0 -1
- package/lib/loader/themes/halo/light/index.js +0 -1
- package/lib/loader/themes/solar/charcoal/index.js +0 -1
- package/lib/loader/themes/solar/pearl/index.js +0 -1
- package/lib/multi-input/index.d.ts +6 -6
- package/lib/multi-input/index.js +39 -45
- package/lib/multi-input/themes/halo/dark/index.js +0 -1
- package/lib/multi-input/themes/halo/light/index.js +0 -1
- package/lib/multi-input/themes/solar/charcoal/index.js +0 -1
- package/lib/multi-input/themes/solar/pearl/index.js +0 -1
- package/lib/notification/elements/notification-tray.d.ts +2 -2
- package/lib/notification/elements/notification-tray.js +3 -3
- package/lib/notification/elements/notification.d.ts +2 -2
- package/lib/notification/elements/notification.js +17 -14
- package/lib/notification/helpers/status.js +1 -1
- package/lib/notification/themes/halo/dark/index.js +1 -3
- package/lib/notification/themes/halo/light/index.js +1 -3
- package/lib/notification/themes/solar/charcoal/index.js +1 -3
- package/lib/notification/themes/solar/pearl/index.js +1 -3
- package/lib/number-field/index.d.ts +12 -6
- package/lib/number-field/index.js +64 -48
- package/lib/number-field/themes/halo/dark/index.js +0 -1
- package/lib/number-field/themes/halo/light/index.js +0 -1
- package/lib/number-field/themes/solar/charcoal/index.js +0 -1
- package/lib/number-field/themes/solar/pearl/index.js +0 -1
- package/lib/overlay/elements/overlay-viewport.d.ts +1 -1
- package/lib/overlay/elements/overlay.d.ts +2 -2
- package/lib/overlay/elements/overlay.js +154 -98
- package/lib/overlay/helpers/types.d.ts +1 -1
- package/lib/overlay/managers/backdrop-manager.d.ts +1 -1
- package/lib/overlay/managers/backdrop-manager.js +2 -2
- package/lib/overlay/managers/close-manager.js +2 -1
- package/lib/overlay/managers/focus-manager.js +23 -13
- package/lib/overlay/managers/interaction-lock-manager.d.ts +4 -4
- package/lib/overlay/managers/interaction-lock-manager.js +33 -25
- package/lib/overlay/managers/viewport-manager.d.ts +2 -2
- package/lib/overlay/managers/viewport-manager.js +3 -2
- package/lib/overlay/managers/zindex-manager.js +4 -2
- package/lib/overlay/themes/halo/dark/index.js +0 -2
- package/lib/overlay/themes/halo/light/index.js +0 -2
- package/lib/overlay/themes/solar/charcoal/index.js +0 -2
- package/lib/overlay/themes/solar/pearl/index.js +0 -2
- package/lib/overlay-menu/helpers/types.d.ts +2 -2
- package/lib/overlay-menu/index.d.ts +1 -1
- package/lib/overlay-menu/index.js +44 -33
- package/lib/overlay-menu/managers/menu-manager.d.ts +10 -10
- package/lib/overlay-menu/managers/menu-manager.js +15 -13
- package/lib/overlay-menu/themes/halo/dark/index.js +0 -1
- package/lib/overlay-menu/themes/halo/light/index.js +0 -1
- package/lib/overlay-menu/themes/solar/charcoal/index.js +0 -1
- package/lib/overlay-menu/themes/solar/pearl/index.js +0 -1
- package/lib/pagination/index.d.ts +4 -4
- package/lib/pagination/index.js +39 -14
- package/lib/pagination/themes/halo/dark/index.js +0 -1
- package/lib/pagination/themes/halo/light/index.js +0 -1
- package/lib/pagination/themes/solar/charcoal/index.js +0 -1
- package/lib/pagination/themes/solar/pearl/index.js +0 -1
- package/lib/panel/index.js +1 -1
- package/lib/panel/themes/halo/dark/index.js +0 -1
- package/lib/panel/themes/halo/light/index.js +0 -1
- package/lib/panel/themes/solar/charcoal/index.js +0 -1
- package/lib/panel/themes/solar/pearl/index.js +0 -1
- package/lib/password-field/index.d.ts +2 -2
- package/lib/password-field/index.js +7 -4
- package/lib/password-field/themes/halo/dark/index.js +1 -2
- package/lib/password-field/themes/halo/light/index.js +1 -2
- package/lib/password-field/themes/solar/charcoal/index.js +1 -2
- package/lib/password-field/themes/solar/pearl/index.js +1 -2
- package/lib/pill/index.d.ts +1 -1
- package/lib/pill/index.js +22 -19
- package/lib/pill/themes/halo/dark/index.js +0 -1
- package/lib/pill/themes/halo/light/index.js +0 -1
- package/lib/pill/themes/solar/charcoal/index.js +0 -1
- package/lib/pill/themes/solar/pearl/index.js +0 -1
- package/lib/progress-bar/index.d.ts +1 -1
- package/lib/progress-bar/index.js +38 -37
- package/lib/progress-bar/themes/halo/dark/index.js +0 -1
- package/lib/progress-bar/themes/halo/light/index.js +0 -1
- package/lib/progress-bar/themes/solar/charcoal/index.js +0 -1
- package/lib/progress-bar/themes/solar/pearl/index.js +0 -1
- package/lib/radio-button/index.d.ts +2 -2
- package/lib/radio-button/index.js +17 -12
- package/lib/radio-button/radio-button-registry.js +8 -5
- package/lib/radio-button/themes/halo/dark/index.js +0 -1
- package/lib/radio-button/themes/halo/light/index.js +0 -1
- package/lib/radio-button/themes/solar/charcoal/index.js +0 -1
- package/lib/radio-button/themes/solar/pearl/index.js +0 -1
- package/lib/rating/index.d.ts +1 -1
- package/lib/rating/index.js +2 -5
- package/lib/rating/themes/halo/dark/index.js +0 -1
- package/lib/rating/themes/halo/light/index.js +0 -1
- package/lib/rating/themes/solar/charcoal/index.js +0 -1
- package/lib/rating/themes/solar/pearl/index.js +0 -1
- package/lib/rating/utils.d.ts +6 -6
- package/lib/rating/utils.js +6 -6
- package/lib/search-field/index.d.ts +2 -2
- package/lib/search-field/index.js +4 -4
- package/lib/search-field/themes/halo/dark/index.js +0 -1
- package/lib/search-field/themes/halo/light/index.js +0 -1
- package/lib/search-field/themes/solar/charcoal/index.js +0 -1
- package/lib/search-field/themes/solar/pearl/index.js +0 -1
- package/lib/select/index.d.ts +34 -34
- package/lib/select/index.js +70 -83
- package/lib/select/themes/halo/dark/index.js +0 -1
- package/lib/select/themes/halo/light/index.js +0 -1
- package/lib/select/themes/solar/charcoal/index.js +0 -1
- package/lib/select/themes/solar/pearl/index.js +0 -1
- package/lib/sidebar-layout/index.d.ts +2 -2
- package/lib/sidebar-layout/index.js +7 -9
- package/lib/sidebar-layout/themes/halo/dark/index.js +0 -1
- package/lib/sidebar-layout/themes/halo/light/index.js +0 -1
- package/lib/sidebar-layout/themes/solar/charcoal/index.js +0 -1
- package/lib/sidebar-layout/themes/solar/pearl/index.js +0 -1
- package/lib/slider/index.d.ts +2 -2
- package/lib/slider/index.js +72 -49
- package/lib/slider/themes/halo/dark/index.js +0 -1
- package/lib/slider/themes/halo/light/index.js +0 -1
- package/lib/slider/themes/solar/charcoal/index.js +0 -1
- package/lib/slider/themes/solar/pearl/index.js +0 -1
- package/lib/slider/utils.d.ts +10 -10
- package/lib/slider/utils.js +10 -10
- package/lib/sparkline/index.d.ts +1 -1
- package/lib/sparkline/index.js +7 -8
- package/lib/sparkline/themes/halo/dark/index.js +0 -1
- package/lib/sparkline/themes/halo/light/index.js +0 -1
- package/lib/sparkline/themes/solar/charcoal/index.js +0 -1
- package/lib/sparkline/themes/solar/pearl/index.js +0 -1
- package/lib/swing-gauge/helpers.js +2 -2
- package/lib/swing-gauge/index.d.ts +19 -19
- package/lib/swing-gauge/index.js +91 -81
- package/lib/swing-gauge/themes/halo/dark/index.js +0 -1
- package/lib/swing-gauge/themes/halo/light/index.js +0 -1
- package/lib/swing-gauge/themes/solar/charcoal/index.js +0 -1
- package/lib/swing-gauge/themes/solar/pearl/index.js +0 -1
- package/lib/tab/index.d.ts +1 -1
- package/lib/tab/index.js +16 -27
- package/lib/tab/themes/halo/dark/index.js +1 -2
- package/lib/tab/themes/halo/light/index.js +1 -2
- package/lib/tab/themes/solar/charcoal/index.js +1 -2
- package/lib/tab/themes/solar/pearl/index.js +1 -2
- package/lib/tab-bar/helpers/animate.js +1 -1
- package/lib/tab-bar/index.d.ts +1 -1
- package/lib/tab-bar/index.js +34 -18
- package/lib/tab-bar/themes/halo/dark/index.js +1 -2
- package/lib/tab-bar/themes/halo/light/index.js +1 -2
- package/lib/tab-bar/themes/solar/charcoal/index.js +0 -1
- package/lib/tab-bar/themes/solar/pearl/index.js +0 -1
- package/lib/text-field/index.d.ts +1 -1
- package/lib/text-field/index.js +36 -33
- package/lib/text-field/themes/halo/dark/index.js +0 -1
- package/lib/text-field/themes/halo/light/index.js +0 -1
- package/lib/text-field/themes/solar/charcoal/index.js +0 -1
- package/lib/text-field/themes/solar/pearl/index.js +0 -1
- package/lib/time-picker/index.d.ts +6 -6
- package/lib/time-picker/index.js +104 -90
- package/lib/time-picker/themes/halo/dark/index.js +0 -1
- package/lib/time-picker/themes/halo/light/index.js +0 -1
- package/lib/time-picker/themes/solar/charcoal/index.js +0 -1
- package/lib/time-picker/themes/solar/pearl/index.js +0 -1
- package/lib/toggle/index.d.ts +1 -1
- package/lib/toggle/index.js +4 -3
- package/lib/toggle/themes/halo/dark/index.js +1 -2
- package/lib/toggle/themes/halo/light/index.js +1 -2
- package/lib/toggle/themes/solar/charcoal/index.js +1 -2
- package/lib/toggle/themes/solar/pearl/index.js +1 -2
- package/lib/tooltip/elements/title-tooltip.js +2 -2
- package/lib/tooltip/helpers/renderer.d.ts +1 -1
- package/lib/tooltip/helpers/renderer.js +3 -3
- package/lib/tooltip/index.d.ts +27 -27
- package/lib/tooltip/index.js +42 -38
- package/lib/tooltip/managers/tooltip-manager.d.ts +1 -1
- package/lib/tooltip/themes/halo/dark/index.js +0 -1
- package/lib/tooltip/themes/halo/light/index.js +0 -1
- package/lib/tooltip/themes/solar/charcoal/index.js +0 -1
- package/lib/tooltip/themes/solar/pearl/index.js +0 -1
- package/lib/tornado-chart/elements/tornado-chart.d.ts +1 -1
- package/lib/tornado-chart/elements/tornado-chart.js +1 -1
- package/lib/tornado-chart/elements/tornado-item.d.ts +2 -2
- package/lib/tornado-chart/elements/tornado-item.js +12 -10
- package/lib/tornado-chart/themes/halo/dark/index.js +0 -2
- package/lib/tornado-chart/themes/halo/light/index.js +0 -2
- package/lib/tornado-chart/themes/solar/charcoal/index.js +0 -2
- package/lib/tornado-chart/themes/solar/pearl/index.js +0 -2
- package/lib/tree/elements/tree-item.d.ts +3 -3
- package/lib/tree/elements/tree-item.js +21 -19
- package/lib/tree/elements/tree.d.ts +1 -1
- package/lib/tree/elements/tree.js +12 -11
- package/lib/tree/helpers/renderer.js +4 -3
- package/lib/tree/index.d.ts +1 -1
- package/lib/tree/managers/tree-manager.d.ts +1 -1
- package/lib/tree/managers/tree-manager.js +17 -18
- package/lib/tree/themes/halo/dark/index.js +0 -2
- package/lib/tree/themes/halo/light/index.js +0 -2
- package/lib/tree/themes/solar/charcoal/index.js +1 -3
- package/lib/tree/themes/solar/pearl/index.js +1 -3
- package/lib/tree-select/index.d.ts +9 -9
- package/lib/tree-select/index.js +91 -82
- package/lib/tree-select/themes/halo/dark/index.js +1 -2
- package/lib/tree-select/themes/halo/light/index.js +1 -2
- package/lib/tree-select/themes/solar/charcoal/index.js +1 -2
- package/lib/tree-select/themes/solar/pearl/index.js +1 -2
- package/lib/version.js +1 -1
- package/package.json +19 -18
- package/tsconfig.tsbuildinfo +1 -0
- package/lib/config/custom-elements.json +0 -23
- package/lib/config/custom-elements.md +0 -8
- package/lib/config/helpers/context.js +0 -2
- package/lib/config/index.d.ts +0 -2
package/lib/layout/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { JSXInterface } from '../jsx';
|
|
2
|
-
import {
|
|
2
|
+
import { CSSResultGroup, PropertyValues, ResponsiveElement, TemplateResult } from '@refinitiv-ui/core';
|
|
3
3
|
/**
|
|
4
4
|
* Layout component for creating responsive applications and components
|
|
5
5
|
* @fires resize - Fired when the element's size changes.
|
|
@@ -11,11 +11,11 @@ export declare class Layout extends ResponsiveElement {
|
|
|
11
11
|
*/
|
|
12
12
|
static get version(): string;
|
|
13
13
|
/**
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
14
|
+
* A `CSSResultGroup` that will be used
|
|
15
|
+
* to style the host, slotted children
|
|
16
|
+
* and the internal template of the element.
|
|
17
|
+
* @return CSS template
|
|
18
|
+
*/
|
|
19
19
|
static get styles(): CSSResultGroup;
|
|
20
20
|
/**
|
|
21
21
|
* Displays debug lines.
|
|
@@ -88,7 +88,7 @@ export declare class Layout extends ResponsiveElement {
|
|
|
88
88
|
* A `TemplateResult` that will be used
|
|
89
89
|
* to render the updated internal template.
|
|
90
90
|
* @return Render template
|
|
91
|
-
|
|
91
|
+
*/
|
|
92
92
|
protected render(): TemplateResult;
|
|
93
93
|
}
|
|
94
94
|
declare global {
|
package/lib/layout/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
-
import { ResponsiveElement,
|
|
2
|
+
import { ResponsiveElement, css, html } from '@refinitiv-ui/core';
|
|
3
3
|
import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
|
|
4
4
|
import { property } from '@refinitiv-ui/core/decorators/property.js';
|
|
5
5
|
import { VERSION } from '../version.js';
|
|
@@ -80,11 +80,11 @@ let Layout = class Layout extends ResponsiveElement {
|
|
|
80
80
|
return VERSION;
|
|
81
81
|
}
|
|
82
82
|
/**
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
83
|
+
* A `CSSResultGroup` that will be used
|
|
84
|
+
* to style the host, slotted children
|
|
85
|
+
* and the internal template of the element.
|
|
86
|
+
* @return CSS template
|
|
87
|
+
*/
|
|
88
88
|
static get styles() {
|
|
89
89
|
return css `
|
|
90
90
|
:host {
|
|
@@ -163,7 +163,7 @@ let Layout = class Layout extends ResponsiveElement {
|
|
|
163
163
|
* A `TemplateResult` that will be used
|
|
164
164
|
* to render the updated internal template.
|
|
165
165
|
* @return Render template
|
|
166
|
-
|
|
166
|
+
*/
|
|
167
167
|
render() {
|
|
168
168
|
return html `<slot></slot>`;
|
|
169
169
|
}
|
package/lib/led-gauge/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { JSXInterface } from '../jsx';
|
|
2
|
-
import { BasicElement,
|
|
2
|
+
import { BasicElement, CSSResultGroup, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
|
|
3
3
|
import '../canvas/index.js';
|
|
4
4
|
/**
|
|
5
5
|
* A component used to show data in a LED-like
|
package/lib/led-gauge/index.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
-
import { BasicElement,
|
|
2
|
+
import { BasicElement, css, html } from '@refinitiv-ui/core';
|
|
3
3
|
import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
|
|
4
4
|
import { property } from '@refinitiv-ui/core/decorators/property.js';
|
|
5
|
-
import { VERSION } from '../version.js';
|
|
6
5
|
import '../canvas/index.js';
|
|
6
|
+
import { VERSION } from '../version.js';
|
|
7
7
|
const ZERO_MAP = {
|
|
8
8
|
LEFT: 'left',
|
|
9
9
|
CENTER: 'center',
|
|
@@ -69,7 +69,6 @@ let LedGauge = class LedGauge extends BasicElement {
|
|
|
69
69
|
*/
|
|
70
70
|
static get styles() {
|
|
71
71
|
return css `
|
|
72
|
-
|
|
73
72
|
:host {
|
|
74
73
|
display: block;
|
|
75
74
|
position: relative;
|
|
@@ -78,7 +77,7 @@ let LedGauge = class LedGauge extends BasicElement {
|
|
|
78
77
|
box-sizing: border-box;
|
|
79
78
|
}
|
|
80
79
|
|
|
81
|
-
[part=label] {
|
|
80
|
+
[part='label'] {
|
|
82
81
|
display: block;
|
|
83
82
|
position: absolute;
|
|
84
83
|
left: 0;
|
|
@@ -98,7 +97,8 @@ let LedGauge = class LedGauge extends BasicElement {
|
|
|
98
97
|
color: var(--top-selected-color, transparent);
|
|
99
98
|
}
|
|
100
99
|
|
|
101
|
-
#bottom,
|
|
100
|
+
#bottom,
|
|
101
|
+
#range {
|
|
102
102
|
top: 100%;
|
|
103
103
|
bottom: auto;
|
|
104
104
|
color: var(--bottom-selected-color, transparent);
|
|
@@ -202,14 +202,14 @@ let LedGauge = class LedGauge extends BasicElement {
|
|
|
202
202
|
else if (val > this.max) {
|
|
203
203
|
val = this.max;
|
|
204
204
|
}
|
|
205
|
-
const positions =
|
|
205
|
+
const positions = barCount - 1;
|
|
206
206
|
if (this.zero === ZERO_MAP.LEFT) {
|
|
207
|
-
return Math.round(positions * val / this.max);
|
|
207
|
+
return Math.round((positions * val) / this.max);
|
|
208
208
|
}
|
|
209
209
|
if (this.zero === ZERO_MAP.RIGHT) {
|
|
210
|
-
return Math.round(positions - positions * val / this.max);
|
|
210
|
+
return Math.round(positions - (positions * val) / this.max);
|
|
211
211
|
}
|
|
212
|
-
return Math.round(positions * (val / 2 + this.max / 2) / this.max);
|
|
212
|
+
return Math.round((positions * (val / 2 + this.max / 2)) / this.max);
|
|
213
213
|
}
|
|
214
214
|
/**
|
|
215
215
|
* @param varName css variable name
|
|
@@ -287,7 +287,7 @@ let LedGauge = class LedGauge extends BasicElement {
|
|
|
287
287
|
const bottomValueBarIndex = this.getValueBarIndex(barAmount, this.bottomValue);
|
|
288
288
|
const sectionLength = barAmount / SECTION_DIVIDER; // devided gauge to 5 sections
|
|
289
289
|
const spacingOffset = barSpacing / 2;
|
|
290
|
-
const basePos = width / 2 - barAmount / 2 * barTotalWidth + spacingOffset; // starter point
|
|
290
|
+
const basePos = width / 2 - (barAmount / 2) * barTotalWidth + spacingOffset; // starter point
|
|
291
291
|
const rangeValueBarIndexes = [];
|
|
292
292
|
let rangeMidIndex = 0;
|
|
293
293
|
// Find value bar indexes and mid position of bar gauge
|
|
@@ -1,3 +1,2 @@
|
|
|
1
1
|
import '@refinitiv-ui/elements/canvas/themes/halo/dark';
|
|
2
|
-
|
|
3
2
|
dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-led-gauge', styles: ':host{font-size:12px;--led-width:8px;--led-spacing:3px;--top-selected-color:#6678FF;--bottom-selected-color:#6678FF;--clash-color:#ffffff;--range-color:#c948a2;--neutral-color:#7a7a7a;--left-segment-color:#932b37;--center-left-segment-color:#60111a;--center-segment-color:#7a7a7a;--center-right-segment-color:#144628;--right-segment-color:#227642;height:68px;--led-width:5px;--led-spacing:1px;--left-segment-color:#B72536;--center-left-segment-color:#F5475B;--center-segment-color:#808080;--center-right-segment-color:#39C46E;--right-segment-color:#227542;--range-color:#6678FF;--top-selected-color:#6678FF;--bottom-selected-color:#F5475B}:host [part=label]{padding:3px}' }}));
|
|
@@ -1,3 +1,2 @@
|
|
|
1
1
|
import '@refinitiv-ui/elements/canvas/themes/halo/light';
|
|
2
|
-
|
|
3
2
|
dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-led-gauge', styles: ':host{font-size:12px;--led-width:8px;--led-spacing:3px;--top-selected-color:#334BFF;--bottom-selected-color:#334BFF;--clash-color:#000000;--range-color:#fc73d2;--neutral-color:#b8b8b8;--left-segment-color:#B63243;--center-left-segment-color:#f3c5cb;--center-segment-color:#b8b8b8;--center-right-segment-color:#a8e2be;--right-segment-color:#246B3E;height:68px;--led-width:5px;--led-spacing:1px;--left-segment-color:#B63243;--center-left-segment-color:#D94255;--center-segment-color:#808080;--center-right-segment-color:#309054;--right-segment-color:#246B3E;--range-color:#334BFF;--top-selected-color:#334BFF;--bottom-selected-color:#F5475B}:host [part=label]{padding:3px}' }}));
|
|
@@ -1,3 +1,2 @@
|
|
|
1
1
|
import '@refinitiv-ui/elements/canvas/themes/solar/charcoal';
|
|
2
|
-
|
|
3
2
|
dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-led-gauge', styles: ':host{--led-width:8px;--led-spacing:3px;--top-selected-color:#FF9933;--bottom-selected-color:#FF9933;--clash-color:#ffffff;--range-color:#c948a2;--neutral-color:#747474;--left-segment-color:#932b37;--center-left-segment-color:#521822;--center-segment-color:#747474;--center-right-segment-color:#11472d;--right-segment-color:#227642;height:68px;font-size:10px;--led-width:5px;--led-spacing:4px;--top-selected-color:#FF9933;--bottom-selected-color:#46A0F0;--range-color:#2277AA}:host [part=label]{padding:2px}' }}));
|
|
@@ -1,3 +1,2 @@
|
|
|
1
1
|
import '@refinitiv-ui/elements/canvas/themes/solar/pearl';
|
|
2
|
-
|
|
3
2
|
dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-led-gauge', styles: ':host{--led-width:8px;--led-spacing:3px;--top-selected-color:#EE7600;--bottom-selected-color:#EE7600;--clash-color:#000000;--range-color:#fc73d2;--neutral-color:#e2e4e6;--left-segment-color:#D94255;--center-left-segment-color:#f4b0bc;--center-segment-color:#e2e4e6;--center-right-segment-color:#a7e7c9;--right-segment-color:#309054;height:68px;font-size:10px;--led-width:5px;--led-spacing:4px;--top-selected-color:#EE7600;--bottom-selected-color:#0080F0;--range-color:#00B0FF}:host [part=label]{padding:2px}' }}));
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { JSXInterface } from '../../jsx';
|
|
2
|
-
import {
|
|
2
|
+
import { CSSResultGroup, ControlElement, PropertyValues, TapEvent, TemplateResult, WarningNotice } from '@refinitiv-ui/core';
|
|
3
3
|
import { CollectionComposer, DataItem } from '@refinitiv-ui/utils/collection.js';
|
|
4
|
-
import type { ItemData } from '../../item';
|
|
5
|
-
import type { ListData } from '../helpers/types';
|
|
6
4
|
import { ListRenderer } from '../helpers/renderer.js';
|
|
7
5
|
import './list-item.js';
|
|
6
|
+
import type { ItemData } from '../../item';
|
|
7
|
+
import type { ListData } from '../helpers/types';
|
|
8
8
|
/**
|
|
9
9
|
* Key direction
|
|
10
10
|
*/
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
-
import { ControlElement, css, html
|
|
2
|
+
import { ControlElement, WarningNotice, css, html } from '@refinitiv-ui/core';
|
|
3
3
|
import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
|
|
4
4
|
import { property } from '@refinitiv-ui/core/decorators/property.js';
|
|
5
|
-
import { VERSION } from '../../version.js';
|
|
6
5
|
import { CollectionComposer } from '@refinitiv-ui/utils/collection.js';
|
|
6
|
+
import { VERSION } from '../../version.js';
|
|
7
7
|
import { ListRenderer } from '../helpers/renderer.js';
|
|
8
8
|
import './list-item.js';
|
|
9
9
|
/**
|
|
@@ -14,7 +14,7 @@ var Direction;
|
|
|
14
14
|
Direction[Direction["UP"] = -1] = "UP";
|
|
15
15
|
Direction[Direction["DOWN"] = 1] = "DOWN";
|
|
16
16
|
})(Direction || (Direction = {}));
|
|
17
|
-
export const valueFormatWarning = new WarningNotice(
|
|
17
|
+
export const valueFormatWarning = new WarningNotice("The specified 'values' format does not conform to the required format.");
|
|
18
18
|
/**
|
|
19
19
|
* Provides listing and immutable selection
|
|
20
20
|
* @fires value-changed - Fired when the user commits a value change. The event is not triggered if `value` property is changed programmatically.
|
|
@@ -130,8 +130,7 @@ let List = class List extends ControlElement {
|
|
|
130
130
|
* @default []
|
|
131
131
|
*/
|
|
132
132
|
get values() {
|
|
133
|
-
return this.queryItemsByPropertyValue('selected', true)
|
|
134
|
-
.map((item) => this.composer.getItemPropertyValue(item, 'value'));
|
|
133
|
+
return this.queryItemsByPropertyValue('selected', true).map((item) => this.composer.getItemPropertyValue(item, 'value'));
|
|
135
134
|
}
|
|
136
135
|
set values(values) {
|
|
137
136
|
if (!Array.isArray(values)) {
|
|
@@ -276,7 +275,8 @@ let List = class List extends ControlElement {
|
|
|
276
275
|
*/
|
|
277
276
|
getNextHighlightItem(direction) {
|
|
278
277
|
const highlightItem = this.queryItemsByPropertyValue('highlighted', true)[0];
|
|
279
|
-
const nextElement = this.getNextFocusableItem(direction) ||
|
|
278
|
+
const nextElement = this.getNextFocusableItem(direction) ||
|
|
279
|
+
this.getNextFocusableItem(direction, this.elementFromItem(highlightItem));
|
|
280
280
|
const backupElement = this.tabbableItems[0];
|
|
281
281
|
if (nextElement) {
|
|
282
282
|
return this.itemFromElement(nextElement);
|
|
@@ -291,8 +291,7 @@ let List = class List extends ControlElement {
|
|
|
291
291
|
* @returns {void}
|
|
292
292
|
*/
|
|
293
293
|
clearHighlighted() {
|
|
294
|
-
this.queryItemsByPropertyValue('highlighted', true)
|
|
295
|
-
.forEach(item => this.composer.setItemPropertyValue(item, 'highlighted', false));
|
|
294
|
+
this.queryItemsByPropertyValue('highlighted', true).forEach((item) => this.composer.setItemPropertyValue(item, 'highlighted', false));
|
|
296
295
|
}
|
|
297
296
|
/**
|
|
298
297
|
* Highlights a single item.
|
|
@@ -455,8 +454,7 @@ let List = class List extends ControlElement {
|
|
|
455
454
|
* @returns {void}
|
|
456
455
|
*/
|
|
457
456
|
clearSelection() {
|
|
458
|
-
this.queryItemsByPropertyValue('selected', true)
|
|
459
|
-
.forEach((item) => this.composer.setItemPropertyValue(item, 'selected', false));
|
|
457
|
+
this.queryItemsByPropertyValue('selected', true).forEach((item) => this.composer.setItemPropertyValue(item, 'selected', false));
|
|
460
458
|
this.requestUpdate();
|
|
461
459
|
}
|
|
462
460
|
/**
|
|
@@ -543,8 +541,8 @@ let List = class List extends ControlElement {
|
|
|
543
541
|
const currentChildren = Array.from(this.children);
|
|
544
542
|
const recyclableElements = this.calculateRecyclableElements(renderItems);
|
|
545
543
|
const renderChildren = renderItems.map((item) => this.createListItem(item, recyclableElements));
|
|
546
|
-
const deletions = currentChildren.filter(element => !renderChildren.includes(element));
|
|
547
|
-
deletions.forEach(element => this.removeChild(element));
|
|
544
|
+
const deletions = currentChildren.filter((element) => !renderChildren.includes(element));
|
|
545
|
+
deletions.forEach((element) => this.removeChild(element));
|
|
548
546
|
renderChildren.forEach((element, index) => {
|
|
549
547
|
if (this.children.length === index) {
|
|
550
548
|
this.appendChild(element);
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { uuid } from '@refinitiv-ui/utils/uuid.js';
|
|
2
|
-
import { getItemId } from './item-id.js';
|
|
3
2
|
import { Renderer } from '../renderer.js';
|
|
3
|
+
import { getItemId } from './item-id.js';
|
|
4
4
|
/**
|
|
5
5
|
* Renders list items as `ef-item` elements.
|
|
6
6
|
* This is the default renderer for lists.
|
|
@@ -18,7 +18,7 @@ export class ListRenderer extends Renderer {
|
|
|
18
18
|
/**
|
|
19
19
|
* Element to render
|
|
20
20
|
*/
|
|
21
|
-
const el =
|
|
21
|
+
const el = element || document.createElement('ef-list-item');
|
|
22
22
|
/**
|
|
23
23
|
* Tooltip value to be used, if any.
|
|
24
24
|
*/
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import type { CollectionComposer, DataItem } from '@refinitiv-ui/utils/collection.js';
|
|
2
1
|
import type { ItemData } from '../../item';
|
|
2
|
+
import type { CollectionComposer, DataItem } from '@refinitiv-ui/utils/collection.js';
|
|
3
3
|
export type ListData<T extends DataItem = ItemData> = T[] | CollectionComposer<T> | null;
|
package/lib/list/index.d.ts
CHANGED
package/lib/list/renderer.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ExtensibleFunction } from './extensible-function.js';
|
|
2
|
-
import type {
|
|
2
|
+
import type { CollectionComposer, DataItem } from '@refinitiv-ui/utils/collection.js';
|
|
3
3
|
/**
|
|
4
4
|
* Render function interface
|
|
5
5
|
* TODO: Move this to @refinitiv-ui/utils
|
|
@@ -7,12 +7,12 @@ import type { DataItem, CollectionComposer } from '@refinitiv-ui/utils/collectio
|
|
|
7
7
|
*/
|
|
8
8
|
export interface RenderFunction {
|
|
9
9
|
/**
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
10
|
+
* Renders data items into elements
|
|
11
|
+
* @param item Data item context
|
|
12
|
+
* @param composer Composer context
|
|
13
|
+
* @param element Reusable element. This element tries to be the same as was used before.
|
|
14
|
+
* @returns List item element
|
|
15
|
+
*/
|
|
16
16
|
(item: DataItem, composer: CollectionComposer, element?: HTMLElement): HTMLElement;
|
|
17
17
|
}
|
|
18
18
|
/**
|
|
@@ -1,6 +1,4 @@
|
|
|
1
1
|
import '@refinitiv-ui/elements/icon/themes/halo/dark';
|
|
2
2
|
import '@refinitiv-ui/elements/checkbox/themes/halo/dark';
|
|
3
|
-
|
|
4
3
|
dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-list-item', styles: ':host{line-height:normal;outline:0;cursor:pointer;padding:0 8px;min-height:24px;box-sizing:border-box;touch-action:manipulation}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){:host(:after){content:\'\';min-height:inherit;font-size:0}}:host([selected]){color:#fff;font-weight:600}:host([readonly]){cursor:default}:host([focused]),:host([highlighted]){background-color:#1429bd;color:#fff}:host([focused]:not([selected])),:host([highlighted]:not([selected])){color:#fff}:host [part=center],:host [part=sub-label]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host([disabled]){color:rgba(204,204,204,.5)}:host([type=divider]),:host([type=header]){pointer-events:none;min-height:auto}:host([type=divider]) [part=sub-label],:host([type=header]) [part=sub-label]{display:none}:host([type=header]){color:#999;background-color:transparent;font-size:83%;font-weight:600;border:none;height:24px;align-items:flex-end;margin:0;min-height:0;text-transform:uppercase;align-items:center}:host([type=divider]){border:none;padding:0;margin:0;height:5px;background:linear-gradient(#404040,#404040) 0 center/calc(100% - (0px * 2)) 1px no-repeat}:host [part=checkbox],:host [part=icon],:host [part=left] ::slotted(*){margin:0 .5em 0 0}:host [part=right] ::slotted(*){margin-left:.5em}:host [part=checkbox]{margin-right:8px}:host [part=sub-label]{font-size:90%}:host([sub-label]){padding:4px 8px}:host([selected]:not([highlighted]):not([focused])){background-color:#333}:host([selected]:not([highlighted]):not([focused]):not([multiple])){background-image:linear-gradient(#334bff,#334bff);background-size:4px 100%;background-position:left top;background-repeat:no-repeat}:host([selected][focused]),:host([selected][highlighted]){color:#fff}' }}));
|
|
5
|
-
|
|
6
4
|
dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-list', styles: ':host{--item-indent:8px;--item-height:24px;color:#ccc;background-color:transparent;touch-action:manipulation;scrollbar-face-color:#595959;scrollbar-shadow-color:#595959;scrollbar-highlight-color:#595959;scrollbar-arrow-color:#595959;scrollbar-track-color:#1a1a1a;scrollbar-3dlight-color:#1a1a1a;scrollbar-darkshadow-color:#1a1a1a;scrollbar-color:#595959 #1a1a1a;scrollbar-width:thin}:host(:focus){outline:0}:host([focused=visible]){outline:#334bff solid 1px}:host([readonly]) [part=list-item]{cursor:default}::-webkit-scrollbar-corner{background:0 0}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#595959;border-radius:0;border:1px solid transparent}::-webkit-scrollbar-thumb:hover{background:#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}' }}));
|
|
@@ -1,6 +1,4 @@
|
|
|
1
1
|
import '@refinitiv-ui/elements/icon/themes/halo/light';
|
|
2
2
|
import '@refinitiv-ui/elements/checkbox/themes/halo/light';
|
|
3
|
-
|
|
4
3
|
dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-list-item', styles: ':host{line-height:normal;outline:0;cursor:pointer;padding:0 8px;min-height:24px;box-sizing:border-box;touch-action:manipulation}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){:host(:after){content:\'\';min-height:inherit;font-size:0}}:host([selected]){color:#0d0d0d;font-weight:600}:host([readonly]){cursor:default}:host([focused]),:host([highlighted]){background-color:#1429bd;color:#fff}:host([focused]:not([selected])),:host([highlighted]:not([selected])){color:#fff}:host [part=center],:host [part=sub-label]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host([disabled]){color:rgba(64,64,64,.5)}:host([type=divider]),:host([type=header]){pointer-events:none;min-height:auto}:host([type=divider]) [part=sub-label],:host([type=header]) [part=sub-label]{display:none}:host([type=header]){color:#737373;background-color:transparent;font-size:83%;font-weight:600;border:none;height:24px;align-items:flex-end;margin:0;min-height:0;text-transform:uppercase;align-items:center}:host([type=divider]){border:none;padding:0;margin:0;height:5px;background:linear-gradient(#d9d9d9,#d9d9d9) 0 center/calc(100% - (0px * 2)) 1px no-repeat}:host [part=checkbox],:host [part=icon],:host [part=left] ::slotted(*){margin:0 .5em 0 0}:host [part=right] ::slotted(*){margin-left:.5em}:host [part=checkbox]{margin-right:8px}:host [part=sub-label]{font-size:90%}:host([sub-label]){padding:4px 8px}:host([selected]:not([highlighted]):not([focused])){background-color:#e6e6e6}:host([selected]:not([highlighted]):not([focused]):not([multiple])){background-image:linear-gradient(#334bff,#334bff);background-size:4px 100%;background-position:left top;background-repeat:no-repeat}:host([selected][focused]),:host([selected][highlighted]){color:#fff}' }}));
|
|
5
|
-
|
|
6
4
|
dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-list', styles: ':host{--item-indent:8px;--item-height:24px;color:#262626;background-color:transparent;touch-action:manipulation;scrollbar-face-color:#999;scrollbar-shadow-color:#999;scrollbar-highlight-color:#999;scrollbar-arrow-color:#999;scrollbar-track-color:#f2f2f2;scrollbar-3dlight-color:#f2f2f2;scrollbar-darkshadow-color:#f2f2f2;scrollbar-color:#999 #f2f2f2;scrollbar-width:thin}:host(:focus){outline:0}:host([focused=visible]){outline:#334bff solid 1px}:host([readonly]) [part=list-item]{cursor:default}::-webkit-scrollbar-corner{background:0 0}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#999;border-radius:0;border:1px solid transparent}::-webkit-scrollbar-thumb:hover{background:#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}' }}));
|
|
@@ -1,6 +1,4 @@
|
|
|
1
1
|
import '@refinitiv-ui/elements/icon/themes/solar/charcoal';
|
|
2
2
|
import '@refinitiv-ui/elements/checkbox/themes/solar/charcoal';
|
|
3
|
-
|
|
4
3
|
dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-list-item', styles: ':host{line-height:normal;outline:0;cursor:pointer;padding:0 7px;min-height:22px;box-sizing:border-box;touch-action:manipulation}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){:host(:after){content:\'\';min-height:inherit;font-size:0}}:host([selected]){color:#f93}:host([readonly]){cursor:default}:host([focused]),:host([highlighted]){background-color:rgba(255,255,255,.1)}:host([focused]:not([selected])),:host([highlighted]:not([selected])){color:#fff}:host [part=center],:host [part=sub-label]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host([disabled]){color:rgba(194,194,194,.5)}:host([type=divider]),:host([type=header]){pointer-events:none;min-height:auto}:host([type=divider]) [part=sub-label],:host([type=header]) [part=sub-label]{display:none}:host([type=header]){color:#c2c2c2;background-color:#4a4a52;font-size:100%;font-weight:400;border:1px solid #0a0a0a;height:22px;align-items:flex-end;margin:0;min-height:0;text-transform:uppercase;border:none;border-top:1px solid #0a0a0a;border-bottom:1px solid transparent;text-transform:none;align-items:center}:host([type=divider]){border:none;padding:0;margin:0;height:5px;background:linear-gradient(#2e2e33,#2e2e33) 0 center/calc(100% - (0px * 2)) 1px no-repeat}:host [part=checkbox],:host [part=icon],:host [part=left] ::slotted(*){margin:0 .5em 0 0}:host [part=sub-label]{font-size:80%}:host [part=icon],:host [part=left] ::slotted(*){margin-right:.33em}:host [part=right] ::slotted(*){margin-left:.33em}' }}));
|
|
5
|
-
|
|
6
4
|
dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-list', styles: ':host{--item-indent:7px;--item-height:22px;color:#c2c2c2;background-color:transparent;touch-action:manipulation;scrollbar-face-color:#666570;scrollbar-shadow-color:#666570;scrollbar-highlight-color:#666570;scrollbar-arrow-color:#666570;scrollbar-track-color:#2e2e33;scrollbar-3dlight-color:#2e2e33;scrollbar-darkshadow-color:#2e2e33;scrollbar-color:#666570 #2e2e33}:host(:focus){outline:0}:host([focused=visible]){outline:#f93 solid 1px}:host([readonly]) [part=list-item]{cursor:default}::-webkit-scrollbar{width:13px;height:13px}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #2e2e33;height:12px;width:12px;display:block}::-webkit-scrollbar-thumb{background:#666570;border-radius:7px;border:2px solid #2e2e33}::-webkit-scrollbar-thumb:hover{background:#e2e2e2}::-webkit-scrollbar-thumb:active{background:#f93}::-webkit-scrollbar-track{background:#2e2e33}::-webkit-scrollbar-corner{background:#2e2e33}::-webkit-scrollbar-button:end:decrement,::-webkit-scrollbar-button:start:increment{display:none}::-webkit-scrollbar-button:horizontal{background-size:2px 1px}::-webkit-scrollbar-button:vertical:start:decrement{background-image:linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:start:decrement:hover{background-image:linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:start:decrement:active{background-image:linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:end:increment{background-image:linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:vertical:end:increment:hover{background-image:linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:vertical:end:increment:active{background-image:linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:horizontal:start:decrement{background-image:linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:hover{background-image:linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:active{background-image:linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment{background-image:linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:hover{background-image:linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:active{background-image:linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}' }}));
|
|
@@ -1,6 +1,4 @@
|
|
|
1
1
|
import '@refinitiv-ui/elements/icon/themes/solar/pearl';
|
|
2
2
|
import '@refinitiv-ui/elements/checkbox/themes/solar/pearl';
|
|
3
|
-
|
|
4
3
|
dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-list-item', styles: ':host{line-height:normal;outline:0;cursor:pointer;padding:0 7px;min-height:22px;box-sizing:border-box;touch-action:manipulation}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){:host(:after){content:\'\';min-height:inherit;font-size:0}}:host([selected]){color:#ee7600}:host([readonly]){cursor:default}:host([focused]),:host([highlighted]){background-color:rgba(0,0,0,.08)}:host([focused]:not([selected])),:host([highlighted]:not([selected])){color:#000}:host [part=center],:host [part=sub-label]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host([disabled]){color:rgba(72,72,72,.5)}:host([type=divider]),:host([type=header]){pointer-events:none;min-height:auto}:host([type=divider]) [part=sub-label],:host([type=header]) [part=sub-label]{display:none}:host([type=header]){color:#484848;background-color:#f2f3f7;font-size:100%;font-weight:400;border:1px solid #d5d8db;height:22px;align-items:flex-end;margin:0;min-height:0;text-transform:uppercase;border:none;border-top:1px solid #d5d8db;border-bottom:1px solid transparent;text-transform:none;align-items:center}:host([type=divider]){border:none;padding:0;margin:0;height:5px;background:linear-gradient(#a9afba,#a9afba) 0 center/calc(100% - (0px * 2)) 1px no-repeat}:host [part=checkbox],:host [part=icon],:host [part=left] ::slotted(*){margin:0 .5em 0 0}:host [part=sub-label]{font-size:80%}:host [part=icon],:host [part=left] ::slotted(*){margin-right:.33em}:host [part=right] ::slotted(*){margin-left:.33em}' }}));
|
|
5
|
-
|
|
6
4
|
dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-list', styles: ':host{--item-indent:7px;--item-height:22px;color:#484848;background-color:transparent;touch-action:manipulation;scrollbar-face-color:#8a8a96;scrollbar-shadow-color:#8a8a96;scrollbar-highlight-color:#8a8a96;scrollbar-arrow-color:#8a8a96;scrollbar-track-color:#fff;scrollbar-3dlight-color:#fff;scrollbar-darkshadow-color:#fff;scrollbar-color:#8a8a96 #fff}:host(:focus){outline:0}:host([focused=visible]){outline:#f93 solid 1px}:host([readonly]) [part=list-item]{cursor:default}::-webkit-scrollbar{width:13px;height:13px}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #fff;height:12px;width:12px;display:block}::-webkit-scrollbar-thumb{background:#8a8a96;border-radius:7px;border:2px solid #fff}::-webkit-scrollbar-thumb:hover{background:#a9afba}::-webkit-scrollbar-thumb:active{background:#ee7600}::-webkit-scrollbar-track{background:#fff}::-webkit-scrollbar-corner{background:#fff}::-webkit-scrollbar-button:end:decrement,::-webkit-scrollbar-button:start:increment{display:none}::-webkit-scrollbar-button:horizontal{background-size:2px 1px}::-webkit-scrollbar-button:vertical:start:decrement{background-image:linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:start:decrement:hover{background-image:linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:start:decrement:active{background-image:linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:end:increment{background-image:linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:vertical:end:increment:hover{background-image:linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:vertical:end:increment:active{background-image:linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:horizontal:start:decrement{background-image:linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:hover{background-image:linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:active{background-image:linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment{background-image:linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:hover{background-image:linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:active{background-image:linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}' }}));
|
package/lib/loader/index.js
CHANGED
|
@@ -28,8 +28,11 @@ let Loader = class Loader extends BasicElement {
|
|
|
28
28
|
* used to create and theme different loader styles
|
|
29
29
|
*/
|
|
30
30
|
get templateParts() {
|
|
31
|
-
const parts = cachedParts ||
|
|
32
|
-
.
|
|
31
|
+
const parts = cachedParts ||
|
|
32
|
+
this.getComputedVariable('--parts')
|
|
33
|
+
.split(',')
|
|
34
|
+
.map((part) => part.trim())
|
|
35
|
+
.filter((part) => part);
|
|
33
36
|
if (cachedParts !== parts && parts.length) {
|
|
34
37
|
cachedParts = parts;
|
|
35
38
|
}
|
|
@@ -48,13 +51,9 @@ let Loader = class Loader extends BasicElement {
|
|
|
48
51
|
render() {
|
|
49
52
|
const dots = [];
|
|
50
53
|
for (const part of this.templateParts) {
|
|
51
|
-
dots.push(html `
|
|
52
|
-
<i part="${part}"></i>
|
|
53
|
-
`);
|
|
54
|
+
dots.push(html ` <i part="${part}"></i> `);
|
|
54
55
|
}
|
|
55
|
-
return html `
|
|
56
|
-
<div part="wrapper">${dots}</div>
|
|
57
|
-
`;
|
|
56
|
+
return html ` <div part="wrapper">${dots}</div> `;
|
|
58
57
|
}
|
|
59
58
|
};
|
|
60
59
|
Loader = __decorate([
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
1
|
dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-loader', styles: ':host{--parts:bar,shape shape-1,shape shape-2,shape shape-3,bar bar-1,bar bar-2,box box-1,box box-2,box box-3,shape shape-1 flash flash-1,shape shape-2 flash flash-2,shape shape-3 flash flash-3;position:absolute;top:0;right:0;bottom:0;left:0}:host [part=wrapper]{font-size:32px;width:2.75em;height:1em;color:#404040;position:absolute;top:calc(50% - .5em);left:calc(50% - 1.375em);display:block}:host [part~=shape]{color:grey;border:1px solid;width:.5em;height:.5em;transform:rotate(45deg);position:absolute;top:50%;margin:calc(-.25em - 1px)}:host [part~=shape-1]{left:17.67766953%;animation:1s linear infinite alternate shape-1}:host [part~=shape-2]{left:50%;animation:.5s linear infinite alternate shape-2}:host [part~=shape-3]{right:17.67766953%;animation:1s linear infinite alternate shape-3}:host [part~=flash]{color:#6678ff;box-sizing:border-box;outline:currentColor solid 2px;margin:-.25em}:host [part~=flash-1]{animation:1s linear infinite alternate flash-1}:host [part~=flash-2]{animation:.5s linear infinite alternate flash-2}:host [part~=flash-3]{animation:1s linear infinite alternate flash-3}:host [part~=box]{position:absolute;border:1px solid;margin:calc(-1em / 32 - 1px);width:calc(1em / 16);height:calc(1em / 16);top:50%}:host [part~=box-1]{left:17.67766953%;animation:1s linear infinite alternate box-1}:host [part~=box-2]{left:50%;animation:.5s linear infinite alternate box-2}:host [part~=box-3]{right:17.67766953%;animation:1s linear infinite alternate box-3}:host [part~=bar]{position:absolute;top:50%;left:17.67766953%;right:17.67766953%;height:2px;margin-top:-1px;background-color:currentColor}:host [part~=bar-1]{left:17.67766953%;right:50%;background-color:#6678ff;animation:1s linear infinite alternate bar-1}:host [part~=bar-2]{right:17.67766953%;left:50%;background-color:#6678ff;animation:1s linear infinite alternate bar-2}@keyframes shape-1{0%,10%{opacity:0}100%,25%{opacity:1}}@keyframes shape-2{0%,50%{opacity:1}100%,80%{opacity:0}}@keyframes shape-3{0%,75%{opacity:1}100%,90%{opacity:0}}@keyframes flash-1{0%{opacity:1}100%,25%{opacity:0}}@keyframes flash-2{0%,50%{opacity:0}100%{opacity:1}}@keyframes flash-3{0%,75%{opacity:0}100%{opacity:1}}@keyframes box-1{0%,20%{background-color:#ccc;border-color:transparent}100%,25%{background-color:#0d0d0d;border-color:inherit}}@keyframes box-2{0%,50%{background-color:#0d0d0d;border-color:inherit}100%,60%{background-color:#ccc;border-color:transparent}}@keyframes box-3{0%,75%{background-color:#0d0d0d;border-color:inherit}100%,80%{background-color:#ccc;border-color:transparent}}@keyframes bar-1{0%,5%{transform:scaleX(0);transform-origin:left center}24%{transform:scaleX(1);transform-origin:left center}26%{transform:scaleX(1);transform-origin:right center}100%,45%{transform:scaleX(0);transform-origin:right center}}@keyframes bar-2{0%,55%{transform:scaleX(0);transform-origin:left center}74%{transform:scaleX(1);transform-origin:left center}76%{transform:scaleX(1);transform-origin:right center}100%,95%{transform:scaleX(0);transform-origin:right center}}' }}));
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
1
|
dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-loader', styles: ':host{--parts:bar,shape shape-1,shape shape-2,shape shape-3,bar bar-1,bar bar-2,box box-1,box box-2,box box-3,shape shape-1 flash flash-1,shape shape-2 flash flash-2,shape shape-3 flash flash-3;position:absolute;top:0;right:0;bottom:0;left:0}:host [part=wrapper]{font-size:32px;width:2.75em;height:1em;color:#d9d9d9;position:absolute;top:calc(50% - .5em);left:calc(50% - 1.375em);display:block}:host [part~=shape]{color:#ccc;border:1px solid;width:.5em;height:.5em;transform:rotate(45deg);position:absolute;top:50%;margin:calc(-.25em - 1px)}:host [part~=shape-1]{left:17.67766953%;animation:1s linear infinite alternate shape-1}:host [part~=shape-2]{left:50%;animation:.5s linear infinite alternate shape-2}:host [part~=shape-3]{right:17.67766953%;animation:1s linear infinite alternate shape-3}:host [part~=flash]{color:#334bff;box-sizing:border-box;outline:currentColor solid 2px;margin:-.25em}:host [part~=flash-1]{animation:1s linear infinite alternate flash-1}:host [part~=flash-2]{animation:.5s linear infinite alternate flash-2}:host [part~=flash-3]{animation:1s linear infinite alternate flash-3}:host [part~=box]{position:absolute;border:1px solid;margin:calc(-1em / 32 - 1px);width:calc(1em / 16);height:calc(1em / 16);top:50%}:host [part~=box-1]{left:17.67766953%;animation:1s linear infinite alternate box-1}:host [part~=box-2]{left:50%;animation:.5s linear infinite alternate box-2}:host [part~=box-3]{right:17.67766953%;animation:1s linear infinite alternate box-3}:host [part~=bar]{position:absolute;top:50%;left:17.67766953%;right:17.67766953%;height:2px;margin-top:-1px;background-color:currentColor}:host [part~=bar-1]{left:17.67766953%;right:50%;background-color:#334bff;animation:1s linear infinite alternate bar-1}:host [part~=bar-2]{right:17.67766953%;left:50%;background-color:#334bff;animation:1s linear infinite alternate bar-2}@keyframes shape-1{0%,10%{opacity:0}100%,25%{opacity:1}}@keyframes shape-2{0%,50%{opacity:1}100%,80%{opacity:0}}@keyframes shape-3{0%,75%{opacity:1}100%,90%{opacity:0}}@keyframes flash-1{0%{opacity:1}100%,25%{opacity:0}}@keyframes flash-2{0%,50%{opacity:0}100%{opacity:1}}@keyframes flash-3{0%,75%{opacity:0}100%{opacity:1}}@keyframes box-1{0%,20%{background-color:#0d0d0d;border-color:transparent}100%,25%{background-color:#fff;border-color:inherit}}@keyframes box-2{0%,50%{background-color:#fff;border-color:inherit}100%,60%{background-color:#0d0d0d;border-color:transparent}}@keyframes box-3{0%,75%{background-color:#fff;border-color:inherit}100%,80%{background-color:#0d0d0d;border-color:transparent}}@keyframes bar-1{0%,5%{transform:scaleX(0);transform-origin:left center}24%{transform:scaleX(1);transform-origin:left center}26%{transform:scaleX(1);transform-origin:right center}100%,45%{transform:scaleX(0);transform-origin:right center}}@keyframes bar-2{0%,55%{transform:scaleX(0);transform-origin:left center}74%{transform:scaleX(1);transform-origin:left center}76%{transform:scaleX(1);transform-origin:right center}100%,95%{transform:scaleX(0);transform-origin:right center}}' }}));
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
1
|
dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-loader', styles: ':host{--parts:dot dot0,dot dot1,dot dot2;position:absolute;top:50%;left:50%;overflow:hidden;width:70px;height:20px;margin:-10px 0 0 -35px}:host([size=small]){width:30px;height:6px;margin:-3px 0 0 -15px}:host([size=small]) [part~=dot]{width:5px;height:5px}:host([size=medium]){width:42px;height:12px;margin:-6px 0 0 -21px}:host([size=medium]) [part~=dot]{width:10px;height:10px}:host [part=wrapper]{box-sizing:border-box;height:100%;width:100%;display:flex;align-items:center;justify-content:space-between}:host [part=wrapper]:after,:host [part=wrapper]:before{content:\'\'}:host [part~=dot]{box-sizing:border-box;width:17px;height:17px;border-radius:50%;animation-duration:1.2s;animation-iteration-count:infinite;animation-timing-function:ease-in-out;border:1px solid rgba(194,194,194,.4)}:host [part~=dot0]{animation-name:pulse-1}:host [part~=dot1]{animation-name:pulse-2}:host [part~=dot2]{animation-name:pulse-3}@keyframes pulse-1{0%,100%,80%{background-color:transparent}25%{background-color:rgba(194,194,194,.4)}}@keyframes pulse-2{0%,10%,100%,90%{background-color:transparent}50%{background-color:rgba(194,194,194,.8)}}@keyframes pulse-3{0%,100%,20%{background-color:transparent}75%{background-color:rgba(194,194,194,.8)}}' }}));
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
1
|
dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-loader', styles: ':host{--parts:dot dot0,dot dot1,dot dot2;position:absolute;top:50%;left:50%;overflow:hidden;width:70px;height:20px;margin:-10px 0 0 -35px}:host([size=small]){width:30px;height:6px;margin:-3px 0 0 -15px}:host([size=small]) [part~=dot]{width:5px;height:5px}:host([size=medium]){width:42px;height:12px;margin:-6px 0 0 -21px}:host([size=medium]) [part~=dot]{width:10px;height:10px}:host [part=wrapper]{box-sizing:border-box;height:100%;width:100%;display:flex;align-items:center;justify-content:space-between}:host [part=wrapper]:after,:host [part=wrapper]:before{content:\'\'}:host [part~=dot]{box-sizing:border-box;width:17px;height:17px;border-radius:50%;animation-duration:1.2s;animation-iteration-count:infinite;animation-timing-function:ease-in-out;border:1px solid rgba(72,72,72,.4)}:host [part~=dot0]{animation-name:pulse-1}:host [part~=dot1]{animation-name:pulse-2}:host [part~=dot2]{animation-name:pulse-3}@keyframes pulse-1{0%,100%,80%{background-color:transparent}25%{background-color:rgba(72,72,72,.4)}}@keyframes pulse-2{0%,10%,100%,90%{background-color:transparent}50%{background-color:rgba(72,72,72,.8)}}@keyframes pulse-3{0%,100%,20%{background-color:transparent}75%{background-color:rgba(72,72,72,.8)}}' }}));
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { JSXInterface } from '../jsx';
|
|
2
|
-
import {
|
|
3
|
-
import type { MultiInputData, MultiInputDataItem, SelectionIndex } from './helpers/types';
|
|
2
|
+
import { CSSResultGroup, ControlElement, MultiValue, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
|
|
4
3
|
import '../pill/index.js';
|
|
5
4
|
import '../text-field/index.js';
|
|
5
|
+
import type { MultiInputData, MultiInputDataItem, SelectionIndex } from './helpers/types';
|
|
6
6
|
export type { MultiInputData, MultiInputDataItem };
|
|
7
7
|
/**
|
|
8
8
|
* An input control component to display a selection of pills
|
|
@@ -159,10 +159,10 @@ export declare class MultiInput extends ControlElement implements MultiValue {
|
|
|
159
159
|
/** Old value for handle reset value */
|
|
160
160
|
private oldValue;
|
|
161
161
|
/**
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
162
|
+
* Current value of text field
|
|
163
|
+
* @default -
|
|
164
|
+
* @param value Element value
|
|
165
|
+
*/
|
|
166
166
|
set value(value: string);
|
|
167
167
|
get value(): string;
|
|
168
168
|
/**
|