@refinitiv-ui/elements 5.12.0-dev.0 → 5.12.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +24 -0
- package/lib/collapse/custom-elements.json +4 -2
- package/lib/collapse/custom-elements.md +1 -1
- package/lib/collapse/index.d.ts +20 -16
- package/lib/collapse/index.js +78 -48
- package/lib/collapse/themes/halo/dark/index.js +1 -1
- package/lib/collapse/themes/halo/light/index.js +1 -1
- package/lib/collapse/themes/solar/charcoal/index.js +1 -1
- package/lib/collapse/themes/solar/pearl/index.js +1 -1
- package/lib/dialog/custom-elements.json +11 -0
- package/lib/dialog/custom-elements.md +4 -3
- package/lib/dialog/index.d.ts +17 -0
- package/lib/dialog/index.js +30 -5
- package/lib/radio-button/index.d.ts +2 -2
- package/lib/radio-button/index.js +3 -3
- package/lib/slider/index.js +10 -0
- package/lib/tab/custom-elements.json +13 -0
- package/lib/tab/custom-elements.md +1 -0
- package/lib/tab/index.d.ts +32 -14
- package/lib/tab/index.js +61 -33
- package/lib/tab-bar/custom-elements.json +12 -0
- package/lib/tab-bar/custom-elements.md +7 -0
- package/lib/tab-bar/index.d.ts +97 -7
- package/lib/tab-bar/index.js +247 -37
- package/lib/version.js +1 -1
- package/package.json +12 -20
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,30 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [5.12.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@5.11.0...@refinitiv-ui/elements@5.12.0) (2022-02-15)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* radio-button not add to group ([#167](https://github.com/Refinitiv/refinitiv-ui/issues/167)) ([fb05273](https://github.com/Refinitiv/refinitiv-ui/commit/fb052730cf8c7eeb376a3a49501b85dc363bf614))
|
|
12
|
+
* **slider:** value-changed event is not fired ([#174](https://github.com/Refinitiv/refinitiv-ui/issues/174)) ([687f244](https://github.com/Refinitiv/refinitiv-ui/commit/687f244b4d848a684dc986158f324974931a3689))
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
### Features
|
|
16
|
+
|
|
17
|
+
* **button-bar:** improve screen reader support ([#176](https://github.com/Refinitiv/refinitiv-ui/issues/176)) ([f121ea6](https://github.com/Refinitiv/refinitiv-ui/commit/f121ea62fbdc160823dff386ec937b45d0a131e7))
|
|
18
|
+
* **collapse:** accessibility support ([#203](https://github.com/Refinitiv/refinitiv-ui/issues/203)) ([12ae2f7](https://github.com/Refinitiv/refinitiv-ui/commit/12ae2f7fe036d0351e69f5daca4369fae4097917))
|
|
19
|
+
* **collapse:** add accessibility support ([#161](https://github.com/Refinitiv/refinitiv-ui/issues/161)) ([158f031](https://github.com/Refinitiv/refinitiv-ui/commit/158f0317dd4df9ab76e1bd27d4aa02151787c252))
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
### Reverts
|
|
23
|
+
|
|
24
|
+
* Revert "feat(collapse): add accessibility support (#161)" (#179) ([9a0ad70](https://github.com/Refinitiv/refinitiv-ui/commit/9a0ad709d71c243fe68dbc38318a04745ea5b23b)), closes [#161](https://github.com/Refinitiv/refinitiv-ui/issues/161) [#179](https://github.com/Refinitiv/refinitiv-ui/issues/179)
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
6
30
|
# [5.11.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@5.10.1...@refinitiv-ui/elements@5.11.0) (2022-01-14)
|
|
7
31
|
|
|
8
32
|
|
|
@@ -8,7 +8,8 @@
|
|
|
8
8
|
{
|
|
9
9
|
"name": "header",
|
|
10
10
|
"description": "Set text on the header",
|
|
11
|
-
"type": "string
|
|
11
|
+
"type": "string",
|
|
12
|
+
"default": "\"\""
|
|
12
13
|
},
|
|
13
14
|
{
|
|
14
15
|
"name": "level",
|
|
@@ -34,7 +35,8 @@
|
|
|
34
35
|
"name": "header",
|
|
35
36
|
"attribute": "header",
|
|
36
37
|
"description": "Set text on the header",
|
|
37
|
-
"type": "string
|
|
38
|
+
"type": "string",
|
|
39
|
+
"default": "\"\""
|
|
38
40
|
},
|
|
39
41
|
{
|
|
40
42
|
"name": "level",
|
|
@@ -9,7 +9,7 @@ for their primary displays.
|
|
|
9
9
|
| Property | Attribute | Type | Default | Description |
|
|
10
10
|
|------------|------------|---------------------|---------|--------------------------------------------------|
|
|
11
11
|
| `expanded` | `expanded` | `boolean` | false | Set to expand the item |
|
|
12
|
-
| `header` | `header` | `string
|
|
12
|
+
| `header` | `header` | `string` | "" | Set text on the header |
|
|
13
13
|
| `level` | `level` | `"1" \| "2" \| "3"` | "3" | Use level styling from theme |
|
|
14
14
|
| `spacing` | `spacing` | `boolean` | false | Set to apply padding from theme to content section |
|
|
15
15
|
|
package/lib/collapse/index.d.ts
CHANGED
|
@@ -26,10 +26,14 @@ export declare class Collapse extends BasicElement {
|
|
|
26
26
|
* @return CSS template
|
|
27
27
|
*/
|
|
28
28
|
static get styles(): CSSResultGroup;
|
|
29
|
+
/**
|
|
30
|
+
* Observes attribute change for `attributeChangedCallback`
|
|
31
|
+
*/
|
|
32
|
+
static get observedAttributes(): string[];
|
|
29
33
|
/**
|
|
30
34
|
* Set text on the header
|
|
31
35
|
*/
|
|
32
|
-
header: string
|
|
36
|
+
header: string;
|
|
33
37
|
/**
|
|
34
38
|
* Use level styling from theme
|
|
35
39
|
*/
|
|
@@ -45,11 +49,23 @@ export declare class Collapse extends BasicElement {
|
|
|
45
49
|
/**
|
|
46
50
|
* An ef-panel wrapper
|
|
47
51
|
*/
|
|
48
|
-
private
|
|
52
|
+
private panelHolderRef;
|
|
49
53
|
/**
|
|
50
54
|
* A panel used to display content
|
|
51
55
|
*/
|
|
52
|
-
private
|
|
56
|
+
private panelRef;
|
|
57
|
+
/**
|
|
58
|
+
* Used to control aria-level for heading
|
|
59
|
+
*/
|
|
60
|
+
private headingLevel;
|
|
61
|
+
/**
|
|
62
|
+
* Run when observed attributes change value
|
|
63
|
+
* @param name attribute name
|
|
64
|
+
* @param oldValue old attribute value
|
|
65
|
+
* @param newValue new attribute value
|
|
66
|
+
* @returns {void}
|
|
67
|
+
*/
|
|
68
|
+
attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
|
|
53
69
|
/**
|
|
54
70
|
* Called once after the component is first rendered
|
|
55
71
|
* @param changedProperties map of changed properties with old values
|
|
@@ -67,18 +83,6 @@ export declare class Collapse extends BasicElement {
|
|
|
67
83
|
* @returns {void}
|
|
68
84
|
*/
|
|
69
85
|
private toggle;
|
|
70
|
-
/**
|
|
71
|
-
* Check if target is a header
|
|
72
|
-
* @param element for checking
|
|
73
|
-
* @returns {boolean} true if target is ef-header
|
|
74
|
-
*/
|
|
75
|
-
private static isHeader;
|
|
76
|
-
/**
|
|
77
|
-
* Handle tap on the item header, will toggle the expanded state
|
|
78
|
-
* @param event Event object
|
|
79
|
-
* @returns {void}
|
|
80
|
-
*/
|
|
81
|
-
private handleTap;
|
|
82
86
|
/**
|
|
83
87
|
* Show or Hide the item depending on the expanded state
|
|
84
88
|
* @returns {void}
|
|
@@ -99,7 +103,7 @@ export declare class Collapse extends BasicElement {
|
|
|
99
103
|
/**
|
|
100
104
|
* A `TemplateResult` that will be used
|
|
101
105
|
* to render the updated internal template.
|
|
102
|
-
* @return
|
|
106
|
+
* @return Render template
|
|
103
107
|
*/
|
|
104
108
|
protected render(): TemplateResult;
|
|
105
109
|
}
|
package/lib/collapse/index.js
CHANGED
|
@@ -1,13 +1,16 @@
|
|
|
1
|
-
var Collapse_1;
|
|
2
1
|
import { __decorate } from "tslib";
|
|
3
2
|
import { BasicElement, css, html } from '@refinitiv-ui/core';
|
|
4
3
|
import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
|
|
5
4
|
import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
|
|
6
|
-
import {
|
|
5
|
+
import { ifDefined } from '@refinitiv-ui/core/lib/directives/if-defined.js';
|
|
6
|
+
import { state } from '@refinitiv-ui/core/lib/decorators/state.js';
|
|
7
|
+
import { ref, createRef } from '@refinitiv-ui/core/lib/directives/ref.js';
|
|
7
8
|
import { VERSION } from '../version.js';
|
|
9
|
+
import { preload } from '../icon/index.js';
|
|
8
10
|
import '../header/index.js';
|
|
9
11
|
import '../panel/index.js';
|
|
10
12
|
import '../icon/index.js';
|
|
13
|
+
preload('right'); /* preload calendar icons for faster loading */
|
|
11
14
|
/**
|
|
12
15
|
* Allows users to hide non-critical information
|
|
13
16
|
* or areas of the screen, maximizing the amount of real estate
|
|
@@ -18,13 +21,13 @@ import '../icon/index.js';
|
|
|
18
21
|
* @slot header-left - Slot to add custom contents to the left side of header e.g. ef-icon, ef-checkbox
|
|
19
22
|
* @slot header-right - Slot to add custom contents to the right side of header e.g. ef-icon, ef-checkbox
|
|
20
23
|
*/
|
|
21
|
-
let Collapse =
|
|
24
|
+
let Collapse = class Collapse extends BasicElement {
|
|
22
25
|
constructor() {
|
|
23
26
|
super(...arguments);
|
|
24
27
|
/**
|
|
25
28
|
* Set text on the header
|
|
26
29
|
*/
|
|
27
|
-
this.header =
|
|
30
|
+
this.header = '';
|
|
28
31
|
/**
|
|
29
32
|
* Use level styling from theme
|
|
30
33
|
*/
|
|
@@ -38,17 +41,17 @@ let Collapse = Collapse_1 = class Collapse extends BasicElement {
|
|
|
38
41
|
*/
|
|
39
42
|
this.spacing = false;
|
|
40
43
|
/**
|
|
41
|
-
*
|
|
42
|
-
* @param event Event object
|
|
43
|
-
* @returns {void}
|
|
44
|
+
* An ef-panel wrapper
|
|
44
45
|
*/
|
|
45
|
-
this.
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
46
|
+
this.panelHolderRef = createRef();
|
|
47
|
+
/**
|
|
48
|
+
* A panel used to display content
|
|
49
|
+
*/
|
|
50
|
+
this.panelRef = createRef();
|
|
51
|
+
/**
|
|
52
|
+
* Used to control aria-level for heading
|
|
53
|
+
*/
|
|
54
|
+
this.headingLevel = null;
|
|
52
55
|
}
|
|
53
56
|
/**
|
|
54
57
|
* Element version number
|
|
@@ -68,14 +71,24 @@ let Collapse = Collapse_1 = class Collapse extends BasicElement {
|
|
|
68
71
|
:host {
|
|
69
72
|
display: block;
|
|
70
73
|
}
|
|
71
|
-
[part
|
|
72
|
-
|
|
74
|
+
:host(:not([expanded])) [part~=content] {
|
|
75
|
+
visibility: hidden;
|
|
76
|
+
}
|
|
77
|
+
[part~=header] {
|
|
78
|
+
position: relative;
|
|
79
|
+
z-index: 0;
|
|
73
80
|
}
|
|
74
|
-
[part
|
|
75
|
-
|
|
76
|
-
|
|
81
|
+
[part~=header-toggle]::before {
|
|
82
|
+
content: '';
|
|
83
|
+
display: block;
|
|
84
|
+
position: absolute;
|
|
85
|
+
top: 0;
|
|
86
|
+
right: 0;
|
|
87
|
+
bottom: 0;
|
|
88
|
+
left: 0;
|
|
89
|
+
z-index: -1;
|
|
77
90
|
}
|
|
78
|
-
[part
|
|
91
|
+
[part~=content] {
|
|
79
92
|
overflow: hidden;
|
|
80
93
|
box-sizing: border-box;
|
|
81
94
|
}
|
|
@@ -84,14 +97,35 @@ let Collapse = Collapse_1 = class Collapse extends BasicElement {
|
|
|
84
97
|
}
|
|
85
98
|
`;
|
|
86
99
|
}
|
|
100
|
+
/**
|
|
101
|
+
* Observes attribute change for `attributeChangedCallback`
|
|
102
|
+
*/
|
|
103
|
+
static get observedAttributes() {
|
|
104
|
+
const observed = super.observedAttributes;
|
|
105
|
+
return ['aria-level'].concat(observed);
|
|
106
|
+
}
|
|
107
|
+
/**
|
|
108
|
+
* Run when observed attributes change value
|
|
109
|
+
* @param name attribute name
|
|
110
|
+
* @param oldValue old attribute value
|
|
111
|
+
* @param newValue new attribute value
|
|
112
|
+
* @returns {void}
|
|
113
|
+
*/
|
|
114
|
+
attributeChangedCallback(name, oldValue, newValue) {
|
|
115
|
+
super.attributeChangedCallback(name, oldValue, newValue);
|
|
116
|
+
if (name === 'aria-level') {
|
|
117
|
+
this.headingLevel = newValue;
|
|
118
|
+
}
|
|
119
|
+
}
|
|
87
120
|
/**
|
|
88
121
|
* Called once after the component is first rendered
|
|
89
122
|
* @param changedProperties map of changed properties with old values
|
|
90
123
|
* @returns {void}
|
|
91
124
|
*/
|
|
92
125
|
firstUpdated(changedProperties) {
|
|
126
|
+
var _a;
|
|
93
127
|
super.firstUpdated(changedProperties);
|
|
94
|
-
this.
|
|
128
|
+
(_a = this.panelHolderRef.value) === null || _a === void 0 ? void 0 : _a.setAttribute('no-animation', '');
|
|
95
129
|
}
|
|
96
130
|
/**
|
|
97
131
|
* Invoked whenever the element is updated
|
|
@@ -115,23 +149,13 @@ let Collapse = Collapse_1 = class Collapse extends BasicElement {
|
|
|
115
149
|
this.expanded = !this.expanded;
|
|
116
150
|
}
|
|
117
151
|
}
|
|
118
|
-
/**
|
|
119
|
-
* Check if target is a header
|
|
120
|
-
* @param element for checking
|
|
121
|
-
* @returns {boolean} true if target is ef-header
|
|
122
|
-
*/
|
|
123
|
-
static isHeader(element) {
|
|
124
|
-
return element.localName === 'ef-header' || element.getAttribute('part') === 'toggle';
|
|
125
|
-
}
|
|
126
152
|
/**
|
|
127
153
|
* Show or Hide the item depending on the expanded state
|
|
128
154
|
* @returns {void}
|
|
129
155
|
*/
|
|
130
156
|
showHide() {
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
}
|
|
134
|
-
this.panelHolder.removeAttribute(('no-animation'));
|
|
157
|
+
var _a;
|
|
158
|
+
(_a = this.panelHolderRef.value) === null || _a === void 0 ? void 0 : _a.removeAttribute(('no-animation'));
|
|
135
159
|
this.setAnimationTargetHeight(this.getContentHeight());
|
|
136
160
|
}
|
|
137
161
|
/**
|
|
@@ -148,23 +172,32 @@ let Collapse = Collapse_1 = class Collapse extends BasicElement {
|
|
|
148
172
|
* @returns clientHeight of the panel so that the panel holder max-height can be set
|
|
149
173
|
*/
|
|
150
174
|
getContentHeight() {
|
|
151
|
-
|
|
175
|
+
const panelEl = this.panelRef.value;
|
|
176
|
+
return panelEl ? panelEl.clientHeight : 0;
|
|
152
177
|
}
|
|
153
178
|
/**
|
|
154
179
|
* A `TemplateResult` that will be used
|
|
155
180
|
* to render the updated internal template.
|
|
156
|
-
* @return
|
|
181
|
+
* @return Render template
|
|
157
182
|
*/
|
|
158
183
|
render() {
|
|
159
184
|
return html `
|
|
160
|
-
<ef-header part="header" level="${this.level}"
|
|
161
|
-
<
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
185
|
+
<ef-header part="header" level="${this.level}">
|
|
186
|
+
<div part="heading" role="heading" aria-level="${ifDefined(this.headingLevel || undefined)}">
|
|
187
|
+
<div id="header-toggle"
|
|
188
|
+
part="header-toggle"
|
|
189
|
+
role="button"
|
|
190
|
+
tabindex="0"
|
|
191
|
+
aria-expanded="${this.expanded}"
|
|
192
|
+
aria-controls="content"
|
|
193
|
+
@tap=${this.toggle}>${this.header}</div>
|
|
194
|
+
</div>
|
|
195
|
+
<ef-icon icon="right" part="toggle" slot="left" aria-hidden="true"></ef-icon>
|
|
196
|
+
<slot name="header-left" slot="left"></slot>
|
|
197
|
+
<slot name="header-right" slot="right"></slot>
|
|
165
198
|
</ef-header>
|
|
166
|
-
<div part="content">
|
|
167
|
-
<ef-panel ?spacing="${this.spacing}" transparent>
|
|
199
|
+
<div ${ref(this.panelHolderRef)} id="content" part="content" role="region" aria-labelledby="header-toggle">
|
|
200
|
+
<ef-panel ${ref(this.panelRef)} part="content-data" ?spacing="${this.spacing}" transparent>
|
|
168
201
|
<slot></slot>
|
|
169
202
|
</ef-panel>
|
|
170
203
|
</div>
|
|
@@ -184,12 +217,9 @@ __decorate([
|
|
|
184
217
|
property({ type: Boolean })
|
|
185
218
|
], Collapse.prototype, "spacing", void 0);
|
|
186
219
|
__decorate([
|
|
187
|
-
|
|
188
|
-
], Collapse.prototype, "
|
|
189
|
-
__decorate([
|
|
190
|
-
query('ef-panel', true)
|
|
191
|
-
], Collapse.prototype, "panel", void 0);
|
|
192
|
-
Collapse = Collapse_1 = __decorate([
|
|
220
|
+
state()
|
|
221
|
+
], Collapse.prototype, "headingLevel", void 0);
|
|
222
|
+
Collapse = __decorate([
|
|
193
223
|
customElement('ef-collapse', {
|
|
194
224
|
alias: 'coral-collapse'
|
|
195
225
|
})
|
|
@@ -2,4 +2,4 @@ import '@refinitiv-ui/elements/lib/panel/themes/halo/dark';
|
|
|
2
2
|
import '@refinitiv-ui/elements/lib/header/themes/halo/dark';
|
|
3
3
|
import '@refinitiv-ui/elements/lib/icon/themes/halo/dark';
|
|
4
4
|
|
|
5
|
-
elf.customStyles.define('ef-collapse', ':host [part=toggle]{transition:.1s;opacity:.5;flex-shrink:0;
|
|
5
|
+
elf.customStyles.define('ef-collapse', ':host [part=toggle]{transition:.1s;opacity:.5;margin-right:.25em;margin-left:8px;flex-shrink:0;pointer-events:none;opacity:1}:host([expanded]) [part=toggle]{transform:rotate(90deg)}:host [part~=header]{padding:0}:host [part~=header][focused=visible]{background-color:#334bff}:host [part=header-toggle]{touch-action:manipulation;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;outline:0}@-webkit-keyframes expand{from{height:0}to{height:var(--target-height)}}@keyframes expand{from{height:0}to{height:var(--target-height)}}@-webkit-keyframes collapse{from{height:var(--target-height)}to{height:0}}@keyframes collapse{from{height:var(--target-height)}to{height:0}}:host [part=content]{-webkit-animation-duration:.1s;animation-duration:.1s;-webkit-animation-timing-function:ease;animation-timing-function:ease;text-transform:none}:host(:not([expanded])) [part=content]{height:0;-webkit-animation-name:collapse;animation-name:collapse}:host(:not([expanded])) [part=toggle]{transform:rotate(0)}:host([expanded]) [part=content]{-webkit-animation-name:expand;animation-name:expand}:host [part=content] ef-panel{overflow:auto}:host [part=content] ef-panel:not([spacing]){padding:var(--panel-padding)}:host{text-transform:uppercase}:host [part=header]{text-transform:inherit}:host [part=header]:hover,:host [part~=header][focused=visible],:host([expanded]) [part=header]{color:#fff;cursor:pointer;background-color:#404040}:host [part=header]:hover[level="1"],:host [part~=header][focused=visible][level="1"],:host([expanded]) [part=header][level="1"]{background-color:#5a5a5a}:host [part=header]:hover[level="2"],:host [part~=header][focused=visible][level="2"],:host([expanded]) [part=header][level="2"]{background-color:#4d4d4d}:host [part=header]:hover[level="4"],:host [part~=header][focused=visible][level="4"],:host([expanded]) [part=header][level="4"]{background-color:#343434}');
|
|
@@ -2,4 +2,4 @@ import '@refinitiv-ui/elements/lib/panel/themes/halo/light';
|
|
|
2
2
|
import '@refinitiv-ui/elements/lib/header/themes/halo/light';
|
|
3
3
|
import '@refinitiv-ui/elements/lib/icon/themes/halo/light';
|
|
4
4
|
|
|
5
|
-
elf.customStyles.define('ef-collapse', ':host [part=toggle]{transition:.1s;opacity:.5;flex-shrink:0;
|
|
5
|
+
elf.customStyles.define('ef-collapse', ':host [part=toggle]{transition:.1s;opacity:.5;margin-right:.25em;margin-left:8px;flex-shrink:0;pointer-events:none;opacity:1}:host([expanded]) [part=toggle]{transform:rotate(90deg)}:host [part~=header]{padding:0}:host [part~=header][focused=visible]{background-color:#334bff}:host [part=header-toggle]{touch-action:manipulation;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;outline:0}@-webkit-keyframes expand{from{height:0}to{height:var(--target-height)}}@keyframes expand{from{height:0}to{height:var(--target-height)}}@-webkit-keyframes collapse{from{height:var(--target-height)}to{height:0}}@keyframes collapse{from{height:var(--target-height)}to{height:0}}:host [part=content]{-webkit-animation-duration:.1s;animation-duration:.1s;-webkit-animation-timing-function:ease;animation-timing-function:ease;text-transform:none}:host(:not([expanded])) [part=content]{height:0;-webkit-animation-name:collapse;animation-name:collapse}:host(:not([expanded])) [part=toggle]{transform:rotate(0)}:host([expanded]) [part=content]{-webkit-animation-name:expand;animation-name:expand}:host [part=content] ef-panel{overflow:auto}:host [part=content] ef-panel:not([spacing]){padding:var(--panel-padding)}:host{text-transform:uppercase}:host [part=header]{text-transform:inherit}:host [part=header]:hover,:host [part~=header][focused=visible],:host([expanded]) [part=header]{color:#0d0d0d;cursor:pointer;background-color:#eaeaea}:host [part=header]:hover[level="1"],:host [part~=header][focused=visible][level="1"],:host([expanded]) [part=header][level="1"]{background-color:#d1d1d1}:host [part=header]:hover[level="2"],:host [part~=header][focused=visible][level="2"],:host([expanded]) [part=header][level="2"]{background-color:#dedede}:host [part=header]:hover[level="4"],:host [part~=header][focused=visible][level="4"],:host([expanded]) [part=header][level="4"]{background-color:#f2f2f2}');
|
|
@@ -2,4 +2,4 @@ import '@refinitiv-ui/elements/lib/panel/themes/solar/charcoal';
|
|
|
2
2
|
import '@refinitiv-ui/elements/lib/header/themes/solar/charcoal';
|
|
3
3
|
import '@refinitiv-ui/elements/lib/icon/themes/solar/charcoal';
|
|
4
4
|
|
|
5
|
-
elf.customStyles.define('ef-collapse', ':host [part=toggle]{transition:.2s;opacity:.5;flex-shrink:0;
|
|
5
|
+
elf.customStyles.define('ef-collapse', ':host [part=toggle]{transition:.2s;opacity:.5;margin-right:.25em;margin-left:10px;flex-shrink:0;pointer-events:none}:host([expanded]) [part=toggle]{transform:rotate(90deg)}:host [part~=header]{padding:0}:host [part~=header][focused=visible]{background-color:#4d4d55}:host [part=header-toggle]{touch-action:manipulation;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;outline:0}@-webkit-keyframes expand{from{height:0}to{height:var(--target-height)}}@keyframes expand{from{height:0}to{height:var(--target-height)}}@-webkit-keyframes collapse{from{height:var(--target-height)}to{height:0}}@keyframes collapse{from{height:var(--target-height)}to{height:0}}:host [part=content]{-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-timing-function:ease;animation-timing-function:ease}:host(:not([expanded])) [part=content]{height:0;-webkit-animation-name:collapse;animation-name:collapse}:host(:not([expanded])) [part=toggle]{transform:rotate(0)}:host([expanded]) [part=content]{-webkit-animation-name:expand;animation-name:expand}:host [part=content] ef-panel{overflow:auto}:host [part=content] ef-panel:not([spacing]){padding:var(--panel-padding)}');
|
|
@@ -2,4 +2,4 @@ import '@refinitiv-ui/elements/lib/panel/themes/solar/pearl';
|
|
|
2
2
|
import '@refinitiv-ui/elements/lib/header/themes/solar/pearl';
|
|
3
3
|
import '@refinitiv-ui/elements/lib/icon/themes/solar/pearl';
|
|
4
4
|
|
|
5
|
-
elf.customStyles.define('ef-collapse', ':host [part=toggle]{transition:.2s;opacity:.5;flex-shrink:0;
|
|
5
|
+
elf.customStyles.define('ef-collapse', ':host [part=toggle]{transition:.2s;opacity:.5;margin-right:.25em;margin-left:10px;flex-shrink:0;pointer-events:none}:host([expanded]) [part=toggle]{transform:rotate(90deg)}:host [part~=header]{padding:0}:host [part~=header][focused=visible]{background-color:#fff}:host [part=header-toggle]{touch-action:manipulation;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;outline:0}@-webkit-keyframes expand{from{height:0}to{height:var(--target-height)}}@keyframes expand{from{height:0}to{height:var(--target-height)}}@-webkit-keyframes collapse{from{height:var(--target-height)}to{height:0}}@keyframes collapse{from{height:var(--target-height)}to{height:0}}:host [part=content]{-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-timing-function:ease;animation-timing-function:ease}:host(:not([expanded])) [part=content]{height:0;-webkit-animation-name:collapse;animation-name:collapse}:host(:not([expanded])) [part=toggle]{transform:rotate(0)}:host([expanded]) [part=content]{-webkit-animation-name:expand;animation-name:expand}:host [part=content] ef-panel{overflow:auto}:host [part=content] ef-panel:not([spacing]){padding:var(--panel-padding)}');
|
|
@@ -151,6 +151,17 @@
|
|
|
151
151
|
"name": "refit",
|
|
152
152
|
"description": "Clear all cached values and fit the popup.\nUse this function only if maxWidth, maxHeight, minWidth, minHeight, height, width are changed",
|
|
153
153
|
"params": []
|
|
154
|
+
},
|
|
155
|
+
{
|
|
156
|
+
"name": "willUpdate",
|
|
157
|
+
"description": "Compute property values that depend on other properties\nand are used in the rest of the update process.",
|
|
158
|
+
"params": [
|
|
159
|
+
{
|
|
160
|
+
"name": "changedProperties",
|
|
161
|
+
"description": "Properties that has changed",
|
|
162
|
+
"type": "PropertyValues"
|
|
163
|
+
}
|
|
164
|
+
]
|
|
154
165
|
}
|
|
155
166
|
]
|
|
156
167
|
}
|
|
@@ -28,9 +28,10 @@ and also allows custom footers and control buttons to be used.
|
|
|
28
28
|
|
|
29
29
|
## Methods
|
|
30
30
|
|
|
31
|
-
| Method
|
|
32
|
-
|
|
33
|
-
| `refit`
|
|
31
|
+
| Method | Type | Description |
|
|
32
|
+
|--------------|----------------------------------|--------------------------------------------------|
|
|
33
|
+
| `refit` | `(): void` | Clear all cached values and fit the popup.<br />Use this function only if maxWidth, maxHeight, minWidth, minHeight, height, width are changed |
|
|
34
|
+
| `willUpdate` | `(changedProperties: any): void` | Compute property values that depend on other properties<br />and are used in the rest of the update process.<br /><br />**changedProperties**: Properties that has changed |
|
|
34
35
|
|
|
35
36
|
## Events
|
|
36
37
|
|
package/lib/dialog/index.d.ts
CHANGED
|
@@ -44,6 +44,10 @@ export declare class Dialog extends Overlay {
|
|
|
44
44
|
* @returns version number
|
|
45
45
|
*/
|
|
46
46
|
static get version(): string;
|
|
47
|
+
/**
|
|
48
|
+
* Default role of the element
|
|
49
|
+
*/
|
|
50
|
+
protected readonly defaultRole: string | null;
|
|
47
51
|
/**
|
|
48
52
|
* A `CSSResultGroup` that will be used
|
|
49
53
|
* to style the host, slotted children
|
|
@@ -108,6 +112,19 @@ export declare class Dialog extends Overlay {
|
|
|
108
112
|
* @returns boolean should component update
|
|
109
113
|
*/
|
|
110
114
|
protected shouldUpdate(changedProperties: PropertyValues): boolean;
|
|
115
|
+
/**
|
|
116
|
+
* Compute property values that depend on other properties
|
|
117
|
+
* and are used in the rest of the update process.
|
|
118
|
+
* @param changedProperties Properties that has changed
|
|
119
|
+
* @returns {void}
|
|
120
|
+
*/
|
|
121
|
+
willUpdate(changedProperties: PropertyValues): void;
|
|
122
|
+
/**
|
|
123
|
+
* Called after the component is first rendered
|
|
124
|
+
* @param changedProperties Properties which have changed
|
|
125
|
+
* @return {void}
|
|
126
|
+
*/
|
|
127
|
+
protected firstUpdated(changedProperties: PropertyValues): void;
|
|
111
128
|
/**
|
|
112
129
|
* Called after the element’s properties has been updated
|
|
113
130
|
* @param changedProperties Properties that has changed
|
package/lib/dialog/index.js
CHANGED
|
@@ -47,6 +47,10 @@ import '@refinitiv-ui/phrasebook/lib/locale/en/dialog.js';
|
|
|
47
47
|
let Dialog = class Dialog extends Overlay {
|
|
48
48
|
constructor() {
|
|
49
49
|
super(...arguments);
|
|
50
|
+
/**
|
|
51
|
+
* Default role of the element
|
|
52
|
+
*/
|
|
53
|
+
this.defaultRole = 'dialog';
|
|
50
54
|
/**
|
|
51
55
|
* Set Header/Title of the dialog
|
|
52
56
|
*/
|
|
@@ -147,7 +151,28 @@ let Dialog = class Dialog extends Overlay {
|
|
|
147
151
|
shouldUpdate(changedProperties) {
|
|
148
152
|
const shouldUpdate = super.shouldUpdate(changedProperties);
|
|
149
153
|
return shouldUpdate
|
|
150
|
-
|| ((changedProperties.has('draggable') || changedProperties.has('header') || changedProperties.has(TranslatePropertyKey)) && this.opened);
|
|
154
|
+
|| ((changedProperties.has('draggable') || changedProperties.has('header') || changedProperties.has('noInteractionLock') || changedProperties.has(TranslatePropertyKey)) && this.opened);
|
|
155
|
+
}
|
|
156
|
+
/**
|
|
157
|
+
* Compute property values that depend on other properties
|
|
158
|
+
* and are used in the rest of the update process.
|
|
159
|
+
* @param changedProperties Properties that has changed
|
|
160
|
+
* @returns {void}
|
|
161
|
+
*/
|
|
162
|
+
willUpdate(changedProperties) {
|
|
163
|
+
// dialog only update when it is opened, so also checking `opened` change.
|
|
164
|
+
if (changedProperties.has('opened') || changedProperties.has('noInteractionLock')) {
|
|
165
|
+
this.setAttribute('aria-modal', String(!this.noInteractionLock));
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
/**
|
|
169
|
+
* Called after the component is first rendered
|
|
170
|
+
* @param changedProperties Properties which have changed
|
|
171
|
+
* @return {void}
|
|
172
|
+
*/
|
|
173
|
+
firstUpdated(changedProperties) {
|
|
174
|
+
super.firstUpdated(changedProperties);
|
|
175
|
+
this.setAttribute('aria-modal', String(!this.noInteractionLock));
|
|
151
176
|
}
|
|
152
177
|
/**
|
|
153
178
|
* Called after the element’s properties has been updated
|
|
@@ -283,7 +308,7 @@ let Dialog = class Dialog extends Overlay {
|
|
|
283
308
|
get headerRegion() {
|
|
284
309
|
return html `
|
|
285
310
|
${this.header === null ? this.t('HEADER') : this.header}
|
|
286
|
-
<ef-icon part="close" icon="cross" slot="right" @tap="${this.defaultCancel}"></ef-icon>
|
|
311
|
+
<ef-icon aria-hidden="true" part="close" icon="cross" slot="right" @tap="${this.defaultCancel}"></ef-icon>
|
|
287
312
|
`;
|
|
288
313
|
}
|
|
289
314
|
/**
|
|
@@ -293,9 +318,9 @@ let Dialog = class Dialog extends Overlay {
|
|
|
293
318
|
*/
|
|
294
319
|
render() {
|
|
295
320
|
return html `
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
321
|
+
<ef-header drag-handle part="header">${this.headerRegion}</ef-header>
|
|
322
|
+
<ef-panel part="content" spacing transparent>${this.contentRegion}</ef-panel>
|
|
323
|
+
<div part="footer">${this.footerRegion}</div>
|
|
299
324
|
`;
|
|
300
325
|
}
|
|
301
326
|
};
|
|
@@ -60,11 +60,11 @@ export declare class RadioButton extends ControlElement {
|
|
|
60
60
|
*/
|
|
61
61
|
disconnectedCallback(): void;
|
|
62
62
|
/**
|
|
63
|
-
* Invoked whenever the element is
|
|
63
|
+
* Invoked whenever the element is updated
|
|
64
64
|
* @param changedProperties changed properties
|
|
65
65
|
* @returns {void}
|
|
66
66
|
*/
|
|
67
|
-
protected
|
|
67
|
+
protected updated(changedProperties: PropertyValues): void;
|
|
68
68
|
/**
|
|
69
69
|
* Invoked when the element is first updated
|
|
70
70
|
* @param changedProperties changed properties
|
|
@@ -106,11 +106,11 @@ let RadioButton = class RadioButton extends ControlElement {
|
|
|
106
106
|
super.disconnectedCallback();
|
|
107
107
|
}
|
|
108
108
|
/**
|
|
109
|
-
* Invoked whenever the element is
|
|
109
|
+
* Invoked whenever the element is updated
|
|
110
110
|
* @param changedProperties changed properties
|
|
111
111
|
* @returns {void}
|
|
112
112
|
*/
|
|
113
|
-
|
|
113
|
+
updated(changedProperties) {
|
|
114
114
|
if (this.isConnected && this.hasUpdated && changedProperties.has('name')) {
|
|
115
115
|
applyRegistry(this, changedProperties.get('name'));
|
|
116
116
|
}
|
|
@@ -118,7 +118,7 @@ let RadioButton = class RadioButton extends ControlElement {
|
|
|
118
118
|
if (this.isConnected && this.hasUpdated && (changedProperties.has('checked') || (changedProperties.has('name')))) {
|
|
119
119
|
this.manageGroupState();
|
|
120
120
|
}
|
|
121
|
-
super.
|
|
121
|
+
super.updated(changedProperties);
|
|
122
122
|
}
|
|
123
123
|
/**
|
|
124
124
|
* Invoked when the element is first updated
|
package/lib/slider/index.js
CHANGED
|
@@ -779,6 +779,10 @@ let Slider = class Slider extends ControlElement {
|
|
|
779
779
|
}
|
|
780
780
|
}
|
|
781
781
|
}
|
|
782
|
+
if (!this.dragging) {
|
|
783
|
+
// Update internal `valuePrevious` when `value` was programatically set by user.
|
|
784
|
+
this.valuePrevious = this.value;
|
|
785
|
+
}
|
|
782
786
|
}
|
|
783
787
|
/**
|
|
784
788
|
* From value observer
|
|
@@ -805,6 +809,9 @@ let Slider = class Slider extends ControlElement {
|
|
|
805
809
|
}
|
|
806
810
|
}
|
|
807
811
|
}
|
|
812
|
+
if (!this.dragging) {
|
|
813
|
+
this.fromPrevious = this.from;
|
|
814
|
+
}
|
|
808
815
|
}
|
|
809
816
|
/**
|
|
810
817
|
* Return fallback number of the value is invalid
|
|
@@ -884,6 +891,9 @@ let Slider = class Slider extends ControlElement {
|
|
|
884
891
|
}
|
|
885
892
|
}
|
|
886
893
|
}
|
|
894
|
+
if (!this.dragging) {
|
|
895
|
+
this.toPrevious = this.to;
|
|
896
|
+
}
|
|
887
897
|
}
|
|
888
898
|
/**
|
|
889
899
|
* Step observer
|
|
@@ -52,6 +52,12 @@
|
|
|
52
52
|
"description": "Set disabled state",
|
|
53
53
|
"type": "boolean",
|
|
54
54
|
"default": "false"
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
"name": "value",
|
|
58
|
+
"description": "Tab's value",
|
|
59
|
+
"type": "string",
|
|
60
|
+
"default": "\"\""
|
|
55
61
|
}
|
|
56
62
|
],
|
|
57
63
|
"properties": [
|
|
@@ -110,6 +116,13 @@
|
|
|
110
116
|
"description": "Set disabled state",
|
|
111
117
|
"type": "boolean",
|
|
112
118
|
"default": "false"
|
|
119
|
+
},
|
|
120
|
+
{
|
|
121
|
+
"name": "value",
|
|
122
|
+
"attribute": "value",
|
|
123
|
+
"description": "Tab's value",
|
|
124
|
+
"type": "string",
|
|
125
|
+
"default": "\"\""
|
|
113
126
|
}
|
|
114
127
|
],
|
|
115
128
|
"events": [
|
|
@@ -14,6 +14,7 @@ A building block for individual tab
|
|
|
14
14
|
| `label` | `label` | `string` | "" | Specify tab's label text |
|
|
15
15
|
| `lineClamp` | `line-clamp` | `number` | 1 | Limit the number of lines before truncating |
|
|
16
16
|
| `subLabel` | `sub-label` | `string` | "" | Specify tab's sub-label text |
|
|
17
|
+
| `value` | `value` | `string` | "" | Tab's value |
|
|
17
18
|
|
|
18
19
|
## Events
|
|
19
20
|
|