@emuanalytics/flow-rdf-ui 0.0.29 → 0.0.31
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/dist/custom-elements.json +5361 -4974
- package/dist/index.cjs +230 -18
- package/dist/index.d.cts +71 -7
- package/dist/index.d.mts +71 -7
- package/dist/index.d.ts +71 -7
- package/dist/index.mjs +230 -18
- package/dist/vscode.html-custom-data.json +245 -245
- package/package.json +1 -1
|
@@ -62,6 +62,42 @@
|
|
|
62
62
|
],
|
|
63
63
|
"references": []
|
|
64
64
|
},
|
|
65
|
+
{
|
|
66
|
+
"name": "flow-ui-avatar",
|
|
67
|
+
"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.",
|
|
68
|
+
"attributes": [
|
|
69
|
+
{
|
|
70
|
+
"name": "image",
|
|
71
|
+
"description": "The image source to use for the avatar.",
|
|
72
|
+
"values": []
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
"name": "label",
|
|
76
|
+
"description": "A label to use to describe the avatar to assistive devices.",
|
|
77
|
+
"values": []
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
"name": "initials",
|
|
81
|
+
"description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
|
|
82
|
+
"values": []
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
"name": "loading",
|
|
86
|
+
"description": "Indicates how the browser should load the image.",
|
|
87
|
+
"values": [{ "name": "eager" }, { "name": "lazy" }]
|
|
88
|
+
},
|
|
89
|
+
{
|
|
90
|
+
"name": "shape",
|
|
91
|
+
"description": "The shape of the avatar.",
|
|
92
|
+
"values": [
|
|
93
|
+
{ "name": "circle" },
|
|
94
|
+
{ "name": "square" },
|
|
95
|
+
{ "name": "rounded" }
|
|
96
|
+
]
|
|
97
|
+
}
|
|
98
|
+
],
|
|
99
|
+
"references": []
|
|
100
|
+
},
|
|
65
101
|
{
|
|
66
102
|
"name": "flow-ui-breadcrumb",
|
|
67
103
|
"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.",
|
|
@@ -246,42 +282,6 @@
|
|
|
246
282
|
],
|
|
247
283
|
"references": []
|
|
248
284
|
},
|
|
249
|
-
{
|
|
250
|
-
"name": "flow-ui-avatar",
|
|
251
|
-
"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.",
|
|
252
|
-
"attributes": [
|
|
253
|
-
{
|
|
254
|
-
"name": "image",
|
|
255
|
-
"description": "The image source to use for the avatar.",
|
|
256
|
-
"values": []
|
|
257
|
-
},
|
|
258
|
-
{
|
|
259
|
-
"name": "label",
|
|
260
|
-
"description": "A label to use to describe the avatar to assistive devices.",
|
|
261
|
-
"values": []
|
|
262
|
-
},
|
|
263
|
-
{
|
|
264
|
-
"name": "initials",
|
|
265
|
-
"description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
|
|
266
|
-
"values": []
|
|
267
|
-
},
|
|
268
|
-
{
|
|
269
|
-
"name": "loading",
|
|
270
|
-
"description": "Indicates how the browser should load the image.",
|
|
271
|
-
"values": [{ "name": "eager" }, { "name": "lazy" }]
|
|
272
|
-
},
|
|
273
|
-
{
|
|
274
|
-
"name": "shape",
|
|
275
|
-
"description": "The shape of the avatar.",
|
|
276
|
-
"values": [
|
|
277
|
-
{ "name": "circle" },
|
|
278
|
-
{ "name": "square" },
|
|
279
|
-
{ "name": "rounded" }
|
|
280
|
-
]
|
|
281
|
-
}
|
|
282
|
-
],
|
|
283
|
-
"references": []
|
|
284
|
-
},
|
|
285
285
|
{
|
|
286
286
|
"name": "flow-ui-button-group",
|
|
287
287
|
"description": "Button groups can be used to group related buttons into sections.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - One or more `<flow-ui-button>` elements to display in the button group.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
@@ -379,6 +379,39 @@
|
|
|
379
379
|
],
|
|
380
380
|
"references": []
|
|
381
381
|
},
|
|
382
|
+
{
|
|
383
|
+
"name": "flow-ui-carousel-item",
|
|
384
|
+
"description": "A carousel item represent a slide within a [carousel](/components/carousel).\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The carousel item's content..\n\n### **CSS Properties:**\n - **--aspect-ratio** - The slide's aspect ratio. Inherited from the carousel by default. _(default: undefined)_",
|
|
385
|
+
"attributes": [],
|
|
386
|
+
"references": []
|
|
387
|
+
},
|
|
388
|
+
{
|
|
389
|
+
"name": "flow-ui-chart",
|
|
390
|
+
"description": "The chart component displays Chart.js charts.\n\n\n---\n\n\n\n\n### **Methods:**\n - **repaint()** - Trigger a repaint of the chart.\n\n### **CSS Properties:**\n - **--background-color** - Chart background color (applied as the background color of the base container). _(default: undefined)_\n- **--text-color** - General text color (titles etc.) _(default: undefined)_\n- **--axis-color** - Color of the axis lines. _(default: undefined)_\n- **--x-axis-color** - Color of the x-axis lines. (defaults to `--axis-color`) _(default: undefined)_\n- **--y-axis-color** - Color of the y-axis lines. (defaults to `--axis-color`) _(default: undefined)_\n- **--axis-grid-color** - Color of the axis grid lines. _(default: undefined)_\n- **--x-axis-grid-color** - Color of the x-axis grid lines. (defaults to `--axis-grid-color`) _(default: undefined)_\n- **--y-axis-grid-color** - Color of the y-axis grid lines. (defaults to `--axis-grid-color`) _(default: undefined)_\n- **--axis-label-color** - Color of the axis labels. _(default: undefined)_\n- **--x-axis-label-color** - Color of the x-axis labels. (defaults to `--axis-label-color`) _(default: undefined)_\n- **--y-axis-label-color** - Color of the y-axis labels. (defaults to `--axis-label-color`) _(default: undefined)_\n- **--tick-label-color** - Color of the tick labels. _(default: undefined)_\n- **--x-tick-label-color** - Color of the x-axis tick labels. (defaults to `--tick-label-color`) _(default: undefined)_\n- **--y-tick-label-color** - Color of the y-axis tick labels. (defaults to `--tick-label-color`) _(default: undefined)_\n- **--dataset-stroke-color-n** - Color of the stroke for dataset n (where n = 0-9). _(default: undefined)_\n- **--dataset-fill-color-n** - Color of the fill for dataset n (where n = 0-9). _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The base container of the chart.",
|
|
391
|
+
"attributes": [
|
|
392
|
+
{
|
|
393
|
+
"name": "type",
|
|
394
|
+
"description": "The Chart.js chart type (e.g `line`, `bar` or a custom type).",
|
|
395
|
+
"values": []
|
|
396
|
+
},
|
|
397
|
+
{
|
|
398
|
+
"name": "options",
|
|
399
|
+
"description": "The Chart.js `options` object.",
|
|
400
|
+
"values": [{ "name": "ChartOptions" }]
|
|
401
|
+
},
|
|
402
|
+
{
|
|
403
|
+
"name": "data",
|
|
404
|
+
"description": "The Chart.js `data` object",
|
|
405
|
+
"values": [{ "name": "ChartData" }]
|
|
406
|
+
},
|
|
407
|
+
{
|
|
408
|
+
"name": "plugins",
|
|
409
|
+
"description": "List of extra plugins to use for this chart.",
|
|
410
|
+
"values": [{ "name": "Plugin[]" }]
|
|
411
|
+
}
|
|
412
|
+
],
|
|
413
|
+
"references": []
|
|
414
|
+
},
|
|
382
415
|
{
|
|
383
416
|
"name": "flow-ui-checkbox",
|
|
384
417
|
"description": "Checkboxes 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 checkbox loses focus.\n- **flow-ui-change** - Emitted when the checked state changes.\n- **flow-ui-focus** - Emitted when the checkbox gains focus.\n- **flow-ui-input** - Emitted when the checkbox 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 - **click()** - Simulates a click on the checkbox.\n- **focus(options: _FocusOptions_)** - Sets focus on the checkbox.\n- **blur()** - Removes focus from the checkbox.\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. The value provided will be shown to the user when the form is submitted. To clear\nthe custom validation message, call this method with an empty string.\n\n### **Slots:**\n - _default_ - The checkbox's label.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control** - The square container that wraps the checkbox's checked state.\n- **control--checked** - Matches the control part when the checkbox is checked.\n- **control--indeterminate** - Matches the control part when the checkbox is indeterminate.\n- **checked-icon** - The checked icon, an `<flow-ui-icon>` element.\n- **indeterminate-icon** - The indeterminate icon, an `<flow-ui-icon>` element.\n- **label** - The container that wraps the checkbox's label.",
|
|
@@ -609,39 +642,6 @@
|
|
|
609
642
|
],
|
|
610
643
|
"references": []
|
|
611
644
|
},
|
|
612
|
-
{
|
|
613
|
-
"name": "flow-ui-carousel-item",
|
|
614
|
-
"description": "A carousel item represent a slide within a [carousel](/components/carousel).\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The carousel item's content..\n\n### **CSS Properties:**\n - **--aspect-ratio** - The slide's aspect ratio. Inherited from the carousel by default. _(default: undefined)_",
|
|
615
|
-
"attributes": [],
|
|
616
|
-
"references": []
|
|
617
|
-
},
|
|
618
|
-
{
|
|
619
|
-
"name": "flow-ui-chart",
|
|
620
|
-
"description": "The chart component displays Chart.js charts.\n\n\n---\n\n\n\n\n### **Methods:**\n - **repaint()** - Trigger a repaint of the chart.\n\n### **CSS Properties:**\n - **--background-color** - Chart background color (applied as the background color of the base container). _(default: undefined)_\n- **--text-color** - General text color (titles etc.) _(default: undefined)_\n- **--axis-color** - Color of the axis lines. _(default: undefined)_\n- **--x-axis-color** - Color of the x-axis lines. (defaults to `--axis-color`) _(default: undefined)_\n- **--y-axis-color** - Color of the y-axis lines. (defaults to `--axis-color`) _(default: undefined)_\n- **--axis-grid-color** - Color of the axis grid lines. _(default: undefined)_\n- **--x-axis-grid-color** - Color of the x-axis grid lines. (defaults to `--axis-grid-color`) _(default: undefined)_\n- **--y-axis-grid-color** - Color of the y-axis grid lines. (defaults to `--axis-grid-color`) _(default: undefined)_\n- **--axis-label-color** - Color of the axis labels. _(default: undefined)_\n- **--x-axis-label-color** - Color of the x-axis labels. (defaults to `--axis-label-color`) _(default: undefined)_\n- **--y-axis-label-color** - Color of the y-axis labels. (defaults to `--axis-label-color`) _(default: undefined)_\n- **--tick-label-color** - Color of the tick labels. _(default: undefined)_\n- **--x-tick-label-color** - Color of the x-axis tick labels. (defaults to `--tick-label-color`) _(default: undefined)_\n- **--y-tick-label-color** - Color of the y-axis tick labels. (defaults to `--tick-label-color`) _(default: undefined)_\n- **--dataset-stroke-color-n** - Color of the stroke for dataset n (where n = 0-9). _(default: undefined)_\n- **--dataset-fill-color-n** - Color of the fill for dataset n (where n = 0-9). _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The base container of the chart.",
|
|
621
|
-
"attributes": [
|
|
622
|
-
{
|
|
623
|
-
"name": "type",
|
|
624
|
-
"description": "The Chart.js chart type (e.g `line`, `bar` or a custom type).",
|
|
625
|
-
"values": []
|
|
626
|
-
},
|
|
627
|
-
{
|
|
628
|
-
"name": "options",
|
|
629
|
-
"description": "The Chart.js `options` object.",
|
|
630
|
-
"values": [{ "name": "ChartOptions" }]
|
|
631
|
-
},
|
|
632
|
-
{
|
|
633
|
-
"name": "data",
|
|
634
|
-
"description": "The Chart.js `data` object",
|
|
635
|
-
"values": [{ "name": "ChartData" }]
|
|
636
|
-
},
|
|
637
|
-
{
|
|
638
|
-
"name": "plugins",
|
|
639
|
-
"description": "List of extra plugins to use for this chart.",
|
|
640
|
-
"values": [{ "name": "Plugin[]" }]
|
|
641
|
-
}
|
|
642
|
-
],
|
|
643
|
-
"references": []
|
|
644
|
-
},
|
|
645
645
|
{
|
|
646
646
|
"name": "flow-ui-details",
|
|
647
647
|
"description": "Details show a brief summary and expand to show additional content.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-show** - Emitted when the details opens.\n- **flow-ui-after-show** - Emitted after the details opens and all animations are complete.\n- **flow-ui-hide** - Emitted when the details closes.\n- **flow-ui-after-hide** - Emitted after the details closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the details.\n- **hide()** - Hides the details\n\n### **Slots:**\n - _default_ - The details' main content.\n- **summary** - The details' summary. Alternatively, you can use the `summary` attribute.\n- **expand-icon** - Optional expand icon to use instead of the default. Works best with `<flow-ui-icon>`.\n- **collapse-icon** - Optional collapse icon to use instead of the default. Works best with `<flow-ui-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **header** - The header that wraps both the summary and the expand/collapse icon.\n- **summary** - The container that wraps the summary.\n- **summary-icon** - The container that wraps the expand/collapse icons.\n- **content** - The details content.",
|
|
@@ -1140,6 +1140,28 @@
|
|
|
1140
1140
|
],
|
|
1141
1141
|
"references": []
|
|
1142
1142
|
},
|
|
1143
|
+
{
|
|
1144
|
+
"name": "flow-ui-panel",
|
|
1145
|
+
"description": "Panels are use with split-views to create resizable areas.\n\n\n---\n\n\n\n\n### **Methods:**\n - **expand(emitEvent)** - Shows the details.\n- **collapse(emitEvent)** - Hides the details",
|
|
1146
|
+
"attributes": [
|
|
1147
|
+
{
|
|
1148
|
+
"name": "closed",
|
|
1149
|
+
"description": "Indicates whether the panel is open or closed.",
|
|
1150
|
+
"values": []
|
|
1151
|
+
},
|
|
1152
|
+
{
|
|
1153
|
+
"name": "scrollable",
|
|
1154
|
+
"description": "Indicates whether the panel is scrollable. By default overflow is hidden.",
|
|
1155
|
+
"values": []
|
|
1156
|
+
},
|
|
1157
|
+
{
|
|
1158
|
+
"name": "padding",
|
|
1159
|
+
"description": "Indicates whether the panel body has padding.",
|
|
1160
|
+
"values": []
|
|
1161
|
+
}
|
|
1162
|
+
],
|
|
1163
|
+
"references": []
|
|
1164
|
+
},
|
|
1143
1165
|
{
|
|
1144
1166
|
"name": "flow-ui-panel-header",
|
|
1145
1167
|
"description": "A panel header provides a title, 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 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.",
|
|
@@ -1203,7 +1225,7 @@
|
|
|
1203
1225
|
},
|
|
1204
1226
|
{
|
|
1205
1227
|
"name": "flow-ui-query-builder",
|
|
1206
|
-
"description": "Query builder component\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-change** - Emitted when the control's value changes.\n\n### **Methods:**\n - **registerFieldDefinition(type: _T_, fieldDefinition: _FlowQueryBuilderFieldDefinition<NoUnion<T>>_)** - Register a custom field definition.\n\nA field definition is used to add support for a custom field type. A field type comprises:\n\n- a field `type` string\n- a `template` function that returns the template for the field's value control\n- an array of `operators` that are valid for the field",
|
|
1228
|
+
"description": "Query builder component\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-change** - Emitted when the control's value changes.\n\n### **Methods:**\n - **registerFieldDefinition(type: _T_, fieldDefinition: _FlowQueryBuilderFieldDefinition<NoUnion<T>>_)** - Register a custom field definition.\n\nA field definition is used to add support for a custom field type. A field type comprises:\n\n- a field `type` string\n- a `template` function that returns the template for the field's value control\n- an array of `operators` that are valid for the field\n- **isRule(value: _unknown_): _value is FlowQueryBuilderRule_** - Static helper method to determine if supplied argument is\na `FlowQueryBuilderRule`.\n- **isRuleSet(value: _unknown_): __** - Static helper method to determine if supplied argument is\na `FlowQueryBuilderRuleSet`.\n- **filterRuleSet(ruleset: _FlowQueryBuilderRuleSet_, options: _{ excludeFields?: string[]; includeFields?: string[] }_): __** - Static helper method to recursively filter a `FlowQueryBuilderRuleSet`.\n\nThis can be used to sanitize user queries before they are executed.\n- **renameRuleSetFields(ruleset: _FlowQueryBuilderRuleSet_, replacements: _Record<string, string>_, ruleSet): __** - Static helper method to rename fields in a `FlowQueryBuilderRuleSet`.\n- **transformRuleSet(ruleSet: _FlowQueryBuilderRuleSet_, transformFn: _(rule: FlowQueryBuilderRule) => FlowQueryBuilderRule | undefined_): __** - Static helper method to recursively apply a transform function to each rule\nin a `FlowQueryBuilderRuleSet`.\n\nThe transform fn should expect a single FlowQueryBuilderRule and return:\n\n- the same rule unmodifed or modified in place\n- `undefined` to exclude the rule from the rule set\n\nThis can be used to sanitize rule sets before they are used to perform queries.\n\n### **Slots:**\n - **label** - The component's label. Alternatively, you can use the `label` attribute.\n- **help-text** - Text that describes how to use the component. Alternatively, you can use the `help-text` attribute.",
|
|
1207
1229
|
"attributes": [
|
|
1208
1230
|
{
|
|
1209
1231
|
"name": "value",
|
|
@@ -1248,22 +1270,26 @@
|
|
|
1248
1270
|
"references": []
|
|
1249
1271
|
},
|
|
1250
1272
|
{
|
|
1251
|
-
"name": "flow-ui-
|
|
1252
|
-
"description": "
|
|
1273
|
+
"name": "flow-ui-radio",
|
|
1274
|
+
"description": "Radios allow the user to select a single option from a group.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-blur** - Emitted when the control loses focus.\n- **flow-ui-focus** - Emitted when the control gains focus.\n\n### **Slots:**\n - _default_ - The radio's label.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control** - The circular container that wraps the radio's checked state.\n- **control--checked** - The radio control when the radio is checked.\n- **checked-icon** - The checked icon, an `<flow-ui-icon>` element.\n- **label** - The container that wraps the radio's label.",
|
|
1253
1275
|
"attributes": [
|
|
1254
1276
|
{
|
|
1255
|
-
"name": "
|
|
1256
|
-
"description": "
|
|
1277
|
+
"name": "value",
|
|
1278
|
+
"description": "The radio's value. When selected, the radio group will receive this value.",
|
|
1257
1279
|
"values": []
|
|
1258
1280
|
},
|
|
1259
1281
|
{
|
|
1260
|
-
"name": "
|
|
1261
|
-
"description": "
|
|
1262
|
-
"values": [
|
|
1282
|
+
"name": "size",
|
|
1283
|
+
"description": "The radio's size. When used inside a radio group, the size will be determined by the radio group's size so this\nattribute can typically be omitted.",
|
|
1284
|
+
"values": [
|
|
1285
|
+
{ "name": "small" },
|
|
1286
|
+
{ "name": "medium" },
|
|
1287
|
+
{ "name": "large" }
|
|
1288
|
+
]
|
|
1263
1289
|
},
|
|
1264
1290
|
{
|
|
1265
|
-
"name": "
|
|
1266
|
-
"description": "
|
|
1291
|
+
"name": "disabled",
|
|
1292
|
+
"description": "Disables the radio.",
|
|
1267
1293
|
"values": []
|
|
1268
1294
|
}
|
|
1269
1295
|
],
|
|
@@ -1321,26 +1347,62 @@
|
|
|
1321
1347
|
"references": []
|
|
1322
1348
|
},
|
|
1323
1349
|
{
|
|
1324
|
-
"name": "flow-ui-
|
|
1325
|
-
"description": "
|
|
1350
|
+
"name": "flow-ui-range",
|
|
1351
|
+
"description": "Ranges allow the user to select a single value within a given range using a slider.\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-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 range.\n- **blur()** - Removes focus from the range.\n- **stepUp()** - Increments the value of the range by the value of the step attribute.\n- **stepDown()** - Decrements the value of the range by the value of the step attribute.\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 range's label. Alternatively, you can use the `label` attribute.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Properties:**\n - **--thumb-size** - The size of the thumb. _(default: undefined)_\n- **--tooltip-offset** - The vertical distance the tooltip is offset from the track. _(default: undefined)_\n- **--track-color-active** - The color of the portion of the track that represents the current value. _(default: undefined)_\n- **--track-color-inactive** - The of the portion of the track that represents the remaining value. _(default: undefined)_\n- **--track-height** - The height of the track. _(default: undefined)_\n- **--track-active-offset** - The point of origin of the active track. _(default: undefined)_\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 range's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's base wrapper.\n- **input** - The internal `<input>` element.\n- **tooltip** - The range's tooltip.",
|
|
1326
1352
|
"attributes": [
|
|
1353
|
+
{ "name": "title", "values": [] },
|
|
1354
|
+
{
|
|
1355
|
+
"name": "name",
|
|
1356
|
+
"description": "The name of the range, submitted as a name/value pair with form data.",
|
|
1357
|
+
"values": []
|
|
1358
|
+
},
|
|
1327
1359
|
{
|
|
1328
1360
|
"name": "value",
|
|
1329
|
-
"description": "The
|
|
1361
|
+
"description": "The current value of the range, submitted as a name/value pair with form data.",
|
|
1330
1362
|
"values": []
|
|
1331
1363
|
},
|
|
1332
1364
|
{
|
|
1333
|
-
"name": "
|
|
1334
|
-
"description": "The
|
|
1365
|
+
"name": "label",
|
|
1366
|
+
"description": "The range's label. If you need to display HTML, use the `label` slot instead.",
|
|
1367
|
+
"values": []
|
|
1368
|
+
},
|
|
1369
|
+
{
|
|
1370
|
+
"name": "help-text",
|
|
1371
|
+
"description": "The range's help text. If you need to display HTML, use the help-text slot instead.",
|
|
1372
|
+
"values": []
|
|
1373
|
+
},
|
|
1374
|
+
{
|
|
1375
|
+
"name": "disabled",
|
|
1376
|
+
"description": "Disables the range.",
|
|
1377
|
+
"values": []
|
|
1378
|
+
},
|
|
1379
|
+
{
|
|
1380
|
+
"name": "min",
|
|
1381
|
+
"description": "The minimum acceptable value of the range.",
|
|
1382
|
+
"values": []
|
|
1383
|
+
},
|
|
1384
|
+
{
|
|
1385
|
+
"name": "max",
|
|
1386
|
+
"description": "The maximum acceptable value of the range.",
|
|
1387
|
+
"values": []
|
|
1388
|
+
},
|
|
1389
|
+
{
|
|
1390
|
+
"name": "step",
|
|
1391
|
+
"description": "The interval at which the range will increase and decrease.",
|
|
1392
|
+
"values": []
|
|
1393
|
+
},
|
|
1394
|
+
{
|
|
1395
|
+
"name": "tooltip",
|
|
1396
|
+
"description": "The preferred placement of the range's tooltip.",
|
|
1335
1397
|
"values": [
|
|
1336
|
-
{ "name": "
|
|
1337
|
-
{ "name": "
|
|
1338
|
-
{ "name": "
|
|
1398
|
+
{ "name": "top" },
|
|
1399
|
+
{ "name": "bottom" },
|
|
1400
|
+
{ "name": "none" }
|
|
1339
1401
|
]
|
|
1340
1402
|
},
|
|
1341
1403
|
{
|
|
1342
|
-
"name": "
|
|
1343
|
-
"description": "
|
|
1404
|
+
"name": "form",
|
|
1405
|
+
"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.",
|
|
1344
1406
|
"values": []
|
|
1345
1407
|
}
|
|
1346
1408
|
],
|
|
@@ -1429,9 +1491,30 @@
|
|
|
1429
1491
|
"references": []
|
|
1430
1492
|
},
|
|
1431
1493
|
{
|
|
1432
|
-
"name": "flow-ui-
|
|
1433
|
-
"description": "
|
|
1434
|
-
"attributes": [
|
|
1494
|
+
"name": "flow-ui-split-view-pane",
|
|
1495
|
+
"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)** - Shows the details.\n- **collapse(emitEvent)** - Hides the details",
|
|
1496
|
+
"attributes": [
|
|
1497
|
+
{ "name": "vertical", "values": [] },
|
|
1498
|
+
{ "name": "size", "values": [] },
|
|
1499
|
+
{ "name": "min-size", "values": [] },
|
|
1500
|
+
{ "name": "max-size", "values": [] },
|
|
1501
|
+
{ "name": "closed-size", "values": [] },
|
|
1502
|
+
{
|
|
1503
|
+
"name": "closed",
|
|
1504
|
+
"description": "Indicates if the split-view pane is open or closed.",
|
|
1505
|
+
"values": []
|
|
1506
|
+
},
|
|
1507
|
+
{
|
|
1508
|
+
"name": "divider",
|
|
1509
|
+
"description": "Indicates if the split-view pane has a divider.",
|
|
1510
|
+
"values": []
|
|
1511
|
+
},
|
|
1512
|
+
{
|
|
1513
|
+
"name": "hidden",
|
|
1514
|
+
"description": "Indicates if the split-view pane is hidden.",
|
|
1515
|
+
"values": []
|
|
1516
|
+
}
|
|
1517
|
+
],
|
|
1435
1518
|
"references": []
|
|
1436
1519
|
},
|
|
1437
1520
|
{
|
|
@@ -1530,6 +1613,12 @@
|
|
|
1530
1613
|
],
|
|
1531
1614
|
"references": []
|
|
1532
1615
|
},
|
|
1616
|
+
{
|
|
1617
|
+
"name": "flow-ui-stepper",
|
|
1618
|
+
"description": "Steppers are used to guide users through a series of steps in a wizard-like UI.\n\n\n---\n\n\n",
|
|
1619
|
+
"attributes": [],
|
|
1620
|
+
"references": []
|
|
1621
|
+
},
|
|
1533
1622
|
{
|
|
1534
1623
|
"name": "flow-ui-stepper-panel",
|
|
1535
1624
|
"description": "Stepper panels provide a single page in a stepper to guide users through a series of steps.\n\n\n---\n\n\n",
|
|
@@ -1601,65 +1690,6 @@
|
|
|
1601
1690
|
],
|
|
1602
1691
|
"references": []
|
|
1603
1692
|
},
|
|
1604
|
-
{
|
|
1605
|
-
"name": "flow-ui-split-view-pane",
|
|
1606
|
-
"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)** - Shows the details.\n- **collapse(emitEvent)** - Hides the details",
|
|
1607
|
-
"attributes": [
|
|
1608
|
-
{ "name": "vertical", "values": [] },
|
|
1609
|
-
{ "name": "size", "values": [] },
|
|
1610
|
-
{ "name": "min-size", "values": [] },
|
|
1611
|
-
{ "name": "max-size", "values": [] },
|
|
1612
|
-
{ "name": "closed-size", "values": [] },
|
|
1613
|
-
{
|
|
1614
|
-
"name": "closed",
|
|
1615
|
-
"description": "Indicates if the split-view pane is open or closed.",
|
|
1616
|
-
"values": []
|
|
1617
|
-
},
|
|
1618
|
-
{
|
|
1619
|
-
"name": "divider",
|
|
1620
|
-
"description": "Indicates if the split-view pane has a divider.",
|
|
1621
|
-
"values": []
|
|
1622
|
-
},
|
|
1623
|
-
{
|
|
1624
|
-
"name": "hidden",
|
|
1625
|
-
"description": "Indicates if the split-view pane is hidden.",
|
|
1626
|
-
"values": []
|
|
1627
|
-
}
|
|
1628
|
-
],
|
|
1629
|
-
"references": []
|
|
1630
|
-
},
|
|
1631
|
-
{
|
|
1632
|
-
"name": "flow-ui-tab-group",
|
|
1633
|
-
"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.",
|
|
1634
|
-
"attributes": [
|
|
1635
|
-
{
|
|
1636
|
-
"name": "placement",
|
|
1637
|
-
"description": "The placement of the tabs.",
|
|
1638
|
-
"values": [
|
|
1639
|
-
{ "name": "top" },
|
|
1640
|
-
{ "name": "bottom" },
|
|
1641
|
-
{ "name": "start" },
|
|
1642
|
-
{ "name": "end" }
|
|
1643
|
-
]
|
|
1644
|
-
},
|
|
1645
|
-
{
|
|
1646
|
-
"name": "activation",
|
|
1647
|
-
"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.",
|
|
1648
|
-
"values": [{ "name": "auto" }, { "name": "manual" }]
|
|
1649
|
-
},
|
|
1650
|
-
{
|
|
1651
|
-
"name": "no-scroll-controls",
|
|
1652
|
-
"description": "Disables the scroll arrows that appear when tabs overflow.",
|
|
1653
|
-
"values": []
|
|
1654
|
-
},
|
|
1655
|
-
{
|
|
1656
|
-
"name": "control-split-view",
|
|
1657
|
-
"description": "Set to `true` to allow parent split-view pane to be automatically opened and closed when tabs are clicked.",
|
|
1658
|
-
"values": []
|
|
1659
|
-
}
|
|
1660
|
-
],
|
|
1661
|
-
"references": []
|
|
1662
|
-
},
|
|
1663
1693
|
{
|
|
1664
1694
|
"name": "flow-ui-tab",
|
|
1665
1695
|
"description": "Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-close** - Emitted when the tab is closable and the close button is activated.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus to the tab.\n- **blur()** - Removes focus from the tab.\n\n### **Slots:**\n - _default_ - The tab's label.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **close-button** - The close button, an `<flow-ui-icon-button>`.\n- **close-button__base** - The close button's exported `base` part.",
|
|
@@ -1722,62 +1752,54 @@
|
|
|
1722
1752
|
"references": []
|
|
1723
1753
|
},
|
|
1724
1754
|
{
|
|
1725
|
-
"name": "flow-ui-
|
|
1726
|
-
"description": "
|
|
1755
|
+
"name": "flow-ui-tab-group",
|
|
1756
|
+
"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.",
|
|
1727
1757
|
"attributes": [
|
|
1728
|
-
{ "name": "title", "values": [] },
|
|
1729
1758
|
{
|
|
1730
|
-
"name": "
|
|
1731
|
-
"description": "The
|
|
1732
|
-
"values": [
|
|
1733
|
-
|
|
1734
|
-
|
|
1735
|
-
|
|
1736
|
-
|
|
1737
|
-
|
|
1738
|
-
},
|
|
1739
|
-
{
|
|
1740
|
-
"name": "label",
|
|
1741
|
-
"description": "The range's label. If you need to display HTML, use the `label` slot instead.",
|
|
1742
|
-
"values": []
|
|
1759
|
+
"name": "placement",
|
|
1760
|
+
"description": "The placement of the tabs.",
|
|
1761
|
+
"values": [
|
|
1762
|
+
{ "name": "top" },
|
|
1763
|
+
{ "name": "bottom" },
|
|
1764
|
+
{ "name": "start" },
|
|
1765
|
+
{ "name": "end" }
|
|
1766
|
+
]
|
|
1743
1767
|
},
|
|
1744
1768
|
{
|
|
1745
|
-
"name": "
|
|
1746
|
-
"description": "
|
|
1747
|
-
"values": []
|
|
1769
|
+
"name": "activation",
|
|
1770
|
+
"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.",
|
|
1771
|
+
"values": [{ "name": "auto" }, { "name": "manual" }]
|
|
1748
1772
|
},
|
|
1749
1773
|
{
|
|
1750
|
-
"name": "
|
|
1751
|
-
"description": "Disables the
|
|
1774
|
+
"name": "no-scroll-controls",
|
|
1775
|
+
"description": "Disables the scroll arrows that appear when tabs overflow.",
|
|
1752
1776
|
"values": []
|
|
1753
1777
|
},
|
|
1754
1778
|
{
|
|
1755
|
-
"name": "
|
|
1756
|
-
"description": "
|
|
1779
|
+
"name": "control-split-view",
|
|
1780
|
+
"description": "Set to `true` to allow parent split-view pane to be automatically opened and closed when tabs are clicked.",
|
|
1757
1781
|
"values": []
|
|
1758
|
-
}
|
|
1782
|
+
}
|
|
1783
|
+
],
|
|
1784
|
+
"references": []
|
|
1785
|
+
},
|
|
1786
|
+
{
|
|
1787
|
+
"name": "flow-ui-tab-panel",
|
|
1788
|
+
"description": "Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The tab panel's content.\n\n### **CSS Properties:**\n - **--padding** - The tab panel's padding. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
1789
|
+
"attributes": [
|
|
1759
1790
|
{
|
|
1760
|
-
"name": "
|
|
1761
|
-
"description": "The
|
|
1791
|
+
"name": "name",
|
|
1792
|
+
"description": "The tab panel's name.",
|
|
1762
1793
|
"values": []
|
|
1763
1794
|
},
|
|
1764
1795
|
{
|
|
1765
|
-
"name": "
|
|
1766
|
-
"description": "
|
|
1796
|
+
"name": "active",
|
|
1797
|
+
"description": "When true, the tab panel will be shown.",
|
|
1767
1798
|
"values": []
|
|
1768
1799
|
},
|
|
1769
1800
|
{
|
|
1770
|
-
"name": "
|
|
1771
|
-
"description": "
|
|
1772
|
-
"values": [
|
|
1773
|
-
{ "name": "top" },
|
|
1774
|
-
{ "name": "bottom" },
|
|
1775
|
-
{ "name": "none" }
|
|
1776
|
-
]
|
|
1777
|
-
},
|
|
1778
|
-
{
|
|
1779
|
-
"name": "form",
|
|
1780
|
-
"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.",
|
|
1801
|
+
"name": "scrollable",
|
|
1802
|
+
"description": "Indicates whether the panel is scrollable. By default overflow is hidden.",
|
|
1781
1803
|
"values": []
|
|
1782
1804
|
}
|
|
1783
1805
|
],
|
|
@@ -1933,6 +1955,36 @@
|
|
|
1933
1955
|
],
|
|
1934
1956
|
"references": []
|
|
1935
1957
|
},
|
|
1958
|
+
{
|
|
1959
|
+
"name": "flow-ui-timer",
|
|
1960
|
+
"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.",
|
|
1961
|
+
"attributes": [
|
|
1962
|
+
{
|
|
1963
|
+
"name": "value",
|
|
1964
|
+
"description": "The value of the timer. (ISO8601 date/time string)",
|
|
1965
|
+
"values": []
|
|
1966
|
+
},
|
|
1967
|
+
{
|
|
1968
|
+
"name": "timezone",
|
|
1969
|
+
"description": "The timezone to use for display. (IANA timezone string).\nIf not set, the timezone will be the browser's local timezone.",
|
|
1970
|
+
"values": []
|
|
1971
|
+
},
|
|
1972
|
+
{
|
|
1973
|
+
"name": "locale",
|
|
1974
|
+
"description": "The locale to use for display. (IETF BCP 47 language tag).\nIf not set, the locale will be the browser's default locale.",
|
|
1975
|
+
"values": []
|
|
1976
|
+
},
|
|
1977
|
+
{ "name": "running", "values": [] },
|
|
1978
|
+
{ "name": "dateFormat", "values": [] },
|
|
1979
|
+
{ "name": "dayFormat", "values": [] },
|
|
1980
|
+
{ "name": "timeFormat", "values": [] },
|
|
1981
|
+
{ "name": "zoneFormat", "values": [] },
|
|
1982
|
+
{ "name": "major-step", "values": [] },
|
|
1983
|
+
{ "name": "minor-step", "values": [] },
|
|
1984
|
+
{ "name": "hide-zone", "values": [] }
|
|
1985
|
+
],
|
|
1986
|
+
"references": []
|
|
1987
|
+
},
|
|
1936
1988
|
{
|
|
1937
1989
|
"name": "flow-ui-tool-button",
|
|
1938
1990
|
"description": "Tool buttons are used in toolbars. 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.",
|
|
@@ -2152,42 +2204,6 @@
|
|
|
2152
2204
|
],
|
|
2153
2205
|
"references": []
|
|
2154
2206
|
},
|
|
2155
|
-
{
|
|
2156
|
-
"name": "flow-ui-timer",
|
|
2157
|
-
"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.",
|
|
2158
|
-
"attributes": [
|
|
2159
|
-
{
|
|
2160
|
-
"name": "value",
|
|
2161
|
-
"description": "The value of the timer. (ISO8601 date/time string)",
|
|
2162
|
-
"values": []
|
|
2163
|
-
},
|
|
2164
|
-
{
|
|
2165
|
-
"name": "timezone",
|
|
2166
|
-
"description": "The timezone to use for display. (IANA timezone string).\nIf not set, the timezone will be the browser's local timezone.",
|
|
2167
|
-
"values": []
|
|
2168
|
-
},
|
|
2169
|
-
{
|
|
2170
|
-
"name": "locale",
|
|
2171
|
-
"description": "The locale to use for display. (IETF BCP 47 language tag).\nIf not set, the locale will be the browser's default locale.",
|
|
2172
|
-
"values": []
|
|
2173
|
-
},
|
|
2174
|
-
{ "name": "running", "values": [] },
|
|
2175
|
-
{ "name": "dateFormat", "values": [] },
|
|
2176
|
-
{ "name": "dayFormat", "values": [] },
|
|
2177
|
-
{ "name": "timeFormat", "values": [] },
|
|
2178
|
-
{ "name": "zoneFormat", "values": [] },
|
|
2179
|
-
{ "name": "major-step", "values": [] },
|
|
2180
|
-
{ "name": "minor-step", "values": [] },
|
|
2181
|
-
{ "name": "hide-zone", "values": [] }
|
|
2182
|
-
],
|
|
2183
|
-
"references": []
|
|
2184
|
-
},
|
|
2185
|
-
{
|
|
2186
|
-
"name": "flow-ui-visually-hidden",
|
|
2187
|
-
"description": "The visually hidden utility makes content accessible to assistive devices without displaying it on the screen.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The content to be visually hidden.",
|
|
2188
|
-
"attributes": [],
|
|
2189
|
-
"references": []
|
|
2190
|
-
},
|
|
2191
2207
|
{
|
|
2192
2208
|
"name": "flow-ui-tree-item",
|
|
2193
2209
|
"description": "A tree item serves as a hierarchical node that lives inside a [tree](/components/tree).\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-expand** - Emitted when the tree item expands.\n- **flow-ui-after-expand** - Emitted after the tree item expands and all animations are complete.\n- **flow-ui-collapse** - Emitted when the tree item collapses.\n- **flow-ui-after-collapse** - Emitted after the tree item collapses and all animations are complete.\n- **flow-ui-lazy-change** - Emitted when the tree item's lazy state changes.\n- **flow-ui-lazy-load** - Emitted when a lazy item is selected. Use this event to asynchronously load data and append items to the tree before expanding. After appending new items, remove the `lazy` attribute to remove the loading state and update the tree.\n\n### **Methods:**\n - **getChildrenItems({ includeDisabled = true }: _{ includeDisabled?: boolean }_): _FlowTreeItem[]_** - Gets all the nested tree items in this node.\n\n### **Slots:**\n - _default_ - The default slot.\n- **expand-icon** - The icon to show when the tree item is expanded.\n- **collapse-icon** - The icon to show when the tree item is collapsed.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **item** - The tree item's container. This element wraps everything except slotted tree item children.\n- **item--disabled** - Applied when the tree item is disabled.\n- **item--expanded** - Applied when the tree item is expanded.\n- **item--indeterminate** - Applied when the selection is indeterminate.\n- **item--selected** - Applied when the tree item is selected.\n- **indentation** - The tree item's indentation container.\n- **expand-button** - The container that wraps the tree item's expand button and spinner.\n- **label** - The tree item's label.\n- **children** - The container that wraps the tree item's nested children.\n- **checkbox** - The checkbox that shows when using multiselect.\n- **checkbox__base** - The checkbox's exported `base` part.\n- **checkbox__control** - The checkbox's exported `control` part.\n- **checkbox__control--checked** - The checkbox's exported `control--checked` part.\n- **checkbox__control--indeterminate** - The checkbox's exported `control--indeterminate` part.\n- **checkbox__checked-icon** - The checkbox's exported `checked-icon` part.\n- **checkbox__indeterminate-icon** - The checkbox's exported `indeterminate-icon` part.\n- **checkbox__label** - The checkbox's exported `label` part.",
|
|
@@ -2216,25 +2232,9 @@
|
|
|
2216
2232
|
"references": []
|
|
2217
2233
|
},
|
|
2218
2234
|
{
|
|
2219
|
-
"name": "flow-ui-
|
|
2220
|
-
"description": "
|
|
2221
|
-
"attributes": [
|
|
2222
|
-
{
|
|
2223
|
-
"name": "name",
|
|
2224
|
-
"description": "The tab panel's name.",
|
|
2225
|
-
"values": []
|
|
2226
|
-
},
|
|
2227
|
-
{
|
|
2228
|
-
"name": "active",
|
|
2229
|
-
"description": "When true, the tab panel will be shown.",
|
|
2230
|
-
"values": []
|
|
2231
|
-
},
|
|
2232
|
-
{
|
|
2233
|
-
"name": "scrollable",
|
|
2234
|
-
"description": "Indicates whether the panel is scrollable. By default overflow is hidden.",
|
|
2235
|
-
"values": []
|
|
2236
|
-
}
|
|
2237
|
-
],
|
|
2235
|
+
"name": "flow-ui-visually-hidden",
|
|
2236
|
+
"description": "The visually hidden utility makes content accessible to assistive devices without displaying it on the screen.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The content to be visually hidden.",
|
|
2237
|
+
"attributes": [],
|
|
2238
2238
|
"references": []
|
|
2239
2239
|
}
|
|
2240
2240
|
]
|