@refinitiv-ui/elements 7.0.0 → 7.0.1
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 +191 -456
- package/LICENSE +2 -2
- package/README.md +13 -11
- package/cli.mjs +5 -3
- package/lib/accordion/index.d.ts +1 -1
- package/lib/accordion/index.js +4 -7
- package/lib/appstate-bar/index.d.ts +2 -2
- package/lib/appstate-bar/index.js +10 -4
- package/lib/autosuggest/index.d.ts +7 -7
- package/lib/autosuggest/index.js +80 -80
- package/lib/autosuggest/themes/solar/charcoal/index.js +1 -1
- package/lib/autosuggest/themes/solar/pearl/index.js +1 -1
- package/lib/button/index.js +7 -10
- package/lib/button-bar/index.d.ts +1 -1
- package/lib/button-bar/index.js +12 -12
- package/lib/calendar/index.d.ts +39 -39
- package/lib/calendar/index.js +156 -123
- package/lib/calendar/utils.js +1 -1
- package/lib/canvas/index.d.ts +1 -1
- package/lib/canvas/index.js +2 -4
- 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/chart/elements/chart.d.ts +4 -4
- package/lib/chart/elements/chart.js +39 -33
- package/lib/chart/plugins/doughnut-center-label.d.ts +3 -3
- package/lib/chart/plugins/doughnut-center-label.js +13 -9
- package/lib/checkbox/index.d.ts +1 -1
- package/lib/checkbox/index.js +12 -13
- package/lib/clock/index.d.ts +55 -55
- package/lib/clock/index.js +84 -95
- package/lib/clock/themes/halo/dark/index.js +1 -1
- package/lib/clock/themes/halo/light/index.js +1 -1
- package/lib/clock/themes/solar/charcoal/index.js +1 -1
- package/lib/clock/themes/solar/pearl/index.js +1 -1
- package/lib/collapse/index.d.ts +1 -1
- package/lib/collapse/index.js +27 -18
- package/lib/collapse/themes/halo/dark/index.js +1 -1
- package/lib/collapse/themes/halo/light/index.js +1 -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-picker/index.d.ts +2 -2
- package/lib/color-picker/index.js +40 -34
- 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/configuration/elements/configuration.js +2 -2
- package/lib/counter/index.d.ts +4 -4
- package/lib/counter/index.js +9 -7
- package/lib/datetime-field/index.d.ts +4 -5
- package/lib/datetime-field/index.js +32 -23
- package/lib/datetime-field/utils.js +11 -1
- package/lib/datetime-picker/index.d.ts +75 -75
- package/lib/datetime-picker/index.js +150 -131
- package/lib/datetime-picker/locales.js +5 -5
- package/lib/datetime-picker/utils.js +9 -9
- package/lib/dialog/draggable-element.js +1 -2
- package/lib/dialog/index.d.ts +5 -5
- package/lib/dialog/index.js +51 -47
- package/lib/email-field/index.d.ts +1 -1
- package/lib/email-field/index.js +6 -6
- package/lib/events.d.ts +1 -1
- package/lib/flag/index.d.ts +1 -1
- package/lib/flag/index.js +6 -5
- 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 -1
- package/lib/header/themes/halo/light/index.js +1 -1
- package/lib/header/themes/solar/charcoal/index.js +1 -1
- package/lib/header/themes/solar/pearl/index.js +1 -1
- 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/index.d.ts +9 -9
- package/lib/heatmap/index.js +51 -42
- package/lib/icon/index.d.ts +2 -2
- package/lib/icon/index.js +8 -10
- package/lib/interactive-chart/helpers/types.d.ts +3 -3
- package/lib/interactive-chart/index.d.ts +29 -29
- package/lib/interactive-chart/index.js +69 -55
- 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/jsx.d.ts +6 -4
- package/lib/label/index.d.ts +1 -1
- package/lib/label/index.js +10 -7
- package/lib/layout/index.d.ts +7 -7
- package/lib/layout/index.js +7 -7
- package/lib/led-gauge/index.d.ts +1 -1
- package/lib/led-gauge/index.js +10 -10
- 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/loader/index.js +7 -8
- package/lib/multi-input/index.d.ts +6 -6
- package/lib/multi-input/index.js +39 -45
- 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 +19 -13
- package/lib/notification/helpers/status.js +1 -1
- package/lib/number-field/index.d.ts +5 -6
- package/lib/number-field/index.js +37 -47
- 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 +152 -96
- 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-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 +14 -13
- package/lib/pagination/index.d.ts +4 -4
- package/lib/pagination/index.js +39 -14
- package/lib/panel/index.js +1 -1
- package/lib/password-field/index.d.ts +2 -2
- package/lib/password-field/index.js +3 -3
- package/lib/pill/index.d.ts +1 -1
- package/lib/pill/index.js +22 -19
- package/lib/progress-bar/index.d.ts +1 -1
- package/lib/progress-bar/index.js +38 -37
- 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/rating/index.d.ts +1 -1
- package/lib/rating/index.js +2 -5
- 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/select/index.d.ts +34 -34
- package/lib/select/index.js +68 -81
- package/lib/sidebar-layout/index.d.ts +2 -2
- package/lib/sidebar-layout/index.js +7 -9
- package/lib/slider/index.d.ts +2 -2
- package/lib/slider/index.js +57 -45
- 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/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/tab/index.d.ts +1 -1
- package/lib/tab/index.js +16 -27
- package/lib/tab/themes/halo/dark/index.js +1 -1
- package/lib/tab/themes/halo/light/index.js +1 -1
- package/lib/tab/themes/solar/charcoal/index.js +1 -1
- package/lib/tab/themes/solar/pearl/index.js +1 -1
- 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 -1
- package/lib/tab-bar/themes/halo/light/index.js +1 -1
- package/lib/text-field/index.d.ts +1 -1
- package/lib/text-field/index.js +34 -31
- package/lib/time-picker/index.d.ts +6 -6
- package/lib/time-picker/index.js +103 -89
- package/lib/toggle/index.d.ts +1 -1
- package/lib/toggle/index.js +4 -3
- package/lib/tooltip/elements/title-tooltip.js +2 -2
- 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/tornado-chart/elements/tornado-chart.d.ts +1 -1
- package/lib/tornado-chart/elements/tornado-chart.js +2 -2
- package/lib/tornado-chart/elements/tornado-item.d.ts +2 -2
- package/lib/tornado-chart/elements/tornado-item.js +12 -10
- 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/solar/charcoal/index.js +1 -1
- package/lib/tree/themes/solar/pearl/index.js +1 -1
- 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 -1
- package/lib/tree-select/themes/halo/light/index.js +1 -1
- package/lib/tree-select/themes/solar/charcoal/index.js +1 -1
- package/lib/tree-select/themes/solar/pearl/index.js +1 -1
- package/lib/version.js +1 -1
- package/package.json +16 -16
- package/tsconfig.tsbuildinfo +1 -1
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 {
|
|
@@ -150,7 +150,7 @@ let Layout = class Layout extends ResponsiveElement {
|
|
|
150
150
|
* A `TemplateResult` that will be used
|
|
151
151
|
* to render the updated internal template.
|
|
152
152
|
* @return Render template
|
|
153
|
-
|
|
153
|
+
*/
|
|
154
154
|
render() {
|
|
155
155
|
return html `<slot></slot>`;
|
|
156
156
|
}
|
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,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.
|
|
@@ -452,8 +451,7 @@ let List = class List extends ControlElement {
|
|
|
452
451
|
* @returns {void}
|
|
453
452
|
*/
|
|
454
453
|
clearSelection() {
|
|
455
|
-
this.queryItemsByPropertyValue('selected', true)
|
|
456
|
-
.forEach((item) => this.composer.setItemPropertyValue(item, 'selected', false));
|
|
454
|
+
this.queryItemsByPropertyValue('selected', true).forEach((item) => this.composer.setItemPropertyValue(item, 'selected', false));
|
|
457
455
|
this.requestUpdate();
|
|
458
456
|
}
|
|
459
457
|
/**
|
|
@@ -540,8 +538,8 @@ let List = class List extends ControlElement {
|
|
|
540
538
|
const currentChildren = Array.from(this.children);
|
|
541
539
|
const recyclableElements = this.calculateRecyclableElements(renderItems);
|
|
542
540
|
const renderChildren = renderItems.map((item) => this.createListItem(item, recyclableElements));
|
|
543
|
-
const deletions = currentChildren.filter(element => !renderChildren.includes(element));
|
|
544
|
-
deletions.forEach(element => this.removeChild(element));
|
|
541
|
+
const deletions = currentChildren.filter((element) => !renderChildren.includes(element));
|
|
542
|
+
deletions.forEach((element) => this.removeChild(element));
|
|
545
543
|
renderChildren.forEach((element, index) => {
|
|
546
544
|
if (this.children.length === index) {
|
|
547
545
|
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
|
/**
|
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,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
|
/**
|
package/lib/multi-input/index.js
CHANGED
|
@@ -3,10 +3,10 @@ import { ControlElement, css, html, nothing } 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 { createRef, ref } from '@refinitiv-ui/core/directives/ref.js';
|
|
6
|
-
import { VERSION } from '../version.js';
|
|
7
6
|
import { CollectionComposer } from '@refinitiv-ui/utils/collection.js';
|
|
8
7
|
import '../pill/index.js';
|
|
9
8
|
import '../text-field/index.js';
|
|
9
|
+
import { VERSION } from '../version.js';
|
|
10
10
|
const hasChanged = (newVal, oldVal) => oldVal === undefined ? false : newVal !== oldVal;
|
|
11
11
|
/**
|
|
12
12
|
* An input control component to display a selection of pills
|
|
@@ -85,7 +85,8 @@ let MultiInput = class MultiInput extends ControlElement {
|
|
|
85
85
|
?readonly="${item.readonly || this.readonly}"
|
|
86
86
|
?disabled="${item.disabled || this.disabled}"
|
|
87
87
|
value="${item.value}"
|
|
88
|
-
@clear="${this.onPillClearsHandler}"
|
|
88
|
+
@clear="${this.onPillClearsHandler}"
|
|
89
|
+
>
|
|
89
90
|
${item.label}
|
|
90
91
|
</ef-pill>
|
|
91
92
|
`;
|
|
@@ -109,21 +110,21 @@ let MultiInput = class MultiInput extends ControlElement {
|
|
|
109
110
|
:host {
|
|
110
111
|
display: block;
|
|
111
112
|
}
|
|
112
|
-
[part=list] {
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
113
|
+
[part='list'] {
|
|
114
|
+
flex-flow: row wrap;
|
|
115
|
+
max-height: 100%;
|
|
116
|
+
display: flex;
|
|
117
|
+
align-items: center;
|
|
118
|
+
align-content: flex-start;
|
|
119
|
+
flex: 1 1 auto;
|
|
120
|
+
flex-direction: row;
|
|
121
|
+
overflow-y: auto;
|
|
122
|
+
margin: auto;
|
|
122
123
|
}
|
|
123
|
-
[part=pill] {
|
|
124
|
+
[part='pill'] {
|
|
124
125
|
display: inline-flex;
|
|
125
126
|
}
|
|
126
|
-
[part=search] {
|
|
127
|
+
[part='search'] {
|
|
127
128
|
flex: 1;
|
|
128
129
|
min-width: 170px;
|
|
129
130
|
}
|
|
@@ -307,15 +308,15 @@ let MultiInput = class MultiInput extends ControlElement {
|
|
|
307
308
|
shouldValidateForMinLength(value) {
|
|
308
309
|
let error = false;
|
|
309
310
|
if (value) {
|
|
310
|
-
error = !!this.minLength &&
|
|
311
|
+
error = !!this.minLength && this.minLength > value.length;
|
|
311
312
|
}
|
|
312
313
|
return error;
|
|
313
314
|
}
|
|
314
315
|
/**
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
316
|
+
* Current value of text field
|
|
317
|
+
* @default -
|
|
318
|
+
* @param value Element value
|
|
319
|
+
*/
|
|
319
320
|
set value(value) {
|
|
320
321
|
const oldValue = this.oldValue;
|
|
321
322
|
value = this.castValue(value);
|
|
@@ -358,7 +359,7 @@ let MultiInput = class MultiInput extends ControlElement {
|
|
|
358
359
|
* @returns True if input should be re-validated
|
|
359
360
|
*/
|
|
360
361
|
shouldValidateInput(changedProperties) {
|
|
361
|
-
return
|
|
362
|
+
return changedProperties.has('minLength') || !!(this.minLength && changedProperties.has('value'));
|
|
362
363
|
}
|
|
363
364
|
/**
|
|
364
365
|
* Set the selection range
|
|
@@ -385,12 +386,7 @@ let MultiInput = class MultiInput extends ControlElement {
|
|
|
385
386
|
* @returns the main template
|
|
386
387
|
*/
|
|
387
388
|
render() {
|
|
388
|
-
return html `
|
|
389
|
-
<div id="list" part="list">
|
|
390
|
-
${this.pillsTemplate()}
|
|
391
|
-
${this.textFieldTemplate}
|
|
392
|
-
</div>
|
|
393
|
-
`;
|
|
389
|
+
return html ` <div id="list" part="list">${this.pillsTemplate()} ${this.textFieldTemplate}</div> `;
|
|
394
390
|
}
|
|
395
391
|
/**
|
|
396
392
|
* render the search element
|
|
@@ -401,22 +397,22 @@ let MultiInput = class MultiInput extends ControlElement {
|
|
|
401
397
|
return null;
|
|
402
398
|
}
|
|
403
399
|
return html `
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
400
|
+
<ef-text-field
|
|
401
|
+
${ref(this.searchRef)}
|
|
402
|
+
tabindex="1"
|
|
403
|
+
part="search"
|
|
404
|
+
transparent
|
|
405
|
+
?disabled="${this.disabled}"
|
|
406
|
+
@keydown="${this.handleKeyDown}"
|
|
407
|
+
@change="${this.onInputChange}"
|
|
408
|
+
@input="${this.onInputChange}"
|
|
409
|
+
maxlength="${this.maxLength || nothing}"
|
|
410
|
+
minlength="${this.minLength || nothing}"
|
|
411
|
+
?error="${this.error}"
|
|
412
|
+
.value="${this.value}"
|
|
413
|
+
.icon="${this.icon || null}"
|
|
414
|
+
.placeholder="${this.placeholder}"
|
|
415
|
+
></ef-text-field>
|
|
420
416
|
`;
|
|
421
417
|
}
|
|
422
418
|
/**
|
|
@@ -424,9 +420,7 @@ let MultiInput = class MultiInput extends ControlElement {
|
|
|
424
420
|
* @returns the template of pill components
|
|
425
421
|
*/
|
|
426
422
|
pillsTemplate() {
|
|
427
|
-
return html `
|
|
428
|
-
${this.composer.queryItems(() => true).map(this.pillTemplate)}
|
|
429
|
-
`;
|
|
423
|
+
return html ` ${this.composer.queryItems(() => true).map(this.pillTemplate)} `;
|
|
430
424
|
}
|
|
431
425
|
/**
|
|
432
426
|
* handle the clear event of pill
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { JSXInterface } from '../../jsx';
|
|
2
|
-
import {
|
|
3
|
-
import type { Notification } from './notification';
|
|
2
|
+
import { ElementSize, PropertyValues, ResponsiveElement, TemplateResult } from '@refinitiv-ui/core';
|
|
4
3
|
import type { TaskOptions } from '../helpers/types';
|
|
4
|
+
import type { Notification } from './notification';
|
|
5
5
|
export declare class NotificationTray extends ResponsiveElement {
|
|
6
6
|
/**
|
|
7
7
|
* Element version number
|
|
@@ -2,8 +2,8 @@ import { __decorate } from "tslib";
|
|
|
2
2
|
import { ResponsiveElement, 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 { TimeoutTaskRunner } from '@refinitiv-ui/utils/async.js';
|
|
6
|
+
import { VERSION } from '../../version.js';
|
|
7
7
|
let NotificationTray = class NotificationTray extends ResponsiveElement {
|
|
8
8
|
constructor() {
|
|
9
9
|
super(...arguments);
|
|
@@ -40,7 +40,7 @@ let NotificationTray = class NotificationTray extends ResponsiveElement {
|
|
|
40
40
|
* @returns notification task
|
|
41
41
|
*/
|
|
42
42
|
get nextDismissable() {
|
|
43
|
-
return this.showing.filter(item => item.options.duration !== Infinity)[0];
|
|
43
|
+
return this.showing.filter((item) => item.options.duration !== Infinity)[0];
|
|
44
44
|
}
|
|
45
45
|
/**
|
|
46
46
|
* On first updated lifecycle
|
|
@@ -59,7 +59,7 @@ let NotificationTray = class NotificationTray extends ResponsiveElement {
|
|
|
59
59
|
* @returns results
|
|
60
60
|
*/
|
|
61
61
|
isValidAttatchPoint(attach) {
|
|
62
|
-
return
|
|
62
|
+
return /^(top|bottom)$/.test(attach);
|
|
63
63
|
}
|
|
64
64
|
/**
|
|
65
65
|
* Get the amount of padding to be applied to the document.
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { JSXInterface } from '../../jsx';
|
|
2
|
-
import { BasicElement,
|
|
3
|
-
import { Translate } from '@refinitiv-ui/translate';
|
|
2
|
+
import { BasicElement, CSSResultGroup, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
|
|
4
3
|
import '@refinitiv-ui/phrasebook/locale/en/notification.js';
|
|
4
|
+
import { Translate } from '@refinitiv-ui/translate';
|
|
5
5
|
import '../../icon/index.js';
|
|
6
6
|
/**
|
|
7
7
|
* Used to show informative content when something happens in the application
|
|
@@ -1,11 +1,11 @@
|
|
|
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 { translate } from '@refinitiv-ui/translate';
|
|
6
|
-
import { VERSION } from '../../version.js';
|
|
7
5
|
import '@refinitiv-ui/phrasebook/locale/en/notification.js';
|
|
6
|
+
import { translate } from '@refinitiv-ui/translate';
|
|
8
7
|
import '../../icon/index.js';
|
|
8
|
+
import { VERSION } from '../../version.js';
|
|
9
9
|
/**
|
|
10
10
|
* Used to show informative content when something happens in the application
|
|
11
11
|
*
|
|
@@ -105,7 +105,7 @@ let Notification = class Notification extends BasicElement {
|
|
|
105
105
|
:host {
|
|
106
106
|
display: block;
|
|
107
107
|
}
|
|
108
|
-
[part=label] {
|
|
108
|
+
[part='label'] {
|
|
109
109
|
color: red;
|
|
110
110
|
}
|
|
111
111
|
`;
|
|
@@ -118,15 +118,21 @@ let Notification = class Notification extends BasicElement {
|
|
|
118
118
|
*/
|
|
119
119
|
render() {
|
|
120
120
|
return html `
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
121
|
+
<style>
|
|
122
|
+
:host {
|
|
123
|
+
display: block;
|
|
124
|
+
}
|
|
125
|
+
</style>
|
|
126
|
+
<div part="container">
|
|
127
|
+
<div part="content"><slot>${this.message}</slot></div>
|
|
128
|
+
<ef-icon
|
|
129
|
+
part="clear"
|
|
130
|
+
icon="cross"
|
|
131
|
+
role="button"
|
|
132
|
+
aria-description="${this.t('CLOSE')}"
|
|
133
|
+
@click="${this.onClearClick.bind(this)}"
|
|
134
|
+
></ef-icon>
|
|
135
|
+
</div>
|
|
130
136
|
`;
|
|
131
137
|
}
|
|
132
138
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { NotificationTray } from '../elements/notification-tray.js';
|
|
2
2
|
// TODO: Add to utils?
|
|
3
|
-
const DEV_ENV =
|
|
3
|
+
const DEV_ENV = /^(localhost|127\.0\.0\.1)$/.test(location.hostname);
|
|
4
4
|
const NotificationType = {
|
|
5
5
|
INFO: 'INFO',
|
|
6
6
|
CONFIRM: 'CONFIRM',
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { JSXInterface } from '../jsx';
|
|
2
|
-
import {
|
|
2
|
+
import { CSSResultGroup, FormFieldElement, PropertyValues, TapEvent, TemplateResult } from '@refinitiv-ui/core';
|
|
3
3
|
import { TemplateMap } from '@refinitiv-ui/core/directives/template-map.js';
|
|
4
4
|
import '../icon/index.js';
|
|
5
5
|
type SelectionDirection = 'forward' | 'backward' | 'none';
|
|
@@ -67,10 +67,10 @@ export declare class NumberField extends FormFieldElement {
|
|
|
67
67
|
max: string | null;
|
|
68
68
|
private interimValueState;
|
|
69
69
|
/**
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
70
|
+
* The value of the number entered into the input.
|
|
71
|
+
* @param value number-field value
|
|
72
|
+
* @default -
|
|
73
|
+
*/
|
|
74
74
|
set value(value: string);
|
|
75
75
|
get value(): string;
|
|
76
76
|
/**
|
|
@@ -313,7 +313,6 @@ export declare class NumberField extends FormFieldElement {
|
|
|
313
313
|
* type="text" - always `text`
|
|
314
314
|
* part="input" - always "input", used for styling
|
|
315
315
|
* inputmode="decimal" - show decimals keyboard by default
|
|
316
|
-
* pattern="'^[-+]?[0-9]*\.?[0-9]+([eE][-+]?[0-9]+)?$'" - numbers only
|
|
317
316
|
* role="spinbutton" - number field is actually a spinner
|
|
318
317
|
* aria-valuenow - current value or 0
|
|
319
318
|
* @keydown - Listener for `keydown` event. Runs `this.onInputKeyDown`
|