@refinitiv-ui/elements 5.7.0 → 5.8.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 +19 -0
- package/lib/autosuggest/custom-elements.json +14 -4
- package/lib/autosuggest/custom-elements.md +21 -14
- package/lib/autosuggest/index.d.ts +4 -0
- package/lib/autosuggest/index.js +4 -0
- package/lib/calendar/custom-elements.json +4 -2
- package/lib/calendar/custom-elements.md +2 -2
- package/lib/calendar/index.d.ts +2 -0
- package/lib/calendar/index.js +2 -0
- package/lib/canvas/custom-elements.json +7 -5
- package/lib/canvas/custom-elements.md +8 -8
- package/lib/canvas/index.d.ts +1 -0
- package/lib/canvas/index.js +1 -0
- package/lib/card/custom-elements.json +3 -1
- package/lib/card/custom-elements.md +5 -5
- package/lib/card/index.d.ts +2 -0
- package/lib/card/index.js +2 -0
- package/lib/chart/custom-elements.json +1 -1
- package/lib/chart/custom-elements.md +4 -4
- package/lib/checkbox/custom-elements.json +8 -4
- package/lib/checkbox/custom-elements.md +2 -2
- package/lib/checkbox/index.d.ts +3 -1
- package/lib/checkbox/index.js +2 -0
- package/lib/clock/custom-elements.json +8 -4
- package/lib/clock/custom-elements.md +9 -9
- package/lib/clock/index.d.ts +2 -0
- package/lib/clock/index.js +2 -0
- 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/color-dialog/custom-elements.json +21 -8
- package/lib/color-dialog/custom-elements.md +22 -22
- package/lib/color-dialog/index.d.ts +8 -8
- package/lib/color-dialog/index.js +8 -8
- package/lib/combo-box/custom-elements.json +19 -10
- package/lib/combo-box/custom-elements.md +20 -20
- package/lib/combo-box/index.d.ts +10 -2
- package/lib/combo-box/index.js +10 -1
- package/lib/combo-box/themes/halo/dark/index.js +1 -1
- package/lib/combo-box/themes/halo/light/index.js +1 -1
- package/lib/combo-box/themes/solar/charcoal/index.js +1 -1
- package/lib/combo-box/themes/solar/pearl/index.js +1 -1
- package/lib/counter/custom-elements.json +8 -4
- package/lib/counter/custom-elements.md +4 -4
- package/lib/counter/index.d.ts +2 -0
- package/lib/counter/index.js +2 -0
- package/lib/datetime-picker/custom-elements.json +48 -19
- package/lib/datetime-picker/custom-elements.md +36 -28
- package/lib/datetime-picker/index.d.ts +15 -4
- package/lib/datetime-picker/index.js +15 -4
- package/lib/dialog/custom-elements.json +30 -8
- package/lib/dialog/custom-elements.md +16 -16
- package/lib/dialog/index.d.ts +7 -10
- package/lib/dialog/index.js +7 -10
- package/lib/email-field/custom-elements.json +80 -93
- package/lib/email-field/custom-elements.md +22 -20
- package/lib/email-field/index.d.ts +43 -115
- package/lib/email-field/index.js +44 -244
- package/lib/flag/custom-elements.md +4 -4
- package/lib/flag/index.d.ts +2 -0
- package/lib/flag/index.js +2 -0
- package/lib/icon/custom-elements.md +4 -4
- package/lib/icon/index.d.ts +2 -0
- package/lib/icon/index.js +2 -0
- package/lib/interactive-chart/custom-elements.json +6 -10
- package/lib/interactive-chart/custom-elements.md +6 -7
- package/lib/interactive-chart/index.d.ts +5 -2
- package/lib/interactive-chart/index.js +5 -2
- package/lib/item/custom-elements.json +8 -6
- package/lib/item/custom-elements.md +14 -14
- package/lib/item/index.d.ts +2 -1
- package/lib/item/index.js +2 -1
- package/lib/led-gauge/custom-elements.json +4 -4
- package/lib/led-gauge/custom-elements.md +2 -2
- package/lib/led-gauge/index.d.ts +1 -0
- package/lib/led-gauge/index.js +1 -0
- package/lib/list/custom-elements.json +18 -5
- package/lib/list/custom-elements.md +12 -10
- package/lib/list/helpers/list-renderer.js +2 -0
- package/lib/list/index.d.ts +19 -2
- package/lib/list/index.js +34 -1
- package/lib/multi-input/custom-elements.json +3 -2
- package/lib/multi-input/custom-elements.md +16 -16
- package/lib/multi-input/index.d.ts +4 -0
- package/lib/multi-input/index.js +4 -0
- package/lib/number-field/custom-elements.json +97 -52
- package/lib/number-field/custom-elements.md +27 -22
- package/lib/number-field/index.d.ts +92 -47
- package/lib/number-field/index.js +113 -80
- package/lib/overlay/custom-elements.json +23 -13
- package/lib/overlay/custom-elements.md +29 -29
- package/lib/overlay/elements/overlay.d.ts +5 -0
- package/lib/overlay-menu/custom-elements.json +66 -14
- package/lib/overlay-menu/custom-elements.md +19 -19
- package/lib/overlay-menu/index.d.ts +13 -11
- package/lib/overlay-menu/index.js +13 -11
- package/lib/password-field/custom-elements.json +62 -67
- package/lib/password-field/custom-elements.md +19 -11
- package/lib/password-field/index.d.ts +42 -94
- package/lib/password-field/index.js +48 -194
- package/lib/pill/custom-elements.json +4 -2
- package/lib/pill/custom-elements.md +1 -1
- package/lib/pill/index.d.ts +1 -1
- package/lib/pill/index.js +1 -1
- package/lib/radio-button/custom-elements.json +8 -6
- package/lib/radio-button/custom-elements.md +3 -3
- package/lib/radio-button/index.d.ts +6 -5
- package/lib/radio-button/index.js +5 -4
- package/lib/search-field/custom-elements.json +70 -74
- package/lib/search-field/custom-elements.md +24 -16
- package/lib/search-field/index.d.ts +43 -100
- package/lib/search-field/index.js +46 -215
- package/lib/select/custom-elements.json +3 -2
- package/lib/select/custom-elements.md +10 -10
- package/lib/select/index.d.ts +11 -3
- package/lib/select/index.js +65 -26
- package/lib/sidebar-layout/custom-elements.json +2 -6
- package/lib/sidebar-layout/custom-elements.md +5 -6
- package/lib/sidebar-layout/index.d.ts +2 -1
- package/lib/slider/custom-elements.json +2 -2
- package/lib/slider/custom-elements.md +1 -1
- package/lib/slider/index.d.ts +1 -1
- package/lib/slider/index.js +1 -1
- package/lib/sparkline/custom-elements.json +4 -4
- package/lib/sparkline/custom-elements.md +2 -2
- package/lib/sparkline/index.d.ts +3 -1
- package/lib/sparkline/index.js +2 -0
- package/lib/swing-gauge/custom-elements.json +5 -3
- package/lib/swing-gauge/custom-elements.md +11 -11
- package/lib/swing-gauge/index.d.ts +3 -1
- package/lib/swing-gauge/index.js +3 -1
- package/lib/text-field/custom-elements.json +76 -87
- package/lib/text-field/custom-elements.md +24 -26
- package/lib/text-field/index.d.ts +50 -92
- package/lib/text-field/index.js +81 -230
- package/lib/time-picker/custom-elements.md +3 -3
- package/lib/time-picker/index.d.ts +3 -0
- package/lib/time-picker/index.js +3 -0
- package/lib/toggle/custom-elements.json +4 -2
- package/lib/toggle/custom-elements.md +1 -1
- package/lib/toggle/index.d.ts +2 -1
- package/lib/toggle/index.js +1 -0
- package/lib/tree/custom-elements.json +2 -1
- package/lib/tree/custom-elements.md +1 -1
- package/lib/tree/elements/tree.d.ts +1 -0
- package/lib/tree/elements/tree.js +1 -0
- package/lib/tree/themes/halo/dark/index.js +1 -1
- package/lib/tree/themes/halo/light/index.js +1 -1
- package/lib/tree/themes/solar/charcoal/index.js +1 -1
- package/lib/tree/themes/solar/pearl/index.js +1 -1
- package/lib/tree-select/custom-elements.json +8 -4
- package/lib/tree-select/custom-elements.md +3 -3
- package/lib/tree-select/index.d.ts +5 -3
- package/lib/tree-select/index.js +3 -2
- 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 +10 -10
|
@@ -31,23 +31,28 @@
|
|
|
31
31
|
},
|
|
32
32
|
{
|
|
33
33
|
"name": "transition-style",
|
|
34
|
-
"description": "Set the transition style"
|
|
34
|
+
"description": "Set the transition style",
|
|
35
|
+
"type": "TransitionStyle|null|undefined"
|
|
35
36
|
},
|
|
36
37
|
{
|
|
37
38
|
"name": "z-index",
|
|
38
|
-
"description": "Set a preferable z-index to override automatically calculated z-index"
|
|
39
|
+
"description": "Set a preferable z-index to override automatically calculated z-index",
|
|
40
|
+
"type": "number|null|undefined"
|
|
39
41
|
},
|
|
40
42
|
{
|
|
41
43
|
"name": "x",
|
|
42
|
-
"description": "Set a specific x coordinate"
|
|
44
|
+
"description": "Set a specific x coordinate",
|
|
45
|
+
"type": "number|null|undefined"
|
|
43
46
|
},
|
|
44
47
|
{
|
|
45
48
|
"name": "y",
|
|
46
|
-
"description": "Set a specific y coordinate"
|
|
49
|
+
"description": "Set a specific y coordinate",
|
|
50
|
+
"type": "number|null|undefined"
|
|
47
51
|
},
|
|
48
52
|
{
|
|
49
53
|
"name": "position-target",
|
|
50
|
-
"description": "Set the position target as follows:\n- HTMLElement if overlay is position next to the HTML element\n- String containing `top`, `right`, `left`, `bottom`, `center` combinations to position against the screen.\nFor instance: `top left` - put the overlay at `top left` point of the screen; `bottom` - put overlay at `bottom center` point of the screen"
|
|
54
|
+
"description": "Set the position target as follows:\n- HTMLElement if overlay is position next to the HTML element\n- String containing `top`, `right`, `left`, `bottom`, `center` combinations to position against the screen.\nFor instance: `top left` - put the overlay at `top left` point of the screen; `bottom` - put overlay at `bottom center` point of the screen",
|
|
55
|
+
"type": "PositionTarget|null|undefined"
|
|
51
56
|
},
|
|
52
57
|
{
|
|
53
58
|
"name": "horizontal-offset",
|
|
@@ -159,27 +164,32 @@
|
|
|
159
164
|
{
|
|
160
165
|
"name": "transitionStyle",
|
|
161
166
|
"attribute": "transition-style",
|
|
162
|
-
"description": "Set the transition style"
|
|
167
|
+
"description": "Set the transition style",
|
|
168
|
+
"type": "TransitionStyle|null|undefined"
|
|
163
169
|
},
|
|
164
170
|
{
|
|
165
171
|
"name": "zIndex",
|
|
166
172
|
"attribute": "z-index",
|
|
167
|
-
"description": "Set a preferable z-index to override automatically calculated z-index"
|
|
173
|
+
"description": "Set a preferable z-index to override automatically calculated z-index",
|
|
174
|
+
"type": "number|null|undefined"
|
|
168
175
|
},
|
|
169
176
|
{
|
|
170
177
|
"name": "x",
|
|
171
178
|
"attribute": "x",
|
|
172
|
-
"description": "Set a specific x coordinate"
|
|
179
|
+
"description": "Set a specific x coordinate",
|
|
180
|
+
"type": "number|null|undefined"
|
|
173
181
|
},
|
|
174
182
|
{
|
|
175
183
|
"name": "y",
|
|
176
184
|
"attribute": "y",
|
|
177
|
-
"description": "Set a specific y coordinate"
|
|
185
|
+
"description": "Set a specific y coordinate",
|
|
186
|
+
"type": "number|null|undefined"
|
|
178
187
|
},
|
|
179
188
|
{
|
|
180
189
|
"name": "positionTarget",
|
|
181
190
|
"attribute": "position-target",
|
|
182
|
-
"description": "Set the position target as follows:\n- HTMLElement if overlay is position next to the HTML element\n- String containing `top`, `right`, `left`, `bottom`, `center` combinations to position against the screen.\nFor instance: `top left` - put the overlay at `top left` point of the screen; `bottom` - put overlay at `bottom center` point of the screen"
|
|
191
|
+
"description": "Set the position target as follows:\n- HTMLElement if overlay is position next to the HTML element\n- String containing `top`, `right`, `left`, `bottom`, `center` combinations to position against the screen.\nFor instance: `top left` - put the overlay at `top left` point of the screen; `bottom` - put overlay at `bottom center` point of the screen",
|
|
192
|
+
"type": "PositionTarget|null|undefined"
|
|
183
193
|
},
|
|
184
194
|
{
|
|
185
195
|
"name": "horizontalOffset",
|
|
@@ -278,7 +288,7 @@
|
|
|
278
288
|
"type": "{} | undefined"
|
|
279
289
|
},
|
|
280
290
|
{
|
|
281
|
-
"name": "positionTargetConfig",
|
|
291
|
+
"name": "positionTargetConfig (readonly)",
|
|
282
292
|
"description": "Get position target configuration based on positionTarget and fullScreen properties\nUsed for caching and calculations"
|
|
283
293
|
},
|
|
284
294
|
{
|
|
@@ -287,12 +297,12 @@
|
|
|
287
297
|
"default": "\"this\""
|
|
288
298
|
},
|
|
289
299
|
{
|
|
290
|
-
"name": "fullyOpened",
|
|
300
|
+
"name": "fullyOpened (readonly)",
|
|
291
301
|
"description": "Returns true if the overlay is opened and animation is not running.\nReturns false if overlay is closed and animation is not running",
|
|
292
302
|
"type": "boolean"
|
|
293
303
|
},
|
|
294
304
|
{
|
|
295
|
-
"name": "transitioning",
|
|
305
|
+
"name": "transitioning (readonly)",
|
|
296
306
|
"description": "Returns true if overlay is doing opening or closing transition",
|
|
297
307
|
"type": "boolean"
|
|
298
308
|
}
|
|
@@ -4,35 +4,35 @@ Element to help building modals, dialogs and other overlay content
|
|
|
4
4
|
|
|
5
5
|
## Properties
|
|
6
6
|
|
|
7
|
-
| Property
|
|
8
|
-
|
|
9
|
-
| `focusBoundary`
|
|
10
|
-
| `fullScreen`
|
|
11
|
-
| `fullyOpened`
|
|
12
|
-
| `horizontalOffset`
|
|
13
|
-
| `interactiveElements`
|
|
14
|
-
| `lockPositionTarget`
|
|
15
|
-
| `noAutofocus`
|
|
16
|
-
| `noCancelOnEscKey`
|
|
17
|
-
| `noCancelOnOutsideClick`
|
|
18
|
-
| `noFocusManagement`
|
|
19
|
-
| `noInteractionLock`
|
|
20
|
-
| `noOverlap`
|
|
21
|
-
| `offset`
|
|
22
|
-
| `opened`
|
|
23
|
-
| `position`
|
|
24
|
-
| `positionTarget`
|
|
25
|
-
| `positionTargetConfig`
|
|
26
|
-
| `spacing`
|
|
27
|
-
| `transitionStyle`
|
|
28
|
-
| `transitioning`
|
|
29
|
-
| `transparent`
|
|
30
|
-
| `verticalOffset`
|
|
31
|
-
| `withBackdrop`
|
|
32
|
-
| `withShadow`
|
|
33
|
-
| `x`
|
|
34
|
-
| `y`
|
|
35
|
-
| `zIndex`
|
|
7
|
+
| Property | Attribute | Type | Default | Description |
|
|
8
|
+
|-----------------------------------|------------------------------|------------------------------------|---------|--------------------------------------------------|
|
|
9
|
+
| `focusBoundary` | | | "this" | Set focus boundary to restrict tabbing. Default's overlay itself.<br />If external focus is required, set to null |
|
|
10
|
+
| `fullScreen` | `full-screen` | `boolean` | false | Set to true to show overlay in full screen mode |
|
|
11
|
+
| `fullyOpened (readonly)` | | `boolean` | | Returns true if the overlay is opened and animation is not running.<br />Returns false if overlay is closed and animation is not running |
|
|
12
|
+
| `horizontalOffset` | `horizontal-offset` | `number` | 0 | A pixel value that will be added to the position calculated on the horizontal axis.<br />The offset will be applied either to the `left` or `right` depending on the `positionTarget` |
|
|
13
|
+
| `interactiveElements` | | `object` | [] | A list of elements, which are active when overlay is opened<br />Valid only if noInteractionLock is false (default) |
|
|
14
|
+
| `lockPositionTarget` | `lock-position-target` | `boolean` | false | True to lock position target<br />Valid only if noInteractionLock is false (default) |
|
|
15
|
+
| `noAutofocus` | `no-autofocus` | `boolean` | false | Set to true to disable autofocusing the overlay or open |
|
|
16
|
+
| `noCancelOnEscKey` | `no-cancel-on-esc-key` | `boolean` | false | Set to true to disable canceling the overlay with the ESC key |
|
|
17
|
+
| `noCancelOnOutsideClick` | `no-cancel-on-outside-click` | `boolean` | false | Set to true to disable canceling the overlay by clicking outside it |
|
|
18
|
+
| `noFocusManagement` | `no-focus-management` | `boolean` | false | True to not apply focus management.<br />The overlay will not limit Tab behaviour or do auto-focusing |
|
|
19
|
+
| `noInteractionLock` | `no-interaction-lock` | `boolean` | false | Stop preventing user interaction when overlay is visible |
|
|
20
|
+
| `noOverlap` | `no-overlap` | `boolean` | false | True to not overlap positionTarget |
|
|
21
|
+
| `offset` | `offset` | `number` | 0 | A pixel value that will be added to the position calculated on the vertical or horizontal axis.<br />The offset is applied dynamically depending on the `positionTarget` |
|
|
22
|
+
| `opened` | `opened` | `boolean` | false | True if the overlay is currently displayed |
|
|
23
|
+
| `position` | `position` | `{} \| undefined` | | Set position and align against the attach target.<br />Position may contain a single word or a comma separated list to set the priority.<br />Position is not applied if `attachTarget` is not HTML Element.<br />For instance: `[bottom-middle, top-middle]` - default position is bottom-middle, if cannot fit position top-middle;<br />or `[left, right]` - align is not set, set best position on the left or right<br /><br />Position can be: `top`, `right`, `bottom`, `left`, `center`<br />Align can be: `start`, `middle`, `end` |
|
|
24
|
+
| `positionTarget` | `position-target` | `PositionTarget\|null\|undefined` | | Set the position target as follows:<br />- HTMLElement if overlay is position next to the HTML element<br />- String containing `top`, `right`, `left`, `bottom`, `center` combinations to position against the screen.<br />For instance: `top left` - put the overlay at `top left` point of the screen; `bottom` - put overlay at `bottom center` point of the screen |
|
|
25
|
+
| `positionTargetConfig (readonly)` | | | | Get position target configuration based on positionTarget and fullScreen properties<br />Used for caching and calculations |
|
|
26
|
+
| `spacing` | `spacing` | `boolean` | false | True to apply spacing for overlay content |
|
|
27
|
+
| `transitionStyle` | `transition-style` | `TransitionStyle\|null\|undefined` | | Set the transition style |
|
|
28
|
+
| `transitioning (readonly)` | | `boolean` | | Returns true if overlay is doing opening or closing transition |
|
|
29
|
+
| `transparent` | `transparent` | `boolean` | false | True to make overlay background transparent |
|
|
30
|
+
| `verticalOffset` | `vertical-offset` | `number` | 0 | A pixel value that will be added to the position calculated on the vertical axis.<br />The offset will be applied either to the `top` or `bottom` depending on the `positionTarget` |
|
|
31
|
+
| `withBackdrop` | `with-backdrop` | `boolean` | false | True to show backdrop |
|
|
32
|
+
| `withShadow` | `with-shadow` | `boolean` | false | True to add shadow |
|
|
33
|
+
| `x` | `x` | `number\|null\|undefined` | | Set a specific x coordinate |
|
|
34
|
+
| `y` | `y` | `number\|null\|undefined` | | Set a specific y coordinate |
|
|
35
|
+
| `zIndex` | `z-index` | `number\|null\|undefined` | | Set a preferable z-index to override automatically calculated z-index |
|
|
36
36
|
|
|
37
37
|
## Methods
|
|
38
38
|
|
|
@@ -43,18 +43,22 @@ export declare class Overlay extends ResponsiveElement {
|
|
|
43
43
|
spacing: boolean;
|
|
44
44
|
/**
|
|
45
45
|
* Set the transition style
|
|
46
|
+
* @type {TransitionStyle|null|undefined}
|
|
46
47
|
*/
|
|
47
48
|
transitionStyle: TransitionStyle | NullOrUndefined;
|
|
48
49
|
/**
|
|
49
50
|
* Set a preferable z-index to override automatically calculated z-index
|
|
51
|
+
* @type {number|null|undefined}
|
|
50
52
|
*/
|
|
51
53
|
zIndex: number | NullOrUndefined;
|
|
52
54
|
/**
|
|
53
55
|
* Set a specific x coordinate
|
|
56
|
+
* @type {number|null|undefined}
|
|
54
57
|
*/
|
|
55
58
|
x: number | NullOrUndefined;
|
|
56
59
|
/**
|
|
57
60
|
* Set a specific y coordinate
|
|
61
|
+
* @type {number|null|undefined}
|
|
58
62
|
*/
|
|
59
63
|
y: number | NullOrUndefined;
|
|
60
64
|
/**
|
|
@@ -62,6 +66,7 @@ export declare class Overlay extends ResponsiveElement {
|
|
|
62
66
|
* - HTMLElement if overlay is position next to the HTML element
|
|
63
67
|
* - String containing `top`, `right`, `left`, `bottom`, `center` combinations to position against the screen.
|
|
64
68
|
* For instance: `top left` - put the overlay at `top left` point of the screen; `bottom` - put overlay at `bottom center` point of the screen
|
|
69
|
+
* @type {PositionTarget|null|undefined}
|
|
65
70
|
*/
|
|
66
71
|
positionTarget: HTMLElement | PositionTarget | NullOrUndefined;
|
|
67
72
|
/**
|
|
@@ -17,21 +17,62 @@
|
|
|
17
17
|
"type": "boolean",
|
|
18
18
|
"default": "false"
|
|
19
19
|
},
|
|
20
|
+
{
|
|
21
|
+
"name": "with-backdrop",
|
|
22
|
+
"description": "True to show backdrop",
|
|
23
|
+
"type": "boolean",
|
|
24
|
+
"default": "false"
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
"name": "no-cancel-on-esc-key",
|
|
28
|
+
"description": "Set to true to disable canceling the overlay with the ESC key",
|
|
29
|
+
"type": "boolean",
|
|
30
|
+
"default": "false"
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
"name": "no-cancel-on-outside-click",
|
|
34
|
+
"description": "Set to true to disable canceling the overlay by clicking outside it",
|
|
35
|
+
"type": "boolean",
|
|
36
|
+
"default": "false"
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
"name": "lock-position-target",
|
|
40
|
+
"description": "Set to true to lock position target",
|
|
41
|
+
"type": "boolean",
|
|
42
|
+
"default": "false"
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
"name": "transition-style",
|
|
46
|
+
"description": "Set the transition style",
|
|
47
|
+
"type": "string | null"
|
|
48
|
+
},
|
|
20
49
|
{
|
|
21
50
|
"name": "value",
|
|
22
51
|
"description": "Returns the first selected item value.",
|
|
23
52
|
"type": "string",
|
|
24
|
-
"default": "
|
|
53
|
+
"default": "\"\""
|
|
25
54
|
},
|
|
26
55
|
{
|
|
27
56
|
"name": "x",
|
|
28
57
|
"description": "Set a specific x coordinate",
|
|
29
|
-
"type": "number"
|
|
58
|
+
"type": "number | undefined"
|
|
30
59
|
},
|
|
31
60
|
{
|
|
32
61
|
"name": "y",
|
|
33
62
|
"description": "Set a specific y coordinate",
|
|
34
|
-
"type": "number"
|
|
63
|
+
"type": "number | undefined"
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
"name": "horizontal-offset",
|
|
67
|
+
"description": "A pixel value that will be added to the position calculated on the horizontal axis. The offset will be applied either to the `left` or `right` depending on the `positionTarget`",
|
|
68
|
+
"type": "number",
|
|
69
|
+
"default": "0"
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
"name": "vertical-offset",
|
|
73
|
+
"description": "A pixel value that will be added to the position calculated on the vertical axis. The offset will be applied either to the `top` or `bottom` depending on the `positionTarget`",
|
|
74
|
+
"type": "number",
|
|
75
|
+
"default": "0"
|
|
35
76
|
},
|
|
36
77
|
{
|
|
37
78
|
"name": "offset",
|
|
@@ -41,7 +82,7 @@
|
|
|
41
82
|
{
|
|
42
83
|
"name": "position",
|
|
43
84
|
"description": "Set position and align against the attach target.",
|
|
44
|
-
"type": "
|
|
85
|
+
"type": "Position[] | undefined"
|
|
45
86
|
},
|
|
46
87
|
{
|
|
47
88
|
"name": "with-backdrop",
|
|
@@ -90,11 +131,13 @@
|
|
|
90
131
|
{
|
|
91
132
|
"name": "values",
|
|
92
133
|
"description": "Array of item's values",
|
|
93
|
-
"type": "string[]"
|
|
134
|
+
"type": "string[]",
|
|
135
|
+
"default": "[]"
|
|
94
136
|
},
|
|
95
137
|
{
|
|
96
138
|
"name": "data",
|
|
97
|
-
"description": "Construct the menu from data object.\nCannot be used with internal content"
|
|
139
|
+
"description": "Construct the menu from data object.\nCannot be used with internal content",
|
|
140
|
+
"type": "OverlayMenuData|undefined"
|
|
98
141
|
},
|
|
99
142
|
{
|
|
100
143
|
"name": "opened",
|
|
@@ -105,24 +148,28 @@
|
|
|
105
148
|
},
|
|
106
149
|
{
|
|
107
150
|
"name": "withBackdrop",
|
|
151
|
+
"attribute": "with-backdrop",
|
|
108
152
|
"description": "True to show backdrop",
|
|
109
153
|
"type": "boolean",
|
|
110
154
|
"default": "false"
|
|
111
155
|
},
|
|
112
156
|
{
|
|
113
157
|
"name": "noCancelOnEscKey",
|
|
158
|
+
"attribute": "no-cancel-on-esc-key",
|
|
114
159
|
"description": "Set to true to disable canceling the overlay with the ESC key",
|
|
115
160
|
"type": "boolean",
|
|
116
161
|
"default": "false"
|
|
117
162
|
},
|
|
118
163
|
{
|
|
119
164
|
"name": "noCancelOnOutsideClick",
|
|
165
|
+
"attribute": "no-cancel-on-outside-click",
|
|
120
166
|
"description": "Set to true to disable canceling the overlay by clicking outside it",
|
|
121
167
|
"type": "boolean",
|
|
122
168
|
"default": "false"
|
|
123
169
|
},
|
|
124
170
|
{
|
|
125
171
|
"name": "lockPositionTarget",
|
|
172
|
+
"attribute": "lock-position-target",
|
|
126
173
|
"description": "Set to true to lock position target",
|
|
127
174
|
"type": "boolean",
|
|
128
175
|
"default": "false"
|
|
@@ -130,41 +177,46 @@
|
|
|
130
177
|
{
|
|
131
178
|
"name": "positionTarget",
|
|
132
179
|
"description": "Position next to the HTML element",
|
|
133
|
-
"type": "HTMLElement|null"
|
|
180
|
+
"type": "HTMLElement | null"
|
|
134
181
|
},
|
|
135
182
|
{
|
|
136
183
|
"name": "transitionStyle",
|
|
184
|
+
"attribute": "transition-style",
|
|
137
185
|
"description": "Set the transition style",
|
|
138
|
-
"type": "string|null"
|
|
186
|
+
"type": "string | null"
|
|
139
187
|
},
|
|
140
188
|
{
|
|
141
189
|
"name": "value",
|
|
142
190
|
"attribute": "value",
|
|
143
191
|
"description": "Returns the first selected item value.",
|
|
144
192
|
"type": "string",
|
|
145
|
-
"default": "
|
|
193
|
+
"default": "\"\""
|
|
146
194
|
},
|
|
147
195
|
{
|
|
148
196
|
"name": "x",
|
|
149
197
|
"attribute": "x",
|
|
150
198
|
"description": "Set a specific x coordinate",
|
|
151
|
-
"type": "number"
|
|
199
|
+
"type": "number | undefined"
|
|
152
200
|
},
|
|
153
201
|
{
|
|
154
202
|
"name": "y",
|
|
155
203
|
"attribute": "y",
|
|
156
204
|
"description": "Set a specific y coordinate",
|
|
157
|
-
"type": "number"
|
|
205
|
+
"type": "number | undefined"
|
|
158
206
|
},
|
|
159
207
|
{
|
|
160
208
|
"name": "horizontalOffset",
|
|
209
|
+
"attribute": "horizontal-offset",
|
|
161
210
|
"description": "A pixel value that will be added to the position calculated on the horizontal axis. The offset will be applied either to the `left` or `right` depending on the `positionTarget`",
|
|
162
|
-
"type": "number"
|
|
211
|
+
"type": "number",
|
|
212
|
+
"default": "0"
|
|
163
213
|
},
|
|
164
214
|
{
|
|
165
215
|
"name": "verticalOffset",
|
|
216
|
+
"attribute": "vertical-offset",
|
|
166
217
|
"description": "A pixel value that will be added to the position calculated on the vertical axis. The offset will be applied either to the `top` or `bottom` depending on the `positionTarget`",
|
|
167
|
-
"type": "number"
|
|
218
|
+
"type": "number",
|
|
219
|
+
"default": "0"
|
|
168
220
|
},
|
|
169
221
|
{
|
|
170
222
|
"name": "offset",
|
|
@@ -176,7 +228,7 @@
|
|
|
176
228
|
"name": "position",
|
|
177
229
|
"attribute": "position",
|
|
178
230
|
"description": "Set position and align against the attach target.",
|
|
179
|
-
"type": "
|
|
231
|
+
"type": "Position[] | undefined"
|
|
180
232
|
}
|
|
181
233
|
],
|
|
182
234
|
"events": [
|
|
@@ -16,25 +16,25 @@ Overlay that supports single-level and multi-level menus
|
|
|
16
16
|
|
|
17
17
|
## Properties
|
|
18
18
|
|
|
19
|
-
| Property | Attribute
|
|
20
|
-
|
|
21
|
-
| `compact` | `compact`
|
|
22
|
-
| `data` |
|
|
23
|
-
| `horizontalOffset` |
|
|
24
|
-
| `lockPositionTarget` |
|
|
25
|
-
| `noCancelOnEscKey` |
|
|
26
|
-
| `noCancelOnOutsideClick` |
|
|
27
|
-
| `offset` | `offset`
|
|
28
|
-
| `opened` | `opened`
|
|
29
|
-
| `position` | `position`
|
|
30
|
-
| `positionTarget` |
|
|
31
|
-
| `transitionStyle` |
|
|
32
|
-
| `value` | `value`
|
|
33
|
-
| `values` |
|
|
34
|
-
| `verticalOffset` | | `number`
|
|
35
|
-
| `withBackdrop` |
|
|
36
|
-
| `x` | `x`
|
|
37
|
-
| `y` | `y`
|
|
19
|
+
| Property | Attribute | Type | Default | Description |
|
|
20
|
+
|--------------------------|------------------------------|------------------------------|---------|--------------------------------------------------|
|
|
21
|
+
| `compact` | `compact` | `boolean` | false | Switch to compact style menu |
|
|
22
|
+
| `data` | | `OverlayMenuData\|undefined` | | Construct the menu from data object.<br />Cannot be used with internal content |
|
|
23
|
+
| `horizontalOffset` | `horizontal-offset` | `number` | 0 | A pixel value that will be added to the position calculated on the horizontal axis. The offset will be applied either to the `left` or `right` depending on the `positionTarget` |
|
|
24
|
+
| `lockPositionTarget` | `lock-position-target` | `boolean` | false | Set to true to lock position target |
|
|
25
|
+
| `noCancelOnEscKey` | `no-cancel-on-esc-key` | `boolean` | false | Set to true to disable canceling the overlay with the ESC key |
|
|
26
|
+
| `noCancelOnOutsideClick` | `no-cancel-on-outside-click` | `boolean` | false | Set to true to disable canceling the overlay by clicking outside it |
|
|
27
|
+
| `offset` | `offset` | `number` | | A pixel value that will be added to the position calculated on the vertical or horizontal axis. The offset is applied dynamically depending on the `positionTarget` |
|
|
28
|
+
| `opened` | `opened` | `boolean` | false | True if the menu is currently displayed |
|
|
29
|
+
| `position` | `position` | `Position[] \| undefined` | | Set position and align against the attach target. |
|
|
30
|
+
| `positionTarget` | | `HTMLElement \| null` | null | Position next to the HTML element |
|
|
31
|
+
| `transitionStyle` | `transition-style` | `string \| null` | null | Set the transition style |
|
|
32
|
+
| `value` | `value` | `string` | "" | Returns the first selected item value. |
|
|
33
|
+
| `values` | | `string[]` | [] | Array of item's values |
|
|
34
|
+
| `verticalOffset` | `vertical-offset` | `number` | 0 | A pixel value that will be added to the position calculated on the vertical axis. The offset will be applied either to the `top` or `bottom` depending on the `positionTarget` |
|
|
35
|
+
| `withBackdrop` | `with-backdrop` | `boolean` | false | True to show backdrop |
|
|
36
|
+
| `x` | `x` | `number \| undefined` | | Set a specific x coordinate |
|
|
37
|
+
| `y` | `y` | `number \| undefined` | | Set a specific y coordinate |
|
|
38
38
|
|
|
39
39
|
## Events
|
|
40
40
|
|
|
@@ -25,30 +25,30 @@ export type { OverlayMenuData };
|
|
|
25
25
|
* @attr {boolean} lock-position-target - Set to true to lock position target
|
|
26
26
|
* @prop {boolean} [lockPositionTarget=false] - Set to true to lock position target
|
|
27
27
|
*
|
|
28
|
-
* @prop {HTMLElement|null} [positionTarget=null] - Position next to the HTML element
|
|
28
|
+
* @prop {HTMLElement | null} [positionTarget=null] - Position next to the HTML element
|
|
29
29
|
*
|
|
30
30
|
* @attr {string} transition-style - Set the transition style
|
|
31
|
-
* @prop {string|null} [transitionStyle=null] - Set the transition style
|
|
31
|
+
* @prop {string | null} [transitionStyle=null] - Set the transition style
|
|
32
32
|
*
|
|
33
|
-
* @prop {string} [value=] - Returns the first selected item from values.
|
|
33
|
+
* @prop {string} [value=""] - Returns the first selected item from values.
|
|
34
34
|
*
|
|
35
|
-
* @attr {number} x - Set a specific x coordinate
|
|
36
|
-
* @prop {number} x - Set a specific x coordinate
|
|
35
|
+
* @attr {number | undefined} x - Set a specific x coordinate
|
|
36
|
+
* @prop {number | undefined} x - Set a specific x coordinate
|
|
37
37
|
*
|
|
38
|
-
* @attr {number} y - Set a specific y coordinate
|
|
39
|
-
* @prop {number} y - Set a specific y coordinate
|
|
38
|
+
* @attr {number | undefined} y - Set a specific y coordinate
|
|
39
|
+
* @prop {number | undefined} y - Set a specific y coordinate
|
|
40
40
|
*
|
|
41
41
|
* @attr {number} horizontal-offset - A pixel value that will be added to the position calculated on the horizontal axis. The offset will be applied either to the `left` or `right` depending on the `positionTarget`
|
|
42
|
-
* @prop {number} horizontalOffset - A pixel value that will be added to the position calculated on the horizontal axis. The offset will be applied either to the `left` or `right` depending on the `positionTarget`
|
|
42
|
+
* @prop {number} [horizontalOffset=0] - A pixel value that will be added to the position calculated on the horizontal axis. The offset will be applied either to the `left` or `right` depending on the `positionTarget`
|
|
43
43
|
*
|
|
44
44
|
* @attr {number} vertical-offset - A pixel value that will be added to the position calculated on the vertical axis. The offset will be applied either to the `top` or `bottom` depending on the `positionTarget`
|
|
45
|
-
* @prop {number} verticalOffset - A pixel value that will be added to the position calculated on the vertical axis. The offset will be applied either to the `top` or `bottom` depending on the `positionTarget`
|
|
45
|
+
* @prop {number} [verticalOffset=0] - A pixel value that will be added to the position calculated on the vertical axis. The offset will be applied either to the `top` or `bottom` depending on the `positionTarget`
|
|
46
46
|
*
|
|
47
47
|
* @attr {number} offset - A pixel value that will be added to the position calculated on the vertical or horizontal axis. The offset is applied dynamically depending on the `positionTarget`
|
|
48
48
|
* @prop {number} offset - A pixel value that will be added to the position calculated on the vertical or horizontal axis. The offset is applied dynamically depending on the `positionTarget`
|
|
49
49
|
*
|
|
50
|
-
* @attr {
|
|
51
|
-
* @prop {
|
|
50
|
+
* @attr {Position[] | undefined} position - Set position and align against the attach target.
|
|
51
|
+
* @prop {Position[] | undefined} position - Set position and align against the attach target.
|
|
52
52
|
*/
|
|
53
53
|
export declare class OverlayMenu extends Overlay {
|
|
54
54
|
/**
|
|
@@ -81,6 +81,7 @@ export declare class OverlayMenu extends Overlay {
|
|
|
81
81
|
/**
|
|
82
82
|
* Array of item's values
|
|
83
83
|
* @type {string[]}
|
|
84
|
+
* @default []
|
|
84
85
|
*/
|
|
85
86
|
get values(): string[];
|
|
86
87
|
set values(values: string[]);
|
|
@@ -92,6 +93,7 @@ export declare class OverlayMenu extends Overlay {
|
|
|
92
93
|
/**
|
|
93
94
|
* Construct the menu from data object.
|
|
94
95
|
* Cannot be used with internal content
|
|
96
|
+
* @type {OverlayMenuData|undefined}
|
|
95
97
|
*/
|
|
96
98
|
get data(): OverlayMenuData | undefined;
|
|
97
99
|
set data(value: OverlayMenuData | undefined);
|
|
@@ -34,30 +34,30 @@ import { OpenedMenusManager } from './managers/menu-manager.js';
|
|
|
34
34
|
* @attr {boolean} lock-position-target - Set to true to lock position target
|
|
35
35
|
* @prop {boolean} [lockPositionTarget=false] - Set to true to lock position target
|
|
36
36
|
*
|
|
37
|
-
* @prop {HTMLElement|null} [positionTarget=null] - Position next to the HTML element
|
|
37
|
+
* @prop {HTMLElement | null} [positionTarget=null] - Position next to the HTML element
|
|
38
38
|
*
|
|
39
39
|
* @attr {string} transition-style - Set the transition style
|
|
40
|
-
* @prop {string|null} [transitionStyle=null] - Set the transition style
|
|
40
|
+
* @prop {string | null} [transitionStyle=null] - Set the transition style
|
|
41
41
|
*
|
|
42
|
-
* @prop {string} [value=] - Returns the first selected item from values.
|
|
42
|
+
* @prop {string} [value=""] - Returns the first selected item from values.
|
|
43
43
|
*
|
|
44
|
-
* @attr {number} x - Set a specific x coordinate
|
|
45
|
-
* @prop {number} x - Set a specific x coordinate
|
|
44
|
+
* @attr {number | undefined} x - Set a specific x coordinate
|
|
45
|
+
* @prop {number | undefined} x - Set a specific x coordinate
|
|
46
46
|
*
|
|
47
|
-
* @attr {number} y - Set a specific y coordinate
|
|
48
|
-
* @prop {number} y - Set a specific y coordinate
|
|
47
|
+
* @attr {number | undefined} y - Set a specific y coordinate
|
|
48
|
+
* @prop {number | undefined} y - Set a specific y coordinate
|
|
49
49
|
*
|
|
50
50
|
* @attr {number} horizontal-offset - A pixel value that will be added to the position calculated on the horizontal axis. The offset will be applied either to the `left` or `right` depending on the `positionTarget`
|
|
51
|
-
* @prop {number} horizontalOffset - A pixel value that will be added to the position calculated on the horizontal axis. The offset will be applied either to the `left` or `right` depending on the `positionTarget`
|
|
51
|
+
* @prop {number} [horizontalOffset=0] - A pixel value that will be added to the position calculated on the horizontal axis. The offset will be applied either to the `left` or `right` depending on the `positionTarget`
|
|
52
52
|
*
|
|
53
53
|
* @attr {number} vertical-offset - A pixel value that will be added to the position calculated on the vertical axis. The offset will be applied either to the `top` or `bottom` depending on the `positionTarget`
|
|
54
|
-
* @prop {number} verticalOffset - A pixel value that will be added to the position calculated on the vertical axis. The offset will be applied either to the `top` or `bottom` depending on the `positionTarget`
|
|
54
|
+
* @prop {number} [verticalOffset=0] - A pixel value that will be added to the position calculated on the vertical axis. The offset will be applied either to the `top` or `bottom` depending on the `positionTarget`
|
|
55
55
|
*
|
|
56
56
|
* @attr {number} offset - A pixel value that will be added to the position calculated on the vertical or horizontal axis. The offset is applied dynamically depending on the `positionTarget`
|
|
57
57
|
* @prop {number} offset - A pixel value that will be added to the position calculated on the vertical or horizontal axis. The offset is applied dynamically depending on the `positionTarget`
|
|
58
58
|
*
|
|
59
|
-
* @attr {
|
|
60
|
-
* @prop {
|
|
59
|
+
* @attr {Position[] | undefined} position - Set position and align against the attach target.
|
|
60
|
+
* @prop {Position[] | undefined} position - Set position and align against the attach target.
|
|
61
61
|
*/
|
|
62
62
|
let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
|
|
63
63
|
constructor() {
|
|
@@ -131,6 +131,7 @@ let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
|
|
|
131
131
|
/**
|
|
132
132
|
* Array of item's values
|
|
133
133
|
* @type {string[]}
|
|
134
|
+
* @default []
|
|
134
135
|
*/
|
|
135
136
|
get values() {
|
|
136
137
|
return this.withData ? this.getDataValues() : this.getSlottedValues();
|
|
@@ -156,6 +157,7 @@ let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
|
|
|
156
157
|
/**
|
|
157
158
|
* Construct the menu from data object.
|
|
158
159
|
* Cannot be used with internal content
|
|
160
|
+
* @type {OverlayMenuData|undefined}
|
|
159
161
|
*/
|
|
160
162
|
get data() {
|
|
161
163
|
return this._data;
|