@emuanalytics/flow-rdf-ui 4.1.13 → 4.1.16
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.
|
@@ -35,6 +35,42 @@
|
|
|
35
35
|
],
|
|
36
36
|
"references": []
|
|
37
37
|
},
|
|
38
|
+
{
|
|
39
|
+
"name": "flow-ui-avatar",
|
|
40
|
+
"description": "Avatars are used to represent a person or object.\n\n\n---\n\n\n\n\n### **Slots:**\n - **icon** - The default icon to use when no image or initials are present. Works best with `<flow-ui-icon>`.\n\n### **CSS Properties:**\n - **--size** - The size of the avatar. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon** - The container that wraps the avatar's icon.\n- **initials** - The container that wraps the avatar's initials.\n- **image** - The avatar image. Only shown when the `image` attribute is set.",
|
|
41
|
+
"attributes": [
|
|
42
|
+
{
|
|
43
|
+
"name": "image",
|
|
44
|
+
"description": "The image source to use for the avatar.",
|
|
45
|
+
"values": []
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
"name": "label",
|
|
49
|
+
"description": "A label to use to describe the avatar to assistive devices.",
|
|
50
|
+
"values": []
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"name": "initials",
|
|
54
|
+
"description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
|
|
55
|
+
"values": []
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
"name": "loading",
|
|
59
|
+
"description": "Indicates how the browser should load the image.",
|
|
60
|
+
"values": [{ "name": "eager" }, { "name": "lazy" }]
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
"name": "shape",
|
|
64
|
+
"description": "The shape of the avatar.",
|
|
65
|
+
"values": [
|
|
66
|
+
{ "name": "circle" },
|
|
67
|
+
{ "name": "square" },
|
|
68
|
+
{ "name": "rounded" }
|
|
69
|
+
]
|
|
70
|
+
}
|
|
71
|
+
],
|
|
72
|
+
"references": []
|
|
73
|
+
},
|
|
38
74
|
{
|
|
39
75
|
"name": "flow-ui-autocomplete",
|
|
40
76
|
"description": "The Autocomplete is a Text input enhanced by a panel of suggested options.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-input** - Emitted when the display value changes.\n- **flow-ui-change** - Emitted when the input value changes.\n- **flow-ui-focus** - Emitted when the input is focused.\n- **flow-ui-blur** - Emitted when the input is blurred.\n- **flow-ui-show** - Emitted when the dropdown is shown.\n- **flow-ui-after-show** - Emitted when the dropdown is shown.\n- **flow-ui-hide** - Emitted when the dropdown is hidden.\n- **flow-ui-after-hide** - Emitted when the dropdown is hidden.\n- **flow-ui-invalid** - Emitted when the input is invalid.\n- **flow-ui-valid** - Emitted when the input is valid.\n- **flow-ui-validate** - Emitted when the input is validated.\n- **flow-ui-validate-complete** - Emitted when the input is validated and the validity state is updated.\n- **flow-ui-validate-error** - Emitted when the input is validated and an error occurs.\n- **flow-ui-validate-success** - Emitted when the input is validated and no errors occur.\n\n### **Methods:**\n - **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **checkValidity(): _boolean_** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **reportValidity(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(_: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **focus()** - Focuses on the control\n- **blur()** - Blurs from the control.\n- **show()** - Shows the listbox.\n- **hide()** - Hides the listbox.\n- **getInputText()** - Gets the current value of the text input\n\n### **Slots:**\n - _default_ - The listbox options. Must be `<flow-option>` elements. You can use `<flow-divider>` to group items visually.\n- **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **prefix** - Used to prepend a presentational icon or similar element to the combobox.\n- **suffix** - Used to append a presentational icon or similar element to the combobox.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The select's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **combobox** - The container the wraps the prefix, suffix, combobox, clear icon, and expand button.\n- **prefix** - The container that wraps the prefix slot.\n- **suffix** - The container that wraps the suffix slot.\n- **display-input** - The element that displays the selected option's label, an `<input>` element.\n- **listbox** - The listbox container where options are slotted.\n- **clear-button** - The clear button.",
|
|
@@ -139,42 +175,6 @@
|
|
|
139
175
|
],
|
|
140
176
|
"references": []
|
|
141
177
|
},
|
|
142
|
-
{
|
|
143
|
-
"name": "flow-ui-avatar",
|
|
144
|
-
"description": "Avatars are used to represent a person or object.\n\n\n---\n\n\n\n\n### **Slots:**\n - **icon** - The default icon to use when no image or initials are present. Works best with `<flow-ui-icon>`.\n\n### **CSS Properties:**\n - **--size** - The size of the avatar. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon** - The container that wraps the avatar's icon.\n- **initials** - The container that wraps the avatar's initials.\n- **image** - The avatar image. Only shown when the `image` attribute is set.",
|
|
145
|
-
"attributes": [
|
|
146
|
-
{
|
|
147
|
-
"name": "image",
|
|
148
|
-
"description": "The image source to use for the avatar.",
|
|
149
|
-
"values": []
|
|
150
|
-
},
|
|
151
|
-
{
|
|
152
|
-
"name": "label",
|
|
153
|
-
"description": "A label to use to describe the avatar to assistive devices.",
|
|
154
|
-
"values": []
|
|
155
|
-
},
|
|
156
|
-
{
|
|
157
|
-
"name": "initials",
|
|
158
|
-
"description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
|
|
159
|
-
"values": []
|
|
160
|
-
},
|
|
161
|
-
{
|
|
162
|
-
"name": "loading",
|
|
163
|
-
"description": "Indicates how the browser should load the image.",
|
|
164
|
-
"values": [{ "name": "eager" }, { "name": "lazy" }]
|
|
165
|
-
},
|
|
166
|
-
{
|
|
167
|
-
"name": "shape",
|
|
168
|
-
"description": "The shape of the avatar.",
|
|
169
|
-
"values": [
|
|
170
|
-
{ "name": "circle" },
|
|
171
|
-
{ "name": "square" },
|
|
172
|
-
{ "name": "rounded" }
|
|
173
|
-
]
|
|
174
|
-
}
|
|
175
|
-
],
|
|
176
|
-
"references": []
|
|
177
|
-
},
|
|
178
178
|
{
|
|
179
179
|
"name": "flow-ui-animation",
|
|
180
180
|
"description": "Animate elements declaratively with over 100 animation presets. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-cancel** - Emitted when the animation is canceled.\n- **flow-ui-finish** - Emitted when the animation finishes.\n- **flow-ui-start** - Emitted when the animation starts or restarts.\n\n### **Methods:**\n - **cancel()** - Clears all keyframe effects caused by this animation and aborts its playback.\n- **finish()** - Sets the playback time to the end of the animation corresponding to the current playback direction.\n\n### **Slots:**\n - _default_ - The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To animate multiple elements, either wrap them in a single container or use multiple `<flow-ui-animation>` elements.",
|
|
@@ -275,18 +275,6 @@
|
|
|
275
275
|
],
|
|
276
276
|
"references": []
|
|
277
277
|
},
|
|
278
|
-
{
|
|
279
|
-
"name": "flow-ui-breadcrumb",
|
|
280
|
-
"description": "Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - One or more breadcrumb items to display.\n- **separator** - The separator to use between breadcrumb items. Works best with `<flow-ui-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
281
|
-
"attributes": [
|
|
282
|
-
{
|
|
283
|
-
"name": "label",
|
|
284
|
-
"description": "The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by\nscreen readers and other assistive devices to provide more context for users.",
|
|
285
|
-
"values": []
|
|
286
|
-
}
|
|
287
|
-
],
|
|
288
|
-
"references": []
|
|
289
|
-
},
|
|
290
278
|
{
|
|
291
279
|
"name": "flow-ui-base-control",
|
|
292
280
|
"description": "Inputs collect data from the user.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-blur** - Emitted when the control loses focus.\n- **flow-ui-change** - Emitted when an alteration to the control's value is committed by the user.\n- **flow-ui-clear** - Emitted when the clear button is activated.\n- **flow-ui-focus** - Emitted when the control gains focus.\n- **flow-ui-input** - Emitted when the control receives input.\n- **flow-ui-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the input.\n- **blur()** - Removes focus from the input.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **prefix** - Used to prepend a presentational icon or similar element to the input.\n- **suffix** - Used to append a presentational icon or similar element to the input.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **show-password-icon** - An icon to use in lieu of the default show password icon.\n- **hide-password-icon** - An icon to use in lieu of the default hide password icon.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's base wrapper.\n- **input** - The internal `<input>` control.\n- **prefix** - The container that wraps the prefix.\n- **clear-button** - The clear button.\n- **password-toggle-button** - The password toggle button.\n- **suffix** - The container that wraps the suffix.",
|
|
@@ -375,6 +363,18 @@
|
|
|
375
363
|
],
|
|
376
364
|
"references": []
|
|
377
365
|
},
|
|
366
|
+
{
|
|
367
|
+
"name": "flow-ui-breadcrumb",
|
|
368
|
+
"description": "Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - One or more breadcrumb items to display.\n- **separator** - The separator to use between breadcrumb items. Works best with `<flow-ui-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
369
|
+
"attributes": [
|
|
370
|
+
{
|
|
371
|
+
"name": "label",
|
|
372
|
+
"description": "The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by\nscreen readers and other assistive devices to provide more context for users.",
|
|
373
|
+
"values": []
|
|
374
|
+
}
|
|
375
|
+
],
|
|
376
|
+
"references": []
|
|
377
|
+
},
|
|
378
378
|
{
|
|
379
379
|
"name": "flow-ui-busy-overlay",
|
|
380
380
|
"description": "Busy overlay is used to indicate that a component which displays data is being currently updated.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The component to overlay with when busy.\n- **busy-animation** - The indeterminate custom loading animation to display when busy.\n\n### **CSS Properties:**\n - **--transition-delay** - The delay after which the overlay is shown. _(default: undefined)_\n- **--transition-duration** - The duration of the overlay's fade-in/out transition. _(default: undefined)_\n- **--progress-ring-size** - The size of the default progress ring loading animation. _(default: undefined)_\n- **--progress-ring-track-width** - The width of the default progress ring's track. _(default: undefined)_\n- **--progress-ring-track-color** - The color of the default progress ring's track. _(default: undefined)_\n- **--overlay-background-color** - The background color of the overlay. _(default: undefined)_",
|
|
@@ -1188,6 +1188,18 @@
|
|
|
1188
1188
|
],
|
|
1189
1189
|
"references": []
|
|
1190
1190
|
},
|
|
1191
|
+
{
|
|
1192
|
+
"name": "flow-ui-divider",
|
|
1193
|
+
"description": "Dividers are used to visually separate or group elements.\n\n\n---\n\n\n\n\n### **CSS Properties:**\n - **--color** - The color of the divider. _(default: undefined)_\n- **--width** - The width of the divider. _(default: undefined)_\n- **--spacing** - The spacing of the divider. _(default: undefined)_",
|
|
1194
|
+
"attributes": [
|
|
1195
|
+
{
|
|
1196
|
+
"name": "vertical",
|
|
1197
|
+
"description": "Draws the divider in a vertical orientation.",
|
|
1198
|
+
"values": []
|
|
1199
|
+
}
|
|
1200
|
+
],
|
|
1201
|
+
"references": []
|
|
1202
|
+
},
|
|
1191
1203
|
{
|
|
1192
1204
|
"name": "flow-ui-drawer",
|
|
1193
1205
|
"description": "Drawers slide in from a container to expose additional options and information.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-show** - Emitted when the drawer opens.\n- **flow-ui-after-show** - Emitted after the drawer opens and all animations are complete.\n- **flow-ui-hide** - Emitted when the drawer closes.\n- **flow-ui-after-hide** - Emitted after the drawer closes and all animations are complete.\n- **flow-ui-initial-focus** - Emitted when the drawer opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n- **flow-ui-request-close** - Emitted when the user attempts to close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in destructive behavior such as data loss.\n\n### **Methods:**\n - **show()** - Shows the drawer.\n- **hide()** - Hides the drawer\n\n### **Slots:**\n - _default_ - The drawer's main content.\n- **label** - The drawer's label. Alternatively, you can use the `label` attribute.\n- **header-actions** - Optional actions to add to the header. Works best with `<flow-ui-icon-button>`.\n- **footer** - The drawer's footer, usually one or more buttons representing various options.\n\n### **CSS Properties:**\n - **--size** - The preferred size of the drawer. This will be applied to the drawer's width or height depending on its `placement`. Note that the drawer will shrink to accommodate smaller screens. _(default: undefined)_\n- **--header-spacing** - The amount of padding to use for the header. _(default: undefined)_\n- **--body-spacing** - The amount of padding to use for the body. _(default: undefined)_\n- **--footer-spacing** - The amount of padding to use for the footer. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **overlay** - The overlay that covers the screen behind the drawer.\n- **panel** - The drawer's panel (where the drawer and its content are rendered).\n- **header** - The drawer's header. This element wraps the title and header actions.\n- **header-actions** - Optional actions to add to the header. Works best with `<flow-ui-icon-button>`.\n- **title** - The drawer's title.\n- **close-button** - The close button, an `<flow-ui-icon-button>`.\n- **close-button__base** - The close button's exported `base` part.\n- **body** - The drawer's body.\n- **footer** - The drawer's footer.",
|
|
@@ -1350,45 +1362,6 @@
|
|
|
1350
1362
|
],
|
|
1351
1363
|
"references": []
|
|
1352
1364
|
},
|
|
1353
|
-
{
|
|
1354
|
-
"name": "flow-ui-divider",
|
|
1355
|
-
"description": "Dividers are used to visually separate or group elements.\n\n\n---\n\n\n\n\n### **CSS Properties:**\n - **--color** - The color of the divider. _(default: undefined)_\n- **--width** - The width of the divider. _(default: undefined)_\n- **--spacing** - The spacing of the divider. _(default: undefined)_",
|
|
1356
|
-
"attributes": [
|
|
1357
|
-
{
|
|
1358
|
-
"name": "vertical",
|
|
1359
|
-
"description": "Draws the divider in a vertical orientation.",
|
|
1360
|
-
"values": []
|
|
1361
|
-
}
|
|
1362
|
-
],
|
|
1363
|
-
"references": []
|
|
1364
|
-
},
|
|
1365
|
-
{
|
|
1366
|
-
"name": "flow-ui-icon",
|
|
1367
|
-
"description": "Icons are symbols that can be used to represent various options within an application.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-load** - Emitted when the icon has loaded.\n- **flow-ui-error** - Emitted when the icon fails to load due to an error.\n\n### **CSS Parts:**\n - **svg** - The internal SVG element.",
|
|
1368
|
-
"attributes": [
|
|
1369
|
-
{
|
|
1370
|
-
"name": "name",
|
|
1371
|
-
"description": "The name of the icon to draw. Available names depend on the icon library being used.",
|
|
1372
|
-
"values": []
|
|
1373
|
-
},
|
|
1374
|
-
{
|
|
1375
|
-
"name": "src",
|
|
1376
|
-
"description": "An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\ncan result in XSS attacks.",
|
|
1377
|
-
"values": []
|
|
1378
|
-
},
|
|
1379
|
-
{
|
|
1380
|
-
"name": "label",
|
|
1381
|
-
"description": "An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and\nignored by assistive devices.",
|
|
1382
|
-
"values": []
|
|
1383
|
-
},
|
|
1384
|
-
{
|
|
1385
|
-
"name": "library",
|
|
1386
|
-
"description": "The name of a registered custom icon library.",
|
|
1387
|
-
"values": []
|
|
1388
|
-
}
|
|
1389
|
-
],
|
|
1390
|
-
"references": []
|
|
1391
|
-
},
|
|
1392
1365
|
{
|
|
1393
1366
|
"name": "flow-ui-gauge",
|
|
1394
1367
|
"description": "Gauges are used to display a single value with an optional icon and heading.\n\n\n---\n\n\n\n\n### **Slots:**\n - **title** - The gauge's title. Alternatively, you can use the `title` attribute.\n- **value** - The gauge's value. Alternatively, you can use the `value` attribute.\n- **unit** - Alternatively, you can use the `unit` attribute.\n- **info** - The content to display in the gauge's info dialog. If this is set then an info button will be displayed in the gauge's header.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **header** - The gauge's header.\n- **header-icon** - The icon in the gauge's header.\n- **title** - The title text in the gauge's header.\n- **info-button** - The info button in the gauge's header (if info dialog configured).",
|
|
@@ -1426,6 +1399,33 @@
|
|
|
1426
1399
|
],
|
|
1427
1400
|
"references": []
|
|
1428
1401
|
},
|
|
1402
|
+
{
|
|
1403
|
+
"name": "flow-ui-icon",
|
|
1404
|
+
"description": "Icons are symbols that can be used to represent various options within an application.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-load** - Emitted when the icon has loaded.\n- **flow-ui-error** - Emitted when the icon fails to load due to an error.\n\n### **CSS Parts:**\n - **svg** - The internal SVG element.",
|
|
1405
|
+
"attributes": [
|
|
1406
|
+
{
|
|
1407
|
+
"name": "name",
|
|
1408
|
+
"description": "The name of the icon to draw. Available names depend on the icon library being used.",
|
|
1409
|
+
"values": []
|
|
1410
|
+
},
|
|
1411
|
+
{
|
|
1412
|
+
"name": "src",
|
|
1413
|
+
"description": "An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\ncan result in XSS attacks.",
|
|
1414
|
+
"values": []
|
|
1415
|
+
},
|
|
1416
|
+
{
|
|
1417
|
+
"name": "label",
|
|
1418
|
+
"description": "An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and\nignored by assistive devices.",
|
|
1419
|
+
"values": []
|
|
1420
|
+
},
|
|
1421
|
+
{
|
|
1422
|
+
"name": "library",
|
|
1423
|
+
"description": "The name of a registered custom icon library.",
|
|
1424
|
+
"values": []
|
|
1425
|
+
}
|
|
1426
|
+
],
|
|
1427
|
+
"references": []
|
|
1428
|
+
},
|
|
1429
1429
|
{
|
|
1430
1430
|
"name": "flow-ui-icon-button",
|
|
1431
1431
|
"description": "Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-blur** - Emitted when the icon button loses focus.\n- **flow-ui-focus** - Emitted when the icon button gains focus.\n\n### **Methods:**\n - **click()** - Simulates a click on the icon button.\n- **focus(options: _FocusOptions_)** - Sets focus on the icon button.\n- **blur()** - Removes focus from the icon button.\n- **hideConfirm()** - Hide the confirmation tooltip if it is showing\n- **showConfirm()** - Show the confirmation tooltip\n\n### **Slots:**\n - **tooltip** - The tooltip content to display when the user hovers over the icon button. Alternatively, you can use the `tooltip` attribute.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
@@ -1730,20 +1730,19 @@
|
|
|
1730
1730
|
"references": []
|
|
1731
1731
|
},
|
|
1732
1732
|
{
|
|
1733
|
-
"name": "flow-ui-list
|
|
1734
|
-
"description": "A
|
|
1733
|
+
"name": "flow-ui-list",
|
|
1734
|
+
"description": "A panel header provides a label, optional accessory controls and expand/collapse behavior for panels.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-change** - Emitted when a list item is renamed **or** a list item is selected (selectable lists only).\n- **flow-ui-input** - Emitted when a list item is selected (selectable lists only).\n- **flow-ui-remove** - Emitted when a list item is removed.\n- **flow-ui-drag-start** - Emitted when the user starts dragging to reorder list items.\n- **flow-ui-drag-drop** - Emitted when the user drops a list item to reorder it.\n- **flow-ui-drag-end** - Emitted when the drag-drop operation has finished or been cancelled.",
|
|
1735
1735
|
"attributes": [
|
|
1736
1736
|
{
|
|
1737
|
-
"name": "
|
|
1738
|
-
"description": "The
|
|
1737
|
+
"name": "value",
|
|
1738
|
+
"description": "The current selected list item. (selectable lists only)",
|
|
1739
1739
|
"values": []
|
|
1740
1740
|
},
|
|
1741
1741
|
{
|
|
1742
|
-
"name": "
|
|
1743
|
-
"description": "
|
|
1742
|
+
"name": "selectable",
|
|
1743
|
+
"description": "Set to enable radio-button-style selection of list items.",
|
|
1744
1744
|
"values": []
|
|
1745
1745
|
},
|
|
1746
|
-
{ "name": "checked", "values": [] },
|
|
1747
1746
|
{
|
|
1748
1747
|
"name": "editable",
|
|
1749
1748
|
"description": "Set to enable renaming of the list item text.",
|
|
@@ -1758,29 +1757,25 @@
|
|
|
1758
1757
|
"name": "removable",
|
|
1759
1758
|
"description": "Set to enable removing the list item.",
|
|
1760
1759
|
"values": []
|
|
1761
|
-
},
|
|
1762
|
-
{
|
|
1763
|
-
"name": "disabled",
|
|
1764
|
-
"description": "Set to enable removing the list item.",
|
|
1765
|
-
"values": []
|
|
1766
1760
|
}
|
|
1767
1761
|
],
|
|
1768
1762
|
"references": []
|
|
1769
1763
|
},
|
|
1770
1764
|
{
|
|
1771
|
-
"name": "flow-ui-list",
|
|
1772
|
-
"description": "A
|
|
1765
|
+
"name": "flow-ui-list-item",
|
|
1766
|
+
"description": "A list item.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-change** - Emitted when the list item is renamed.\n- **flow-ui-remove** - Emitted when the list item is removed. Calling `event.preventDefault()` will cancel the removal.\n- **flow-ui-select** - Emitted when a menu item is selected.\n- **flow-ui-blur** - Emitted when the control loses focus.\n- **flow-ui-focus** - Emitted when the control gains focus.\n\n### **Slots:**\n - **prefix** - The list item's prefix content.\n- **suffix** - The list item's suffix content.\n- **menu** - Specify custom menu items to add to the list item's menu.\n\n### **CSS Properties:**\n - **padding** - The padding around the header. Defaults to `--flow-ui-panel-header-padding`. _(default: undefined)_\n- **header-height** - The height of the header. Defaults to `--flow-ui-panel-header-height`. _(default: undefined)_\n- **background-color** - The background color of the header. Defaults to `--flow-ui-panel-header-background-color`. _(default: undefined)_\n- **color** - The text color of the header. Defaults to `--flow-ui-panel-header-color`. _(default: undefined)_\n- **accessory-color** - The color of the accessory controls. Defaults to `--flow-ui-panel-header-accessory-color`. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **input** - The list item's flow-ui-input control.\n- **prefix** - The container that wraps the prefix.\n- **suffix** - The container that wraps the suffix.\n- **reorder-icon** - The list item's reorder icon.\n- **menu-button** - The list item's menu-button.",
|
|
1773
1767
|
"attributes": [
|
|
1774
1768
|
{
|
|
1775
|
-
"name": "
|
|
1776
|
-
"description": "The
|
|
1769
|
+
"name": "label",
|
|
1770
|
+
"description": "The label text for the list item.",
|
|
1777
1771
|
"values": []
|
|
1778
1772
|
},
|
|
1779
1773
|
{
|
|
1780
|
-
"name": "
|
|
1781
|
-
"description": "
|
|
1774
|
+
"name": "value",
|
|
1775
|
+
"description": "The tracking value (id) for the list item.",
|
|
1782
1776
|
"values": []
|
|
1783
1777
|
},
|
|
1778
|
+
{ "name": "checked", "values": [] },
|
|
1784
1779
|
{
|
|
1785
1780
|
"name": "editable",
|
|
1786
1781
|
"description": "Set to enable renaming of the list item text.",
|
|
@@ -1795,6 +1790,11 @@
|
|
|
1795
1790
|
"name": "removable",
|
|
1796
1791
|
"description": "Set to enable removing the list item.",
|
|
1797
1792
|
"values": []
|
|
1793
|
+
},
|
|
1794
|
+
{
|
|
1795
|
+
"name": "disabled",
|
|
1796
|
+
"description": "Set to enable removing the list item.",
|
|
1797
|
+
"values": []
|
|
1798
1798
|
}
|
|
1799
1799
|
],
|
|
1800
1800
|
"references": []
|
|
@@ -1856,6 +1856,12 @@
|
|
|
1856
1856
|
],
|
|
1857
1857
|
"references": []
|
|
1858
1858
|
},
|
|
1859
|
+
{
|
|
1860
|
+
"name": "flow-ui-menu",
|
|
1861
|
+
"description": "Menus provide a list of options for the user to choose from.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-select** - Emitted when a menu item is selected.\n\n### **Slots:**\n - _default_ - The menu's content, including menu items, menu labels, and dividers.",
|
|
1862
|
+
"attributes": [],
|
|
1863
|
+
"references": []
|
|
1864
|
+
},
|
|
1859
1865
|
{
|
|
1860
1866
|
"name": "flow-ui-menu-item",
|
|
1861
1867
|
"description": "Menu items provide options for the user to pick from in a menu.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The menu item's label.\n- **prefix** - Used to prepend an icon or similar element to the menu item.\n- **suffix** - Used to append an icon or similar element to the menu item.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **checked-icon** - The checked icon, which is only visible when the menu item is checked.\n- **prefix** - The prefix container.\n- **label** - The menu item label.\n- **suffix** - The suffix container.\n- **submenu-icon** - The submenu icon, visible only when the menu item has a submenu (not yet implemented).",
|
|
@@ -1893,12 +1899,6 @@
|
|
|
1893
1899
|
"attributes": [],
|
|
1894
1900
|
"references": []
|
|
1895
1901
|
},
|
|
1896
|
-
{
|
|
1897
|
-
"name": "flow-ui-menu",
|
|
1898
|
-
"description": "Menus provide a list of options for the user to choose from.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-select** - Emitted when a menu item is selected.\n\n### **Slots:**\n - _default_ - The menu's content, including menu items, menu labels, and dividers.",
|
|
1899
|
-
"attributes": [],
|
|
1900
|
-
"references": []
|
|
1901
|
-
},
|
|
1902
1902
|
{
|
|
1903
1903
|
"name": "flow-ui-mutation-observer",
|
|
1904
1904
|
"description": "The Mutation Observer component offers a thin, declarative interface to the [`MutationObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-mutation** - Emitted when a mutation occurs.\n\n### **Slots:**\n - _default_ - The content to watch for mutations.",
|
|
@@ -1937,39 +1937,87 @@
|
|
|
1937
1937
|
"references": []
|
|
1938
1938
|
},
|
|
1939
1939
|
{
|
|
1940
|
-
"name": "flow-ui-
|
|
1941
|
-
"description": "
|
|
1940
|
+
"name": "flow-ui-option",
|
|
1941
|
+
"description": "Options define the selectable items within various form controls such as [select](/components/select).\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The option's label.\n- **prefix** - Used to prepend an icon or similar element to the menu item.\n- **suffix** - Used to append an icon or similar element to the menu item.\n\n### **CSS Parts:**\n - **checked-icon** - The checked icon, a `<flow-ui-icon>` element.\n- **base** - The component's base wrapper.\n- **label** - The option's label.\n- **prefix** - The container that wraps the prefix.\n- **suffix** - The container that wraps the suffix.",
|
|
1942
1942
|
"attributes": [
|
|
1943
1943
|
{
|
|
1944
|
-
"name": "
|
|
1945
|
-
"description": "
|
|
1944
|
+
"name": "value",
|
|
1945
|
+
"description": "The option's value. When selected, the containing form control will receive this value. The value must be unique\nfrom other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing\nmultiple values.",
|
|
1946
1946
|
"values": []
|
|
1947
1947
|
},
|
|
1948
1948
|
{
|
|
1949
|
-
"name": "
|
|
1950
|
-
"description": "
|
|
1949
|
+
"name": "disabled",
|
|
1950
|
+
"description": "Draws the option in a disabled state, preventing selection.",
|
|
1951
1951
|
"values": []
|
|
1952
1952
|
},
|
|
1953
1953
|
{
|
|
1954
|
-
"name": "
|
|
1955
|
-
"description": "
|
|
1956
|
-
"values": [
|
|
1954
|
+
"name": "size",
|
|
1955
|
+
"description": "The options's size.",
|
|
1956
|
+
"values": [
|
|
1957
|
+
{ "name": "small" },
|
|
1958
|
+
{ "name": "medium" },
|
|
1959
|
+
{ "name": "large" }
|
|
1960
|
+
]
|
|
1957
1961
|
}
|
|
1958
1962
|
],
|
|
1959
1963
|
"references": []
|
|
1960
1964
|
},
|
|
1961
1965
|
{
|
|
1962
|
-
"name": "flow-ui-
|
|
1963
|
-
"description": "
|
|
1966
|
+
"name": "flow-ui-panel",
|
|
1967
|
+
"description": "Panels are use with split-views to create resizable areas.\n\n\n---\n\n\n\n\n### **Methods:**\n - **expand(emitEvent: _boolean_)** - Open the panel\n- **collapse(emitEvent: _boolean_)** - Close the panel\n\n### **CSS Properties:**\n - **--padding** - Padding to add to the panel when the `padding` attribute is set. Defaults to `--flow-ui-spacing-small`. _(default: undefined)_",
|
|
1964
1968
|
"attributes": [
|
|
1965
1969
|
{
|
|
1966
|
-
"name": "
|
|
1967
|
-
"description": "
|
|
1968
|
-
"values": [
|
|
1970
|
+
"name": "closed",
|
|
1971
|
+
"description": "Indicates whether the panel is open or closed.",
|
|
1972
|
+
"values": []
|
|
1969
1973
|
},
|
|
1970
1974
|
{
|
|
1971
|
-
"name": "
|
|
1972
|
-
"description": "
|
|
1975
|
+
"name": "scrollable",
|
|
1976
|
+
"description": "Indicates whether the panel is scrollable. By default overflow is hidden.",
|
|
1977
|
+
"values": []
|
|
1978
|
+
},
|
|
1979
|
+
{
|
|
1980
|
+
"name": "padding",
|
|
1981
|
+
"description": "Indicates whether the panel body has padding.",
|
|
1982
|
+
"values": []
|
|
1983
|
+
}
|
|
1984
|
+
],
|
|
1985
|
+
"references": []
|
|
1986
|
+
},
|
|
1987
|
+
{
|
|
1988
|
+
"name": "flow-ui-panel-header",
|
|
1989
|
+
"description": "A panel header provides a label, optional accessory controls and expand/collapse behavior for panels.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-collapse** - Emitted when the header is collapsed by UI interaction.\n- **flow-ui-expand** - Emitted when the header is expanded by UI interaction.\n\n### **Slots:**\n - **title** - The panel header's title content. Alternatively, use the `title` attribute for plain text.\n- **prefix** - The panel header's prefix content.\n- **suffix** - The panel header's suffix content.\n- **expand-icon** - Specify an alternative `<flow-ui-icon>` to use for the expand icon.\n- **collapse-icon** - Specify an alternative `<flow-ui-icon>` to use for the collapse icon.\n\n### **CSS Properties:**\n - **padding** - The padding around the header. Defaults to `--flow-ui-panel-header-padding`. _(default: undefined)_\n- **header-height** - The height of the header. Defaults to `--flow-ui-panel-header-height`. _(default: undefined)_\n- **background-color** - The background color of the header. Defaults to `--flow-ui-panel-header-background-color`. _(default: undefined)_\n- **color** - The text color of the header. Defaults to `--flow-ui-panel-header-color`. _(default: undefined)_\n- **accessory-color** - The color of the accessory controls. Defaults to `--flow-ui-panel-header-accessory-color`. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **title** - The container that wraps the title.\n- **prefix** - The container that wraps the prefix.\n- **suffix** - The container that wraps the suffix.\n- **toggle-icon** - The container that wraps the expand/collapse icon.",
|
|
1990
|
+
"attributes": [
|
|
1991
|
+
{
|
|
1992
|
+
"name": "closed",
|
|
1993
|
+
"description": "Indicates whether or not the header is open or closed. Toggle this attribute to expand or collapse the header.\nAlternatively, call the `expand()` and `collapse()` methods.",
|
|
1994
|
+
"values": []
|
|
1995
|
+
},
|
|
1996
|
+
{
|
|
1997
|
+
"name": "title",
|
|
1998
|
+
"description": "The header title. Use the `title` slot instead to display HTML.",
|
|
1999
|
+
"values": []
|
|
2000
|
+
},
|
|
2001
|
+
{
|
|
2002
|
+
"name": "fixed",
|
|
2003
|
+
"description": "Set to `true` to hide the panel expand/collapse button.",
|
|
2004
|
+
"values": []
|
|
2005
|
+
}
|
|
2006
|
+
],
|
|
2007
|
+
"references": []
|
|
2008
|
+
},
|
|
2009
|
+
{
|
|
2010
|
+
"name": "flow-ui-popup",
|
|
2011
|
+
"description": "Popup is a utility that lets you declaratively anchor \"popup\" containers to another element.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-reposition** - Emitted when the popup is repositioned. This event can fire a lot, so avoid putting expensive operations in your listener or consider debouncing it.\n\n### **Methods:**\n - **reposition()** - Forces the popup to recalculate and reposition itself.\n\n### **Slots:**\n - _default_ - The popup's content.\n- **anchor** - The element the popup will be anchored to. If the anchor lives outside of the popup, you can use the `anchor` attribute or property instead.\n\n### **CSS Properties:**\n - **--arrow-size** - The size of the arrow. Note that an arrow won't be shown unless the `arrow` attribute is used. _(default: 6px)_\n- **--arrow-color** - The color of the arrow. _(default: undefined)_\n- **--auto-size-available-width** - A read-only custom property that determines the amount of width the popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only available when using `auto-size`. _(default: undefined)_\n- **--auto-size-available-height** - A read-only custom property that determines the amount of height the popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only available when using `auto-size`. _(default: undefined)_\n\n### **CSS Parts:**\n - **arrow** - The arrow's container. Avoid setting `top|bottom|left|right` properties, as these values are assigned dynamically as the popup moves. This is most useful for applying a background color to match the popup, and maybe a border or box shadow.\n- **popup** - The popup's container. Useful for setting a background color, box shadow, etc.\n- **hover-bridge** - The hover bridge element. Only available when the `hover-bridge` option is enabled.",
|
|
2012
|
+
"attributes": [
|
|
2013
|
+
{
|
|
2014
|
+
"name": "anchor",
|
|
2015
|
+
"description": "The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide the anchor\nelement `id`, a DOM element reference, or a `VirtualElement`. If the anchor lives inside the popup, use the\n`anchor` slot instead.",
|
|
2016
|
+
"values": [{ "name": "Element" }, { "name": "VirtualElement" }]
|
|
2017
|
+
},
|
|
2018
|
+
{
|
|
2019
|
+
"name": "active",
|
|
2020
|
+
"description": "Activates the positioning logic and shows the popup. When this attribute is removed, the positioning logic is torn\ndown and the popup will be hidden.",
|
|
1973
2021
|
"values": []
|
|
1974
2022
|
},
|
|
1975
2023
|
{
|
|
@@ -2102,32 +2150,6 @@
|
|
|
2102
2150
|
],
|
|
2103
2151
|
"references": []
|
|
2104
2152
|
},
|
|
2105
|
-
{
|
|
2106
|
-
"name": "flow-ui-option",
|
|
2107
|
-
"description": "Options define the selectable items within various form controls such as [select](/components/select).\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The option's label.\n- **prefix** - Used to prepend an icon or similar element to the menu item.\n- **suffix** - Used to append an icon or similar element to the menu item.\n\n### **CSS Parts:**\n - **checked-icon** - The checked icon, a `<flow-ui-icon>` element.\n- **base** - The component's base wrapper.\n- **label** - The option's label.\n- **prefix** - The container that wraps the prefix.\n- **suffix** - The container that wraps the suffix.",
|
|
2108
|
-
"attributes": [
|
|
2109
|
-
{
|
|
2110
|
-
"name": "value",
|
|
2111
|
-
"description": "The option's value. When selected, the containing form control will receive this value. The value must be unique\nfrom other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing\nmultiple values.",
|
|
2112
|
-
"values": []
|
|
2113
|
-
},
|
|
2114
|
-
{
|
|
2115
|
-
"name": "disabled",
|
|
2116
|
-
"description": "Draws the option in a disabled state, preventing selection.",
|
|
2117
|
-
"values": []
|
|
2118
|
-
},
|
|
2119
|
-
{
|
|
2120
|
-
"name": "size",
|
|
2121
|
-
"description": "The options's size.",
|
|
2122
|
-
"values": [
|
|
2123
|
-
{ "name": "small" },
|
|
2124
|
-
{ "name": "medium" },
|
|
2125
|
-
{ "name": "large" }
|
|
2126
|
-
]
|
|
2127
|
-
}
|
|
2128
|
-
],
|
|
2129
|
-
"references": []
|
|
2130
|
-
},
|
|
2131
2153
|
{
|
|
2132
2154
|
"name": "flow-ui-progress-bar",
|
|
2133
2155
|
"description": "Progress bars are used to show the status of an ongoing operation.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - A label to show inside the progress indicator.\n\n### **CSS Properties:**\n - **--track-height** - The progress bar's thickness (same as the indicator's thickness). _(default: undefined)_\n- **--track-color** - The color of the track. _(default: undefined)_\n- **--indicator-color** - The color of the indicator. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **indicator** - The progress bar's indicator.\n- **label** - The progress bar's label.",
|
|
@@ -2412,6 +2434,18 @@
|
|
|
2412
2434
|
],
|
|
2413
2435
|
"references": []
|
|
2414
2436
|
},
|
|
2437
|
+
{
|
|
2438
|
+
"name": "flow-ui-resize-observer",
|
|
2439
|
+
"description": "The Resize Observer component offers a thin, declarative interface to the [`ResizeObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-resize** - Emitted when the element is resized.\n\n### **Slots:**\n - _default_ - One or more elements to watch for resizing.",
|
|
2440
|
+
"attributes": [
|
|
2441
|
+
{
|
|
2442
|
+
"name": "disabled",
|
|
2443
|
+
"description": "Disables the observer.",
|
|
2444
|
+
"values": []
|
|
2445
|
+
}
|
|
2446
|
+
],
|
|
2447
|
+
"references": []
|
|
2448
|
+
},
|
|
2415
2449
|
{
|
|
2416
2450
|
"name": "flow-ui-select",
|
|
2417
2451
|
"description": "Selects allow you to choose items from a menu of predefined options.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-change** - Emitted when the control's value changes.\n- **flow-ui-clear** - Emitted when the control's value is cleared.\n- **flow-ui-input** - Emitted when the control receives input.\n- **flow-ui-focus** - Emitted when the control gains focus.\n- **flow-ui-blur** - Emitted when the control loses focus.\n- **flow-ui-show** - Emitted when the select's menu opens.\n- **flow-ui-after-show** - Emitted after the select's menu opens and all animations are complete.\n- **flow-ui-hide** - Emitted when the select's menu closes.\n- **flow-ui-after-hide** - Emitted after the select's menu closes and all animations are complete.\n- **flow-ui-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **show()** - Shows the listbox.\n- **hide()** - Hides the listbox.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **focus(options: _FocusOptions_)** - Sets focus on the control.\n- **blur()** - Removes focus from the control.\n\n### **Slots:**\n - _default_ - The listbox options. Must be `<flow-option>` elements. You can use `<flow-divider>` to group items visually.\n- **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **prefix** - Used to prepend a presentational icon or similar element to the combobox.\n- **suffix** - Used to append a presentational icon or similar element to the combobox.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **expand-icon** - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The select's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **combobox** - The container the wraps the prefix, suffix, combobox, clear icon, and expand button.\n- **prefix** - The container that wraps the prefix slot.\n- **suffix** - The container that wraps the suffix slot.\n- **display-input** - The element that displays the selected option's label, an `<input>` element.\n- **listbox** - The listbox container where options are slotted.\n- **tags** - The container that houses option tags when `multiselect` is used.\n- **tag** - The individual tags that represent each multiselect option.\n- **tag__base** - The tag's base part.\n- **tag__content** - The tag's content part.\n- **tag__remove-button** - The tag's remove button.\n- **tag__remove-button__base** - The tag's remove button base part.\n- **clear-button** - The clear button.\n- **expand-icon** - The container that wraps the expand icon.",
|
|
@@ -2522,18 +2556,6 @@
|
|
|
2522
2556
|
],
|
|
2523
2557
|
"references": []
|
|
2524
2558
|
},
|
|
2525
|
-
{
|
|
2526
|
-
"name": "flow-ui-resize-observer",
|
|
2527
|
-
"description": "The Resize Observer component offers a thin, declarative interface to the [`ResizeObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-resize** - Emitted when the element is resized.\n\n### **Slots:**\n - _default_ - One or more elements to watch for resizing.",
|
|
2528
|
-
"attributes": [
|
|
2529
|
-
{
|
|
2530
|
-
"name": "disabled",
|
|
2531
|
-
"description": "Disables the observer.",
|
|
2532
|
-
"values": []
|
|
2533
|
-
}
|
|
2534
|
-
],
|
|
2535
|
-
"references": []
|
|
2536
|
-
},
|
|
2537
2559
|
{
|
|
2538
2560
|
"name": "flow-ui-split-view",
|
|
2539
2561
|
"description": "Split-views contain two or more split-view panes to create resizable areas.\n\n\n---\n\n\n",
|
|
@@ -2573,28 +2595,6 @@
|
|
|
2573
2595
|
],
|
|
2574
2596
|
"references": []
|
|
2575
2597
|
},
|
|
2576
|
-
{
|
|
2577
|
-
"name": "flow-ui-split-view-toggle-button",
|
|
2578
|
-
"description": "Use a split panel toggle button to control a parent panel's open/closed state\n\n\n---\n\n\n",
|
|
2579
|
-
"attributes": [
|
|
2580
|
-
{
|
|
2581
|
-
"name": "name",
|
|
2582
|
-
"description": "The icon to use for the button.",
|
|
2583
|
-
"values": []
|
|
2584
|
-
},
|
|
2585
|
-
{
|
|
2586
|
-
"name": "library",
|
|
2587
|
-
"description": "The icon library to use for the button icon.",
|
|
2588
|
-
"values": []
|
|
2589
|
-
},
|
|
2590
|
-
{
|
|
2591
|
-
"name": "closed",
|
|
2592
|
-
"description": "Set to control the open/closed state of the parent split pane.",
|
|
2593
|
-
"values": []
|
|
2594
|
-
}
|
|
2595
|
-
],
|
|
2596
|
-
"references": []
|
|
2597
|
-
},
|
|
2598
2598
|
{
|
|
2599
2599
|
"name": "flow-ui-split-view-pane",
|
|
2600
2600
|
"description": "Split-view panes are used with split-views to create resizable areas.\n\n\n---\n\n\n\n\n### **Methods:**\n - **expand(emitEvent)** - Open the split pane.\n- **collapse(emitEvent)** - Close the split pane.",
|
|
@@ -2642,6 +2642,34 @@
|
|
|
2642
2642
|
],
|
|
2643
2643
|
"references": []
|
|
2644
2644
|
},
|
|
2645
|
+
{
|
|
2646
|
+
"name": "flow-ui-split-view-toggle-button",
|
|
2647
|
+
"description": "Use a split panel toggle button to control a parent panel's open/closed state\n\n\n---\n\n\n",
|
|
2648
|
+
"attributes": [
|
|
2649
|
+
{
|
|
2650
|
+
"name": "name",
|
|
2651
|
+
"description": "The icon to use for the button.",
|
|
2652
|
+
"values": []
|
|
2653
|
+
},
|
|
2654
|
+
{
|
|
2655
|
+
"name": "library",
|
|
2656
|
+
"description": "The icon library to use for the button icon.",
|
|
2657
|
+
"values": []
|
|
2658
|
+
},
|
|
2659
|
+
{
|
|
2660
|
+
"name": "closed",
|
|
2661
|
+
"description": "Set to control the open/closed state of the parent split pane.",
|
|
2662
|
+
"values": []
|
|
2663
|
+
}
|
|
2664
|
+
],
|
|
2665
|
+
"references": []
|
|
2666
|
+
},
|
|
2667
|
+
{
|
|
2668
|
+
"name": "flow-ui-stepper",
|
|
2669
|
+
"description": "Steppers are used to guide users through a series of steps in a wizard-like UI.\n\n\n---\n\n\n\n\n### **Methods:**\n - **setComplete(panelName: _string_, complete: _boolean_)** - Mark the specified panel as `complete`",
|
|
2670
|
+
"attributes": [],
|
|
2671
|
+
"references": []
|
|
2672
|
+
},
|
|
2645
2673
|
{
|
|
2646
2674
|
"name": "flow-ui-stepper-panel",
|
|
2647
2675
|
"description": "Stepper panels provide a single page in a stepper to guide users through a series of steps.\n\n\n---\n\n\n",
|
|
@@ -2670,22 +2698,56 @@
|
|
|
2670
2698
|
"references": []
|
|
2671
2699
|
},
|
|
2672
2700
|
{
|
|
2673
|
-
"name": "flow-ui-
|
|
2674
|
-
"description": "
|
|
2701
|
+
"name": "flow-ui-switch",
|
|
2702
|
+
"description": "Switches allow the user to toggle an option on or off.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-blur** - Emitted when the control loses focus.\n- **flow-ui-change** - Emitted when the control's checked state changes.\n- **flow-ui-input** - Emitted when the control receives input.\n- **flow-ui-focus** - Emitted when the control gains focus.\n- **flow-ui-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **click()** - Simulates a click on the switch.\n- **focus(options: _FocusOptions_)** - Sets focus on the switch.\n- **blur()** - Removes focus from the switch.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - _default_ - The switch's label.\n\n### **CSS Properties:**\n - **--width** - The width of the switch. _(default: undefined)_\n- **--height** - The height of the switch. _(default: undefined)_\n- **--thumb-size** - The size of the thumb. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control** - The control that houses the switch's thumb.\n- **thumb** - The switch's thumb.\n- **label** - The switch's label.",
|
|
2675
2703
|
"attributes": [
|
|
2676
2704
|
{
|
|
2677
|
-
"name": "
|
|
2678
|
-
"description": "
|
|
2705
|
+
"name": "name",
|
|
2706
|
+
"description": "The name of the switch, submitted as a name/value pair with form data.",
|
|
2679
2707
|
"values": []
|
|
2680
2708
|
},
|
|
2681
2709
|
{
|
|
2682
|
-
"name": "
|
|
2683
|
-
"description": "
|
|
2710
|
+
"name": "value",
|
|
2711
|
+
"description": "The current value of the switch, submitted as a name/value pair with form data.",
|
|
2684
2712
|
"values": []
|
|
2685
2713
|
},
|
|
2686
2714
|
{
|
|
2687
|
-
"name": "
|
|
2688
|
-
"description": "
|
|
2715
|
+
"name": "size",
|
|
2716
|
+
"description": "The switch's size.",
|
|
2717
|
+
"values": [
|
|
2718
|
+
{ "name": "small" },
|
|
2719
|
+
{ "name": "medium" },
|
|
2720
|
+
{ "name": "large" }
|
|
2721
|
+
]
|
|
2722
|
+
},
|
|
2723
|
+
{
|
|
2724
|
+
"name": "disabled",
|
|
2725
|
+
"description": "Disables the switch.",
|
|
2726
|
+
"values": []
|
|
2727
|
+
},
|
|
2728
|
+
{
|
|
2729
|
+
"name": "checked",
|
|
2730
|
+
"description": "Draws the switch in a checked state.",
|
|
2731
|
+
"values": []
|
|
2732
|
+
},
|
|
2733
|
+
{
|
|
2734
|
+
"name": "form",
|
|
2735
|
+
"description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
|
|
2736
|
+
"values": []
|
|
2737
|
+
},
|
|
2738
|
+
{
|
|
2739
|
+
"name": "required",
|
|
2740
|
+
"description": "Makes the switch a required field.",
|
|
2741
|
+
"values": []
|
|
2742
|
+
},
|
|
2743
|
+
{
|
|
2744
|
+
"name": "help-text",
|
|
2745
|
+
"description": "The select's help text. If you need to display HTML, use the `help-text` slot instead.",
|
|
2746
|
+
"values": []
|
|
2747
|
+
},
|
|
2748
|
+
{
|
|
2749
|
+
"name": "divider",
|
|
2750
|
+
"description": "Indicates that the control should display a divider",
|
|
2689
2751
|
"values": []
|
|
2690
2752
|
}
|
|
2691
2753
|
],
|
|
@@ -2754,56 +2816,32 @@
|
|
|
2754
2816
|
"references": []
|
|
2755
2817
|
},
|
|
2756
2818
|
{
|
|
2757
|
-
"name": "flow-ui-
|
|
2758
|
-
"description": "
|
|
2819
|
+
"name": "flow-ui-tab-group",
|
|
2820
|
+
"description": "Tab groups organize content into a container that shows one section at a time.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-tab-show** - Emitted when a tab is shown.\n- **flow-ui-tab-hide** - Emitted when a tab is hidden.\n\n### **Methods:**\n - **show(panel: _string_)** - Shows the specified tab panel.\n\n### **Slots:**\n - _default_ - Used for grouping tab panels in the tab group. Must be `<flow-ui-tab-panel>` elements.\n- **nav** - Used for grouping tabs in the tab group. Must be `<flow-ui-tab>` elements.\n\n### **CSS Properties:**\n - **--indicator-color** - The color of the active tab indicator. _(default: undefined)_\n- **--track-color** - The color of the indicator's track (the line that separates tabs from panels). _(default: undefined)_\n- **--track-width** - The width of the indicator's track (the line that separates tabs from panels). _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **nav** - The tab group's navigation container where tabs are slotted in.\n- **tabs** - The container that wraps the tabs.\n- **active-tab-indicator** - The line that highlights the currently selected tab.\n- **body** - The tab group's body where tab panels are slotted in.\n- **scroll-button** - The previous/next scroll buttons that show when tabs are scrollable, an `<flow-ui-icon-button>`.\n- **scroll-button--start** - The starting scroll button.\n- **scroll-button--end** - The ending scroll button.\n- **scroll-button__base** - The scroll button's exported `base` part.",
|
|
2759
2821
|
"attributes": [
|
|
2760
2822
|
{
|
|
2761
|
-
"name": "
|
|
2762
|
-
"description": "The
|
|
2763
|
-
"values": []
|
|
2764
|
-
},
|
|
2765
|
-
{
|
|
2766
|
-
"name": "value",
|
|
2767
|
-
"description": "The current value of the switch, submitted as a name/value pair with form data.",
|
|
2768
|
-
"values": []
|
|
2769
|
-
},
|
|
2770
|
-
{
|
|
2771
|
-
"name": "size",
|
|
2772
|
-
"description": "The switch's size.",
|
|
2823
|
+
"name": "placement",
|
|
2824
|
+
"description": "The placement of the tabs.",
|
|
2773
2825
|
"values": [
|
|
2774
|
-
{ "name": "
|
|
2775
|
-
{ "name": "
|
|
2776
|
-
{ "name": "
|
|
2826
|
+
{ "name": "top" },
|
|
2827
|
+
{ "name": "bottom" },
|
|
2828
|
+
{ "name": "start" },
|
|
2829
|
+
{ "name": "end" }
|
|
2777
2830
|
]
|
|
2778
2831
|
},
|
|
2779
2832
|
{
|
|
2780
|
-
"name": "
|
|
2781
|
-
"description": "
|
|
2782
|
-
"values": []
|
|
2783
|
-
},
|
|
2784
|
-
{
|
|
2785
|
-
"name": "checked",
|
|
2786
|
-
"description": "Draws the switch in a checked state.",
|
|
2787
|
-
"values": []
|
|
2788
|
-
},
|
|
2789
|
-
{
|
|
2790
|
-
"name": "form",
|
|
2791
|
-
"description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
|
|
2792
|
-
"values": []
|
|
2793
|
-
},
|
|
2794
|
-
{
|
|
2795
|
-
"name": "required",
|
|
2796
|
-
"description": "Makes the switch a required field.",
|
|
2797
|
-
"values": []
|
|
2833
|
+
"name": "activation",
|
|
2834
|
+
"description": "When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to\nmanual, the tab will receive focus but will not show until the user presses spacebar or enter.",
|
|
2835
|
+
"values": [{ "name": "auto" }, { "name": "manual" }]
|
|
2798
2836
|
},
|
|
2799
2837
|
{
|
|
2800
|
-
"name": "
|
|
2801
|
-
"description": "
|
|
2838
|
+
"name": "no-scroll-controls",
|
|
2839
|
+
"description": "Disables the scroll arrows that appear when tabs overflow.",
|
|
2802
2840
|
"values": []
|
|
2803
2841
|
},
|
|
2804
2842
|
{
|
|
2805
|
-
"name": "
|
|
2806
|
-
"description": "
|
|
2843
|
+
"name": "control-split-view",
|
|
2844
|
+
"description": "Set to `true` to allow parent split-view pane to be automatically opened and closed when tabs are clicked.",
|
|
2807
2845
|
"values": []
|
|
2808
2846
|
}
|
|
2809
2847
|
],
|
|
@@ -2837,46 +2875,8 @@
|
|
|
2837
2875
|
"references": []
|
|
2838
2876
|
},
|
|
2839
2877
|
{
|
|
2840
|
-
"name": "flow-ui-
|
|
2841
|
-
"description": "
|
|
2842
|
-
"attributes": [
|
|
2843
|
-
{
|
|
2844
|
-
"name": "placement",
|
|
2845
|
-
"description": "The placement of the tabs.",
|
|
2846
|
-
"values": [
|
|
2847
|
-
{ "name": "top" },
|
|
2848
|
-
{ "name": "bottom" },
|
|
2849
|
-
{ "name": "start" },
|
|
2850
|
-
{ "name": "end" }
|
|
2851
|
-
]
|
|
2852
|
-
},
|
|
2853
|
-
{
|
|
2854
|
-
"name": "activation",
|
|
2855
|
-
"description": "When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to\nmanual, the tab will receive focus but will not show until the user presses spacebar or enter.",
|
|
2856
|
-
"values": [{ "name": "auto" }, { "name": "manual" }]
|
|
2857
|
-
},
|
|
2858
|
-
{
|
|
2859
|
-
"name": "no-scroll-controls",
|
|
2860
|
-
"description": "Disables the scroll arrows that appear when tabs overflow.",
|
|
2861
|
-
"values": []
|
|
2862
|
-
},
|
|
2863
|
-
{
|
|
2864
|
-
"name": "control-split-view",
|
|
2865
|
-
"description": "Set to `true` to allow parent split-view pane to be automatically opened and closed when tabs are clicked.",
|
|
2866
|
-
"values": []
|
|
2867
|
-
}
|
|
2868
|
-
],
|
|
2869
|
-
"references": []
|
|
2870
|
-
},
|
|
2871
|
-
{
|
|
2872
|
-
"name": "flow-ui-stepper",
|
|
2873
|
-
"description": "Steppers are used to guide users through a series of steps in a wizard-like UI.\n\n\n---\n\n\n\n\n### **Methods:**\n - **setComplete(panelName: _string_, complete: _boolean_)** - Mark the specified panel as `complete`",
|
|
2874
|
-
"attributes": [],
|
|
2875
|
-
"references": []
|
|
2876
|
-
},
|
|
2877
|
-
{
|
|
2878
|
-
"name": "flow-ui-tag",
|
|
2879
|
-
"description": "Tags are used as labels to organize things or to indicate a selection.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-remove** - Emitted when the remove button is activated.\n\n### **Slots:**\n - _default_ - The tag's content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **content** - The tag's content.\n- **remove-button** - The tag's remove button, an `<flow-ui-icon-button>`.\n- **remove-button__base** - The remove button's exported `base` part.",
|
|
2878
|
+
"name": "flow-ui-tag",
|
|
2879
|
+
"description": "Tags are used as labels to organize things or to indicate a selection.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-remove** - Emitted when the remove button is activated.\n\n### **Slots:**\n - _default_ - The tag's content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **content** - The tag's content.\n- **remove-button** - The tag's remove button, an `<flow-ui-icon-button>`.\n- **remove-button__base** - The remove button's exported `base` part.",
|
|
2880
2880
|
"attributes": [
|
|
2881
2881
|
{
|
|
2882
2882
|
"name": "variant",
|
|
@@ -3063,6 +3063,85 @@
|
|
|
3063
3063
|
],
|
|
3064
3064
|
"references": []
|
|
3065
3065
|
},
|
|
3066
|
+
{
|
|
3067
|
+
"name": "flow-ui-timer",
|
|
3068
|
+
"description": "The timer component is the primary time control for Flo.w time-based visualizations.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-change** - Emitted when the control's value changes.\n- **flow-ui-input** - Emitted when the control receives input.",
|
|
3069
|
+
"attributes": [
|
|
3070
|
+
{
|
|
3071
|
+
"name": "value",
|
|
3072
|
+
"description": "The value of the timer. (ISO8601 date/time string)",
|
|
3073
|
+
"values": []
|
|
3074
|
+
},
|
|
3075
|
+
{
|
|
3076
|
+
"name": "timezone",
|
|
3077
|
+
"description": "The timezone to use for display. (IANA timezone string).\nIf not set, the timezone will be the browser's local timezone.",
|
|
3078
|
+
"values": []
|
|
3079
|
+
},
|
|
3080
|
+
{
|
|
3081
|
+
"name": "locale",
|
|
3082
|
+
"description": "The locale to use for display. (IETF BCP 47 language tag).\nIf not set, the locale will be the browser's default locale.",
|
|
3083
|
+
"values": []
|
|
3084
|
+
},
|
|
3085
|
+
{
|
|
3086
|
+
"name": "running",
|
|
3087
|
+
"description": "Set to `true` to start the timer running.",
|
|
3088
|
+
"values": []
|
|
3089
|
+
},
|
|
3090
|
+
{
|
|
3091
|
+
"name": "dateFormat",
|
|
3092
|
+
"description": "The date format to use for display as a [Luxon format string](https://moment.github.io/luxon/#/formatting?id=table-of-tokens).",
|
|
3093
|
+
"values": []
|
|
3094
|
+
},
|
|
3095
|
+
{
|
|
3096
|
+
"name": "dayFormat",
|
|
3097
|
+
"description": "The day format to use for display as a [Luxon format string](https://moment.github.io/luxon/#/formatting?id=table-of-tokens).",
|
|
3098
|
+
"values": []
|
|
3099
|
+
},
|
|
3100
|
+
{
|
|
3101
|
+
"name": "timeFormat",
|
|
3102
|
+
"description": "The time format to use for display as a [Luxon format string](https://moment.github.io/luxon/#/formatting?id=table-of-tokens).",
|
|
3103
|
+
"values": []
|
|
3104
|
+
},
|
|
3105
|
+
{
|
|
3106
|
+
"name": "zoneFormat",
|
|
3107
|
+
"description": "The timezone format to use for display as a [Luxon format string](https://moment.github.io/luxon/#/formatting?id=table-of-tokens).",
|
|
3108
|
+
"values": []
|
|
3109
|
+
},
|
|
3110
|
+
{
|
|
3111
|
+
"name": "major-step",
|
|
3112
|
+
"description": "The major step size to use for the timer step controls.",
|
|
3113
|
+
"values": []
|
|
3114
|
+
},
|
|
3115
|
+
{
|
|
3116
|
+
"name": "minor-step",
|
|
3117
|
+
"description": "The minor step size to use for the timer step controls.",
|
|
3118
|
+
"values": []
|
|
3119
|
+
},
|
|
3120
|
+
{
|
|
3121
|
+
"name": "update-interval",
|
|
3122
|
+
"description": "The timer update interval.",
|
|
3123
|
+
"values": []
|
|
3124
|
+
},
|
|
3125
|
+
{
|
|
3126
|
+
"name": "hide-zone",
|
|
3127
|
+
"description": "Set to `true` to hide the timezone display.",
|
|
3128
|
+
"values": []
|
|
3129
|
+
},
|
|
3130
|
+
{
|
|
3131
|
+
"name": "placement",
|
|
3132
|
+
"description": "The placement of the calendar popup relative to the timer control.",
|
|
3133
|
+
"values": [
|
|
3134
|
+
{ "name": "top" },
|
|
3135
|
+
{ "name": "top-end" },
|
|
3136
|
+
{ "name": "top-start" },
|
|
3137
|
+
{ "name": "bottom" },
|
|
3138
|
+
{ "name": "bottom-start" },
|
|
3139
|
+
{ "name": "bottom-end" }
|
|
3140
|
+
]
|
|
3141
|
+
}
|
|
3142
|
+
],
|
|
3143
|
+
"references": []
|
|
3144
|
+
},
|
|
3066
3145
|
{
|
|
3067
3146
|
"name": "flow-ui-tool-button",
|
|
3068
3147
|
"description": "Tool buttons are used to build [toolbars](./flow-ui-tool-button-group). They can be used to toggle a state or perform an action.\n\n\n---\n\n\n\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the radio button.\n- **blur()** - Removes focus from the radio button.\n\n### **Slots:**\n - **prefix** - A presentational prefix icon or similar element.\n- **suffix** - A presentational suffix icon or similar element.\n- **icon** - The tool button's icon.\n- **tooltip** - The tool button's tooltip content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **button** - The button element.\n- **button--checked** - The button element when checked.\n- **tooltip** - The tooltip element.\n- **prefix** - The prefix slot.\n- **suffix** - The suffix slot.\n- **label-wrapper** - The wrapper that contains the icon and label.\n- **icon** - The icon slot. Alternatively, you can use the `icon` attribute.\n- **label** - The button label.",
|
|
@@ -3160,146 +3239,6 @@
|
|
|
3160
3239
|
],
|
|
3161
3240
|
"references": []
|
|
3162
3241
|
},
|
|
3163
|
-
{
|
|
3164
|
-
"name": "flow-ui-tooltip",
|
|
3165
|
-
"description": "Tooltips display additional information based on a specific action.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-show** - Emitted when the tooltip begins to show.\n- **flow-ui-after-show** - Emitted after the tooltip has shown and all animations are complete.\n- **flow-ui-hide** - Emitted when the tooltip begins to hide.\n- **flow-ui-after-hide** - Emitted after the tooltip has hidden and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the tooltip.\n- **hide()** - Hides the tooltip\n\n### **Slots:**\n - _default_ - The tooltip's target element. Avoid slotting in more than one element, as subsequent ones will be ignored.\n- **content** - The content to render in the tooltip. Alternatively, you can use the `content` attribute.\n\n### **CSS Properties:**\n - **--max-width** - The maximum width of the tooltip before its content will wrap. _(default: undefined)_\n- **--hide-delay** - The amount of time to wait before hiding the tooltip when hovering. _(default: undefined)_\n- **--show-delay** - The amount of time to wait before showing the tooltip when hovering. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper, an `<flow-ui-popup>` element.\n- **base__popup** - The popup's exported `popup` part. Use this to target the tooltip's popup container.\n- **base__arrow** - The popup's exported `arrow` part. Use this to target the tooltip's arrow.\n- **body** - The tooltip's body where its content is rendered.",
|
|
3166
|
-
"attributes": [
|
|
3167
|
-
{
|
|
3168
|
-
"name": "content",
|
|
3169
|
-
"description": "The tooltip's content. If you need to display HTML, use the `content` slot instead.",
|
|
3170
|
-
"values": []
|
|
3171
|
-
},
|
|
3172
|
-
{
|
|
3173
|
-
"name": "placement",
|
|
3174
|
-
"description": "The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\ninside of the viewport.",
|
|
3175
|
-
"values": [
|
|
3176
|
-
{ "name": "" },
|
|
3177
|
-
{ "name": "top" },
|
|
3178
|
-
{ "name": "top-start" },
|
|
3179
|
-
{ "name": "top-end" },
|
|
3180
|
-
{ "name": "right" },
|
|
3181
|
-
{ "name": "right-start" },
|
|
3182
|
-
{ "name": "right-end" },
|
|
3183
|
-
{ "name": "bottom" },
|
|
3184
|
-
{ "name": "bottom-start" },
|
|
3185
|
-
{ "name": "bottom-end" },
|
|
3186
|
-
{ "name": "left" },
|
|
3187
|
-
{ "name": "left-start" },
|
|
3188
|
-
{ "name": "left-end" }
|
|
3189
|
-
]
|
|
3190
|
-
},
|
|
3191
|
-
{
|
|
3192
|
-
"name": "disabled",
|
|
3193
|
-
"description": "Disables the tooltip so it won't show when triggered.",
|
|
3194
|
-
"values": []
|
|
3195
|
-
},
|
|
3196
|
-
{
|
|
3197
|
-
"name": "distance",
|
|
3198
|
-
"description": "The distance in pixels from which to offset the tooltip away from its target.",
|
|
3199
|
-
"values": []
|
|
3200
|
-
},
|
|
3201
|
-
{
|
|
3202
|
-
"name": "open",
|
|
3203
|
-
"description": "Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods.",
|
|
3204
|
-
"values": []
|
|
3205
|
-
},
|
|
3206
|
-
{
|
|
3207
|
-
"name": "skidding",
|
|
3208
|
-
"description": "The distance in pixels from which to offset the tooltip along its target.",
|
|
3209
|
-
"values": []
|
|
3210
|
-
},
|
|
3211
|
-
{
|
|
3212
|
-
"name": "trigger",
|
|
3213
|
-
"description": "Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\noptions can be passed by separating them with a space. When manual is used, the tooltip must be activated\nprogrammatically.",
|
|
3214
|
-
"values": []
|
|
3215
|
-
},
|
|
3216
|
-
{
|
|
3217
|
-
"name": "hoist",
|
|
3218
|
-
"description": "Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with\n`overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,\nscenarios.",
|
|
3219
|
-
"values": []
|
|
3220
|
-
}
|
|
3221
|
-
],
|
|
3222
|
-
"references": []
|
|
3223
|
-
},
|
|
3224
|
-
{
|
|
3225
|
-
"name": "flow-ui-timer",
|
|
3226
|
-
"description": "The timer component is the primary time control for Flo.w time-based visualizations.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-change** - Emitted when the control's value changes.\n- **flow-ui-input** - Emitted when the control receives input.",
|
|
3227
|
-
"attributes": [
|
|
3228
|
-
{
|
|
3229
|
-
"name": "value",
|
|
3230
|
-
"description": "The value of the timer. (ISO8601 date/time string)",
|
|
3231
|
-
"values": []
|
|
3232
|
-
},
|
|
3233
|
-
{
|
|
3234
|
-
"name": "timezone",
|
|
3235
|
-
"description": "The timezone to use for display. (IANA timezone string).\nIf not set, the timezone will be the browser's local timezone.",
|
|
3236
|
-
"values": []
|
|
3237
|
-
},
|
|
3238
|
-
{
|
|
3239
|
-
"name": "locale",
|
|
3240
|
-
"description": "The locale to use for display. (IETF BCP 47 language tag).\nIf not set, the locale will be the browser's default locale.",
|
|
3241
|
-
"values": []
|
|
3242
|
-
},
|
|
3243
|
-
{
|
|
3244
|
-
"name": "running",
|
|
3245
|
-
"description": "Set to `true` to start the timer running.",
|
|
3246
|
-
"values": []
|
|
3247
|
-
},
|
|
3248
|
-
{
|
|
3249
|
-
"name": "dateFormat",
|
|
3250
|
-
"description": "The date format to use for display as a [Luxon format string](https://moment.github.io/luxon/#/formatting?id=table-of-tokens).",
|
|
3251
|
-
"values": []
|
|
3252
|
-
},
|
|
3253
|
-
{
|
|
3254
|
-
"name": "dayFormat",
|
|
3255
|
-
"description": "The day format to use for display as a [Luxon format string](https://moment.github.io/luxon/#/formatting?id=table-of-tokens).",
|
|
3256
|
-
"values": []
|
|
3257
|
-
},
|
|
3258
|
-
{
|
|
3259
|
-
"name": "timeFormat",
|
|
3260
|
-
"description": "The time format to use for display as a [Luxon format string](https://moment.github.io/luxon/#/formatting?id=table-of-tokens).",
|
|
3261
|
-
"values": []
|
|
3262
|
-
},
|
|
3263
|
-
{
|
|
3264
|
-
"name": "zoneFormat",
|
|
3265
|
-
"description": "The timezone format to use for display as a [Luxon format string](https://moment.github.io/luxon/#/formatting?id=table-of-tokens).",
|
|
3266
|
-
"values": []
|
|
3267
|
-
},
|
|
3268
|
-
{
|
|
3269
|
-
"name": "major-step",
|
|
3270
|
-
"description": "The major step size to use for the timer step controls.",
|
|
3271
|
-
"values": []
|
|
3272
|
-
},
|
|
3273
|
-
{
|
|
3274
|
-
"name": "minor-step",
|
|
3275
|
-
"description": "The minor step size to use for the timer step controls.",
|
|
3276
|
-
"values": []
|
|
3277
|
-
},
|
|
3278
|
-
{
|
|
3279
|
-
"name": "update-interval",
|
|
3280
|
-
"description": "The timer update interval.",
|
|
3281
|
-
"values": []
|
|
3282
|
-
},
|
|
3283
|
-
{
|
|
3284
|
-
"name": "hide-zone",
|
|
3285
|
-
"description": "Set to `true` to hide the timezone display.",
|
|
3286
|
-
"values": []
|
|
3287
|
-
},
|
|
3288
|
-
{
|
|
3289
|
-
"name": "placement",
|
|
3290
|
-
"description": "The placement of the calendar popup relative to the timer control.",
|
|
3291
|
-
"values": [
|
|
3292
|
-
{ "name": "top" },
|
|
3293
|
-
{ "name": "top-end" },
|
|
3294
|
-
{ "name": "top-start" },
|
|
3295
|
-
{ "name": "bottom" },
|
|
3296
|
-
{ "name": "bottom-start" },
|
|
3297
|
-
{ "name": "bottom-end" }
|
|
3298
|
-
]
|
|
3299
|
-
}
|
|
3300
|
-
],
|
|
3301
|
-
"references": []
|
|
3302
|
-
},
|
|
3303
3242
|
{
|
|
3304
3243
|
"name": "flow-ui-tool-button-group",
|
|
3305
3244
|
"description": "Tool buttons groups are used to build toolbars from [tool buttons](./flow-ui-tool-button).\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-change** - Emitted when the control's value changes.\n- **flow-ui-input** - Emitted when the control receives input.\n\n### **Methods:**\n - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message)** - Sets a custom validation message. Pass an empty string to restore validity.",
|
|
@@ -3367,6 +3306,67 @@
|
|
|
3367
3306
|
],
|
|
3368
3307
|
"references": []
|
|
3369
3308
|
},
|
|
3309
|
+
{
|
|
3310
|
+
"name": "flow-ui-tooltip",
|
|
3311
|
+
"description": "Tooltips display additional information based on a specific action.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-show** - Emitted when the tooltip begins to show.\n- **flow-ui-after-show** - Emitted after the tooltip has shown and all animations are complete.\n- **flow-ui-hide** - Emitted when the tooltip begins to hide.\n- **flow-ui-after-hide** - Emitted after the tooltip has hidden and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the tooltip.\n- **hide()** - Hides the tooltip\n\n### **Slots:**\n - _default_ - The tooltip's target element. Avoid slotting in more than one element, as subsequent ones will be ignored.\n- **content** - The content to render in the tooltip. Alternatively, you can use the `content` attribute.\n\n### **CSS Properties:**\n - **--max-width** - The maximum width of the tooltip before its content will wrap. _(default: undefined)_\n- **--hide-delay** - The amount of time to wait before hiding the tooltip when hovering. _(default: undefined)_\n- **--show-delay** - The amount of time to wait before showing the tooltip when hovering. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper, an `<flow-ui-popup>` element.\n- **base__popup** - The popup's exported `popup` part. Use this to target the tooltip's popup container.\n- **base__arrow** - The popup's exported `arrow` part. Use this to target the tooltip's arrow.\n- **body** - The tooltip's body where its content is rendered.",
|
|
3312
|
+
"attributes": [
|
|
3313
|
+
{
|
|
3314
|
+
"name": "content",
|
|
3315
|
+
"description": "The tooltip's content. If you need to display HTML, use the `content` slot instead.",
|
|
3316
|
+
"values": []
|
|
3317
|
+
},
|
|
3318
|
+
{
|
|
3319
|
+
"name": "placement",
|
|
3320
|
+
"description": "The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\ninside of the viewport.",
|
|
3321
|
+
"values": [
|
|
3322
|
+
{ "name": "" },
|
|
3323
|
+
{ "name": "top" },
|
|
3324
|
+
{ "name": "top-start" },
|
|
3325
|
+
{ "name": "top-end" },
|
|
3326
|
+
{ "name": "right" },
|
|
3327
|
+
{ "name": "right-start" },
|
|
3328
|
+
{ "name": "right-end" },
|
|
3329
|
+
{ "name": "bottom" },
|
|
3330
|
+
{ "name": "bottom-start" },
|
|
3331
|
+
{ "name": "bottom-end" },
|
|
3332
|
+
{ "name": "left" },
|
|
3333
|
+
{ "name": "left-start" },
|
|
3334
|
+
{ "name": "left-end" }
|
|
3335
|
+
]
|
|
3336
|
+
},
|
|
3337
|
+
{
|
|
3338
|
+
"name": "disabled",
|
|
3339
|
+
"description": "Disables the tooltip so it won't show when triggered.",
|
|
3340
|
+
"values": []
|
|
3341
|
+
},
|
|
3342
|
+
{
|
|
3343
|
+
"name": "distance",
|
|
3344
|
+
"description": "The distance in pixels from which to offset the tooltip away from its target.",
|
|
3345
|
+
"values": []
|
|
3346
|
+
},
|
|
3347
|
+
{
|
|
3348
|
+
"name": "open",
|
|
3349
|
+
"description": "Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods.",
|
|
3350
|
+
"values": []
|
|
3351
|
+
},
|
|
3352
|
+
{
|
|
3353
|
+
"name": "skidding",
|
|
3354
|
+
"description": "The distance in pixels from which to offset the tooltip along its target.",
|
|
3355
|
+
"values": []
|
|
3356
|
+
},
|
|
3357
|
+
{
|
|
3358
|
+
"name": "trigger",
|
|
3359
|
+
"description": "Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\noptions can be passed by separating them with a space. When manual is used, the tooltip must be activated\nprogrammatically.",
|
|
3360
|
+
"values": []
|
|
3361
|
+
},
|
|
3362
|
+
{
|
|
3363
|
+
"name": "hoist",
|
|
3364
|
+
"description": "Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with\n`overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,\nscenarios.",
|
|
3365
|
+
"values": []
|
|
3366
|
+
}
|
|
3367
|
+
],
|
|
3368
|
+
"references": []
|
|
3369
|
+
},
|
|
3370
3370
|
{
|
|
3371
3371
|
"name": "flow-ui-tree",
|
|
3372
3372
|
"description": "Trees allow you to display a hierarchical list of selectable [tree items](./flow-ui-tree-item). Items with children can be expanded and collapsed as desired by the user.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-input** - Emitted when a tree item is selected or deselected.\n- **flow-ui-change** - Emitted when a tree item is selected or deselected.\n\n### **Slots:**\n - _default_ - The default slot.\n- **expand-icon** - The icon to show when the tree item is expanded. Works best with `<flow-ui-icon>`.\n- **collapse-icon** - The icon to show when the tree item is collapsed. Works best with `<flow-ui-icon>`.\n\n### **CSS Properties:**\n - **--indent-size** - The size of the indentation for nested items. _(default: var(--flow-ui-spacing-medium))_\n- **--indent-guide-color** - The color of the indentation line. _(default: var(--flow-ui-color-neutral-200))_\n- **--indent-guide-offset** - The amount of vertical spacing to leave between the top and bottom of the indentation line's starting position. _(default: 0)_\n- **--indent-guide-style** - The style of the indentation line, e.g. solid, dotted, dashed. _(default: solid)_\n- **--indent-guide-width** - The width of the indentation line. _(default: 0)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|