@refinitiv-ui/elements 6.0.0-next.0 → 6.0.0-next.3
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/lib/accordion/index.d.ts +5 -0
- package/lib/accordion/themes/halo/dark/index.js +1 -1
- package/lib/accordion/themes/halo/light/index.js +1 -1
- package/lib/accordion/themes/solar/charcoal/index.js +1 -1
- package/lib/accordion/themes/solar/pearl/index.js +1 -1
- package/lib/appstate-bar/index.d.ts +5 -0
- package/lib/appstate-bar/themes/halo/dark/index.js +1 -1
- package/lib/appstate-bar/themes/halo/light/index.js +1 -1
- package/lib/appstate-bar/themes/solar/charcoal/index.js +1 -1
- package/lib/appstate-bar/themes/solar/pearl/index.js +1 -1
- package/lib/autosuggest/index.d.ts +5 -0
- package/lib/autosuggest/index.js +13 -2
- package/lib/autosuggest/themes/halo/dark/index.js +4 -4
- package/lib/autosuggest/themes/halo/light/index.js +4 -4
- package/lib/autosuggest/themes/solar/charcoal/index.js +3 -3
- package/lib/autosuggest/themes/solar/pearl/index.js +3 -3
- package/lib/button/index.d.ts +5 -0
- package/lib/button/index.js +1 -1
- package/lib/button/themes/halo/dark/index.js +2 -2
- package/lib/button/themes/halo/light/index.js +2 -2
- package/lib/button/themes/solar/charcoal/index.js +1 -1
- package/lib/button/themes/solar/pearl/index.js +1 -1
- package/lib/button-bar/index.d.ts +5 -0
- package/lib/button-bar/themes/halo/dark/index.js +1 -1
- package/lib/button-bar/themes/halo/light/index.js +1 -1
- package/lib/button-bar/themes/solar/charcoal/index.js +1 -1
- package/lib/button-bar/themes/solar/pearl/index.js +1 -1
- package/lib/calendar/index.d.ts +5 -0
- package/lib/calendar/themes/halo/dark/index.js +2 -2
- package/lib/calendar/themes/halo/light/index.js +2 -2
- package/lib/calendar/themes/solar/charcoal/index.js +1 -1
- package/lib/calendar/themes/solar/pearl/index.js +1 -1
- package/lib/canvas/index.d.ts +5 -0
- package/lib/card/index.d.ts +21 -0
- package/lib/card/index.js +31 -8
- package/lib/card/themes/halo/dark/index.js +4 -4
- package/lib/card/themes/halo/light/index.js +4 -4
- package/lib/card/themes/solar/charcoal/index.js +3 -3
- package/lib/card/themes/solar/pearl/index.js +3 -3
- package/lib/chart/index.d.ts +5 -0
- package/lib/chart/themes/halo/dark/index.js +2 -2
- package/lib/chart/themes/halo/light/index.js +2 -2
- package/lib/chart/themes/solar/charcoal/index.js +2 -2
- package/lib/chart/themes/solar/pearl/index.js +2 -2
- package/lib/checkbox/index.d.ts +5 -0
- package/lib/checkbox/themes/halo/dark/index.js +2 -2
- package/lib/checkbox/themes/halo/light/index.js +2 -2
- package/lib/checkbox/themes/solar/charcoal/index.js +2 -2
- package/lib/checkbox/themes/solar/pearl/index.js +2 -2
- package/lib/clock/index.d.ts +5 -0
- package/lib/collapse/index.d.ts +5 -0
- package/lib/collapse/themes/halo/dark/index.js +4 -4
- package/lib/collapse/themes/halo/light/index.js +4 -4
- package/lib/collapse/themes/solar/charcoal/index.js +3 -3
- package/lib/collapse/themes/solar/pearl/index.js +3 -3
- package/lib/color-dialog/elements/color-palettes.d.ts +5 -0
- package/lib/color-dialog/elements/grayscale-palettes.d.ts +5 -0
- package/lib/color-dialog/index.d.ts +5 -0
- package/lib/color-dialog/index.js +11 -6
- package/lib/color-dialog/themes/halo/dark/index.js +5 -5
- package/lib/color-dialog/themes/halo/light/index.js +5 -5
- package/lib/color-dialog/themes/solar/charcoal/index.js +5 -5
- package/lib/color-dialog/themes/solar/pearl/index.js +5 -5
- package/lib/combo-box/custom-elements.json +0 -22
- package/lib/combo-box/custom-elements.md +0 -7
- package/lib/combo-box/index.d.ts +5 -0
- package/lib/combo-box/themes/halo/dark/index.js +6 -6
- package/lib/combo-box/themes/halo/light/index.js +6 -6
- package/lib/combo-box/themes/solar/charcoal/index.js +5 -5
- package/lib/combo-box/themes/solar/pearl/index.js +5 -5
- package/lib/counter/index.d.ts +5 -0
- package/lib/counter/themes/halo/dark/index.js +2 -2
- package/lib/counter/themes/halo/light/index.js +2 -2
- package/lib/counter/themes/solar/charcoal/index.js +1 -1
- package/lib/counter/themes/solar/pearl/index.js +1 -1
- package/lib/datetime-field/custom-elements.json +0 -75
- package/lib/datetime-field/custom-elements.md +27 -36
- package/lib/datetime-field/index.d.ts +5 -0
- package/lib/datetime-field/themes/halo/dark/index.js +1 -1
- package/lib/datetime-field/themes/halo/light/index.js +1 -1
- package/lib/datetime-field/themes/solar/charcoal/index.js +1 -1
- package/lib/datetime-field/themes/solar/pearl/index.js +1 -1
- package/lib/datetime-picker/index.d.ts +5 -0
- package/lib/datetime-picker/themes/halo/dark/index.js +5 -5
- package/lib/datetime-picker/themes/halo/light/index.js +5 -5
- package/lib/datetime-picker/themes/solar/charcoal/index.js +5 -5
- package/lib/datetime-picker/themes/solar/pearl/index.js +5 -5
- package/lib/dialog/index.d.ts +5 -0
- package/lib/dialog/themes/halo/dark/index.js +6 -6
- package/lib/dialog/themes/halo/light/index.js +6 -6
- package/lib/dialog/themes/solar/charcoal/index.js +5 -5
- package/lib/dialog/themes/solar/pearl/index.js +5 -5
- package/lib/email-field/index.d.ts +5 -0
- package/lib/email-field/themes/halo/dark/index.js +1 -1
- package/lib/email-field/themes/halo/light/index.js +1 -1
- package/lib/email-field/themes/solar/charcoal/index.js +1 -1
- package/lib/email-field/themes/solar/pearl/index.js +1 -1
- package/lib/flag/index.d.ts +5 -0
- package/lib/header/index.d.ts +5 -0
- package/lib/heatmap/helpers/text.d.ts +1 -7
- package/lib/heatmap/helpers/text.js +1 -18
- package/lib/heatmap/index.d.ts +5 -0
- package/lib/heatmap/index.js +3 -2
- package/lib/heatmap/themes/halo/dark/index.js +2 -2
- package/lib/heatmap/themes/halo/light/index.js +2 -2
- package/lib/heatmap/themes/solar/charcoal/index.js +2 -2
- package/lib/heatmap/themes/solar/pearl/index.js +2 -2
- package/lib/icon/index.d.ts +5 -0
- package/lib/interactive-chart/index.d.ts +5 -12
- package/lib/interactive-chart/index.js +10 -22
- package/lib/interactive-chart/themes/halo/dark/index.js +2 -2
- package/lib/interactive-chart/themes/halo/light/index.js +2 -2
- package/lib/interactive-chart/themes/solar/charcoal/index.js +1 -1
- package/lib/interactive-chart/themes/solar/pearl/index.js +1 -1
- package/lib/item/index.d.ts +5 -0
- package/lib/item/themes/halo/dark/index.js +3 -3
- package/lib/item/themes/halo/light/index.js +3 -3
- package/lib/item/themes/solar/charcoal/index.js +2 -2
- package/lib/item/themes/solar/pearl/index.js +2 -2
- package/lib/label/index.d.ts +5 -0
- package/lib/label/themes/halo/dark/index.js +1 -1
- package/lib/label/themes/halo/light/index.js +1 -1
- package/lib/label/themes/solar/charcoal/index.js +1 -1
- package/lib/label/themes/solar/pearl/index.js +1 -1
- package/lib/layout/index.d.ts +5 -0
- package/lib/led-gauge/index.d.ts +5 -0
- package/lib/led-gauge/themes/halo/dark/index.js +1 -1
- package/lib/led-gauge/themes/halo/light/index.js +1 -1
- package/lib/led-gauge/themes/solar/charcoal/index.js +1 -1
- package/lib/led-gauge/themes/solar/pearl/index.js +1 -1
- package/lib/list/index.d.ts +5 -0
- package/lib/list/themes/halo/dark/index.js +2 -2
- package/lib/list/themes/halo/light/index.js +2 -2
- package/lib/list/themes/solar/charcoal/index.js +1 -1
- package/lib/list/themes/solar/pearl/index.js +1 -1
- package/lib/loader/index.d.ts +6 -0
- package/lib/loader/index.js +4 -0
- package/lib/multi-input/index.d.ts +5 -0
- package/lib/multi-input/themes/halo/dark/index.js +3 -3
- package/lib/multi-input/themes/halo/light/index.js +3 -3
- package/lib/multi-input/themes/solar/charcoal/index.js +2 -2
- package/lib/multi-input/themes/solar/pearl/index.js +2 -2
- package/lib/notification/elements/notification-tray.d.ts +5 -0
- package/lib/notification/elements/notification.d.ts +5 -0
- package/lib/notification/themes/halo/dark/index.js +1 -1
- package/lib/notification/themes/halo/light/index.js +1 -1
- package/lib/notification/themes/solar/charcoal/index.js +1 -1
- package/lib/notification/themes/solar/pearl/index.js +1 -1
- package/lib/number-field/custom-elements.json +0 -48
- package/lib/number-field/custom-elements.md +20 -26
- package/lib/number-field/index.d.ts +5 -0
- package/lib/number-field/themes/halo/dark/index.js +2 -2
- package/lib/number-field/themes/halo/light/index.js +2 -2
- package/lib/number-field/themes/solar/charcoal/index.js +1 -1
- package/lib/number-field/themes/solar/pearl/index.js +1 -1
- package/lib/overlay/elements/overlay-backdrop.d.ts +5 -0
- package/lib/overlay/elements/overlay-viewport.d.ts +5 -0
- package/lib/overlay/elements/overlay.d.ts +5 -0
- package/lib/overlay/managers/focus-manager.js +9 -3
- package/lib/overlay/themes/halo/dark/index.js +1 -1
- package/lib/overlay/themes/halo/light/index.js +1 -1
- package/lib/overlay-menu/helpers/types.d.ts +6 -0
- package/lib/overlay-menu/helpers/types.js +7 -1
- package/lib/overlay-menu/index.d.ts +14 -4
- package/lib/overlay-menu/index.js +45 -14
- package/lib/overlay-menu/managers/menu-manager.js +1 -0
- package/lib/overlay-menu/themes/halo/dark/index.js +4 -4
- package/lib/overlay-menu/themes/halo/light/index.js +4 -4
- package/lib/overlay-menu/themes/solar/charcoal/index.js +3 -3
- package/lib/overlay-menu/themes/solar/pearl/index.js +3 -3
- package/lib/pagination/index.d.ts +5 -0
- package/lib/pagination/themes/halo/dark/index.js +3 -3
- package/lib/pagination/themes/halo/light/index.js +3 -3
- package/lib/pagination/themes/solar/charcoal/index.js +3 -3
- package/lib/pagination/themes/solar/pearl/index.js +3 -3
- package/lib/panel/index.d.ts +5 -0
- package/lib/password-field/custom-elements.json +0 -7
- package/lib/password-field/custom-elements.md +0 -6
- package/lib/password-field/index.d.ts +5 -0
- package/lib/password-field/themes/halo/dark/index.js +1 -1
- package/lib/password-field/themes/halo/light/index.js +1 -1
- package/lib/password-field/themes/solar/charcoal/index.js +1 -1
- package/lib/password-field/themes/solar/pearl/index.js +1 -1
- package/lib/pill/index.d.ts +5 -0
- package/lib/pill/themes/halo/dark/index.js +2 -2
- package/lib/pill/themes/halo/light/index.js +2 -2
- package/lib/pill/themes/solar/charcoal/index.js +1 -1
- package/lib/pill/themes/solar/pearl/index.js +1 -1
- package/lib/progress-bar/index.d.ts +5 -0
- package/lib/radio-button/index.d.ts +5 -0
- package/lib/radio-button/themes/halo/dark/index.js +1 -1
- package/lib/radio-button/themes/halo/light/index.js +1 -1
- package/lib/radio-button/themes/solar/charcoal/index.js +1 -1
- package/lib/radio-button/themes/solar/pearl/index.js +1 -1
- package/lib/rating/index.d.ts +5 -0
- package/lib/search-field/custom-elements.json +0 -7
- package/lib/search-field/custom-elements.md +0 -6
- package/lib/search-field/index.d.ts +5 -0
- package/lib/search-field/themes/halo/dark/index.js +1 -1
- package/lib/search-field/themes/halo/light/index.js +1 -1
- package/lib/search-field/themes/solar/charcoal/index.js +1 -1
- package/lib/search-field/themes/solar/pearl/index.js +1 -1
- package/lib/select/index.d.ts +5 -0
- package/lib/select/themes/halo/dark/index.js +4 -4
- package/lib/select/themes/halo/light/index.js +4 -4
- package/lib/select/themes/solar/charcoal/index.js +3 -3
- package/lib/select/themes/solar/pearl/index.js +3 -3
- package/lib/sidebar-layout/index.d.ts +5 -0
- package/lib/sidebar-layout/themes/halo/dark/index.js +2 -2
- package/lib/sidebar-layout/themes/halo/light/index.js +2 -2
- package/lib/sidebar-layout/themes/solar/charcoal/index.js +1 -1
- package/lib/sidebar-layout/themes/solar/pearl/index.js +1 -1
- package/lib/slider/constants.d.ts +15 -0
- package/lib/slider/constants.js +18 -0
- package/lib/slider/index.d.ts +55 -80
- package/lib/slider/index.js +361 -454
- package/lib/slider/themes/halo/dark/index.js +2 -2
- package/lib/slider/themes/halo/light/index.js +2 -2
- package/lib/slider/themes/solar/charcoal/index.js +1 -1
- package/lib/slider/themes/solar/pearl/index.js +1 -1
- package/lib/slider/utils.d.ts +35 -0
- package/lib/slider/utils.js +54 -0
- package/lib/sparkline/index.d.ts +5 -0
- package/lib/swing-gauge/index.d.ts +5 -0
- package/lib/swing-gauge/themes/halo/dark/index.js +1 -1
- package/lib/swing-gauge/themes/halo/light/index.js +1 -1
- package/lib/swing-gauge/themes/solar/charcoal/index.js +1 -1
- package/lib/swing-gauge/themes/solar/pearl/index.js +1 -1
- package/lib/tab/index.d.ts +5 -0
- package/lib/tab/themes/halo/dark/index.js +3 -3
- package/lib/tab/themes/halo/light/index.js +3 -3
- package/lib/tab/themes/solar/charcoal/index.js +2 -2
- package/lib/tab/themes/solar/pearl/index.js +2 -2
- package/lib/tab-bar/index.d.ts +5 -0
- package/lib/tab-bar/themes/halo/dark/index.js +3 -3
- package/lib/tab-bar/themes/halo/light/index.js +3 -3
- package/lib/tab-bar/themes/solar/charcoal/index.js +2 -2
- package/lib/tab-bar/themes/solar/pearl/index.js +2 -2
- package/lib/text-field/custom-elements.json +0 -22
- package/lib/text-field/custom-elements.md +0 -7
- package/lib/text-field/index.d.ts +5 -0
- package/lib/text-field/themes/halo/dark/index.js +1 -1
- package/lib/text-field/themes/halo/light/index.js +1 -1
- package/lib/text-field/themes/solar/charcoal/index.js +1 -1
- package/lib/text-field/themes/solar/pearl/index.js +1 -1
- package/lib/time-picker/index.d.ts +5 -0
- package/lib/time-picker/themes/halo/dark/index.js +2 -2
- package/lib/time-picker/themes/halo/light/index.js +2 -2
- package/lib/time-picker/themes/solar/charcoal/index.js +2 -2
- package/lib/time-picker/themes/solar/pearl/index.js +2 -2
- package/lib/toggle/index.d.ts +5 -0
- package/lib/toggle/themes/halo/dark/index.js +1 -1
- package/lib/toggle/themes/halo/light/index.js +1 -1
- package/lib/tooltip/elements/tooltip-element.d.ts +1 -2
- package/lib/tooltip/index.d.ts +6 -0
- package/lib/tooltip/index.js +1 -0
- package/lib/tooltip/themes/halo/dark/index.js +1 -1
- package/lib/tooltip/themes/halo/light/index.js +1 -1
- package/lib/tooltip/themes/solar/charcoal/index.js +1 -1
- package/lib/tooltip/themes/solar/pearl/index.js +1 -1
- package/lib/tornado-chart/elements/tornado-chart.d.ts +5 -0
- package/lib/tornado-chart/elements/tornado-item.d.ts +5 -0
- package/lib/tornado-chart/themes/halo/dark/index.js +2 -2
- package/lib/tornado-chart/themes/halo/light/index.js +2 -2
- package/lib/tornado-chart/themes/solar/charcoal/index.js +2 -2
- package/lib/tornado-chart/themes/solar/pearl/index.js +2 -2
- package/lib/tree/elements/tree-item.d.ts +5 -0
- package/lib/tree/elements/tree.d.ts +5 -0
- package/lib/tree/helpers/renderer.js +14 -15
- package/lib/tree/themes/halo/dark/index.js +5 -5
- package/lib/tree/themes/halo/light/index.js +5 -5
- package/lib/tree/themes/solar/charcoal/index.js +3 -3
- package/lib/tree/themes/solar/pearl/index.js +3 -3
- package/lib/tree-select/index.d.ts +5 -0
- package/lib/tree-select/themes/halo/dark/index.js +10 -10
- package/lib/tree-select/themes/halo/light/index.js +10 -10
- package/lib/tree-select/themes/solar/charcoal/index.js +9 -9
- package/lib/tree-select/themes/solar/pearl/index.js +9 -9
- package/lib/version.js +1 -1
- package/package.json +14 -14
|
@@ -13,6 +13,7 @@ import '../item/index.js';
|
|
|
13
13
|
import { Item } from '../item/index.js';
|
|
14
14
|
import { Overlay } from '../overlay/index.js';
|
|
15
15
|
import { applyLock } from '../overlay/managers/interaction-lock-manager.js';
|
|
16
|
+
import { Navigation } from './helpers/types';
|
|
16
17
|
import { OpenedMenusManager } from './managers/menu-manager.js';
|
|
17
18
|
/**
|
|
18
19
|
* Overlay that supports single-level and multi-level menus
|
|
@@ -62,6 +63,10 @@ import { OpenedMenusManager } from './managers/menu-manager.js';
|
|
|
62
63
|
let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
|
|
63
64
|
constructor() {
|
|
64
65
|
super();
|
|
66
|
+
/**
|
|
67
|
+
* Default role of the element
|
|
68
|
+
*/
|
|
69
|
+
this.defaultRole = 'menu';
|
|
65
70
|
this.dataDisconnectThrottler = new AnimationTaskRunner();
|
|
66
71
|
this.oldInteractiveElements = [];
|
|
67
72
|
this.menuIndex = {};
|
|
@@ -314,13 +319,19 @@ let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
|
|
|
314
319
|
|| (this.opened && changedProperties.has('modification'));
|
|
315
320
|
}
|
|
316
321
|
/**
|
|
317
|
-
*
|
|
322
|
+
* Compute property values that depend on other properties
|
|
323
|
+
* and are used in the rest of the update process.
|
|
318
324
|
* @param changedProperties Properties which have changed
|
|
319
325
|
* @return {void}
|
|
320
326
|
*/
|
|
321
|
-
|
|
327
|
+
willUpdate(changedProperties) {
|
|
328
|
+
super.willUpdate(changedProperties);
|
|
322
329
|
if (changedProperties.has('opened')) {
|
|
323
330
|
if (this.opened) {
|
|
331
|
+
const parentMenuItem = OpenedMenusManager.getParentMenuItem(this);
|
|
332
|
+
if (parentMenuItem) {
|
|
333
|
+
parentMenuItem.setAttribute('aria-expanded', 'true');
|
|
334
|
+
}
|
|
324
335
|
this.opening();
|
|
325
336
|
}
|
|
326
337
|
else {
|
|
@@ -333,7 +344,6 @@ let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
|
|
|
333
344
|
if (changedProperties.has('opened') && this.opened) {
|
|
334
345
|
this.lazyRendered = true;
|
|
335
346
|
}
|
|
336
|
-
super.update(changedProperties);
|
|
337
347
|
}
|
|
338
348
|
/**
|
|
339
349
|
* Called after the component is first rendered
|
|
@@ -486,6 +496,7 @@ let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
|
|
|
486
496
|
if (dataItem.items && dataItem.items.length) {
|
|
487
497
|
const dataId = `${dataItem.value || index}-${depth}`;
|
|
488
498
|
const menu = findMenuByDataItem(dataItem) || findMenuByDataId(dataId) || this.toOverlayMenu();
|
|
499
|
+
menu.setAttribute('aria-label', String(dataItem.label));
|
|
489
500
|
menu.parentDataItem = dataItem;
|
|
490
501
|
menu.data = this.composer;
|
|
491
502
|
const menuId = menu.id;
|
|
@@ -586,11 +597,11 @@ let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
|
|
|
586
597
|
switch (event.key) {
|
|
587
598
|
case 'Down':
|
|
588
599
|
case 'ArrowDown':
|
|
589
|
-
this.focusElement(
|
|
600
|
+
this.focusElement(Navigation.NEXT, true);
|
|
590
601
|
break;
|
|
591
602
|
case 'Up':
|
|
592
603
|
case 'ArrowUp':
|
|
593
|
-
this.focusElement(
|
|
604
|
+
this.focusElement(Navigation.PREVIOUS, true);
|
|
594
605
|
break;
|
|
595
606
|
case 'Left':
|
|
596
607
|
case 'ArrowLeft':
|
|
@@ -601,7 +612,13 @@ let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
|
|
|
601
612
|
this.onArrowRight();
|
|
602
613
|
break;
|
|
603
614
|
case 'Tab':
|
|
604
|
-
this.focusElement(event.shiftKey ?
|
|
615
|
+
this.focusElement(event.shiftKey ? Navigation.PREVIOUS : Navigation.NEXT, true);
|
|
616
|
+
break;
|
|
617
|
+
case 'Home':
|
|
618
|
+
this.focusElement(Navigation.FIRST);
|
|
619
|
+
break;
|
|
620
|
+
case 'End':
|
|
621
|
+
this.focusElement(Navigation.LAST);
|
|
605
622
|
break;
|
|
606
623
|
default:
|
|
607
624
|
return;
|
|
@@ -670,7 +687,7 @@ let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
|
|
|
670
687
|
}
|
|
671
688
|
/**
|
|
672
689
|
* Highlight next or previous highlightable element if present
|
|
673
|
-
* @param direction
|
|
690
|
+
* @param direction previous, next, first or last focusable element
|
|
674
691
|
* @param [circular=false] Set to true to have circular navigation over items
|
|
675
692
|
* @return {void}
|
|
676
693
|
*/
|
|
@@ -679,14 +696,24 @@ let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
|
|
|
679
696
|
const children = this.items;
|
|
680
697
|
const idx = menuHighlightedItem ? children.indexOf(menuHighlightedItem) : -1;
|
|
681
698
|
let focusElement;
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
699
|
+
switch (direction) {
|
|
700
|
+
case Navigation.PREVIOUS:
|
|
701
|
+
focusElement = idx === -1 ? children[children.length - 1] : children[idx - 1];
|
|
702
|
+
break;
|
|
703
|
+
case Navigation.NEXT:
|
|
704
|
+
focusElement = idx === -1 ? children[0] : children[idx + 1];
|
|
705
|
+
break;
|
|
706
|
+
case Navigation.FIRST:
|
|
707
|
+
focusElement = children[0];
|
|
708
|
+
break;
|
|
709
|
+
case Navigation.LAST:
|
|
710
|
+
focusElement = children[children.length - 1];
|
|
711
|
+
break;
|
|
712
|
+
default:
|
|
713
|
+
return;
|
|
687
714
|
}
|
|
688
715
|
if (circular && !focusElement) {
|
|
689
|
-
focusElement = direction ===
|
|
716
|
+
focusElement = direction === Navigation.NEXT ? children[0] : children[children.length - 1];
|
|
690
717
|
}
|
|
691
718
|
if (focusElement) {
|
|
692
719
|
focusElement.focus();
|
|
@@ -836,13 +863,14 @@ let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
|
|
|
836
863
|
const composer = this.composer;
|
|
837
864
|
const type = composer.getItemPropertyValue(item, 'type');
|
|
838
865
|
if (type === 'divider') {
|
|
839
|
-
return html `<ef-item type="divider"></ef-item>`;
|
|
866
|
+
return html `<ef-item type="divider" aria-hidden="true"></ef-item>`;
|
|
840
867
|
}
|
|
841
868
|
const tooltip = composer.getItemPropertyValue(item, 'tooltip');
|
|
842
869
|
const label = composer.getItemPropertyValue(item, 'label');
|
|
843
870
|
const icon = composer.getItemPropertyValue(item, 'icon');
|
|
844
871
|
if (type === 'header') {
|
|
845
872
|
return html `<ef-item
|
|
873
|
+
role="presentation"
|
|
846
874
|
type="header"
|
|
847
875
|
title=${ifDefined(tooltip || undefined)}
|
|
848
876
|
.label=${label}
|
|
@@ -857,6 +885,9 @@ let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
|
|
|
857
885
|
const highlighted = composer.getItemPropertyValue(item, 'highlighted');
|
|
858
886
|
// type text
|
|
859
887
|
return html `<ef-item
|
|
888
|
+
role="menuitem"
|
|
889
|
+
aria-haspopup=${ifDefined(forMenu ? true : undefined)}
|
|
890
|
+
aria-expanded=${ifDefined(forMenu ? false : undefined)}
|
|
860
891
|
title=${ifDefined(tooltip || undefined)}
|
|
861
892
|
?disabled=${disabled}
|
|
862
893
|
?selected=${selected}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import '@refinitiv-ui/elements/
|
|
2
|
-
import '@refinitiv-ui/elements/
|
|
3
|
-
import '@refinitiv-ui/elements/
|
|
1
|
+
import '@refinitiv-ui/elements/item/themes/halo/dark';
|
|
2
|
+
import '@refinitiv-ui/elements/icon/themes/halo/dark';
|
|
3
|
+
import '@refinitiv-ui/elements/overlay/themes/halo/dark';
|
|
4
4
|
|
|
5
|
-
elf.customStyles.define('ef-overlay-menu', ':host([compact]){min-width:250px}:host [part=menu-back]{border-bottom:1px solid #404040}:host [part=menu-back]:hover{background-color:#
|
|
5
|
+
elf.customStyles.define('ef-overlay-menu', ':host([compact]){min-width:250px}:host [part=menu-back]{border-bottom:1px solid #404040}:host [part=menu-back]:hover{background-color:#1429bd;color:#fff}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #1a1a1a;height:16px;width:16px;display:block}::-webkit-scrollbar-thumb{background:#595959;border-radius:0;border:1px solid #1a1a1a}::-webkit-scrollbar-thumb:hover{background:#1429bd}::-webkit-scrollbar-thumb:active{background:#0f1e8a}::-webkit-scrollbar-track{background:#1a1a1a}::-webkit-scrollbar-corner{background:#1a1a1a}::-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(#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:6.5px 8px,5.5px 7px,4.5px 6px,3.5px 5px,2.5px 6px,1.5px 7px,.5px 8px}::-webkit-scrollbar-button:vertical:start:decrement:hover{background-image:linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd);background-position:6.5px 8px,5.5px 7px,4.5px 6px,3.5px 5px,2.5px 6px,1.5px 7px,.5px 8px}::-webkit-scrollbar-button:vertical:start:decrement:active{background-image:linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a);background-position:6.5px 8px,5.5px 7px,4.5px 6px,3.5px 5px,2.5px 6px,1.5px 7px,.5px 8px}::-webkit-scrollbar-button:vertical:end:increment{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);background-position:6.5px 6px,5.5px 7px,4.5px 8px,3.5px 9px,2.5px 8px,1.5px 7px,.5px 6px}::-webkit-scrollbar-button:vertical:end:increment:hover{background-image:linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd);background-position:6.5px 6px,5.5px 7px,4.5px 8px,3.5px 9px,2.5px 8px,1.5px 7px,.5px 6px}::-webkit-scrollbar-button:vertical:end:increment:active{background-image:linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a);background-position:6.5px 6px,5.5px 7px,4.5px 8px,3.5px 9px,2.5px 8px,1.5px 7px,.5px 6px}::-webkit-scrollbar-button:horizontal:start:decrement{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);background-position:8px 6.5px,7px 5.5px,6px 4.5px,5px 3.5px,6px 2.5px,7px 1.5px,8px .5px}::-webkit-scrollbar-button:horizontal:start:decrement:hover{background-image:linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd);background-position:8px 6.5px,7px 5.5px,6px 4.5px,5px 3.5px,6px 2.5px,7px 1.5px,8px .5px}::-webkit-scrollbar-button:horizontal:start:decrement:active{background-image:linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a);background-position:8px 6.5px,7px 5.5px,6px 4.5px,5px 3.5px,6px 2.5px,7px 1.5px,8px .5px}::-webkit-scrollbar-button:horizontal:end:increment{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);background-position:6px 6.5px,7px 5.5px,8px 4.5px,9px 3.5px,8px 2.5px,7px 1.5px,6px .5px}::-webkit-scrollbar-button:horizontal:end:increment:hover{background-image:linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd);background-position:6px 6.5px,7px 5.5px,8px 4.5px,9px 3.5px,8px 2.5px,7px 1.5px,6px .5px}::-webkit-scrollbar-button:horizontal:end:increment:active{background-image:linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a);background-position:6px 6.5px,7px 5.5px,8px 4.5px,9px 3.5px,8px 2.5px,7px 1.5px,6px .5px}:host{min-width:150px;max-width:300px;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;background-color:#262626;border:1px solid #334bff;padding:4px 0}:host ::slotted(ef-item),:host ef-item{padding-left:12px}:host([nested]:not([compact])){margin:-5px 2px 0}');
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import '@refinitiv-ui/elements/
|
|
2
|
-
import '@refinitiv-ui/elements/
|
|
3
|
-
import '@refinitiv-ui/elements/
|
|
1
|
+
import '@refinitiv-ui/elements/item/themes/halo/light';
|
|
2
|
+
import '@refinitiv-ui/elements/icon/themes/halo/light';
|
|
3
|
+
import '@refinitiv-ui/elements/overlay/themes/halo/light';
|
|
4
4
|
|
|
5
|
-
elf.customStyles.define('ef-overlay-menu', ':host([compact]){min-width:250px}:host [part=menu-back]{border-bottom:1px solid #d9d9d9}:host [part=menu-back]:hover{background-color:#
|
|
5
|
+
elf.customStyles.define('ef-overlay-menu', ':host([compact]){min-width:250px}:host [part=menu-back]{border-bottom:1px solid #d9d9d9}:host [part=menu-back]:hover{background-color:#1429bd;color:#fff}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #f2f2f2;height:16px;width:16px;display:block}::-webkit-scrollbar-thumb{background:#999;border-radius:0;border:1px solid #f2f2f2}::-webkit-scrollbar-thumb:hover{background:#1429bd}::-webkit-scrollbar-thumb:active{background:#0f1e8a}::-webkit-scrollbar-track{background:#f2f2f2}::-webkit-scrollbar-corner{background:#f2f2f2}::-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(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999);background-position:6.5px 8px,5.5px 7px,4.5px 6px,3.5px 5px,2.5px 6px,1.5px 7px,.5px 8px}::-webkit-scrollbar-button:vertical:start:decrement:hover{background-image:linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd);background-position:6.5px 8px,5.5px 7px,4.5px 6px,3.5px 5px,2.5px 6px,1.5px 7px,.5px 8px}::-webkit-scrollbar-button:vertical:start:decrement:active{background-image:linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a);background-position:6.5px 8px,5.5px 7px,4.5px 6px,3.5px 5px,2.5px 6px,1.5px 7px,.5px 8px}::-webkit-scrollbar-button:vertical:end:increment{background-image:linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999);background-position:6.5px 6px,5.5px 7px,4.5px 8px,3.5px 9px,2.5px 8px,1.5px 7px,.5px 6px}::-webkit-scrollbar-button:vertical:end:increment:hover{background-image:linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd);background-position:6.5px 6px,5.5px 7px,4.5px 8px,3.5px 9px,2.5px 8px,1.5px 7px,.5px 6px}::-webkit-scrollbar-button:vertical:end:increment:active{background-image:linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a);background-position:6.5px 6px,5.5px 7px,4.5px 8px,3.5px 9px,2.5px 8px,1.5px 7px,.5px 6px}::-webkit-scrollbar-button:horizontal:start:decrement{background-image:linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999);background-position:8px 6.5px,7px 5.5px,6px 4.5px,5px 3.5px,6px 2.5px,7px 1.5px,8px .5px}::-webkit-scrollbar-button:horizontal:start:decrement:hover{background-image:linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd);background-position:8px 6.5px,7px 5.5px,6px 4.5px,5px 3.5px,6px 2.5px,7px 1.5px,8px .5px}::-webkit-scrollbar-button:horizontal:start:decrement:active{background-image:linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a);background-position:8px 6.5px,7px 5.5px,6px 4.5px,5px 3.5px,6px 2.5px,7px 1.5px,8px .5px}::-webkit-scrollbar-button:horizontal:end:increment{background-image:linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999);background-position:6px 6.5px,7px 5.5px,8px 4.5px,9px 3.5px,8px 2.5px,7px 1.5px,6px .5px}::-webkit-scrollbar-button:horizontal:end:increment:hover{background-image:linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd);background-position:6px 6.5px,7px 5.5px,8px 4.5px,9px 3.5px,8px 2.5px,7px 1.5px,6px .5px}::-webkit-scrollbar-button:horizontal:end:increment:active{background-image:linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a);background-position:6px 6.5px,7px 5.5px,8px 4.5px,9px 3.5px,8px 2.5px,7px 1.5px,6px .5px}:host{min-width:150px;max-width:300px;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;background-color:#f2f2f2;border:1px solid #334bff;padding:4px 0}:host ::slotted(ef-item),:host ef-item{padding-left:12px}:host([nested]:not([compact])){margin:-5px 2px 0}');
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import '@refinitiv-ui/elements/
|
|
2
|
-
import '@refinitiv-ui/elements/
|
|
3
|
-
import '@refinitiv-ui/elements/
|
|
1
|
+
import '@refinitiv-ui/elements/item/themes/solar/charcoal';
|
|
2
|
+
import '@refinitiv-ui/elements/icon/themes/solar/charcoal';
|
|
3
|
+
import '@refinitiv-ui/elements/overlay/themes/solar/charcoal';
|
|
4
4
|
|
|
5
5
|
elf.customStyles.define('ef-overlay-menu', ':host{min-width:150px;max-width:300px;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;background-color:#3c3c42}:host([compact]){min-width:250px}:host [part=menu-back]{border-bottom:1px solid #2e2e33}:host [part=menu-back]:hover{background-color:rgba(255,255,255,.1)}::-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,5 +1,5 @@
|
|
|
1
|
-
import '@refinitiv-ui/elements/
|
|
2
|
-
import '@refinitiv-ui/elements/
|
|
3
|
-
import '@refinitiv-ui/elements/
|
|
1
|
+
import '@refinitiv-ui/elements/item/themes/solar/pearl';
|
|
2
|
+
import '@refinitiv-ui/elements/icon/themes/solar/pearl';
|
|
3
|
+
import '@refinitiv-ui/elements/overlay/themes/solar/pearl';
|
|
4
4
|
|
|
5
5
|
elf.customStyles.define('ef-overlay-menu', ':host{min-width:150px;max-width:300px;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;background-color:#fafbfc}:host([compact]){min-width:250px}:host [part=menu-back]{border-bottom:1px solid #a9afba}:host [part=menu-back]:hover{background-color:rgba(0,0,0,.08)}::-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}');
|
|
@@ -241,6 +241,11 @@ export declare class Pagination extends BasicElement {
|
|
|
241
241
|
*/
|
|
242
242
|
protected render(): TemplateResult;
|
|
243
243
|
}
|
|
244
|
+
declare global {
|
|
245
|
+
interface HTMLElementTagNameMap {
|
|
246
|
+
'ef-pagination': Pagination;
|
|
247
|
+
}
|
|
248
|
+
}
|
|
244
249
|
export {};
|
|
245
250
|
|
|
246
251
|
declare global {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import '@refinitiv-ui/elements/
|
|
2
|
-
import '@refinitiv-ui/elements/
|
|
3
|
-
import '@refinitiv-ui/elements/
|
|
1
|
+
import '@refinitiv-ui/elements/button/themes/halo/dark';
|
|
2
|
+
import '@refinitiv-ui/elements/button-bar/themes/halo/dark';
|
|
3
|
+
import '@refinitiv-ui/elements/layout/themes/halo/dark';
|
|
4
4
|
|
|
5
5
|
elf.customStyles.define('ef-pagination', ':host [part=container]{align-items:center;justify-content:flex-end}:host [part=label]{clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}:host [part=input]{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;font-size:12rem;font-weight:400;max-width:100%;padding:0 8px;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#ccc;border-radius:0;background-color:#0d0d0d;text-overflow:ellipsis;border:1px solid #404040;touch-action:manipulation;min-width:40px;text-align:center;height:22px;width:150px;margin:0}: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=input] ::-ms-clear{display:none}: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]:hover{border-color:grey;color:#fff}:host [part=input]:focus{background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=button]{touch-action:manipulation}:host{margin:1px 0}:host [part=input]::-moz-selection{color:#fff;background-color:#334bff}:host [part=input]::selection{color:#fff;background-color:#334bff}:host [part=buttons]{margin:0}');
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import '@refinitiv-ui/elements/
|
|
2
|
-
import '@refinitiv-ui/elements/
|
|
3
|
-
import '@refinitiv-ui/elements/
|
|
1
|
+
import '@refinitiv-ui/elements/button/themes/halo/light';
|
|
2
|
+
import '@refinitiv-ui/elements/button-bar/themes/halo/light';
|
|
3
|
+
import '@refinitiv-ui/elements/layout/themes/halo/light';
|
|
4
4
|
|
|
5
5
|
elf.customStyles.define('ef-pagination', ':host [part=container]{align-items:center;justify-content:flex-end}:host [part=label]{clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}:host [part=input]{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;font-size:12rem;font-weight:400;height:24px;max-width:100%;padding:0 8px;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#404040;border-radius:0;background-color:#fff;text-overflow:ellipsis;border:1px solid #595959;touch-action:manipulation;min-width:40px;text-align:center;width:150px;margin:0 1px}:host [part=input][disabled]{color:rgba(64,64,64,.5);border:1px solid rgba(89,89,89,.5)}:host [part=input][type=number]{padding-right:0}:host [part=input][warning]{border:1px solid #cca000}:host [part=input][warning][disabled]{color:rgba(64,64,64,.5);border:1px solid rgba(204,160,0,.5)}:host [part=input][error],:host [part=input][error][warning]{border:1px solid #b63243}:host [part=input][error][disabled],:host [part=input][error][warning][disabled]{color:rgba(64,64,64,.5);border:1px solid rgba(182,50,67,.5)}:host [part=input] ::-ms-clear{display:none}:host [part=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]:hover{border-color:#0d0d0d;color:#0d0d0d}:host [part=input]:focus{background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=button]{touch-action:manipulation}:host{margin:1px 0}:host [part=input]::-moz-selection{color:#fff;background-color:#334bff}:host [part=input]::selection{color:#fff;background-color:#334bff}:host [part=buttons]{margin:0}');
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import '@refinitiv-ui/elements/
|
|
2
|
-
import '@refinitiv-ui/elements/
|
|
3
|
-
import '@refinitiv-ui/elements/
|
|
1
|
+
import '@refinitiv-ui/elements/button/themes/solar/charcoal';
|
|
2
|
+
import '@refinitiv-ui/elements/button-bar/themes/solar/charcoal';
|
|
3
|
+
import '@refinitiv-ui/elements/layout/themes/solar/charcoal';
|
|
4
4
|
|
|
5
5
|
elf.customStyles.define('ef-pagination', ':host [part=container]{align-items:center;justify-content:flex-end}:host [part=label]{clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}:host [part=input]{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;font-size:13rem;font-weight:400;max-width:100%;padding:0 5px;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#c2c2c2;border-radius:0;background-color:#000;text-overflow:ellipsis;border:1px solid #4a4a52;touch-action:manipulation;min-width:40px;text-align:center;height:21px;width:150px;margin:0}:host [part=input][disabled]{color:rgba(194,194,194,.6);border:1px solid rgba(74,74,82,.6)}:host [part=input][type=number]{padding-right:0}:host [part=input][warning]{border:1px solid #f93}:host [part=input][warning][disabled]{color:rgba(194,194,194,.6);border:1px solid rgba(255,153,51,.6)}:host [part=input][error],:host [part=input][error][warning]{border:1px solid #f5475b}:host [part=input][error][disabled],:host [part=input][error][warning][disabled]{color:rgba(194,194,194,.6);border:1px solid rgba(245,71,91,.6)}:host [part=input] ::-ms-clear{display:none}:host [part=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]:hover{border-color:#77777d;color:#c2c2c2}:host [part=button]{touch-action:manipulation}:host{--first-icon:previous;--last-icon:next;--previous-icon:left;--next-icon:right}:host [part=input]:focus{background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#f93;border-style:dotted}');
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import '@refinitiv-ui/elements/
|
|
2
|
-
import '@refinitiv-ui/elements/
|
|
3
|
-
import '@refinitiv-ui/elements/
|
|
1
|
+
import '@refinitiv-ui/elements/button/themes/solar/pearl';
|
|
2
|
+
import '@refinitiv-ui/elements/button-bar/themes/solar/pearl';
|
|
3
|
+
import '@refinitiv-ui/elements/layout/themes/solar/pearl';
|
|
4
4
|
|
|
5
5
|
elf.customStyles.define('ef-pagination', ':host [part=container]{align-items:center;justify-content:flex-end}:host [part=label]{clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}:host [part=input]{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;font-size:13rem;font-weight:400;max-width:100%;padding:0 5px;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#484848;border-radius:0;background-color:#fff;text-overflow:ellipsis;border:1px solid #a9afba;touch-action:manipulation;min-width:40px;text-align:center;height:23px;width:150px;margin:0 1px}:host [part=input][disabled]{color:rgba(72,72,72,.6);border:1px solid rgba(169,175,186,.6)}:host [part=input][type=number]{padding-right:0}:host [part=input][warning]{border:1px solid #f93}:host [part=input][warning][disabled]{color:rgba(72,72,72,.6);border:1px solid rgba(255,153,51,.6)}:host [part=input][error],:host [part=input][error][warning]{border:1px solid #d94255}:host [part=input][error][disabled],:host [part=input][error][warning][disabled]{color:rgba(72,72,72,.6);border:1px solid rgba(217,66,85,.6)}:host [part=input] ::-ms-clear{display:none}:host [part=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]:hover{border-color:#bfc3cb;color:#484848}:host [part=button]{touch-action:manipulation}:host{--first-icon:previous;--last-icon:next;--previous-icon:left;--next-icon:right}:host [part=input]:focus{background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#ffb266;border-style:dotted}');
|
package/lib/panel/index.d.ts
CHANGED
|
@@ -24,12 +24,6 @@ A form control element for password.
|
|
|
24
24
|
| `value` | `value` | `string` | "" | Input's value |
|
|
25
25
|
| `warning` | `warning` | `boolean` | false | Set warning state |
|
|
26
26
|
|
|
27
|
-
## Methods
|
|
28
|
-
|
|
29
|
-
| Method | Type |
|
|
30
|
-
|--------------|-----------|
|
|
31
|
-
| `renderIcon` | `(): any` |
|
|
32
|
-
|
|
33
27
|
## Events
|
|
34
28
|
|
|
35
29
|
| Event | Description |
|
|
@@ -73,6 +73,11 @@ export declare class PasswordField extends TextField {
|
|
|
73
73
|
*/
|
|
74
74
|
protected togglePasswordVisibility(): void;
|
|
75
75
|
}
|
|
76
|
+
declare global {
|
|
77
|
+
interface HTMLElementTagNameMap {
|
|
78
|
+
'ef-password-field': PasswordField;
|
|
79
|
+
}
|
|
80
|
+
}
|
|
76
81
|
|
|
77
82
|
declare global {
|
|
78
83
|
interface HTMLElementTagNameMap {
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import '@refinitiv-ui/elements/
|
|
1
|
+
import '@refinitiv-ui/elements/icon/themes/halo/dark';
|
|
2
2
|
|
|
3
3
|
elf.customStyles.define('ef-password-field', ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:12rem;font-weight:400;height:24px;width:152px;max-width:100%;padding:0 8px;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;color:#ccc}:host([disabled]){border:1px solid rgba(64,64,64,.5);color:rgba(204,204,204,.5);background-color:rgba(13,13,13,.5)}:host([type=number]){padding-right:0}:host([warning]){border:1px solid #ffc800}: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 #f5475b}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(204,204,204,.5);border:1px solid rgba(160,28,43,.5)}:host ::-ms-clear{display:none}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host([disabled]) [part=input]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host ::-moz-selection{color:#fff;background-color:#334bff}:host ::selection{color:#fff;background-color:#334bff}:host [part=icon]{padding-left:2px;color:#ccc;min-width:1em}: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]: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([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([focused]),:host([focused][error][warning]){border-color:#334bff;color:#fff}:host([focused]) [part=icon],:host([focused][error][warning]) [part=icon]{color:#6678ff}:host [part=input]{color:inherit;padding:0;margin:0;flex:1 1 auto;min-width:0;width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis;touch-action:manipulation}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:invalid{box-shadow:none}:host [part=icon]:hover{cursor:pointer}:host [part=input]::-ms-reveal{display:none}');
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import '@refinitiv-ui/elements/
|
|
1
|
+
import '@refinitiv-ui/elements/icon/themes/halo/light';
|
|
2
2
|
|
|
3
3
|
elf.customStyles.define('ef-password-field', ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:12rem;font-weight:400;height:24px;width:152px;max-width:100%;padding:0 8px;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;color:#404040}:host([disabled]){border:1px solid rgba(89,89,89,.5);color:rgba(64,64,64,.5);background-color:rgba(255,255,255,.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 #d94255}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(64,64,64,.5);border:1px solid rgba(182,50,67,.5)}:host ::-ms-clear{display:none}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host([disabled]) [part=input]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host ::-moz-selection{color:#fff;background-color:#334bff}:host ::selection{color:#fff;background-color:#334bff}:host [part=icon]{padding-left:2px;color:#404040;min-width:1em}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover){border-color:#0d0d0d;color:#0d0d0d}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover) [part=icon]{color:#334bff}:host([warning]:hover:not([readonly]):not([focused])){color:#0d0d0d;border-color:#ffe999}:host([warning][disabled]),:host([warning][readonly]:not([focused])){border-color:rgba(255,233,153,.5)}:host([error]:hover:not([readonly]):not([focused])){color:#0d0d0d;border-color:#eeacb4}:host([error][disabled]),:host([error][readonly]:not([focused])),:host([error][warning][disabled]){border-color:rgba(238,172,180,.5)}:host([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([focused]),:host([focused][error][warning]){border-color:#334bff;color:#0d0d0d}:host([focused]) [part=icon],:host([focused][error][warning]) [part=icon]{color:#334bff}:host [part=input]{color:inherit;padding:0;margin:0;flex:1 1 auto;min-width:0;width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis;touch-action:manipulation}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:invalid{box-shadow:none}:host [part=icon]:hover{cursor:pointer}:host [part=input]::-ms-reveal{display:none}');
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import '@refinitiv-ui/elements/
|
|
1
|
+
import '@refinitiv-ui/elements/icon/themes/solar/charcoal';
|
|
2
2
|
|
|
3
3
|
elf.customStyles.define('ef-password-field', ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:13rem;font-weight:400;height:23px;width:140px;max-width:100%;padding:0 5px;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#c2c2c2;border-radius:0;text-overflow:ellipsis;background-color:#000;border:1px solid #4a4a52}:host([type=number]){padding-right:0}:host([error]),:host([error][warning]){border:1px solid #f5475b}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(194,194,194,.6);border:1px solid rgba(245,71,91,.6)}:host ::-ms-clear{display:none}:host [part=input]{color:inherit;padding:0;margin:0;flex:1 1 auto;min-width:0;width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis;touch-action:manipulation}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:invalid{box-shadow:none}:host [part=icon]{color:#e2e2e2;min-width:1em}:host([disabled]) [part=input]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host([disabled]){border:1px solid rgba(74,74,82,.6);color:rgba(194,194,194,.6)}:host([readonly]){border:1px solid rgba(74,74,82,.6)}:host(:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #77777d}:host([warning]){background-color:#000;border:1px solid #f93}:host([warning][disabled]){border:1px solid rgba(255,153,51,.6);color:rgba(194,194,194,.6)}:host([warning][readonly]){border:1px solid rgba(255,153,51,.6)}:host([warning]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #ffb366}:host([error]),:host([error][warning]:not([focused])){background-color:#000;border:1px solid #f5475b}:host([error][disabled]),:host([error][warning]:not([focused])[disabled]){border:1px solid rgba(245,71,91,.6);color:rgba(194,194,194,.6)}:host([error][readonly]),:host([error][warning]:not([focused])[readonly]){border:1px solid rgba(245,71,91,.6)}:host([error]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover),:host([error][warning]:not([focused]):not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #f87584}:host([highlight]){background-color:#1b252f;border:1px solid #4a4a52}:host([highlight][disabled]){border:1px solid rgba(74,74,82,.6);color:rgba(194,194,194,.6);background-color:rgba(27,37,47,.6)}:host([highlight][readonly]){border:1px solid rgba(74,74,82,.6)}:host([highlight]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #77777d}:host([indirect]){color:#0fd;background-color:#000;border:1px solid #898623}:host([indirect][disabled]){border:1px solid rgba(137,134,35,.6);color:rgba(0,255,221,.6)}:host([indirect][readonly]){border:1px solid rgba(137,134,35,.6)}:host([indirect]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #a7a45a}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#f93;border-style:dotted}:host([disabled]) [part=input]::-webkit-input-placeholder{color:rgba(102,101,112,.6)}:host([disabled]) [part=input]::-moz-placeholder{color:rgba(102,101,112,.6)}:host([disabled]) [part=input]:-ms-input-placeholder{color:rgba(102,101,112,.6)}:host [part=icon]:hover{cursor:pointer}:host [part=input]::-ms-reveal{display:none}');
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import '@refinitiv-ui/elements/
|
|
1
|
+
import '@refinitiv-ui/elements/icon/themes/solar/pearl';
|
|
2
2
|
|
|
3
3
|
elf.customStyles.define('ef-password-field', ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:13rem;font-weight:400;height:23px;width:140px;max-width:100%;padding:0 5px;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#484848;border-radius:0;text-overflow:ellipsis;background-color:#fff;border:1px solid #a9afba}:host([type=number]){padding-right:0}:host([error]),:host([error][warning]){border:1px solid #d94255}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(72,72,72,.6);border:1px solid rgba(217,66,85,.6)}:host ::-ms-clear{display:none}:host [part=input]{color:inherit;padding:0;margin:0;flex:1 1 auto;min-width:0;width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis;touch-action:manipulation}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:invalid{box-shadow:none}:host [part=icon]{color:#acafb5;min-width:1em}:host([disabled]) [part=input]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host([disabled]){border:1px solid rgba(169,175,186,.6);color:rgba(72,72,72,.6)}:host([readonly]){border:1px solid rgba(169,175,186,.6)}:host(:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #bfc3cb}:host([warning]){background-color:#fff;border:1px solid #f93}:host([warning][disabled]){border:1px solid rgba(255,153,51,.6);color:rgba(72,72,72,.6)}:host([warning][readonly]){border:1px solid rgba(255,153,51,.6)}:host([warning]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #ffb366}:host([error]),:host([error][warning]:not([focused])){background-color:#fff;border:1px solid #d94255}:host([error][disabled]),:host([error][warning]:not([focused])[disabled]){border:1px solid rgba(217,66,85,.6);color:rgba(72,72,72,.6)}:host([error][readonly]),:host([error][warning]:not([focused])[readonly]){border:1px solid rgba(217,66,85,.6)}:host([error]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover),:host([error][warning]:not([focused]):not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #e37180}:host([highlight]){background-color:#b0ffff;border:1px solid #a9afba}:host([highlight][disabled]){border:1px solid rgba(169,175,186,.6);color:rgba(72,72,72,.6);background-color:rgba(176,255,255,.6)}:host([highlight][readonly]){border:1px solid rgba(169,175,186,.6)}:host([highlight]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #bfc3cb}:host([indirect]){color:#009494;background-color:#effefe;border:1px solid #898623}:host([indirect][disabled]){border:1px solid rgba(137,134,35,.6);color:rgba(0,148,148,.6)}:host([indirect][readonly]){border:1px solid rgba(137,134,35,.6)}:host([indirect]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #a7a45a}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#ffb266;border-style:dotted}:host([disabled]) [part=input]::-webkit-input-placeholder{color:rgba(102,101,112,.6)}:host([disabled]) [part=input]::-moz-placeholder{color:rgba(102,101,112,.6)}:host([disabled]) [part=input]:-ms-input-placeholder{color:rgba(102,101,112,.6)}:host [part=icon]:hover{cursor:pointer}:host [part=input]::-ms-reveal{display:none}');
|
package/lib/pill/index.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import '@refinitiv-ui/elements/
|
|
1
|
+
import '@refinitiv-ui/elements/icon/themes/halo/dark';
|
|
2
2
|
|
|
3
|
-
elf.customStyles.define('ef-pill', ':host{touch-action:manipulation;background:#333;transition:120ms;color:#ccc;margin:2px;font-family:inherit;font-size:12rem;font-weight:400;padding:0 5px;min-width:21px;max-width:180px;outline:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;vertical-align:middle;position:relative;overflow:hidden}:host [part=close]{touch-action:manipulation;border-radius:100%;position:relative;display:flex;margin-left:4px;flex:none;width:12px;height:12px;box-sizing:border-box;cursor:pointer;background-clip:content-box;color:#ccc;min-width:12px;opacity:.4;background-color:initial}:host [part=close]:active{border:1px solid transparent}:host([focused=visible]){border:1px solid #334bff}:host{border-radius:10px;height:20px;line-height:20px;background-color:#1a1a1a;border:1px solid #333}:host(:hover),:host([active]:hover){background-color:#
|
|
3
|
+
elf.customStyles.define('ef-pill', ':host{touch-action:manipulation;background:#333;transition:120ms;color:#ccc;margin:2px;font-family:inherit;font-size:12rem;font-weight:400;padding:0 5px;min-width:21px;max-width:180px;outline:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;vertical-align:middle;position:relative;overflow:hidden}:host [part=close]{touch-action:manipulation;border-radius:100%;position:relative;display:flex;margin-left:4px;flex:none;width:12px;height:12px;box-sizing:border-box;cursor:pointer;background-clip:content-box;color:#ccc;min-width:12px;opacity:.4;background-color:initial}:host [part=close]:active{border:1px solid transparent}:host([focused=visible]){border:1px solid #334bff}:host{border-radius:10px;height:20px;line-height:20px;background-color:#1a1a1a;border:1px solid #333}:host(:hover),:host([active]:hover){background-color:#1429bd;border-color:#1429bd}:host([active]){border-color:#0d0d0d;background-color:#334bff}:host([toggles][active][pressed]),:host([toggles][pressed]){border-color:#0d0d0d}:host([toggles][pressed]),:host([toggles][pressed]:hover){background-color:#0f1e8a}:host(:hover),:host([active]),:host([pressed]){color:#fff}:host(:hover) [part=close],:host([active]) [part=close],:host([pressed]) [part=close]{color:#fff;opacity:1}:host([disabled]){border-color:#0d0d0d;color:#ccc;background-color:#333}@media (pointer:coarse){:host(:not([active])),:host([toggles]:not([active])){color:#ccc;background-color:#1a1a1a;border-color:#333}:host(:not([active])) [part=close],:host([toggles]:not([active])) [part=close]{color:#ccc;opacity:.4}}');
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import '@refinitiv-ui/elements/
|
|
1
|
+
import '@refinitiv-ui/elements/icon/themes/halo/light';
|
|
2
2
|
|
|
3
|
-
elf.customStyles.define('ef-pill', ':host{touch-action:manipulation;background:#fafafa;transition:120ms;color:#0d0d0d;margin:2px;font-family:inherit;font-size:12rem;font-weight:400;padding:0 5px;min-width:21px;max-width:180px;outline:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;vertical-align:middle;position:relative;overflow:hidden}:host [part=close]{touch-action:manipulation;border-radius:100%;position:relative;display:flex;margin-left:4px;flex:none;width:12px;height:12px;box-sizing:border-box;cursor:pointer;background-clip:content-box;color:#595959;min-width:12px;opacity:.4;background-color:initial}:host [part=close]:active{border:1px solid transparent}:host([focused=visible]){border:1px solid #334bff}:host{border-radius:10px;height:20px;line-height:20px;background-color:#fafafa;border:1px solid #ccc}:host(:hover),:host([active]:hover){background-color:#
|
|
3
|
+
elf.customStyles.define('ef-pill', ':host{touch-action:manipulation;background:#fafafa;transition:120ms;color:#0d0d0d;margin:2px;font-family:inherit;font-size:12rem;font-weight:400;padding:0 5px;min-width:21px;max-width:180px;outline:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;vertical-align:middle;position:relative;overflow:hidden}:host [part=close]{touch-action:manipulation;border-radius:100%;position:relative;display:flex;margin-left:4px;flex:none;width:12px;height:12px;box-sizing:border-box;cursor:pointer;background-clip:content-box;color:#595959;min-width:12px;opacity:.4;background-color:initial}:host [part=close]:active{border:1px solid transparent}:host([focused=visible]){border:1px solid #334bff}:host{border-radius:10px;height:20px;line-height:20px;background-color:#fafafa;border:1px solid #ccc}:host(:hover),:host([active]:hover){background-color:#1429bd;border-color:#1429bd}:host([active]){border-color:#ccc;background-color:#334bff}:host([toggles][active][pressed]),:host([toggles][pressed]){border-color:#ccc}:host([toggles][pressed]),:host([toggles][pressed]:hover){background-color:#0f1e8a}:host(:hover),:host([active]),:host([pressed]){color:#fff}:host(:hover) [part=close],:host([active]) [part=close],:host([pressed]) [part=close]{color:#fff;opacity:1}:host([disabled]){border-color:#ccc;color:#0d0d0d;background-color:#fafafa}@media (pointer:coarse){:host(:not([active])),:host([toggles]:not([active])){color:#0d0d0d;background-color:#fafafa;border-color:#ccc}:host(:not([active])) [part=close],:host([toggles]:not([active])) [part=close]{color:#0d0d0d;opacity:.4}}');
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import '@refinitiv-ui/elements/
|
|
1
|
+
import '@refinitiv-ui/elements/icon/themes/solar/charcoal';
|
|
2
2
|
|
|
3
3
|
elf.customStyles.define('ef-pill', ':host{touch-action:manipulation;transition:70ms;font-family:inherit;font-size:13rem;font-weight:400;min-width:22px;max-width:180px;outline:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;vertical-align:middle;position:relative;overflow:hidden}:host [part=close]{touch-action:manipulation;border-radius:100%;position:relative;display:flex;margin-left:4px;flex:none;box-sizing:border-box;cursor:pointer;background-clip:content-box;width:11px;height:11px;color:#c2c2c2;background-color:#000}:host [part=close]:active{border:1px solid transparent}:host([clears]:hover) [part=close]{display:flex}:host([focused=visible]){border:1px solid #f93}:host{background:#c2c2c2;border-radius:2px;padding:0 4px;color:#000;height:17px;margin:3px 3px 0 0}:host [part=close]:active{border:none}:host([readonly]){background:#c2c2c2}:host([toggles][active]){background:#f93;color:#000}:host([toggles][active]) [part=close]{color:#f93}@media (-ms-high-contrast:none),(pointer:fine){:host(:hover){background:#fff}:host([toggles][active]:hover){background:#ffb366}}');
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import '@refinitiv-ui/elements/
|
|
1
|
+
import '@refinitiv-ui/elements/icon/themes/solar/pearl';
|
|
2
2
|
|
|
3
3
|
elf.customStyles.define('ef-pill', ':host{touch-action:manipulation;transition:70ms;font-family:inherit;font-size:13rem;font-weight:400;min-width:22px;max-width:180px;outline:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;vertical-align:middle;position:relative;overflow:hidden}:host [part=close]{touch-action:manipulation;border-radius:100%;position:relative;display:flex;margin-left:4px;flex:none;box-sizing:border-box;cursor:pointer;background-clip:content-box;width:11px;height:11px;color:#a9afba;background-color:#fff}:host [part=close]:active{border:1px solid transparent}:host([clears]:hover) [part=close]{display:flex}:host([focused=visible]){border:1px solid #f93}:host{background:#a9afba;border-radius:2px;padding:0 4px;color:#fff;height:17px;margin:3px 3px 0 0}:host [part=close]:active{border:none}:host([readonly]){background:#a9afba}:host([toggles][active]){background:#ee7600;color:#fff}:host([toggles][active]) [part=close]{color:#ee7600}@media (-ms-high-contrast:none),(pointer:fine){:host(:hover){background:#8a8a96}:host([toggles][active]:hover){background:#ee7600}}');
|
|
@@ -66,6 +66,11 @@ export declare class ProgressBar extends BasicElement {
|
|
|
66
66
|
*/
|
|
67
67
|
protected render(): TemplateResult;
|
|
68
68
|
}
|
|
69
|
+
declare global {
|
|
70
|
+
interface HTMLElementTagNameMap {
|
|
71
|
+
'ef-progress-bar': ProgressBar;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
69
74
|
|
|
70
75
|
declare global {
|
|
71
76
|
interface HTMLElementTagNameMap {
|
|
@@ -107,6 +107,11 @@ export declare class RadioButton extends ControlElement {
|
|
|
107
107
|
*/
|
|
108
108
|
protected render(): TemplateResult;
|
|
109
109
|
}
|
|
110
|
+
declare global {
|
|
111
|
+
interface HTMLElementTagNameMap {
|
|
112
|
+
'ef-radio-button': RadioButton;
|
|
113
|
+
}
|
|
114
|
+
}
|
|
110
115
|
|
|
111
116
|
declare global {
|
|
112
117
|
interface HTMLElementTagNameMap {
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import '@refinitiv-ui/elements/
|
|
1
|
+
import '@refinitiv-ui/elements/tooltip/themes/halo/dark';
|
|
2
2
|
|
|
3
3
|
elf.customStyles.define('ef-radio-button', ':host{margin:1px 0;vertical-align:middle;display:inline-flex;align-items:center;flex-wrap:nowrap;font-size:inherit;font-weight:inherit;touch-action:manipulation;--check-color:#6678FF;color:#ccc}:host(:focus){outline:0}:host [part=container]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:100%;background-color:#0d0d0d;transition:box-shadow 150ms,border-color 150ms;box-shadow:inset 0 0 0 rgba(0,0,0,.5);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;border:1px solid #404040;width:14px;height:14px}:host [part=check]{display:flex;justify-content:center;align-items:center;box-sizing:border-box;color:var(--check-color,#6678ff);border:none;background-color:currentColor;transform:none;border-radius:100%;margin:0;width:8px;height:8px}:host [part=label]{margin:0 7px;cursor:default}:host([disabled]) [part=check],:host([readonly]) [part=check]{color:var(--check-color,#ccc)}:host([disabled]) [part=check]{opacity:.5}:host([disabled][checked]) [part=check]{opacity:.5}:host([disabled]) [part=label]{opacity:.65}@media (-ms-high-contrast:none),(pointer:fine){:host(:focus) [part=container]{border-color:#334bff;box-shadow:0 0 0 #334bff}}:host(:not([readonly])) [part=container]{cursor:pointer}:host(:hover:not([checked]):not([indeterminate]):not([readonly])) [part=container]{border-color:grey}:host(:hover:not([readonly])){color:#fff}:host([disabled]),:host([disabled]) [part=label]{opacity:.5}:host([checked]) [part=container]{border:1px solid #334bff}:host(:focus[readonly]:not([checked])) [part=container]{border-color:#404040}:host([focused=visible]){outline:#334bff solid 1px;outline-offset:2px}');
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import '@refinitiv-ui/elements/
|
|
1
|
+
import '@refinitiv-ui/elements/tooltip/themes/halo/light';
|
|
2
2
|
|
|
3
3
|
elf.customStyles.define('ef-radio-button', ':host{margin:1px 0;vertical-align:middle;display:inline-flex;align-items:center;flex-wrap:nowrap;font-size:inherit;font-weight:inherit;touch-action:manipulation;--check-color:#334BFF;color:#404040}:host(:focus){outline:0}:host [part=container]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:100%;background-color:#fff;transition:box-shadow 150ms,border-color 150ms;box-shadow:inset 0 0 0 rgba(0,0,0,.25);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;border:1px solid #595959;width:14px;height:14px}:host [part=check]{display:flex;justify-content:center;align-items:center;box-sizing:border-box;color:var(--check-color,#334bff);border:none;background-color:currentColor;transform:none;border-radius:100%;margin:0;width:8px;height:8px}:host [part=label]{margin:0 7px;cursor:default}:host([disabled]) [part=check],:host([readonly]) [part=check]{color:var(--check-color,#404040)}:host([disabled]) [part=check]{opacity:.5}:host([disabled][checked]) [part=check]{opacity:.5}:host([disabled]) [part=label]{opacity:.65}@media (-ms-high-contrast:none),(pointer:fine){:host(:focus) [part=container]{border-color:#334bff;box-shadow:0 0 0 #334bff}}:host(:not([readonly])) [part=container]{cursor:pointer}:host(:hover:not([checked]):not([indeterminate]):not([readonly])) [part=container]{border-color:#0d0d0d}:host(:hover:not([readonly])){color:#0d0d0d}:host([disabled]),:host([disabled]) [part=label]{opacity:.5}:host([checked]) [part=container]{border:1px solid #334bff}:host(:focus[readonly]:not([checked])) [part=container]{border-color:#595959}:host([focused=visible]){outline:#334bff solid 1px;outline-offset:2px}');
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import '@refinitiv-ui/elements/
|
|
1
|
+
import '@refinitiv-ui/elements/tooltip/themes/solar/charcoal';
|
|
2
2
|
|
|
3
3
|
elf.customStyles.define('ef-radio-button', ':host{margin:1px 0;vertical-align:middle;display:inline-flex;align-items:center;flex-wrap:nowrap;font-size:inherit;font-weight:inherit;touch-action:manipulation}:host(:focus){outline:0}:host [part=container]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:100%;background-color:#000;transition:box-shadow 150ms,border-color 150ms;box-shadow:inset 0 0 0 rgba(0,0,0,.6);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;border:1px solid #4a4a52;height:11px;width:11px}:host [part=check]{display:flex;justify-content:center;align-items:center;box-sizing:border-box;color:var(--check-color,#f93);border:none;background-color:currentColor;transform:none;border-radius:100%;margin:0;width:7px;height:7px}:host [part=label]{cursor:default;margin:0 4px}:host([disabled]) [part=check],:host([readonly]) [part=check]{color:var(--check-color,#e2e2e2)}:host([disabled]) [part=check]{opacity:.5}:host([disabled][checked]) [part=check]{opacity:.5}:host([disabled]) [part=label]{opacity:.65;opacity:rgba(194,194,194,.6)}:host([checked][disabled]) [part=check]{color:#c2c2c2}:host([checked][readonly]) [part=check]{color:rgba(194,194,194,.5)}:host([disabled]) [part=container],:host([readonly]) [part=container]{color:rgba(194,194,194,.6);border-color:rgba(74,74,82,.6);background-color:rgba(0,0,0,.6)}@media (-ms-high-contrast:none),(pointer:fine){:host(:focus) [part=container]{box-shadow:0 0 0 #f93;border:1px dotted #f93}}');
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import '@refinitiv-ui/elements/
|
|
1
|
+
import '@refinitiv-ui/elements/tooltip/themes/solar/pearl';
|
|
2
2
|
|
|
3
3
|
elf.customStyles.define('ef-radio-button', ':host{margin:1px 0;vertical-align:middle;display:inline-flex;align-items:center;flex-wrap:nowrap;font-size:inherit;font-weight:inherit;touch-action:manipulation}:host(:focus){outline:0}:host [part=container]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:100%;background-color:#fff;transition:box-shadow 150ms,border-color 150ms;box-shadow:inset 0 0 0 rgba(0,0,0,.3);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;border:1px solid #a9afba;height:11px;width:11px}:host [part=check]{display:flex;justify-content:center;align-items:center;box-sizing:border-box;color:var(--check-color,#ee7600);border:none;background-color:currentColor;transform:none;border-radius:100%;margin:0;width:7px;height:7px}:host [part=label]{cursor:default;margin:0 4px}:host([disabled]) [part=check],:host([readonly]) [part=check]{color:var(--check-color,#acafb5)}:host([disabled]) [part=check]{opacity:.5}:host([disabled][checked]) [part=check]{opacity:.5}:host([disabled]) [part=label]{opacity:.65;opacity:rgba(72,72,72,.6)}:host([checked][disabled]) [part=check]{color:#a9afba}:host([checked][readonly]) [part=check]{color:rgba(169,175,186,.5)}:host([disabled]) [part=container],:host([readonly]) [part=container]{color:rgba(72,72,72,.6);border-color:rgba(169,175,186,.6);background-color:rgba(255,255,255,.6)}@media (-ms-high-contrast:none),(pointer:fine){:host(:focus) [part=container]{box-shadow:0 0 0 #ffb266;border:1px dotted #ffb266}}');
|
package/lib/rating/index.d.ts
CHANGED