@emuanalytics/flow-rdf-ui 4.1.0 → 4.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/busy-overlay/busy-overlay.component.mjs +56 -0
- package/dist/components/busy-overlay/busy-overlay.mjs +5 -0
- package/dist/components/busy-overlay/busy-overlay.styles.mjs +105 -0
- package/dist/components/button/button.component.mjs +4 -1
- package/dist/components/button/button.styles.mjs +14 -5
- package/dist/components/progress-bar/progress-bar.component.mjs +14 -14
- package/dist/components/progress-bar/progress-bar.styles.mjs +41 -12
- package/dist/components/progress-ring/progress-ring.component.mjs +22 -20
- package/dist/components/progress-ring/progress-ring.styles.mjs +77 -4
- package/dist/components/tree-item/tree-item.component.mjs +4 -1
- package/dist/custom-elements.json +11010 -10868
- package/dist/index.d.mts +82 -67
- package/dist/index.d.ts +82 -67
- package/dist/index.mjs +1 -1
- package/dist/package.json.mjs +1 -1
- package/dist/utilities/register-components.mjs +2 -2
- package/dist/vscode.html-custom-data.json +638 -572
- package/package.json +1 -1
- package/themes/dark.css +3 -0
- package/themes/dark.styles.js +3 -0
- package/themes/light.css +3 -0
- package/themes/light.styles.js +3 -0
- package/dist/components/spinner/spinner.component.mjs +0 -22
- package/dist/components/spinner/spinner.mjs +0 -5
- package/dist/components/spinner/spinner.styles.mjs +0 -64
|
@@ -97,6 +97,107 @@
|
|
|
97
97
|
],
|
|
98
98
|
"references": []
|
|
99
99
|
},
|
|
100
|
+
{
|
|
101
|
+
"name": "flow-ui-badge",
|
|
102
|
+
"description": "Badges are used to draw attention and display statuses or counts.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The badge's content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
103
|
+
"attributes": [
|
|
104
|
+
{
|
|
105
|
+
"name": "variant",
|
|
106
|
+
"description": "The badge's theme variant.",
|
|
107
|
+
"values": [
|
|
108
|
+
{ "name": "primary" },
|
|
109
|
+
{ "name": "secondary" },
|
|
110
|
+
{ "name": "success" },
|
|
111
|
+
{ "name": "neutral" },
|
|
112
|
+
{ "name": "warning" },
|
|
113
|
+
{ "name": "danger" }
|
|
114
|
+
]
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
"name": "size",
|
|
118
|
+
"description": "The badge size.",
|
|
119
|
+
"values": [
|
|
120
|
+
{ "name": "small" },
|
|
121
|
+
{ "name": "medium" },
|
|
122
|
+
{ "name": "large" }
|
|
123
|
+
]
|
|
124
|
+
},
|
|
125
|
+
{
|
|
126
|
+
"name": "pill",
|
|
127
|
+
"description": "Draws a pill-style badge with rounded edges.",
|
|
128
|
+
"values": []
|
|
129
|
+
},
|
|
130
|
+
{
|
|
131
|
+
"name": "pulse",
|
|
132
|
+
"description": "Makes the badge pulsate to draw attention.",
|
|
133
|
+
"values": []
|
|
134
|
+
}
|
|
135
|
+
],
|
|
136
|
+
"references": []
|
|
137
|
+
},
|
|
138
|
+
{
|
|
139
|
+
"name": "flow-ui-avatar",
|
|
140
|
+
"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.",
|
|
141
|
+
"attributes": [
|
|
142
|
+
{
|
|
143
|
+
"name": "image",
|
|
144
|
+
"description": "The image source to use for the avatar.",
|
|
145
|
+
"values": []
|
|
146
|
+
},
|
|
147
|
+
{
|
|
148
|
+
"name": "label",
|
|
149
|
+
"description": "A label to use to describe the avatar to assistive devices.",
|
|
150
|
+
"values": []
|
|
151
|
+
},
|
|
152
|
+
{
|
|
153
|
+
"name": "initials",
|
|
154
|
+
"description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
|
|
155
|
+
"values": []
|
|
156
|
+
},
|
|
157
|
+
{
|
|
158
|
+
"name": "loading",
|
|
159
|
+
"description": "Indicates how the browser should load the image.",
|
|
160
|
+
"values": [{ "name": "eager" }, { "name": "lazy" }]
|
|
161
|
+
},
|
|
162
|
+
{
|
|
163
|
+
"name": "shape",
|
|
164
|
+
"description": "The shape of the avatar.",
|
|
165
|
+
"values": [
|
|
166
|
+
{ "name": "circle" },
|
|
167
|
+
{ "name": "square" },
|
|
168
|
+
{ "name": "rounded" }
|
|
169
|
+
]
|
|
170
|
+
}
|
|
171
|
+
],
|
|
172
|
+
"references": []
|
|
173
|
+
},
|
|
174
|
+
{
|
|
175
|
+
"name": "flow-ui-breadcrumb-item",
|
|
176
|
+
"description": "Breadcrumb Items are used inside [breadcrumbs](./flow-ui-breadcrumb) to represent different links.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The breadcrumb item's label.\n- **prefix** - An optional prefix, usually an icon or icon button.\n- **suffix** - An optional suffix, usually an icon or icon button.\n- **separator** - The separator to use for the breadcrumb item. This will only change the separator for this item. If you want to change it for all items in the group, set the separator on `<flow-ui-breadcrumb>` instead.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label** - The breadcrumb item's label.\n- **prefix** - The container that wraps the prefix.\n- **suffix** - The container that wraps the suffix.\n- **separator** - The container that wraps the separator.",
|
|
177
|
+
"attributes": [
|
|
178
|
+
{
|
|
179
|
+
"name": "href",
|
|
180
|
+
"description": "Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered\ninternally. When unset, a button will be rendered instead.",
|
|
181
|
+
"values": []
|
|
182
|
+
},
|
|
183
|
+
{
|
|
184
|
+
"name": "target",
|
|
185
|
+
"description": "Tells the browser where to open the link. Only used when `href` is set.",
|
|
186
|
+
"values": [
|
|
187
|
+
{ "name": "_blank" },
|
|
188
|
+
{ "name": "_parent" },
|
|
189
|
+
{ "name": "_self" },
|
|
190
|
+
{ "name": "_top" }
|
|
191
|
+
]
|
|
192
|
+
},
|
|
193
|
+
{
|
|
194
|
+
"name": "rel",
|
|
195
|
+
"description": "The `rel` attribute to use on the link. Only used when `href` is set.",
|
|
196
|
+
"values": []
|
|
197
|
+
}
|
|
198
|
+
],
|
|
199
|
+
"references": []
|
|
200
|
+
},
|
|
100
201
|
{
|
|
101
202
|
"name": "flow-ui-breadcrumb",
|
|
102
203
|
"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.",
|
|
@@ -171,27 +272,34 @@
|
|
|
171
272
|
"references": []
|
|
172
273
|
},
|
|
173
274
|
{
|
|
174
|
-
"name": "flow-ui-
|
|
175
|
-
"description": "
|
|
275
|
+
"name": "flow-ui-busy-overlay",
|
|
276
|
+
"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)_",
|
|
176
277
|
"attributes": [
|
|
278
|
+
{ "name": "busy", "values": [] },
|
|
177
279
|
{
|
|
178
|
-
"name": "
|
|
179
|
-
"description": "
|
|
180
|
-
"values": [
|
|
280
|
+
"name": "variant",
|
|
281
|
+
"description": "The default loading animation's theme variant.",
|
|
282
|
+
"values": [
|
|
283
|
+
{ "name": "primary" },
|
|
284
|
+
{ "name": "secondary" },
|
|
285
|
+
{ "name": "success" },
|
|
286
|
+
{ "name": "neutral" },
|
|
287
|
+
{ "name": "warning" },
|
|
288
|
+
{ "name": "danger" }
|
|
289
|
+
]
|
|
181
290
|
},
|
|
182
291
|
{
|
|
183
|
-
"name": "
|
|
184
|
-
"description": "
|
|
292
|
+
"name": "size",
|
|
293
|
+
"description": "Size of the loading animation",
|
|
185
294
|
"values": [
|
|
186
|
-
{ "name": "
|
|
187
|
-
{ "name": "
|
|
188
|
-
{ "name": "
|
|
189
|
-
{ "name": "_top" }
|
|
295
|
+
{ "name": "small" },
|
|
296
|
+
{ "name": "medium" },
|
|
297
|
+
{ "name": "large" }
|
|
190
298
|
]
|
|
191
299
|
},
|
|
192
300
|
{
|
|
193
|
-
"name": "
|
|
194
|
-
"description": "
|
|
301
|
+
"name": "overlay-parent",
|
|
302
|
+
"description": "To overlay the parent element",
|
|
195
303
|
"values": []
|
|
196
304
|
}
|
|
197
305
|
],
|
|
@@ -347,80 +455,6 @@
|
|
|
347
455
|
],
|
|
348
456
|
"references": []
|
|
349
457
|
},
|
|
350
|
-
{
|
|
351
|
-
"name": "flow-ui-avatar",
|
|
352
|
-
"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.",
|
|
353
|
-
"attributes": [
|
|
354
|
-
{
|
|
355
|
-
"name": "image",
|
|
356
|
-
"description": "The image source to use for the avatar.",
|
|
357
|
-
"values": []
|
|
358
|
-
},
|
|
359
|
-
{
|
|
360
|
-
"name": "label",
|
|
361
|
-
"description": "A label to use to describe the avatar to assistive devices.",
|
|
362
|
-
"values": []
|
|
363
|
-
},
|
|
364
|
-
{
|
|
365
|
-
"name": "initials",
|
|
366
|
-
"description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
|
|
367
|
-
"values": []
|
|
368
|
-
},
|
|
369
|
-
{
|
|
370
|
-
"name": "loading",
|
|
371
|
-
"description": "Indicates how the browser should load the image.",
|
|
372
|
-
"values": [{ "name": "eager" }, { "name": "lazy" }]
|
|
373
|
-
},
|
|
374
|
-
{
|
|
375
|
-
"name": "shape",
|
|
376
|
-
"description": "The shape of the avatar.",
|
|
377
|
-
"values": [
|
|
378
|
-
{ "name": "circle" },
|
|
379
|
-
{ "name": "square" },
|
|
380
|
-
{ "name": "rounded" }
|
|
381
|
-
]
|
|
382
|
-
}
|
|
383
|
-
],
|
|
384
|
-
"references": []
|
|
385
|
-
},
|
|
386
|
-
{
|
|
387
|
-
"name": "flow-ui-badge",
|
|
388
|
-
"description": "Badges are used to draw attention and display statuses or counts.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The badge's content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
389
|
-
"attributes": [
|
|
390
|
-
{
|
|
391
|
-
"name": "variant",
|
|
392
|
-
"description": "The badge's theme variant.",
|
|
393
|
-
"values": [
|
|
394
|
-
{ "name": "primary" },
|
|
395
|
-
{ "name": "secondary" },
|
|
396
|
-
{ "name": "success" },
|
|
397
|
-
{ "name": "neutral" },
|
|
398
|
-
{ "name": "warning" },
|
|
399
|
-
{ "name": "danger" }
|
|
400
|
-
]
|
|
401
|
-
},
|
|
402
|
-
{
|
|
403
|
-
"name": "size",
|
|
404
|
-
"description": "The badge size.",
|
|
405
|
-
"values": [
|
|
406
|
-
{ "name": "small" },
|
|
407
|
-
{ "name": "medium" },
|
|
408
|
-
{ "name": "large" }
|
|
409
|
-
]
|
|
410
|
-
},
|
|
411
|
-
{
|
|
412
|
-
"name": "pill",
|
|
413
|
-
"description": "Draws a pill-style badge with rounded edges.",
|
|
414
|
-
"values": []
|
|
415
|
-
},
|
|
416
|
-
{
|
|
417
|
-
"name": "pulse",
|
|
418
|
-
"description": "Makes the badge pulsate to draw attention.",
|
|
419
|
-
"values": []
|
|
420
|
-
}
|
|
421
|
-
],
|
|
422
|
-
"references": []
|
|
423
|
-
},
|
|
424
458
|
{
|
|
425
459
|
"name": "flow-ui-button-group",
|
|
426
460
|
"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.",
|
|
@@ -484,34 +518,6 @@
|
|
|
484
518
|
"attributes": [{ "name": "title", "values": [] }],
|
|
485
519
|
"references": []
|
|
486
520
|
},
|
|
487
|
-
{
|
|
488
|
-
"name": "flow-ui-carousel-item",
|
|
489
|
-
"description": "A carousel item represent a slide within a [carousel](./flow-ui-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)_",
|
|
490
|
-
"attributes": [],
|
|
491
|
-
"references": []
|
|
492
|
-
},
|
|
493
|
-
{
|
|
494
|
-
"name": "flow-ui-chart",
|
|
495
|
-
"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### **Slots:**\n - **title** - The chart's title. Alternatively, you can use the `title` attribute.\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- **--header-padding** - Chart header padding. _(default: undefined)_\n- **--header-height** - Chart header height. _(default: undefined)_\n- **--header-font-size** - Chart header font size. _(default: undefined)_\n- **--header-color** - Chart header text color. _(default: undefined)_\n\n### **CSS Parts:**\n - **header** - The header container of the chart.\n- **title** - The chart title placed in the header.",
|
|
496
|
-
"attributes": [
|
|
497
|
-
{
|
|
498
|
-
"name": "title",
|
|
499
|
-
"description": "A label displayed in the chart's header. If you need to display HTML, use the `label` slot instead.",
|
|
500
|
-
"values": []
|
|
501
|
-
},
|
|
502
|
-
{
|
|
503
|
-
"name": "type",
|
|
504
|
-
"description": "The Chart.js chart type (e.g `line`, `bar` or a custom type).",
|
|
505
|
-
"values": []
|
|
506
|
-
},
|
|
507
|
-
{
|
|
508
|
-
"name": "plugins",
|
|
509
|
-
"description": "List of extra plugins to use for this chart.",
|
|
510
|
-
"values": [{ "name": "Plugin[]" }]
|
|
511
|
-
}
|
|
512
|
-
],
|
|
513
|
-
"references": []
|
|
514
|
-
},
|
|
515
521
|
{
|
|
516
522
|
"name": "flow-ui-carousel",
|
|
517
523
|
"description": "Carousels display an arbitrary number of content slides along a horizontal or vertical axis.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-slide-change** - Emitted when the active slide changes.\n\n### **Methods:**\n - **previous(behavior: _ScrollBehavior_)** - Move the carousel backward by `slides-per-move` slides.\n- **next(behavior: _ScrollBehavior_)** - Move the carousel forward by `slides-per-move` slides.\n- **goToSlide(index: _number_, behavior: _ScrollBehavior_)** - Scrolls the carousel to the slide specified by `index`.\n\n### **Slots:**\n - _default_ - The carousel's main content, one or more `<flow-ui-carousel-item>` elements.\n- **next-icon** - Optional next icon to use instead of the default. Works best with `<flow-ui-icon>`.\n- **previous-icon** - Optional previous icon to use instead of the default. Works best with `<flow-ui-icon>`.\n\n### **CSS Properties:**\n - **--slide-gap** - The space between each slide. _(default: undefined)_\n- **--aspect-ratio** - The aspect ratio of each slide. _(default: undefined)_\n- **--scroll-hint** - The amount of padding to apply to the scroll area, allowing adjacent slides to become partially visible as a scroll hint. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The carousel's internal wrapper.\n- **scroll-container** - The scroll container that wraps the slides.\n- **pagination** - The pagination indicators wrapper.\n- **pagination-item** - The pagination indicator.\n- **pagination-item--active** - Applied when the item is active.\n- **navigation** - The navigation wrapper.\n- **navigation-button** - The navigation button.\n- **navigation-button--previous** - Applied to the previous button.\n- **navigation-button--next** - Applied to the next button.",
|
|
@@ -565,29 +571,57 @@
|
|
|
565
571
|
"references": []
|
|
566
572
|
},
|
|
567
573
|
{
|
|
568
|
-
"name": "flow-ui-
|
|
569
|
-
"description": "
|
|
574
|
+
"name": "flow-ui-carousel-item",
|
|
575
|
+
"description": "A carousel item represent a slide within a [carousel](./flow-ui-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)_",
|
|
576
|
+
"attributes": [],
|
|
577
|
+
"references": []
|
|
578
|
+
},
|
|
579
|
+
{
|
|
580
|
+
"name": "flow-ui-chart",
|
|
581
|
+
"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### **Slots:**\n - **title** - The chart's title. Alternatively, you can use the `title` attribute.\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- **--header-padding** - Chart header padding. _(default: undefined)_\n- **--header-height** - Chart header height. _(default: undefined)_\n- **--header-font-size** - Chart header font size. _(default: undefined)_\n- **--header-color** - Chart header text color. _(default: undefined)_\n\n### **CSS Parts:**\n - **header** - The header container of the chart.\n- **title** - The chart title placed in the header.",
|
|
570
582
|
"attributes": [
|
|
571
583
|
{
|
|
572
|
-
"name": "
|
|
573
|
-
"description": "
|
|
584
|
+
"name": "title",
|
|
585
|
+
"description": "A label displayed in the chart's header. If you need to display HTML, use the `label` slot instead.",
|
|
574
586
|
"values": []
|
|
575
587
|
},
|
|
576
588
|
{
|
|
577
|
-
"name": "
|
|
578
|
-
"description": "The
|
|
589
|
+
"name": "type",
|
|
590
|
+
"description": "The Chart.js chart type (e.g `line`, `bar` or a custom type).",
|
|
579
591
|
"values": []
|
|
580
592
|
},
|
|
581
593
|
{
|
|
582
|
-
"name": "
|
|
583
|
-
"description": "
|
|
584
|
-
"values": [
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
594
|
+
"name": "plugins",
|
|
595
|
+
"description": "List of extra plugins to use for this chart.",
|
|
596
|
+
"values": [{ "name": "Plugin[]" }]
|
|
597
|
+
}
|
|
598
|
+
],
|
|
599
|
+
"references": []
|
|
600
|
+
},
|
|
601
|
+
{
|
|
602
|
+
"name": "flow-ui-checkbox",
|
|
603
|
+
"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.",
|
|
604
|
+
"attributes": [
|
|
605
|
+
{
|
|
606
|
+
"name": "name",
|
|
607
|
+
"description": "The name of the checkbox, submitted as a name/value pair with form data.",
|
|
608
|
+
"values": []
|
|
609
|
+
},
|
|
610
|
+
{
|
|
611
|
+
"name": "value",
|
|
612
|
+
"description": "The current value of the checkbox.",
|
|
613
|
+
"values": []
|
|
614
|
+
},
|
|
615
|
+
{
|
|
616
|
+
"name": "size",
|
|
617
|
+
"description": "The checkbox's size.",
|
|
618
|
+
"values": [
|
|
619
|
+
{ "name": "small" },
|
|
620
|
+
{ "name": "medium" },
|
|
621
|
+
{ "name": "large" }
|
|
622
|
+
]
|
|
623
|
+
},
|
|
624
|
+
{
|
|
591
625
|
"name": "disabled",
|
|
592
626
|
"description": "Disables the checkbox.",
|
|
593
627
|
"values": []
|
|
@@ -672,6 +706,37 @@
|
|
|
672
706
|
],
|
|
673
707
|
"references": []
|
|
674
708
|
},
|
|
709
|
+
{
|
|
710
|
+
"name": "flow-ui-color-mapper",
|
|
711
|
+
"description": "A component for defining mappings between data values and colors.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-change** - Fired when the color mapper's value changes.",
|
|
712
|
+
"attributes": [
|
|
713
|
+
{
|
|
714
|
+
"name": "options",
|
|
715
|
+
"description": "The color mapper configuration specifying available fields.",
|
|
716
|
+
"values": [{ "name": "ColorMapperOptions" }]
|
|
717
|
+
},
|
|
718
|
+
{
|
|
719
|
+
"name": "value",
|
|
720
|
+
"description": "The current value of the color mapper.",
|
|
721
|
+
"values": [{ "name": "ColorMapperValue" }]
|
|
722
|
+
},
|
|
723
|
+
{
|
|
724
|
+
"name": "size",
|
|
725
|
+
"description": "The size of the color mapper component.",
|
|
726
|
+
"values": [
|
|
727
|
+
{ "name": "small" },
|
|
728
|
+
{ "name": "medium" },
|
|
729
|
+
{ "name": "large" }
|
|
730
|
+
]
|
|
731
|
+
},
|
|
732
|
+
{
|
|
733
|
+
"name": "swatches",
|
|
734
|
+
"description": "One or more predefined color swatches to display as presets in the color picker. Can include any format the color\npicker can parse, including HEX(A), RGB(A), HSL(A), HSV(A), and CSS color names. Each color must be separated by a\nsemicolon (`;`). Alternatively, you can pass an array of color values to this property using JavaScript.",
|
|
735
|
+
"values": [{ "name": "string[]" }]
|
|
736
|
+
}
|
|
737
|
+
],
|
|
738
|
+
"references": []
|
|
739
|
+
},
|
|
675
740
|
{
|
|
676
741
|
"name": "flow-ui-color-picker",
|
|
677
742
|
"description": "Color pickers allow the user to select a color.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-blur** - Emitted when the color picker loses focus.\n- **flow-ui-change** - Emitted when the color picker's value changes.\n- **flow-ui-focus** - Emitted when the color picker receives focus.\n- **flow-ui-input** - Emitted when the color picker 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 color picker.\n- **blur()** - Removes focus from the color picker.\n- **getFormattedValue(format: _'hex' | 'hexa' | 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'hsv' | 'hsva'_)** - Returns the current value as a string in the specified format.\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 color picker's form label. Alternatively, you can use the `label` attribute.\n\n### **CSS Properties:**\n - **--grid-width** - The width of the color grid. _(default: undefined)_\n- **--grid-height** - The height of the color grid. _(default: undefined)_\n- **--grid-handle-size** - The size of the color grid's handle. _(default: undefined)_\n- **--slider-height** - The height of the hue and alpha sliders. _(default: undefined)_\n- **--slider-handle-size** - The diameter of the slider's handle. _(default: undefined)_\n- **--swatch-size** - The size of each predefined color swatch. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **trigger** - The color picker's dropdown trigger.\n- **swatches** - The container that holds the swatches.\n- **swatch** - Each individual swatch.\n- **grid** - The color grid.\n- **grid-handle** - The color grid's handle.\n- **slider** - Hue and opacity sliders.\n- **slider-handle** - Hue and opacity slider handles.\n- **hue-slider** - The hue slider.\n- **hue-slider-handle** - The hue slider's handle.\n- **opacity-slider** - The opacity slider.\n- **opacity-slider-handle** - The opacity slider's handle.\n- **preview** - The preview color.\n- **input** - The text input.\n- **eye-dropper-button** - The eye dropper button.\n- **eye-dropper-button__base** - The eye dropper button's exported `button` part.\n- **eye-dropper-button__prefix** - The eye dropper button's exported `prefix` part.\n- **eye-dropper-button__label** - The eye dropper button's exported `label` part.\n- **eye-dropper-button__suffix** - The eye dropper button's exported `suffix` part.\n- **eye-dropper-button__caret** - The eye dropper button's exported `caret` part.\n- **format-button** - The format button.\n- **format-button__base** - The format button's exported `button` part.\n- **format-button__prefix** - The format button's exported `prefix` part.\n- **format-button__label** - The format button's exported `label` part.\n- **format-button__suffix** - The format button's exported `suffix` part.\n- **format-button__caret** - The format button's exported `caret` part.",
|
|
@@ -787,37 +852,6 @@
|
|
|
787
852
|
],
|
|
788
853
|
"references": []
|
|
789
854
|
},
|
|
790
|
-
{
|
|
791
|
-
"name": "flow-ui-color-mapper",
|
|
792
|
-
"description": "A component for defining mappings between data values and colors.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-change** - Fired when the color mapper's value changes.",
|
|
793
|
-
"attributes": [
|
|
794
|
-
{
|
|
795
|
-
"name": "options",
|
|
796
|
-
"description": "The color mapper configuration specifying available fields.",
|
|
797
|
-
"values": [{ "name": "ColorMapperOptions" }]
|
|
798
|
-
},
|
|
799
|
-
{
|
|
800
|
-
"name": "value",
|
|
801
|
-
"description": "The current value of the color mapper.",
|
|
802
|
-
"values": [{ "name": "ColorMapperValue" }]
|
|
803
|
-
},
|
|
804
|
-
{
|
|
805
|
-
"name": "size",
|
|
806
|
-
"description": "The size of the color mapper component.",
|
|
807
|
-
"values": [
|
|
808
|
-
{ "name": "small" },
|
|
809
|
-
{ "name": "medium" },
|
|
810
|
-
{ "name": "large" }
|
|
811
|
-
]
|
|
812
|
-
},
|
|
813
|
-
{
|
|
814
|
-
"name": "swatches",
|
|
815
|
-
"description": "One or more predefined color swatches to display as presets in the color picker. Can include any format the color\npicker can parse, including HEX(A), RGB(A), HSL(A), HSV(A), and CSS color names. Each color must be separated by a\nsemicolon (`;`). Alternatively, you can pass an array of color values to this property using JavaScript.",
|
|
816
|
-
"values": [{ "name": "string[]" }]
|
|
817
|
-
}
|
|
818
|
-
],
|
|
819
|
-
"references": []
|
|
820
|
-
},
|
|
821
855
|
{
|
|
822
856
|
"name": "flow-ui-color-stop",
|
|
823
857
|
"description": "A single color stop used by the `flow-ui-color-mapper` component.\n\n\n---\n\n\n\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()** - 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.",
|
|
@@ -1184,6 +1218,46 @@
|
|
|
1184
1218
|
],
|
|
1185
1219
|
"references": []
|
|
1186
1220
|
},
|
|
1221
|
+
{
|
|
1222
|
+
"name": "flow-ui-form-group",
|
|
1223
|
+
"description": "Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The default slot where `<flow-ui-radio>` or `<flow-ui-tool-button>` elements are placed.\n- **label** - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label` 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- **button-group** - The button group that wraps radio buttons.\n- **button-group__base** - The button group's `base` part.",
|
|
1224
|
+
"attributes": [
|
|
1225
|
+
{
|
|
1226
|
+
"name": "label",
|
|
1227
|
+
"description": "The form group's label. If you need to display HTML, use the `label` slot instead.",
|
|
1228
|
+
"values": []
|
|
1229
|
+
},
|
|
1230
|
+
{
|
|
1231
|
+
"name": "size",
|
|
1232
|
+
"description": "The form group's size. Child form control will automatically be set to the selected size.",
|
|
1233
|
+
"values": [
|
|
1234
|
+
{ "name": "small" },
|
|
1235
|
+
{ "name": "medium" },
|
|
1236
|
+
{ "name": "large" }
|
|
1237
|
+
]
|
|
1238
|
+
},
|
|
1239
|
+
{
|
|
1240
|
+
"name": "help-text",
|
|
1241
|
+
"description": "The form groups's help text. If you need to display HTML, use the `help-text` slot instead.",
|
|
1242
|
+
"values": []
|
|
1243
|
+
},
|
|
1244
|
+
{
|
|
1245
|
+
"name": "borders",
|
|
1246
|
+
"description": "Set to `true` to display form group borders.",
|
|
1247
|
+
"values": []
|
|
1248
|
+
},
|
|
1249
|
+
{
|
|
1250
|
+
"name": "variant",
|
|
1251
|
+
"description": "The form group's theme variant.",
|
|
1252
|
+
"values": [
|
|
1253
|
+
{ "name": "default" },
|
|
1254
|
+
{ "name": "warning" },
|
|
1255
|
+
{ "name": "danger" }
|
|
1256
|
+
]
|
|
1257
|
+
}
|
|
1258
|
+
],
|
|
1259
|
+
"references": []
|
|
1260
|
+
},
|
|
1187
1261
|
{
|
|
1188
1262
|
"name": "flow-ui-gauge",
|
|
1189
1263
|
"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).",
|
|
@@ -1222,41 +1296,28 @@
|
|
|
1222
1296
|
"references": []
|
|
1223
1297
|
},
|
|
1224
1298
|
{
|
|
1225
|
-
"name": "flow-ui-
|
|
1226
|
-
"description": "
|
|
1299
|
+
"name": "flow-ui-icon",
|
|
1300
|
+
"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.",
|
|
1227
1301
|
"attributes": [
|
|
1228
1302
|
{
|
|
1229
|
-
"name": "
|
|
1230
|
-
"description": "The
|
|
1303
|
+
"name": "name",
|
|
1304
|
+
"description": "The name of the icon to draw. Available names depend on the icon library being used.",
|
|
1231
1305
|
"values": []
|
|
1232
1306
|
},
|
|
1233
1307
|
{
|
|
1234
|
-
"name": "
|
|
1235
|
-
"description": "
|
|
1236
|
-
"values": [
|
|
1237
|
-
{ "name": "small" },
|
|
1238
|
-
{ "name": "medium" },
|
|
1239
|
-
{ "name": "large" }
|
|
1240
|
-
]
|
|
1241
|
-
},
|
|
1242
|
-
{
|
|
1243
|
-
"name": "help-text",
|
|
1244
|
-
"description": "The form groups's help text. If you need to display HTML, use the `help-text` slot instead.",
|
|
1308
|
+
"name": "src",
|
|
1309
|
+
"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.",
|
|
1245
1310
|
"values": []
|
|
1246
1311
|
},
|
|
1247
1312
|
{
|
|
1248
|
-
"name": "
|
|
1249
|
-
"description": "
|
|
1313
|
+
"name": "label",
|
|
1314
|
+
"description": "An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and\nignored by assistive devices.",
|
|
1250
1315
|
"values": []
|
|
1251
1316
|
},
|
|
1252
1317
|
{
|
|
1253
|
-
"name": "
|
|
1254
|
-
"description": "The
|
|
1255
|
-
"values": [
|
|
1256
|
-
{ "name": "default" },
|
|
1257
|
-
{ "name": "warning" },
|
|
1258
|
-
{ "name": "danger" }
|
|
1259
|
-
]
|
|
1318
|
+
"name": "library",
|
|
1319
|
+
"description": "The name of a registered custom icon library.",
|
|
1320
|
+
"values": []
|
|
1260
1321
|
}
|
|
1261
1322
|
],
|
|
1262
1323
|
"references": []
|
|
@@ -1352,71 +1413,6 @@
|
|
|
1352
1413
|
],
|
|
1353
1414
|
"references": []
|
|
1354
1415
|
},
|
|
1355
|
-
{
|
|
1356
|
-
"name": "flow-ui-icon",
|
|
1357
|
-
"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.",
|
|
1358
|
-
"attributes": [
|
|
1359
|
-
{
|
|
1360
|
-
"name": "name",
|
|
1361
|
-
"description": "The name of the icon to draw. Available names depend on the icon library being used.",
|
|
1362
|
-
"values": []
|
|
1363
|
-
},
|
|
1364
|
-
{
|
|
1365
|
-
"name": "src",
|
|
1366
|
-
"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.",
|
|
1367
|
-
"values": []
|
|
1368
|
-
},
|
|
1369
|
-
{
|
|
1370
|
-
"name": "label",
|
|
1371
|
-
"description": "An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and\nignored by assistive devices.",
|
|
1372
|
-
"values": []
|
|
1373
|
-
},
|
|
1374
|
-
{
|
|
1375
|
-
"name": "library",
|
|
1376
|
-
"description": "The name of a registered custom icon library.",
|
|
1377
|
-
"values": []
|
|
1378
|
-
}
|
|
1379
|
-
],
|
|
1380
|
-
"references": []
|
|
1381
|
-
},
|
|
1382
|
-
{
|
|
1383
|
-
"name": "flow-ui-list-item",
|
|
1384
|
-
"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.",
|
|
1385
|
-
"attributes": [
|
|
1386
|
-
{
|
|
1387
|
-
"name": "label",
|
|
1388
|
-
"description": "The label text for the list item.",
|
|
1389
|
-
"values": []
|
|
1390
|
-
},
|
|
1391
|
-
{
|
|
1392
|
-
"name": "value",
|
|
1393
|
-
"description": "The tracking value (id) for the list item.",
|
|
1394
|
-
"values": []
|
|
1395
|
-
},
|
|
1396
|
-
{ "name": "checked", "values": [] },
|
|
1397
|
-
{
|
|
1398
|
-
"name": "editable",
|
|
1399
|
-
"description": "Set to enable renaming of the list item text.",
|
|
1400
|
-
"values": []
|
|
1401
|
-
},
|
|
1402
|
-
{
|
|
1403
|
-
"name": "reorder",
|
|
1404
|
-
"description": "Set to reordering of the list item.",
|
|
1405
|
-
"values": []
|
|
1406
|
-
},
|
|
1407
|
-
{
|
|
1408
|
-
"name": "removable",
|
|
1409
|
-
"description": "Set to enable removing the list item.",
|
|
1410
|
-
"values": []
|
|
1411
|
-
},
|
|
1412
|
-
{
|
|
1413
|
-
"name": "disabled",
|
|
1414
|
-
"description": "Set to enable removing the list item.",
|
|
1415
|
-
"values": []
|
|
1416
|
-
}
|
|
1417
|
-
],
|
|
1418
|
-
"references": []
|
|
1419
|
-
},
|
|
1420
1416
|
{
|
|
1421
1417
|
"name": "flow-ui-input",
|
|
1422
1418
|
"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- **select()** - Selects all the text in the input.\n- **setSelectionRange(selectionStart: _number_, selectionEnd: _number_, selectionDirection: _'forward' | 'backward' | 'none'_)** - Sets the start and end positions of the text selection (0-based).\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectMode: _'select' | 'start' | 'end' | 'preserve'_)** - Replaces a range of text with a new string.\n- **showPicker()** - Displays the browser picker for an input element (only works if the browser supports it for the input type).\n- **stepUp()** - Increments the value of a numeric input type by the value of the step attribute.\n- **stepDown()** - Decrements the value of a numeric input type 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 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.",
|
|
@@ -1629,12 +1625,6 @@
|
|
|
1629
1625
|
],
|
|
1630
1626
|
"references": []
|
|
1631
1627
|
},
|
|
1632
|
-
{
|
|
1633
|
-
"name": "flow-ui-menu",
|
|
1634
|
-
"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.",
|
|
1635
|
-
"attributes": [],
|
|
1636
|
-
"references": []
|
|
1637
|
-
},
|
|
1638
1628
|
{
|
|
1639
1629
|
"name": "flow-ui-list",
|
|
1640
1630
|
"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.",
|
|
@@ -1668,24 +1658,62 @@
|
|
|
1668
1658
|
"references": []
|
|
1669
1659
|
},
|
|
1670
1660
|
{
|
|
1671
|
-
"name": "flow-ui-
|
|
1672
|
-
"description": "
|
|
1661
|
+
"name": "flow-ui-list-item",
|
|
1662
|
+
"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.",
|
|
1673
1663
|
"attributes": [
|
|
1674
1664
|
{
|
|
1675
|
-
"name": "
|
|
1676
|
-
"description": "The
|
|
1665
|
+
"name": "label",
|
|
1666
|
+
"description": "The label text for the list item.",
|
|
1677
1667
|
"values": []
|
|
1678
1668
|
},
|
|
1679
1669
|
{
|
|
1680
|
-
"name": "
|
|
1681
|
-
"description": "The
|
|
1670
|
+
"name": "value",
|
|
1671
|
+
"description": "The tracking value (id) for the list item.",
|
|
1682
1672
|
"values": []
|
|
1683
1673
|
},
|
|
1674
|
+
{ "name": "checked", "values": [] },
|
|
1684
1675
|
{
|
|
1685
|
-
"name": "
|
|
1686
|
-
"description": "
|
|
1687
|
-
"values": [
|
|
1688
|
-
},
|
|
1676
|
+
"name": "editable",
|
|
1677
|
+
"description": "Set to enable renaming of the list item text.",
|
|
1678
|
+
"values": []
|
|
1679
|
+
},
|
|
1680
|
+
{
|
|
1681
|
+
"name": "reorder",
|
|
1682
|
+
"description": "Set to reordering of the list item.",
|
|
1683
|
+
"values": []
|
|
1684
|
+
},
|
|
1685
|
+
{
|
|
1686
|
+
"name": "removable",
|
|
1687
|
+
"description": "Set to enable removing the list item.",
|
|
1688
|
+
"values": []
|
|
1689
|
+
},
|
|
1690
|
+
{
|
|
1691
|
+
"name": "disabled",
|
|
1692
|
+
"description": "Set to enable removing the list item.",
|
|
1693
|
+
"values": []
|
|
1694
|
+
}
|
|
1695
|
+
],
|
|
1696
|
+
"references": []
|
|
1697
|
+
},
|
|
1698
|
+
{
|
|
1699
|
+
"name": "flow-ui-map",
|
|
1700
|
+
"description": "Display a Flo.w map.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-map-load** - Dispatched when the map is first initialized and has completed loading. The Flo.w Core map instance can be retrieved from the event `detail` property.\n\n### **CSS Parts:**\n - **base** - The base element of the component.\n- **busy-indicator** - The busy indicator flow-ui-progress-bar.\n- **control-container** - The map control containers.\n- **control-container--top-left** - The top left control container element.\n- **control-container--top-right** - The top right control container element.\n- **control-container--bottom-left** - The bottom left control container element.\n- **control-container--bottom-right** - The bottom right control container element.",
|
|
1701
|
+
"attributes": [
|
|
1702
|
+
{
|
|
1703
|
+
"name": "map-id",
|
|
1704
|
+
"description": "The map ID. If not provided, a unique ID will be generated.",
|
|
1705
|
+
"values": []
|
|
1706
|
+
},
|
|
1707
|
+
{
|
|
1708
|
+
"name": "base-style",
|
|
1709
|
+
"description": "The base style of the map.",
|
|
1710
|
+
"values": []
|
|
1711
|
+
},
|
|
1712
|
+
{
|
|
1713
|
+
"name": "center",
|
|
1714
|
+
"description": "The center of the map specified as a longitude and latitude pair.\n\nAlternatively, use the `setCenter` method to update the center of the map\nwith animation options.",
|
|
1715
|
+
"values": [{ "name": "[number" }, { "name": "number]" }]
|
|
1716
|
+
},
|
|
1689
1717
|
{
|
|
1690
1718
|
"name": "zoom",
|
|
1691
1719
|
"description": "The zoom level of the map.\n\nAlternatively, use the `setCenter` method to update the center of the map\nwith animation options.",
|
|
@@ -1724,6 +1752,12 @@
|
|
|
1724
1752
|
],
|
|
1725
1753
|
"references": []
|
|
1726
1754
|
},
|
|
1755
|
+
{
|
|
1756
|
+
"name": "flow-ui-menu",
|
|
1757
|
+
"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.",
|
|
1758
|
+
"attributes": [],
|
|
1759
|
+
"references": []
|
|
1760
|
+
},
|
|
1727
1761
|
{
|
|
1728
1762
|
"name": "flow-ui-menu-item",
|
|
1729
1763
|
"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).",
|
|
@@ -1755,6 +1789,12 @@
|
|
|
1755
1789
|
],
|
|
1756
1790
|
"references": []
|
|
1757
1791
|
},
|
|
1792
|
+
{
|
|
1793
|
+
"name": "flow-ui-menu-label",
|
|
1794
|
+
"description": "Menu labels are used to describe a group of menu items.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The menu label's content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
1795
|
+
"attributes": [],
|
|
1796
|
+
"references": []
|
|
1797
|
+
},
|
|
1758
1798
|
{
|
|
1759
1799
|
"name": "flow-ui-mutation-observer",
|
|
1760
1800
|
"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.",
|
|
@@ -1792,12 +1832,6 @@
|
|
|
1792
1832
|
],
|
|
1793
1833
|
"references": []
|
|
1794
1834
|
},
|
|
1795
|
-
{
|
|
1796
|
-
"name": "flow-ui-menu-label",
|
|
1797
|
-
"description": "Menu labels are used to describe a group of menu items.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The menu label's content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
1798
|
-
"attributes": [],
|
|
1799
|
-
"references": []
|
|
1800
|
-
},
|
|
1801
1835
|
{
|
|
1802
1836
|
"name": "flow-ui-option",
|
|
1803
1837
|
"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.",
|
|
@@ -1847,22 +1881,22 @@
|
|
|
1847
1881
|
"references": []
|
|
1848
1882
|
},
|
|
1849
1883
|
{
|
|
1850
|
-
"name": "flow-ui-
|
|
1851
|
-
"description": "
|
|
1884
|
+
"name": "flow-ui-panel-header",
|
|
1885
|
+
"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.",
|
|
1852
1886
|
"attributes": [
|
|
1853
1887
|
{
|
|
1854
|
-
"name": "
|
|
1855
|
-
"description": "
|
|
1888
|
+
"name": "closed",
|
|
1889
|
+
"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.",
|
|
1856
1890
|
"values": []
|
|
1857
1891
|
},
|
|
1858
1892
|
{
|
|
1859
|
-
"name": "
|
|
1860
|
-
"description": "
|
|
1893
|
+
"name": "title",
|
|
1894
|
+
"description": "The header title. Use the `title` slot instead to display HTML.",
|
|
1861
1895
|
"values": []
|
|
1862
1896
|
},
|
|
1863
1897
|
{
|
|
1864
|
-
"name": "
|
|
1865
|
-
"description": "
|
|
1898
|
+
"name": "fixed",
|
|
1899
|
+
"description": "Set to `true` to hide the panel expand/collapse button.",
|
|
1866
1900
|
"values": []
|
|
1867
1901
|
}
|
|
1868
1902
|
],
|
|
@@ -2013,80 +2047,118 @@
|
|
|
2013
2047
|
"references": []
|
|
2014
2048
|
},
|
|
2015
2049
|
{
|
|
2016
|
-
"name": "flow-ui-
|
|
2017
|
-
"description": "
|
|
2050
|
+
"name": "flow-ui-progress-bar",
|
|
2051
|
+
"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.",
|
|
2018
2052
|
"attributes": [
|
|
2019
|
-
{
|
|
2020
|
-
"name": "size",
|
|
2021
|
-
"description": "The query builder's size.",
|
|
2022
|
-
"values": [
|
|
2023
|
-
{ "name": "small" },
|
|
2024
|
-
{ "name": "medium" },
|
|
2025
|
-
{ "name": "large" }
|
|
2026
|
-
]
|
|
2027
|
-
},
|
|
2028
|
-
{
|
|
2029
|
-
"name": "disabled",
|
|
2030
|
-
"description": "Disables the select control.",
|
|
2031
|
-
"values": []
|
|
2032
|
-
},
|
|
2033
2053
|
{
|
|
2034
2054
|
"name": "label",
|
|
2035
|
-
"description": "
|
|
2055
|
+
"description": "A custom label for assistive devices.",
|
|
2036
2056
|
"values": []
|
|
2037
2057
|
},
|
|
2038
2058
|
{
|
|
2039
|
-
"name": "
|
|
2040
|
-
"description": "The
|
|
2059
|
+
"name": "value",
|
|
2060
|
+
"description": "The current progress as a percentage, 0 to 100.",
|
|
2041
2061
|
"values": []
|
|
2042
2062
|
},
|
|
2043
2063
|
{
|
|
2044
|
-
"name": "
|
|
2045
|
-
"description": "
|
|
2064
|
+
"name": "indeterminate",
|
|
2065
|
+
"description": "When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state.",
|
|
2046
2066
|
"values": []
|
|
2047
2067
|
},
|
|
2048
2068
|
{
|
|
2049
|
-
"name": "
|
|
2050
|
-
"description": "
|
|
2051
|
-
"values": [
|
|
2069
|
+
"name": "variant",
|
|
2070
|
+
"description": "The progress bar's theme variant",
|
|
2071
|
+
"values": [
|
|
2072
|
+
{ "name": "primary" },
|
|
2073
|
+
{ "name": "secondary" },
|
|
2074
|
+
{ "name": "success" },
|
|
2075
|
+
{ "name": "neutral" },
|
|
2076
|
+
{ "name": "warning" },
|
|
2077
|
+
{ "name": "danger" }
|
|
2078
|
+
]
|
|
2052
2079
|
}
|
|
2053
2080
|
],
|
|
2054
2081
|
"references": []
|
|
2055
2082
|
},
|
|
2056
2083
|
{
|
|
2057
|
-
"name": "flow-ui-
|
|
2058
|
-
"description": "
|
|
2084
|
+
"name": "flow-ui-progress-ring",
|
|
2085
|
+
"description": "Progress rings are used to show the progress of a determinate operation in a circular fashion.\n\n\n---\n\n\n\n\n### **Slots:**\n - **label** - A label to show inside the ring.\n\n### **CSS Properties:**\n - **--size** - The diameter of the progress ring (cannot be a percentage). _(default: undefined)_\n- **--track-width** - The width of the track. _(default: undefined)_\n- **--track-color** - The color of the track. _(default: undefined)_\n- **--indicator-width** - The width of the indicator. Defaults to the track width. _(default: undefined)_\n- **--indicator-color** - The color of the indicator. _(default: undefined)_\n- **--indicator-transition-duration** - The duration of the indicator's transition when the value changes. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label** - The progress ring label.",
|
|
2059
2086
|
"attributes": [
|
|
2060
2087
|
{
|
|
2061
|
-
"name": "
|
|
2062
|
-
"description": "
|
|
2088
|
+
"name": "label",
|
|
2089
|
+
"description": "A custom label for assistive devices.",
|
|
2063
2090
|
"values": []
|
|
2064
2091
|
},
|
|
2065
2092
|
{
|
|
2066
|
-
"name": "
|
|
2067
|
-
"description": "The
|
|
2093
|
+
"name": "value",
|
|
2094
|
+
"description": "The current progress as a percentage, 0 to 100.",
|
|
2068
2095
|
"values": []
|
|
2069
2096
|
},
|
|
2070
2097
|
{
|
|
2071
|
-
"name": "
|
|
2072
|
-
"description": "
|
|
2098
|
+
"name": "indeterminate",
|
|
2099
|
+
"description": "If the progress animation is indeterminate",
|
|
2073
2100
|
"values": []
|
|
2101
|
+
},
|
|
2102
|
+
{
|
|
2103
|
+
"name": "variant",
|
|
2104
|
+
"description": "The progress ring's theme variant",
|
|
2105
|
+
"values": [
|
|
2106
|
+
{ "name": "primary" },
|
|
2107
|
+
{ "name": "secondary" },
|
|
2108
|
+
{ "name": "success" },
|
|
2109
|
+
{ "name": "neutral" },
|
|
2110
|
+
{ "name": "warning" },
|
|
2111
|
+
{ "name": "danger" }
|
|
2112
|
+
]
|
|
2113
|
+
},
|
|
2114
|
+
{
|
|
2115
|
+
"name": "size",
|
|
2116
|
+
"description": "The progress ring's size",
|
|
2117
|
+
"values": [
|
|
2118
|
+
{ "name": "small" },
|
|
2119
|
+
{ "name": "medium" },
|
|
2120
|
+
{ "name": "large" }
|
|
2121
|
+
]
|
|
2074
2122
|
}
|
|
2075
2123
|
],
|
|
2076
2124
|
"references": []
|
|
2077
2125
|
},
|
|
2078
2126
|
{
|
|
2079
|
-
"name": "flow-ui-
|
|
2080
|
-
"description": "
|
|
2127
|
+
"name": "flow-ui-query-builder",
|
|
2128
|
+
"description": "Query builder component\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-input** - Emitted when the control's value changes.\n- **flow-ui-change** - Emitted when the control's value changes.\n- **flow-ui-select** - Emitted when a custom menu item is selected.\n- **flow-ui-remove** - Emitted when the user attempts to remove a rule or ruleset. Calling `event.preventDefault()` will cancel the removal.\n- **flow-ui-clear** - Emitted when the user clears all rules from the tool menu.\n- **flow-ui-apply** - Emitted when the user presses 'Enter' twice in the same value input control.\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\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.",
|
|
2081
2129
|
"attributes": [
|
|
2082
2130
|
{
|
|
2083
|
-
"name": "
|
|
2084
|
-
"description": "The
|
|
2131
|
+
"name": "size",
|
|
2132
|
+
"description": "The query builder's size.",
|
|
2133
|
+
"values": [
|
|
2134
|
+
{ "name": "small" },
|
|
2135
|
+
{ "name": "medium" },
|
|
2136
|
+
{ "name": "large" }
|
|
2137
|
+
]
|
|
2138
|
+
},
|
|
2139
|
+
{
|
|
2140
|
+
"name": "disabled",
|
|
2141
|
+
"description": "Disables the select control.",
|
|
2085
2142
|
"values": []
|
|
2086
2143
|
},
|
|
2087
2144
|
{
|
|
2088
2145
|
"name": "label",
|
|
2089
|
-
"description": "
|
|
2146
|
+
"description": "The query builders's label. If you need to display HTML, use the `label` slot instead.",
|
|
2147
|
+
"values": []
|
|
2148
|
+
},
|
|
2149
|
+
{
|
|
2150
|
+
"name": "help-text",
|
|
2151
|
+
"description": "The query builders's help text. If you need to display HTML, use the `help-text` slot instead.",
|
|
2152
|
+
"values": []
|
|
2153
|
+
},
|
|
2154
|
+
{
|
|
2155
|
+
"name": "tree-lines",
|
|
2156
|
+
"description": "Display tree connector lines between query rules",
|
|
2157
|
+
"values": []
|
|
2158
|
+
},
|
|
2159
|
+
{
|
|
2160
|
+
"name": "borders",
|
|
2161
|
+
"description": "Display control borders",
|
|
2090
2162
|
"values": []
|
|
2091
2163
|
}
|
|
2092
2164
|
],
|
|
@@ -2186,6 +2258,90 @@
|
|
|
2186
2258
|
],
|
|
2187
2259
|
"references": []
|
|
2188
2260
|
},
|
|
2261
|
+
{
|
|
2262
|
+
"name": "flow-ui-range",
|
|
2263
|
+
"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- **--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- **number-input** - The range's number input control.",
|
|
2264
|
+
"attributes": [
|
|
2265
|
+
{
|
|
2266
|
+
"name": "name",
|
|
2267
|
+
"description": "The name of the range, submitted as a name/value pair with form data.",
|
|
2268
|
+
"values": []
|
|
2269
|
+
},
|
|
2270
|
+
{
|
|
2271
|
+
"name": "value",
|
|
2272
|
+
"description": "The current value of the range, submitted as a name/value pair with form data.",
|
|
2273
|
+
"values": []
|
|
2274
|
+
},
|
|
2275
|
+
{
|
|
2276
|
+
"name": "size",
|
|
2277
|
+
"description": "The input's size.",
|
|
2278
|
+
"values": [
|
|
2279
|
+
{ "name": "small" },
|
|
2280
|
+
{ "name": "medium" },
|
|
2281
|
+
{ "name": "large" }
|
|
2282
|
+
]
|
|
2283
|
+
},
|
|
2284
|
+
{
|
|
2285
|
+
"name": "label",
|
|
2286
|
+
"description": "The range's label. If you need to display HTML, use the `label` slot instead.",
|
|
2287
|
+
"values": []
|
|
2288
|
+
},
|
|
2289
|
+
{
|
|
2290
|
+
"name": "help-text",
|
|
2291
|
+
"description": "The range's help text. If you need to display HTML, use the help-text slot instead.",
|
|
2292
|
+
"values": []
|
|
2293
|
+
},
|
|
2294
|
+
{
|
|
2295
|
+
"name": "disabled",
|
|
2296
|
+
"description": "Disables the range.",
|
|
2297
|
+
"values": []
|
|
2298
|
+
},
|
|
2299
|
+
{
|
|
2300
|
+
"name": "min",
|
|
2301
|
+
"description": "The minimum acceptable value of the range.",
|
|
2302
|
+
"values": []
|
|
2303
|
+
},
|
|
2304
|
+
{
|
|
2305
|
+
"name": "max",
|
|
2306
|
+
"description": "The maximum acceptable value of the range.",
|
|
2307
|
+
"values": []
|
|
2308
|
+
},
|
|
2309
|
+
{
|
|
2310
|
+
"name": "step",
|
|
2311
|
+
"description": "The interval at which the range will increase and decrease.",
|
|
2312
|
+
"values": []
|
|
2313
|
+
},
|
|
2314
|
+
{
|
|
2315
|
+
"name": "format",
|
|
2316
|
+
"description": "Number format to use for numeric display. (D3 format string)",
|
|
2317
|
+
"values": []
|
|
2318
|
+
},
|
|
2319
|
+
{
|
|
2320
|
+
"name": "form",
|
|
2321
|
+
"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.",
|
|
2322
|
+
"values": []
|
|
2323
|
+
},
|
|
2324
|
+
{
|
|
2325
|
+
"name": "inline",
|
|
2326
|
+
"description": "Display the control in the 'inline' form control style.",
|
|
2327
|
+
"values": []
|
|
2328
|
+
},
|
|
2329
|
+
{ "name": "no-input", "values": [] }
|
|
2330
|
+
],
|
|
2331
|
+
"references": []
|
|
2332
|
+
},
|
|
2333
|
+
{
|
|
2334
|
+
"name": "flow-ui-resize-observer",
|
|
2335
|
+
"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.",
|
|
2336
|
+
"attributes": [
|
|
2337
|
+
{
|
|
2338
|
+
"name": "disabled",
|
|
2339
|
+
"description": "Disables the observer.",
|
|
2340
|
+
"values": []
|
|
2341
|
+
}
|
|
2342
|
+
],
|
|
2343
|
+
"references": []
|
|
2344
|
+
},
|
|
2189
2345
|
{
|
|
2190
2346
|
"name": "flow-ui-select",
|
|
2191
2347
|
"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.",
|
|
@@ -2297,92 +2453,24 @@
|
|
|
2297
2453
|
"references": []
|
|
2298
2454
|
},
|
|
2299
2455
|
{
|
|
2300
|
-
"name": "flow-ui-
|
|
2301
|
-
"description": "
|
|
2302
|
-
"attributes": [
|
|
2303
|
-
{
|
|
2304
|
-
"name": "disabled",
|
|
2305
|
-
"description": "Disables the observer.",
|
|
2306
|
-
"values": []
|
|
2307
|
-
}
|
|
2308
|
-
],
|
|
2309
|
-
"references": []
|
|
2310
|
-
},
|
|
2311
|
-
{
|
|
2312
|
-
"name": "flow-ui-spinner",
|
|
2313
|
-
"description": "Spinners are used to show the progress of an indeterminate operation.\n\n\n---\n\n\n\n\n### **CSS Properties:**\n - **--track-width** - The width of the track. _(default: undefined)_\n- **--track-color** - The color of the track. _(default: undefined)_\n- **--indicator-color** - The color of the spinner's indicator. _(default: undefined)_\n- **--speed** - The time it takes for the spinner to complete one animation cycle. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
2314
|
-
"attributes": [],
|
|
2315
|
-
"references": []
|
|
2316
|
-
},
|
|
2317
|
-
{
|
|
2318
|
-
"name": "flow-ui-range",
|
|
2319
|
-
"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- **--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- **number-input** - The range's number input control.",
|
|
2456
|
+
"name": "flow-ui-split-view",
|
|
2457
|
+
"description": "Split-views contain two or more split-view panes to create resizable areas.\n\n\n---\n\n\n",
|
|
2320
2458
|
"attributes": [
|
|
2321
2459
|
{
|
|
2322
|
-
"name": "
|
|
2323
|
-
"description": "
|
|
2324
|
-
"values": []
|
|
2325
|
-
},
|
|
2326
|
-
{
|
|
2327
|
-
"name": "value",
|
|
2328
|
-
"description": "The current value of the range, submitted as a name/value pair with form data.",
|
|
2329
|
-
"values": []
|
|
2330
|
-
},
|
|
2331
|
-
{
|
|
2332
|
-
"name": "size",
|
|
2333
|
-
"description": "The input's size.",
|
|
2334
|
-
"values": [
|
|
2335
|
-
{ "name": "small" },
|
|
2336
|
-
{ "name": "medium" },
|
|
2337
|
-
{ "name": "large" }
|
|
2338
|
-
]
|
|
2339
|
-
},
|
|
2340
|
-
{
|
|
2341
|
-
"name": "label",
|
|
2342
|
-
"description": "The range's label. If you need to display HTML, use the `label` slot instead.",
|
|
2343
|
-
"values": []
|
|
2344
|
-
},
|
|
2345
|
-
{
|
|
2346
|
-
"name": "help-text",
|
|
2347
|
-
"description": "The range's help text. If you need to display HTML, use the help-text slot instead.",
|
|
2348
|
-
"values": []
|
|
2349
|
-
},
|
|
2350
|
-
{
|
|
2351
|
-
"name": "disabled",
|
|
2352
|
-
"description": "Disables the range.",
|
|
2353
|
-
"values": []
|
|
2354
|
-
},
|
|
2355
|
-
{
|
|
2356
|
-
"name": "min",
|
|
2357
|
-
"description": "The minimum acceptable value of the range.",
|
|
2358
|
-
"values": []
|
|
2359
|
-
},
|
|
2360
|
-
{
|
|
2361
|
-
"name": "max",
|
|
2362
|
-
"description": "The maximum acceptable value of the range.",
|
|
2363
|
-
"values": []
|
|
2364
|
-
},
|
|
2365
|
-
{
|
|
2366
|
-
"name": "step",
|
|
2367
|
-
"description": "The interval at which the range will increase and decrease.",
|
|
2368
|
-
"values": []
|
|
2369
|
-
},
|
|
2370
|
-
{
|
|
2371
|
-
"name": "format",
|
|
2372
|
-
"description": "Number format to use for numeric display. (D3 format string)",
|
|
2460
|
+
"name": "no-drag-close",
|
|
2461
|
+
"description": "Disable drag-to-close behaviour.",
|
|
2373
2462
|
"values": []
|
|
2374
2463
|
},
|
|
2375
2464
|
{
|
|
2376
|
-
"name": "
|
|
2377
|
-
"description": "
|
|
2378
|
-
"values": []
|
|
2465
|
+
"name": "positions",
|
|
2466
|
+
"description": "The pane positions in CSS size units",
|
|
2467
|
+
"values": [{ "name": "string[]" }]
|
|
2379
2468
|
},
|
|
2380
2469
|
{
|
|
2381
|
-
"name": "
|
|
2382
|
-
"description": "
|
|
2470
|
+
"name": "vertical",
|
|
2471
|
+
"description": "Set to `true` for vertically-arranged panes. By default, panes are layed out horizontally.",
|
|
2383
2472
|
"values": []
|
|
2384
|
-
}
|
|
2385
|
-
{ "name": "no-input", "values": [] }
|
|
2473
|
+
}
|
|
2386
2474
|
],
|
|
2387
2475
|
"references": []
|
|
2388
2476
|
},
|
|
@@ -2472,28 +2560,6 @@
|
|
|
2472
2560
|
],
|
|
2473
2561
|
"references": []
|
|
2474
2562
|
},
|
|
2475
|
-
{
|
|
2476
|
-
"name": "flow-ui-split-view",
|
|
2477
|
-
"description": "Split-views contain two or more split-view panes to create resizable areas.\n\n\n---\n\n\n",
|
|
2478
|
-
"attributes": [
|
|
2479
|
-
{
|
|
2480
|
-
"name": "no-drag-close",
|
|
2481
|
-
"description": "Disable drag-to-close behaviour.",
|
|
2482
|
-
"values": []
|
|
2483
|
-
},
|
|
2484
|
-
{
|
|
2485
|
-
"name": "positions",
|
|
2486
|
-
"description": "The pane positions in CSS size units",
|
|
2487
|
-
"values": [{ "name": "string[]" }]
|
|
2488
|
-
},
|
|
2489
|
-
{
|
|
2490
|
-
"name": "vertical",
|
|
2491
|
-
"description": "Set to `true` for vertically-arranged panes. By default, panes are layed out horizontally.",
|
|
2492
|
-
"values": []
|
|
2493
|
-
}
|
|
2494
|
-
],
|
|
2495
|
-
"references": []
|
|
2496
|
-
},
|
|
2497
2563
|
{
|
|
2498
2564
|
"name": "flow-ui-stepper",
|
|
2499
2565
|
"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`",
|
|
@@ -2520,8 +2586,64 @@
|
|
|
2520
2586
|
"values": []
|
|
2521
2587
|
},
|
|
2522
2588
|
{
|
|
2523
|
-
"name": "complete",
|
|
2524
|
-
"description": "When true, the stepper panel is marked as complete",
|
|
2589
|
+
"name": "complete",
|
|
2590
|
+
"description": "When true, the stepper panel is marked as complete",
|
|
2591
|
+
"values": []
|
|
2592
|
+
}
|
|
2593
|
+
],
|
|
2594
|
+
"references": []
|
|
2595
|
+
},
|
|
2596
|
+
{
|
|
2597
|
+
"name": "flow-ui-switch",
|
|
2598
|
+
"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.",
|
|
2599
|
+
"attributes": [
|
|
2600
|
+
{
|
|
2601
|
+
"name": "name",
|
|
2602
|
+
"description": "The name of the switch, submitted as a name/value pair with form data.",
|
|
2603
|
+
"values": []
|
|
2604
|
+
},
|
|
2605
|
+
{
|
|
2606
|
+
"name": "value",
|
|
2607
|
+
"description": "The current value of the switch, submitted as a name/value pair with form data.",
|
|
2608
|
+
"values": []
|
|
2609
|
+
},
|
|
2610
|
+
{
|
|
2611
|
+
"name": "size",
|
|
2612
|
+
"description": "The switch's size.",
|
|
2613
|
+
"values": [
|
|
2614
|
+
{ "name": "small" },
|
|
2615
|
+
{ "name": "medium" },
|
|
2616
|
+
{ "name": "large" }
|
|
2617
|
+
]
|
|
2618
|
+
},
|
|
2619
|
+
{
|
|
2620
|
+
"name": "disabled",
|
|
2621
|
+
"description": "Disables the switch.",
|
|
2622
|
+
"values": []
|
|
2623
|
+
},
|
|
2624
|
+
{
|
|
2625
|
+
"name": "checked",
|
|
2626
|
+
"description": "Draws the switch in a checked state.",
|
|
2627
|
+
"values": []
|
|
2628
|
+
},
|
|
2629
|
+
{
|
|
2630
|
+
"name": "form",
|
|
2631
|
+
"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.",
|
|
2632
|
+
"values": []
|
|
2633
|
+
},
|
|
2634
|
+
{
|
|
2635
|
+
"name": "required",
|
|
2636
|
+
"description": "Makes the switch a required field.",
|
|
2637
|
+
"values": []
|
|
2638
|
+
},
|
|
2639
|
+
{
|
|
2640
|
+
"name": "help-text",
|
|
2641
|
+
"description": "The select's help text. If you need to display HTML, use the `help-text` slot instead.",
|
|
2642
|
+
"values": []
|
|
2643
|
+
},
|
|
2644
|
+
{
|
|
2645
|
+
"name": "divider",
|
|
2646
|
+
"description": "Indicates that the control should display a divider",
|
|
2525
2647
|
"values": []
|
|
2526
2648
|
}
|
|
2527
2649
|
],
|
|
@@ -2621,6 +2743,33 @@
|
|
|
2621
2743
|
],
|
|
2622
2744
|
"references": []
|
|
2623
2745
|
},
|
|
2746
|
+
{
|
|
2747
|
+
"name": "flow-ui-tab-panel",
|
|
2748
|
+
"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.",
|
|
2749
|
+
"attributes": [
|
|
2750
|
+
{
|
|
2751
|
+
"name": "name",
|
|
2752
|
+
"description": "The tab panel's name.",
|
|
2753
|
+
"values": []
|
|
2754
|
+
},
|
|
2755
|
+
{
|
|
2756
|
+
"name": "active",
|
|
2757
|
+
"description": "When true, the tab panel will be shown.",
|
|
2758
|
+
"values": []
|
|
2759
|
+
},
|
|
2760
|
+
{
|
|
2761
|
+
"name": "scrollable",
|
|
2762
|
+
"description": "Indicates whether the panel is scrollable. By default overflow is hidden.",
|
|
2763
|
+
"values": []
|
|
2764
|
+
},
|
|
2765
|
+
{
|
|
2766
|
+
"name": "padding",
|
|
2767
|
+
"description": "Indicates whether the panel body has padding.",
|
|
2768
|
+
"values": []
|
|
2769
|
+
}
|
|
2770
|
+
],
|
|
2771
|
+
"references": []
|
|
2772
|
+
},
|
|
2624
2773
|
{
|
|
2625
2774
|
"name": "flow-ui-tag",
|
|
2626
2775
|
"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.",
|
|
@@ -2661,33 +2810,6 @@
|
|
|
2661
2810
|
],
|
|
2662
2811
|
"references": []
|
|
2663
2812
|
},
|
|
2664
|
-
{
|
|
2665
|
-
"name": "flow-ui-tab-panel",
|
|
2666
|
-
"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.",
|
|
2667
|
-
"attributes": [
|
|
2668
|
-
{
|
|
2669
|
-
"name": "name",
|
|
2670
|
-
"description": "The tab panel's name.",
|
|
2671
|
-
"values": []
|
|
2672
|
-
},
|
|
2673
|
-
{
|
|
2674
|
-
"name": "active",
|
|
2675
|
-
"description": "When true, the tab panel will be shown.",
|
|
2676
|
-
"values": []
|
|
2677
|
-
},
|
|
2678
|
-
{
|
|
2679
|
-
"name": "scrollable",
|
|
2680
|
-
"description": "Indicates whether the panel is scrollable. By default overflow is hidden.",
|
|
2681
|
-
"values": []
|
|
2682
|
-
},
|
|
2683
|
-
{
|
|
2684
|
-
"name": "padding",
|
|
2685
|
-
"description": "Indicates whether the panel body has padding.",
|
|
2686
|
-
"values": []
|
|
2687
|
-
}
|
|
2688
|
-
],
|
|
2689
|
-
"references": []
|
|
2690
|
-
},
|
|
2691
2813
|
{
|
|
2692
2814
|
"name": "flow-ui-textarea",
|
|
2693
2815
|
"description": "Textareas collect data from the user and allow multiple lines of text.\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 textarea.\n- **blur()** - Removes focus from the textarea.\n- **select()** - Selects all the text in the textarea.\n- **scrollPosition(position: _{ top?: number; left?: number }_): _{ top: number; left: number } | undefined_** - Gets or sets the textarea's scroll position.\n- **setSelectionRange(selectionStart: _number_, selectionEnd: _number_, selectionDirection: _'forward' | 'backward' | 'none'_)** - Sets the start and end positions of the text selection (0-based).\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectMode: _'select' | 'start' | 'end' | 'preserve'_)** - Replaces a range of text with a new string.\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 textarea'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 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- **textarea** - The internal `<textarea>` control.",
|
|
@@ -2838,57 +2960,75 @@
|
|
|
2838
2960
|
"references": []
|
|
2839
2961
|
},
|
|
2840
2962
|
{
|
|
2841
|
-
"name": "flow-ui-
|
|
2842
|
-
"description": "
|
|
2963
|
+
"name": "flow-ui-timer",
|
|
2964
|
+
"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.",
|
|
2843
2965
|
"attributes": [
|
|
2844
2966
|
{
|
|
2845
|
-
"name": "
|
|
2846
|
-
"description": "The
|
|
2967
|
+
"name": "value",
|
|
2968
|
+
"description": "The value of the timer. (ISO8601 date/time string)",
|
|
2847
2969
|
"values": []
|
|
2848
2970
|
},
|
|
2849
2971
|
{
|
|
2850
|
-
"name": "
|
|
2851
|
-
"description": "The
|
|
2972
|
+
"name": "timezone",
|
|
2973
|
+
"description": "The timezone to use for display. (IANA timezone string).\nIf not set, the timezone will be the browser's local timezone.",
|
|
2852
2974
|
"values": []
|
|
2853
2975
|
},
|
|
2854
2976
|
{
|
|
2855
|
-
"name": "
|
|
2856
|
-
"description": "The
|
|
2857
|
-
"values": [
|
|
2858
|
-
{ "name": "small" },
|
|
2859
|
-
{ "name": "medium" },
|
|
2860
|
-
{ "name": "large" }
|
|
2861
|
-
]
|
|
2977
|
+
"name": "locale",
|
|
2978
|
+
"description": "The locale to use for display. (IETF BCP 47 language tag).\nIf not set, the locale will be the browser's default locale.",
|
|
2979
|
+
"values": []
|
|
2862
2980
|
},
|
|
2863
2981
|
{
|
|
2864
|
-
"name": "
|
|
2865
|
-
"description": "
|
|
2982
|
+
"name": "running",
|
|
2983
|
+
"description": "Set to `true` to start the timer running.",
|
|
2866
2984
|
"values": []
|
|
2867
2985
|
},
|
|
2868
2986
|
{
|
|
2869
|
-
"name": "
|
|
2870
|
-
"description": "
|
|
2987
|
+
"name": "dateFormat",
|
|
2988
|
+
"description": "The date format to use for display as a [Luxon format string](https://moment.github.io/luxon/#/formatting?id=table-of-tokens).",
|
|
2871
2989
|
"values": []
|
|
2872
2990
|
},
|
|
2873
2991
|
{
|
|
2874
|
-
"name": "
|
|
2875
|
-
"description": "
|
|
2992
|
+
"name": "dayFormat",
|
|
2993
|
+
"description": "The day format to use for display as a [Luxon format string](https://moment.github.io/luxon/#/formatting?id=table-of-tokens).",
|
|
2876
2994
|
"values": []
|
|
2877
2995
|
},
|
|
2878
2996
|
{
|
|
2879
|
-
"name": "
|
|
2880
|
-
"description": "
|
|
2997
|
+
"name": "timeFormat",
|
|
2998
|
+
"description": "The time format to use for display as a [Luxon format string](https://moment.github.io/luxon/#/formatting?id=table-of-tokens).",
|
|
2881
2999
|
"values": []
|
|
2882
3000
|
},
|
|
2883
3001
|
{
|
|
2884
|
-
"name": "
|
|
2885
|
-
"description": "The
|
|
3002
|
+
"name": "zoneFormat",
|
|
3003
|
+
"description": "The timezone format to use for display as a [Luxon format string](https://moment.github.io/luxon/#/formatting?id=table-of-tokens).",
|
|
2886
3004
|
"values": []
|
|
2887
3005
|
},
|
|
2888
3006
|
{
|
|
2889
|
-
"name": "
|
|
2890
|
-
"description": "
|
|
3007
|
+
"name": "major-step",
|
|
3008
|
+
"description": "The major step size to use for the timer step controls.",
|
|
3009
|
+
"values": []
|
|
3010
|
+
},
|
|
3011
|
+
{
|
|
3012
|
+
"name": "minor-step",
|
|
3013
|
+
"description": "The minor step size to use for the timer step controls.",
|
|
3014
|
+
"values": []
|
|
3015
|
+
},
|
|
3016
|
+
{
|
|
3017
|
+
"name": "hide-zone",
|
|
3018
|
+
"description": "Set to `true` to hide the timezone display.",
|
|
2891
3019
|
"values": []
|
|
3020
|
+
},
|
|
3021
|
+
{
|
|
3022
|
+
"name": "placement",
|
|
3023
|
+
"description": "The placement of the calendar popup relative to the timer control.",
|
|
3024
|
+
"values": [
|
|
3025
|
+
{ "name": "top" },
|
|
3026
|
+
{ "name": "top-end" },
|
|
3027
|
+
{ "name": "top-start" },
|
|
3028
|
+
{ "name": "bottom" },
|
|
3029
|
+
{ "name": "bottom-start" },
|
|
3030
|
+
{ "name": "bottom-end" }
|
|
3031
|
+
]
|
|
2892
3032
|
}
|
|
2893
3033
|
],
|
|
2894
3034
|
"references": []
|
|
@@ -3119,33 +3259,22 @@
|
|
|
3119
3259
|
"references": []
|
|
3120
3260
|
},
|
|
3121
3261
|
{
|
|
3122
|
-
"name": "flow-ui-tree
|
|
3123
|
-
"description": "
|
|
3262
|
+
"name": "flow-ui-tree",
|
|
3263
|
+
"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.",
|
|
3124
3264
|
"attributes": [
|
|
3125
3265
|
{
|
|
3126
3266
|
"name": "value",
|
|
3127
|
-
"description": "The
|
|
3128
|
-
"values": []
|
|
3129
|
-
},
|
|
3130
|
-
{
|
|
3131
|
-
"name": "expanded",
|
|
3132
|
-
"description": "Expands the tree item.",
|
|
3133
|
-
"values": []
|
|
3134
|
-
},
|
|
3135
|
-
{
|
|
3136
|
-
"name": "selected",
|
|
3137
|
-
"description": "Draws the tree item in a selected state.",
|
|
3138
|
-
"values": []
|
|
3139
|
-
},
|
|
3140
|
-
{
|
|
3141
|
-
"name": "disabled",
|
|
3142
|
-
"description": "Disables the tree item.",
|
|
3143
|
-
"values": []
|
|
3267
|
+
"description": "The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the\nvalue attribute will be a space-delimited list of values based on the options selected, and the value property will\nbe an array. **For this reason, values must not contain spaces.**",
|
|
3268
|
+
"values": [{ "name": "string[]" }]
|
|
3144
3269
|
},
|
|
3145
3270
|
{
|
|
3146
|
-
"name": "
|
|
3147
|
-
"description": "
|
|
3148
|
-
"values": [
|
|
3271
|
+
"name": "selection-mode",
|
|
3272
|
+
"description": "The selection behavior of the tree. Single selection allows only one node to be selected at a time. Multiple\ndisplays checkboxes and allows more than one node to be selected. Leaf allows only leaf nodes to be selected.",
|
|
3273
|
+
"values": [
|
|
3274
|
+
{ "name": "single" },
|
|
3275
|
+
{ "name": "multiple" },
|
|
3276
|
+
{ "name": "leaf" }
|
|
3277
|
+
]
|
|
3149
3278
|
},
|
|
3150
3279
|
{
|
|
3151
3280
|
"name": "size",
|
|
@@ -3160,74 +3289,41 @@
|
|
|
3160
3289
|
"references": []
|
|
3161
3290
|
},
|
|
3162
3291
|
{
|
|
3163
|
-
"name": "flow-ui-
|
|
3164
|
-
"description": "
|
|
3292
|
+
"name": "flow-ui-tree-item",
|
|
3293
|
+
"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 }_): _FlowUiTreeItem[]_** - 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.",
|
|
3165
3294
|
"attributes": [
|
|
3166
3295
|
{
|
|
3167
3296
|
"name": "value",
|
|
3168
|
-
"description": "The value
|
|
3169
|
-
"values": []
|
|
3170
|
-
},
|
|
3171
|
-
{
|
|
3172
|
-
"name": "timezone",
|
|
3173
|
-
"description": "The timezone to use for display. (IANA timezone string).\nIf not set, the timezone will be the browser's local timezone.",
|
|
3174
|
-
"values": []
|
|
3175
|
-
},
|
|
3176
|
-
{
|
|
3177
|
-
"name": "locale",
|
|
3178
|
-
"description": "The locale to use for display. (IETF BCP 47 language tag).\nIf not set, the locale will be the browser's default locale.",
|
|
3179
|
-
"values": []
|
|
3180
|
-
},
|
|
3181
|
-
{
|
|
3182
|
-
"name": "running",
|
|
3183
|
-
"description": "Set to `true` to start the timer running.",
|
|
3184
|
-
"values": []
|
|
3185
|
-
},
|
|
3186
|
-
{
|
|
3187
|
-
"name": "dateFormat",
|
|
3188
|
-
"description": "The date format to use for display as a [Luxon format string](https://moment.github.io/luxon/#/formatting?id=table-of-tokens).",
|
|
3189
|
-
"values": []
|
|
3190
|
-
},
|
|
3191
|
-
{
|
|
3192
|
-
"name": "dayFormat",
|
|
3193
|
-
"description": "The day format to use for display as a [Luxon format string](https://moment.github.io/luxon/#/formatting?id=table-of-tokens).",
|
|
3194
|
-
"values": []
|
|
3195
|
-
},
|
|
3196
|
-
{
|
|
3197
|
-
"name": "timeFormat",
|
|
3198
|
-
"description": "The time format to use for display as a [Luxon format string](https://moment.github.io/luxon/#/formatting?id=table-of-tokens).",
|
|
3297
|
+
"description": "The tree-items's value. When selected, the containing tree control will receive this value. The value must be unique\nfrom other tree-items in the same tree. Values may not contain spaces, as spaces are used as delimiters when listing\nmultiple values.",
|
|
3199
3298
|
"values": []
|
|
3200
3299
|
},
|
|
3201
3300
|
{
|
|
3202
|
-
"name": "
|
|
3203
|
-
"description": "
|
|
3301
|
+
"name": "expanded",
|
|
3302
|
+
"description": "Expands the tree item.",
|
|
3204
3303
|
"values": []
|
|
3205
3304
|
},
|
|
3206
3305
|
{
|
|
3207
|
-
"name": "
|
|
3208
|
-
"description": "
|
|
3306
|
+
"name": "selected",
|
|
3307
|
+
"description": "Draws the tree item in a selected state.",
|
|
3209
3308
|
"values": []
|
|
3210
3309
|
},
|
|
3211
3310
|
{
|
|
3212
|
-
"name": "
|
|
3213
|
-
"description": "
|
|
3311
|
+
"name": "disabled",
|
|
3312
|
+
"description": "Disables the tree item.",
|
|
3214
3313
|
"values": []
|
|
3215
3314
|
},
|
|
3216
3315
|
{
|
|
3217
|
-
"name": "
|
|
3218
|
-
"description": "
|
|
3316
|
+
"name": "lazy",
|
|
3317
|
+
"description": "Enables lazy loading behavior.",
|
|
3219
3318
|
"values": []
|
|
3220
3319
|
},
|
|
3221
3320
|
{
|
|
3222
|
-
"name": "
|
|
3223
|
-
"description": "The
|
|
3321
|
+
"name": "size",
|
|
3322
|
+
"description": "The select's size.",
|
|
3224
3323
|
"values": [
|
|
3225
|
-
{ "name": "
|
|
3226
|
-
{ "name": "
|
|
3227
|
-
{ "name": "
|
|
3228
|
-
{ "name": "bottom" },
|
|
3229
|
-
{ "name": "bottom-start" },
|
|
3230
|
-
{ "name": "bottom-end" }
|
|
3324
|
+
{ "name": "small" },
|
|
3325
|
+
{ "name": "medium" },
|
|
3326
|
+
{ "name": "large" }
|
|
3231
3327
|
]
|
|
3232
3328
|
}
|
|
3233
3329
|
],
|
|
@@ -3238,36 +3334,6 @@
|
|
|
3238
3334
|
"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.",
|
|
3239
3335
|
"attributes": [],
|
|
3240
3336
|
"references": []
|
|
3241
|
-
},
|
|
3242
|
-
{
|
|
3243
|
-
"name": "flow-ui-tree",
|
|
3244
|
-
"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.",
|
|
3245
|
-
"attributes": [
|
|
3246
|
-
{
|
|
3247
|
-
"name": "value",
|
|
3248
|
-
"description": "The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the\nvalue attribute will be a space-delimited list of values based on the options selected, and the value property will\nbe an array. **For this reason, values must not contain spaces.**",
|
|
3249
|
-
"values": [{ "name": "string[]" }]
|
|
3250
|
-
},
|
|
3251
|
-
{
|
|
3252
|
-
"name": "selection-mode",
|
|
3253
|
-
"description": "The selection behavior of the tree. Single selection allows only one node to be selected at a time. Multiple\ndisplays checkboxes and allows more than one node to be selected. Leaf allows only leaf nodes to be selected.",
|
|
3254
|
-
"values": [
|
|
3255
|
-
{ "name": "single" },
|
|
3256
|
-
{ "name": "multiple" },
|
|
3257
|
-
{ "name": "leaf" }
|
|
3258
|
-
]
|
|
3259
|
-
},
|
|
3260
|
-
{
|
|
3261
|
-
"name": "size",
|
|
3262
|
-
"description": "The select's size.",
|
|
3263
|
-
"values": [
|
|
3264
|
-
{ "name": "small" },
|
|
3265
|
-
{ "name": "medium" },
|
|
3266
|
-
{ "name": "large" }
|
|
3267
|
-
]
|
|
3268
|
-
}
|
|
3269
|
-
],
|
|
3270
|
-
"references": []
|
|
3271
3337
|
}
|
|
3272
3338
|
]
|
|
3273
3339
|
}
|