@emuanalytics/flow-rdf-ui 4.0.11 → 4.0.12
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.
|
@@ -1,6 +1,76 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 1.1,
|
|
3
3
|
"tags": [
|
|
4
|
+
{
|
|
5
|
+
"name": "flow-ui-alert",
|
|
6
|
+
"description": "Alerts are used to display important messages inline or as toast notifications.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-show** - Emitted when the alert opens.\n- **flow-ui-after-show** - Emitted after the alert opens and all animations are complete.\n- **flow-ui-hide** - Emitted when the alert closes.\n- **flow-ui-after-hide** - Emitted after the alert closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the alert.\n- **hide()** - Hides the alert\n- **toast(): _Promise<void>_** - Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\ndismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\ncalling this method again. The returned promise will resolve after the alert is hidden.\n\n### **Slots:**\n - _default_ - The alert's main content.\n- **icon** - An icon to show in the alert. Works best with `<flow-ui-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon** - The container that wraps the optional icon.\n- **message** - The container that wraps the alert's main content.\n- **close-button** - The close button, an `<flow-ui-icon-button>`.\n- **close-button__base** - The close button's exported `base` part.",
|
|
7
|
+
"attributes": [
|
|
8
|
+
{
|
|
9
|
+
"name": "open",
|
|
10
|
+
"description": "Set to `true` to display the alert. You can also\nuse the `show()` and `hide()` methods.",
|
|
11
|
+
"values": []
|
|
12
|
+
},
|
|
13
|
+
{
|
|
14
|
+
"name": "closable",
|
|
15
|
+
"description": "Enables a close button that allows the user to dismiss the alert.",
|
|
16
|
+
"values": []
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
"name": "variant",
|
|
20
|
+
"description": "The alert's theme variant.",
|
|
21
|
+
"values": [
|
|
22
|
+
{ "name": "primary" },
|
|
23
|
+
{ "name": "secondary" },
|
|
24
|
+
{ "name": "success" },
|
|
25
|
+
{ "name": "neutral" },
|
|
26
|
+
{ "name": "warning" },
|
|
27
|
+
{ "name": "danger" }
|
|
28
|
+
]
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
"name": "duration",
|
|
32
|
+
"description": "The length of time (in ms) that the alert will show itself before closing. If the user interacts with\nthe alert before it closes (e.g. by moving the mouse over it), the timer will restart.",
|
|
33
|
+
"values": []
|
|
34
|
+
}
|
|
35
|
+
],
|
|
36
|
+
"references": []
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
"name": "flow-ui-avatar",
|
|
40
|
+
"description": "Avatars are used to represent a person or object.\n\n\n---\n\n\n\n\n### **Slots:**\n - **icon** - The default icon to use when no image or initials are present. Works best with `<flow-ui-icon>`.\n\n### **CSS Properties:**\n - **--size** - The size of the avatar. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon** - The container that wraps the avatar's icon.\n- **initials** - The container that wraps the avatar's initials.\n- **image** - The avatar image. Only shown when the `image` attribute is set.",
|
|
41
|
+
"attributes": [
|
|
42
|
+
{
|
|
43
|
+
"name": "image",
|
|
44
|
+
"description": "The image source to use for the avatar.",
|
|
45
|
+
"values": []
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
"name": "label",
|
|
49
|
+
"description": "A label to use to describe the avatar to assistive devices.",
|
|
50
|
+
"values": []
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"name": "initials",
|
|
54
|
+
"description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
|
|
55
|
+
"values": []
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
"name": "loading",
|
|
59
|
+
"description": "Indicates how the browser should load the image.",
|
|
60
|
+
"values": [{ "name": "eager" }, { "name": "lazy" }]
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
"name": "shape",
|
|
64
|
+
"description": "The shape of the avatar.",
|
|
65
|
+
"values": [
|
|
66
|
+
{ "name": "circle" },
|
|
67
|
+
{ "name": "square" },
|
|
68
|
+
{ "name": "rounded" }
|
|
69
|
+
]
|
|
70
|
+
}
|
|
71
|
+
],
|
|
72
|
+
"references": []
|
|
73
|
+
},
|
|
4
74
|
{
|
|
5
75
|
"name": "flow-ui-animation",
|
|
6
76
|
"description": "Animate elements declaratively with over 100 animation presets. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-cancel** - Emitted when the animation is canceled.\n- **flow-ui-finish** - Emitted when the animation finishes.\n- **flow-ui-start** - Emitted when the animation starts or restarts.\n\n### **Methods:**\n - **cancel()** - Clears all keyframe effects caused by this animation and aborts its playback.\n- **finish()** - Sets the playback time to the end of the animation corresponding to the current playback direction.\n\n### **Slots:**\n - _default_ - The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To animate multiple elements, either wrap them in a single container or use multiple `<flow-ui-animation>` elements.",
|
|
@@ -63,81 +133,6 @@
|
|
|
63
133
|
],
|
|
64
134
|
"references": []
|
|
65
135
|
},
|
|
66
|
-
{
|
|
67
|
-
"name": "flow-ui-badge",
|
|
68
|
-
"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.",
|
|
69
|
-
"attributes": [
|
|
70
|
-
{
|
|
71
|
-
"name": "variant",
|
|
72
|
-
"description": "The badge's theme variant.",
|
|
73
|
-
"values": [
|
|
74
|
-
{ "name": "primary" },
|
|
75
|
-
{ "name": "secondary" },
|
|
76
|
-
{ "name": "success" },
|
|
77
|
-
{ "name": "neutral" },
|
|
78
|
-
{ "name": "warning" },
|
|
79
|
-
{ "name": "danger" }
|
|
80
|
-
]
|
|
81
|
-
},
|
|
82
|
-
{
|
|
83
|
-
"name": "pill",
|
|
84
|
-
"description": "Draws a pill-style badge with rounded edges.",
|
|
85
|
-
"values": []
|
|
86
|
-
},
|
|
87
|
-
{
|
|
88
|
-
"name": "pulse",
|
|
89
|
-
"description": "Makes the badge pulsate to draw attention.",
|
|
90
|
-
"values": []
|
|
91
|
-
}
|
|
92
|
-
],
|
|
93
|
-
"references": []
|
|
94
|
-
},
|
|
95
|
-
{
|
|
96
|
-
"name": "flow-ui-alert",
|
|
97
|
-
"description": "Alerts are used to display important messages inline or as toast notifications.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-show** - Emitted when the alert opens.\n- **flow-ui-after-show** - Emitted after the alert opens and all animations are complete.\n- **flow-ui-hide** - Emitted when the alert closes.\n- **flow-ui-after-hide** - Emitted after the alert closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the alert.\n- **hide()** - Hides the alert\n- **toast(): _Promise<void>_** - Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\ndismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\ncalling this method again. The returned promise will resolve after the alert is hidden.\n\n### **Slots:**\n - _default_ - The alert's main content.\n- **icon** - An icon to show in the alert. Works best with `<flow-ui-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon** - The container that wraps the optional icon.\n- **message** - The container that wraps the alert's main content.\n- **close-button** - The close button, an `<flow-ui-icon-button>`.\n- **close-button__base** - The close button's exported `base` part.",
|
|
98
|
-
"attributes": [
|
|
99
|
-
{
|
|
100
|
-
"name": "open",
|
|
101
|
-
"description": "Set to `true` to display the alert. You can also\nuse the `show()` and `hide()` methods.",
|
|
102
|
-
"values": []
|
|
103
|
-
},
|
|
104
|
-
{
|
|
105
|
-
"name": "closable",
|
|
106
|
-
"description": "Enables a close button that allows the user to dismiss the alert.",
|
|
107
|
-
"values": []
|
|
108
|
-
},
|
|
109
|
-
{
|
|
110
|
-
"name": "variant",
|
|
111
|
-
"description": "The alert's theme variant.",
|
|
112
|
-
"values": [
|
|
113
|
-
{ "name": "primary" },
|
|
114
|
-
{ "name": "secondary" },
|
|
115
|
-
{ "name": "success" },
|
|
116
|
-
{ "name": "neutral" },
|
|
117
|
-
{ "name": "warning" },
|
|
118
|
-
{ "name": "danger" }
|
|
119
|
-
]
|
|
120
|
-
},
|
|
121
|
-
{
|
|
122
|
-
"name": "duration",
|
|
123
|
-
"description": "The length of time (in ms) that the alert will show itself before closing. If the user interacts with\nthe alert before it closes (e.g. by moving the mouse over it), the timer will restart.",
|
|
124
|
-
"values": []
|
|
125
|
-
}
|
|
126
|
-
],
|
|
127
|
-
"references": []
|
|
128
|
-
},
|
|
129
|
-
{
|
|
130
|
-
"name": "flow-ui-breadcrumb",
|
|
131
|
-
"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.",
|
|
132
|
-
"attributes": [
|
|
133
|
-
{
|
|
134
|
-
"name": "label",
|
|
135
|
-
"description": "The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by\nscreen readers and other assistive devices to provide more context for users.",
|
|
136
|
-
"values": []
|
|
137
|
-
}
|
|
138
|
-
],
|
|
139
|
-
"references": []
|
|
140
|
-
},
|
|
141
136
|
{
|
|
142
137
|
"name": "flow-ui-breadcrumb-item",
|
|
143
138
|
"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.",
|
|
@@ -333,37 +328,42 @@
|
|
|
333
328
|
"references": []
|
|
334
329
|
},
|
|
335
330
|
{
|
|
336
|
-
"name": "flow-ui-
|
|
337
|
-
"description": "
|
|
331
|
+
"name": "flow-ui-badge",
|
|
332
|
+
"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.",
|
|
338
333
|
"attributes": [
|
|
339
334
|
{
|
|
340
|
-
"name": "
|
|
341
|
-
"description": "The
|
|
342
|
-
"values": [
|
|
335
|
+
"name": "variant",
|
|
336
|
+
"description": "The badge's theme variant.",
|
|
337
|
+
"values": [
|
|
338
|
+
{ "name": "primary" },
|
|
339
|
+
{ "name": "secondary" },
|
|
340
|
+
{ "name": "success" },
|
|
341
|
+
{ "name": "neutral" },
|
|
342
|
+
{ "name": "warning" },
|
|
343
|
+
{ "name": "danger" }
|
|
344
|
+
]
|
|
343
345
|
},
|
|
344
346
|
{
|
|
345
|
-
"name": "
|
|
346
|
-
"description": "
|
|
347
|
+
"name": "pill",
|
|
348
|
+
"description": "Draws a pill-style badge with rounded edges.",
|
|
347
349
|
"values": []
|
|
348
350
|
},
|
|
349
351
|
{
|
|
350
|
-
"name": "
|
|
351
|
-
"description": "
|
|
352
|
+
"name": "pulse",
|
|
353
|
+
"description": "Makes the badge pulsate to draw attention.",
|
|
352
354
|
"values": []
|
|
353
|
-
}
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
355
|
+
}
|
|
356
|
+
],
|
|
357
|
+
"references": []
|
|
358
|
+
},
|
|
359
|
+
{
|
|
360
|
+
"name": "flow-ui-breadcrumb",
|
|
361
|
+
"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.",
|
|
362
|
+
"attributes": [
|
|
359
363
|
{
|
|
360
|
-
"name": "
|
|
361
|
-
"description": "The
|
|
362
|
-
"values": [
|
|
363
|
-
{ "name": "circle" },
|
|
364
|
-
{ "name": "square" },
|
|
365
|
-
{ "name": "rounded" }
|
|
366
|
-
]
|
|
364
|
+
"name": "label",
|
|
365
|
+
"description": "The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by\nscreen readers and other assistive devices to provide more context for users.",
|
|
366
|
+
"values": []
|
|
367
367
|
}
|
|
368
368
|
],
|
|
369
369
|
"references": []
|
|
@@ -588,37 +588,37 @@
|
|
|
588
588
|
"references": []
|
|
589
589
|
},
|
|
590
590
|
{
|
|
591
|
-
"name": "flow-ui-color-
|
|
592
|
-
"description": "
|
|
591
|
+
"name": "flow-ui-color-picker",
|
|
592
|
+
"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.",
|
|
593
593
|
"attributes": [
|
|
594
594
|
{
|
|
595
|
-
"name": "
|
|
596
|
-
"description": "The
|
|
597
|
-
"values": []
|
|
598
|
-
},
|
|
599
|
-
{
|
|
600
|
-
"name": "form",
|
|
601
|
-
"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.",
|
|
595
|
+
"name": "value",
|
|
596
|
+
"description": "The current value of the color picker. The value's format will vary based the `format` attribute. To get the value\nin a specific format, use the `getFormattedValue()` method. The value is submitted as a name/value pair with form\ndata.",
|
|
602
597
|
"values": []
|
|
603
598
|
},
|
|
604
599
|
{
|
|
605
|
-
"name": "
|
|
606
|
-
"description": "
|
|
600
|
+
"name": "label",
|
|
601
|
+
"description": "The color picker's label. This will not be displayed, but it will be announced by assistive devices. If you need to\ndisplay HTML, you can use the `label` slot` instead.",
|
|
607
602
|
"values": []
|
|
608
603
|
},
|
|
609
604
|
{
|
|
610
|
-
"name": "
|
|
611
|
-
"description": "The color
|
|
612
|
-
"values": [
|
|
605
|
+
"name": "format",
|
|
606
|
+
"description": "The format to use. If opacity is enabled, these will translate to HEXA, RGBA, HSLA, and HSVA respectively. The color\npicker will accept user input in any format (including CSS color names) and convert it to the desired format.",
|
|
607
|
+
"values": [
|
|
608
|
+
{ "name": "hex" },
|
|
609
|
+
{ "name": "rgb" },
|
|
610
|
+
{ "name": "hsl" },
|
|
611
|
+
{ "name": "hsv" }
|
|
612
|
+
]
|
|
613
613
|
},
|
|
614
614
|
{
|
|
615
|
-
"name": "
|
|
616
|
-
"description": "
|
|
617
|
-
"values": [
|
|
615
|
+
"name": "inline",
|
|
616
|
+
"description": "Renders the color picker inline rather than in a dropdown.",
|
|
617
|
+
"values": []
|
|
618
618
|
},
|
|
619
619
|
{
|
|
620
620
|
"name": "size",
|
|
621
|
-
"description": "
|
|
621
|
+
"description": "Determines the size of the color picker's trigger. This has no effect on inline color pickers.",
|
|
622
622
|
"values": [
|
|
623
623
|
{ "name": "small" },
|
|
624
624
|
{ "name": "medium" },
|
|
@@ -626,172 +626,179 @@
|
|
|
626
626
|
]
|
|
627
627
|
},
|
|
628
628
|
{
|
|
629
|
-
"name": "
|
|
630
|
-
"description": "
|
|
629
|
+
"name": "no-format-toggle",
|
|
630
|
+
"description": "Removes the button that lets users toggle between format.",
|
|
631
631
|
"values": []
|
|
632
632
|
},
|
|
633
633
|
{
|
|
634
|
-
"name": "
|
|
635
|
-
"description": "
|
|
634
|
+
"name": "name",
|
|
635
|
+
"description": "The name of the form control, submitted as a name/value pair with form data.",
|
|
636
636
|
"values": []
|
|
637
637
|
},
|
|
638
638
|
{
|
|
639
|
-
"name": "
|
|
640
|
-
"description": "
|
|
641
|
-
"values": [{ "name": "string[]" }]
|
|
642
|
-
}
|
|
643
|
-
],
|
|
644
|
-
"references": []
|
|
645
|
-
},
|
|
646
|
-
{
|
|
647
|
-
"name": "flow-ui-date-time-picker",
|
|
648
|
-
"description": "Date time pickers allow users to select a date and time from a calendar and clock interface.\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 calendar opens.\n- **flow-ui-after-show** - Emitted after the calendar opens and all animations are complete.\n- **flow-ui-hide** - Emitted when the calendar closes.\n- **flow-ui-after-hide** - Emitted after the calendar 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 calendar.\n- **hide()** - Hides the calendar.\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 - **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 picker.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **mode-icon** - An icon to use in lieu of the default mode 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-help-text** - The help text's wrapper.\n- **combobox** - The container the wraps the prefix, mode-icon, combobox, and clear icon.\n- **prefix** - The container that wraps the prefix slot.\n- **display-input** - The element that displays the selected date/time, an `<input>` element.\n- **clear-button** - The clear button.\n- **mode-icon** - The mode icon, a `<flow-ui-icon>` element.",
|
|
649
|
-
"attributes": [
|
|
650
|
-
{
|
|
651
|
-
"name": "name",
|
|
652
|
-
"description": "The name of the date/time picker, submitted as a name/value pair with form data.",
|
|
639
|
+
"name": "disabled",
|
|
640
|
+
"description": "Disables the color picker.",
|
|
653
641
|
"values": []
|
|
654
642
|
},
|
|
655
643
|
{
|
|
656
|
-
"name": "
|
|
657
|
-
"description": "The
|
|
658
|
-
"values": []
|
|
659
|
-
},
|
|
660
|
-
{
|
|
661
|
-
"name": "display-mode",
|
|
662
|
-
"description": "Select whether to show date only, time only or both date and time.",
|
|
644
|
+
"name": "placement",
|
|
645
|
+
"description": "The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\ninside of the viewport.",
|
|
663
646
|
"values": [
|
|
664
|
-
{ "name": "
|
|
665
|
-
{ "name": "
|
|
666
|
-
{ "name": "
|
|
647
|
+
{ "name": "" },
|
|
648
|
+
{ "name": "top" },
|
|
649
|
+
{ "name": "top-start" },
|
|
650
|
+
{ "name": "top-end" },
|
|
651
|
+
{ "name": "bottom" },
|
|
652
|
+
{ "name": "bottom-start" },
|
|
653
|
+
{ "name": "bottom-end" },
|
|
654
|
+
{ "name": "right" },
|
|
655
|
+
{ "name": "right-start" },
|
|
656
|
+
{ "name": "right-end" },
|
|
657
|
+
{ "name": "left" },
|
|
658
|
+
{ "name": "left-start" },
|
|
659
|
+
{ "name": "left-end" }
|
|
667
660
|
]
|
|
668
661
|
},
|
|
669
662
|
{
|
|
670
|
-
"name": "
|
|
671
|
-
"description": "
|
|
663
|
+
"name": "distance",
|
|
664
|
+
"description": "The distance in pixels from which to offset the panel away from its trigger.",
|
|
672
665
|
"values": []
|
|
673
666
|
},
|
|
674
667
|
{
|
|
675
|
-
"name": "
|
|
676
|
-
"description": "
|
|
668
|
+
"name": "skidding",
|
|
669
|
+
"description": "The distance in pixels from which to offset the panel along its trigger.",
|
|
677
670
|
"values": []
|
|
678
671
|
},
|
|
679
672
|
{
|
|
680
|
-
"name": "
|
|
681
|
-
"description": "
|
|
673
|
+
"name": "hoist",
|
|
674
|
+
"description": "Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
|
|
682
675
|
"values": []
|
|
683
676
|
},
|
|
684
677
|
{
|
|
685
|
-
"name": "
|
|
686
|
-
"description": "
|
|
687
|
-
"values": [
|
|
688
|
-
{ "name": "small" },
|
|
689
|
-
{ "name": "medium" },
|
|
690
|
-
{ "name": "large" }
|
|
691
|
-
]
|
|
678
|
+
"name": "opacity",
|
|
679
|
+
"description": "Shows the opacity slider. Enabling this will cause the formatted value to be HEXA, RGBA, or HSLA.",
|
|
680
|
+
"values": []
|
|
692
681
|
},
|
|
693
682
|
{
|
|
694
|
-
"name": "
|
|
695
|
-
"description": "
|
|
683
|
+
"name": "uppercase",
|
|
684
|
+
"description": "By default, values are lowercase. With this attribute, values will be uppercase instead.",
|
|
696
685
|
"values": []
|
|
697
686
|
},
|
|
698
687
|
{
|
|
699
|
-
"name": "
|
|
700
|
-
"description": "
|
|
701
|
-
"values": []
|
|
688
|
+
"name": "swatches",
|
|
689
|
+
"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.",
|
|
690
|
+
"values": [{ "name": "string[]" }]
|
|
702
691
|
},
|
|
703
692
|
{
|
|
704
|
-
"name": "
|
|
705
|
-
"description": "
|
|
693
|
+
"name": "form",
|
|
694
|
+
"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.",
|
|
706
695
|
"values": []
|
|
707
696
|
},
|
|
708
697
|
{
|
|
709
|
-
"name": "
|
|
710
|
-
"description": "
|
|
698
|
+
"name": "required",
|
|
699
|
+
"description": "Makes the color picker a required field.",
|
|
711
700
|
"values": []
|
|
712
|
-
}
|
|
701
|
+
}
|
|
702
|
+
],
|
|
703
|
+
"references": []
|
|
704
|
+
},
|
|
705
|
+
{
|
|
706
|
+
"name": "flow-ui-color-stop",
|
|
707
|
+
"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.",
|
|
708
|
+
"attributes": [
|
|
713
709
|
{
|
|
714
|
-
"name": "
|
|
715
|
-
"description": "
|
|
710
|
+
"name": "name",
|
|
711
|
+
"description": "The name of the color stop, submitted as a name/value pair with form data.",
|
|
716
712
|
"values": []
|
|
717
713
|
},
|
|
718
714
|
{
|
|
719
|
-
"name": "
|
|
720
|
-
"description": "
|
|
715
|
+
"name": "form",
|
|
716
|
+
"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.",
|
|
721
717
|
"values": []
|
|
722
718
|
},
|
|
723
719
|
{
|
|
724
|
-
"name": "
|
|
725
|
-
"description": "
|
|
720
|
+
"name": "required",
|
|
721
|
+
"description": "Makes the color stop as a required field.",
|
|
726
722
|
"values": []
|
|
727
723
|
},
|
|
728
724
|
{
|
|
729
|
-
"name": "
|
|
730
|
-
"description": "The
|
|
731
|
-
"values": []
|
|
725
|
+
"name": "options",
|
|
726
|
+
"description": "The color stop options object.",
|
|
727
|
+
"values": [{ "name": "ColorStopOptions" }]
|
|
732
728
|
},
|
|
733
729
|
{
|
|
734
|
-
"name": "
|
|
735
|
-
"description": "The
|
|
730
|
+
"name": "value",
|
|
731
|
+
"description": "The current value of the color stop component.",
|
|
732
|
+
"values": [{ "name": "ColorStopValue" }]
|
|
733
|
+
},
|
|
734
|
+
{
|
|
735
|
+
"name": "size",
|
|
736
|
+
"description": "The size of the color stop component.",
|
|
736
737
|
"values": [
|
|
737
|
-
{ "name": "
|
|
738
|
-
{ "name": "
|
|
739
|
-
{ "name": "
|
|
740
|
-
{ "name": "bottom" },
|
|
741
|
-
{ "name": "bottom-end" },
|
|
742
|
-
{ "name": "bottom-start" }
|
|
738
|
+
{ "name": "small" },
|
|
739
|
+
{ "name": "medium" },
|
|
740
|
+
{ "name": "large" }
|
|
743
741
|
]
|
|
744
742
|
},
|
|
745
743
|
{
|
|
746
|
-
"name": "
|
|
747
|
-
"description": "
|
|
744
|
+
"name": "placeholder",
|
|
745
|
+
"description": "Set to `true` to display a placeholder color stop that\nallows the user to add a new color stop.",
|
|
748
746
|
"values": []
|
|
749
747
|
},
|
|
750
748
|
{
|
|
751
|
-
"name": "
|
|
752
|
-
"description": "
|
|
749
|
+
"name": "fixed",
|
|
750
|
+
"description": "Set to `true` to display a fixed color stop that allows the user\nto select a fixed color in a color mapping.",
|
|
753
751
|
"values": []
|
|
754
752
|
},
|
|
755
753
|
{
|
|
756
|
-
"name": "
|
|
757
|
-
"description": "
|
|
758
|
-
"values": []
|
|
754
|
+
"name": "swatches",
|
|
755
|
+
"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.",
|
|
756
|
+
"values": [{ "name": "string[]" }]
|
|
759
757
|
}
|
|
760
758
|
],
|
|
761
759
|
"references": []
|
|
762
760
|
},
|
|
763
761
|
{
|
|
764
|
-
"name": "flow-ui-
|
|
765
|
-
"description": "
|
|
762
|
+
"name": "flow-ui-date-time-picker",
|
|
763
|
+
"description": "Date time pickers allow users to select a date and time from a calendar and clock interface.\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 calendar opens.\n- **flow-ui-after-show** - Emitted after the calendar opens and all animations are complete.\n- **flow-ui-hide** - Emitted when the calendar closes.\n- **flow-ui-after-hide** - Emitted after the calendar 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 calendar.\n- **hide()** - Hides the calendar.\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 - **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 picker.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **mode-icon** - An icon to use in lieu of the default mode 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-help-text** - The help text's wrapper.\n- **combobox** - The container the wraps the prefix, mode-icon, combobox, and clear icon.\n- **prefix** - The container that wraps the prefix slot.\n- **display-input** - The element that displays the selected date/time, an `<input>` element.\n- **clear-button** - The clear button.\n- **mode-icon** - The mode icon, a `<flow-ui-icon>` element.",
|
|
766
764
|
"attributes": [
|
|
767
765
|
{
|
|
768
|
-
"name": "
|
|
769
|
-
"description": "The
|
|
766
|
+
"name": "name",
|
|
767
|
+
"description": "The name of the date/time picker, submitted as a name/value pair with form data.",
|
|
770
768
|
"values": []
|
|
771
769
|
},
|
|
772
770
|
{
|
|
773
|
-
"name": "
|
|
774
|
-
"description": "The
|
|
771
|
+
"name": "value",
|
|
772
|
+
"description": "The current value of the date/time picker. (ISO8601 date/time string)",
|
|
775
773
|
"values": []
|
|
776
774
|
},
|
|
777
775
|
{
|
|
778
|
-
"name": "
|
|
779
|
-
"description": "
|
|
776
|
+
"name": "display-mode",
|
|
777
|
+
"description": "Select whether to show date only, time only or both date and time.",
|
|
780
778
|
"values": [
|
|
781
|
-
{ "name": "
|
|
782
|
-
{ "name": "
|
|
783
|
-
{ "name": "
|
|
784
|
-
{ "name": "hsv" }
|
|
779
|
+
{ "name": "date" },
|
|
780
|
+
{ "name": "time" },
|
|
781
|
+
{ "name": "datetime" }
|
|
785
782
|
]
|
|
786
783
|
},
|
|
787
784
|
{
|
|
788
|
-
"name": "
|
|
789
|
-
"description": "
|
|
785
|
+
"name": "format",
|
|
786
|
+
"description": "Specify the display format using a [Luxon format string](https://moment.github.io/luxon/#/formatting?id=table-of-tokens).",
|
|
787
|
+
"values": []
|
|
788
|
+
},
|
|
789
|
+
{
|
|
790
|
+
"name": "timezone",
|
|
791
|
+
"description": "Set the timezone for display. If not set the default timezone will be used. (TZ name e.g. `'Europe/London'`)",
|
|
792
|
+
"values": []
|
|
793
|
+
},
|
|
794
|
+
{
|
|
795
|
+
"name": "locale",
|
|
796
|
+
"description": "Set the locale for display. If not set the default locale will be used. (e.g `'en-GB'`)",
|
|
790
797
|
"values": []
|
|
791
798
|
},
|
|
792
799
|
{
|
|
793
800
|
"name": "size",
|
|
794
|
-
"description": "
|
|
801
|
+
"description": "The date/time picker's size.",
|
|
795
802
|
"values": [
|
|
796
803
|
{ "name": "small" },
|
|
797
804
|
{ "name": "medium" },
|
|
@@ -799,68 +806,61 @@
|
|
|
799
806
|
]
|
|
800
807
|
},
|
|
801
808
|
{
|
|
802
|
-
"name": "
|
|
803
|
-
"description": "
|
|
809
|
+
"name": "placeholder",
|
|
810
|
+
"description": "Placeholder text to show as a hint when the date/time picker is empty.",
|
|
804
811
|
"values": []
|
|
805
812
|
},
|
|
806
813
|
{
|
|
807
|
-
"name": "
|
|
808
|
-
"description": "
|
|
814
|
+
"name": "disabled",
|
|
815
|
+
"description": "Disables the date/time picker control.",
|
|
809
816
|
"values": []
|
|
810
817
|
},
|
|
811
818
|
{
|
|
812
|
-
"name": "
|
|
813
|
-
"description": "
|
|
819
|
+
"name": "clearable",
|
|
820
|
+
"description": "Adds a clear button when the date/time picker is not empty.",
|
|
814
821
|
"values": []
|
|
815
822
|
},
|
|
816
823
|
{
|
|
817
|
-
"name": "
|
|
818
|
-
"description": "
|
|
819
|
-
"values": [
|
|
820
|
-
{ "name": "" },
|
|
821
|
-
{ "name": "top" },
|
|
822
|
-
{ "name": "top-start" },
|
|
823
|
-
{ "name": "top-end" },
|
|
824
|
-
{ "name": "bottom" },
|
|
825
|
-
{ "name": "bottom-start" },
|
|
826
|
-
{ "name": "bottom-end" },
|
|
827
|
-
{ "name": "right" },
|
|
828
|
-
{ "name": "right-start" },
|
|
829
|
-
{ "name": "right-end" },
|
|
830
|
-
{ "name": "left" },
|
|
831
|
-
{ "name": "left-start" },
|
|
832
|
-
{ "name": "left-end" }
|
|
833
|
-
]
|
|
824
|
+
"name": "open",
|
|
825
|
+
"description": "Indicates whether or not the calendar is open. You can toggle this attribute to show and hide the calendar, or you can\nuse the `show()` and `hide()` methods.",
|
|
826
|
+
"values": []
|
|
834
827
|
},
|
|
835
828
|
{
|
|
836
|
-
"name": "
|
|
837
|
-
"description": "
|
|
829
|
+
"name": "hoist",
|
|
830
|
+
"description": "Enable this option to prevent the listbox from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
|
|
838
831
|
"values": []
|
|
839
832
|
},
|
|
840
833
|
{
|
|
841
|
-
"name": "
|
|
842
|
-
"description": "
|
|
834
|
+
"name": "filled",
|
|
835
|
+
"description": "Draws a filled select.",
|
|
843
836
|
"values": []
|
|
844
837
|
},
|
|
845
838
|
{
|
|
846
|
-
"name": "
|
|
847
|
-
"description": "
|
|
839
|
+
"name": "pill",
|
|
840
|
+
"description": "Draws a pill-style select with rounded edges.",
|
|
848
841
|
"values": []
|
|
849
842
|
},
|
|
850
843
|
{
|
|
851
|
-
"name": "
|
|
852
|
-
"description": "
|
|
844
|
+
"name": "label",
|
|
845
|
+
"description": "The select's label. If you need to display HTML, use the `label` slot instead.",
|
|
853
846
|
"values": []
|
|
854
847
|
},
|
|
855
848
|
{
|
|
856
|
-
"name": "
|
|
857
|
-
"description": "
|
|
858
|
-
"values": [
|
|
849
|
+
"name": "placement",
|
|
850
|
+
"description": "The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox\ninside of the viewport.",
|
|
851
|
+
"values": [
|
|
852
|
+
{ "name": "top" },
|
|
853
|
+
{ "name": "top-end" },
|
|
854
|
+
{ "name": "top-start" },
|
|
855
|
+
{ "name": "bottom" },
|
|
856
|
+
{ "name": "bottom-end" },
|
|
857
|
+
{ "name": "bottom-start" }
|
|
858
|
+
]
|
|
859
859
|
},
|
|
860
860
|
{
|
|
861
|
-
"name": "
|
|
862
|
-
"description": "
|
|
863
|
-
"values": [
|
|
861
|
+
"name": "help-text",
|
|
862
|
+
"description": "The select's help text. If you need to display HTML, use the `help-text` slot instead.",
|
|
863
|
+
"values": []
|
|
864
864
|
},
|
|
865
865
|
{
|
|
866
866
|
"name": "form",
|
|
@@ -869,7 +869,7 @@
|
|
|
869
869
|
},
|
|
870
870
|
{
|
|
871
871
|
"name": "required",
|
|
872
|
-
"description": "
|
|
872
|
+
"description": "The select's required attribute.",
|
|
873
873
|
"values": []
|
|
874
874
|
}
|
|
875
875
|
],
|
|
@@ -2401,6 +2401,28 @@
|
|
|
2401
2401
|
],
|
|
2402
2402
|
"references": []
|
|
2403
2403
|
},
|
|
2404
|
+
{
|
|
2405
|
+
"name": "flow-ui-tab-panel",
|
|
2406
|
+
"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.",
|
|
2407
|
+
"attributes": [
|
|
2408
|
+
{
|
|
2409
|
+
"name": "name",
|
|
2410
|
+
"description": "The tab panel's name.",
|
|
2411
|
+
"values": []
|
|
2412
|
+
},
|
|
2413
|
+
{
|
|
2414
|
+
"name": "active",
|
|
2415
|
+
"description": "When true, the tab panel will be shown.",
|
|
2416
|
+
"values": []
|
|
2417
|
+
},
|
|
2418
|
+
{
|
|
2419
|
+
"name": "scrollable",
|
|
2420
|
+
"description": "Indicates whether the panel is scrollable. By default overflow is hidden.",
|
|
2421
|
+
"values": []
|
|
2422
|
+
}
|
|
2423
|
+
],
|
|
2424
|
+
"references": []
|
|
2425
|
+
},
|
|
2404
2426
|
{
|
|
2405
2427
|
"name": "flow-ui-tag",
|
|
2406
2428
|
"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.",
|
|
@@ -2590,6 +2612,80 @@
|
|
|
2590
2612
|
],
|
|
2591
2613
|
"references": []
|
|
2592
2614
|
},
|
|
2615
|
+
{
|
|
2616
|
+
"name": "flow-ui-timer",
|
|
2617
|
+
"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.",
|
|
2618
|
+
"attributes": [
|
|
2619
|
+
{
|
|
2620
|
+
"name": "value",
|
|
2621
|
+
"description": "The value of the timer. (ISO8601 date/time string)",
|
|
2622
|
+
"values": []
|
|
2623
|
+
},
|
|
2624
|
+
{
|
|
2625
|
+
"name": "timezone",
|
|
2626
|
+
"description": "The timezone to use for display. (IANA timezone string).\nIf not set, the timezone will be the browser's local timezone.",
|
|
2627
|
+
"values": []
|
|
2628
|
+
},
|
|
2629
|
+
{
|
|
2630
|
+
"name": "locale",
|
|
2631
|
+
"description": "The locale to use for display. (IETF BCP 47 language tag).\nIf not set, the locale will be the browser's default locale.",
|
|
2632
|
+
"values": []
|
|
2633
|
+
},
|
|
2634
|
+
{
|
|
2635
|
+
"name": "running",
|
|
2636
|
+
"description": "Set to `true` to start the timer running.",
|
|
2637
|
+
"values": []
|
|
2638
|
+
},
|
|
2639
|
+
{
|
|
2640
|
+
"name": "dateFormat",
|
|
2641
|
+
"description": "The date format to use for display as a [Luxon format string](https://moment.github.io/luxon/#/formatting?id=table-of-tokens).",
|
|
2642
|
+
"values": []
|
|
2643
|
+
},
|
|
2644
|
+
{
|
|
2645
|
+
"name": "dayFormat",
|
|
2646
|
+
"description": "The day format to use for display as a [Luxon format string](https://moment.github.io/luxon/#/formatting?id=table-of-tokens).",
|
|
2647
|
+
"values": []
|
|
2648
|
+
},
|
|
2649
|
+
{
|
|
2650
|
+
"name": "timeFormat",
|
|
2651
|
+
"description": "The time format to use for display as a [Luxon format string](https://moment.github.io/luxon/#/formatting?id=table-of-tokens).",
|
|
2652
|
+
"values": []
|
|
2653
|
+
},
|
|
2654
|
+
{
|
|
2655
|
+
"name": "zoneFormat",
|
|
2656
|
+
"description": "The timezone format to use for display as a [Luxon format string](https://moment.github.io/luxon/#/formatting?id=table-of-tokens).",
|
|
2657
|
+
"values": []
|
|
2658
|
+
},
|
|
2659
|
+
{
|
|
2660
|
+
"name": "major-step",
|
|
2661
|
+
"description": "The major step size to use for the timer step controls.",
|
|
2662
|
+
"values": []
|
|
2663
|
+
},
|
|
2664
|
+
{
|
|
2665
|
+
"name": "minor-step",
|
|
2666
|
+
"description": "The minor step size to use for the timer step controls.",
|
|
2667
|
+
"values": []
|
|
2668
|
+
},
|
|
2669
|
+
{
|
|
2670
|
+
"name": "hide-zone",
|
|
2671
|
+
"description": "Set to `true` to hide the timezone display.",
|
|
2672
|
+
"values": []
|
|
2673
|
+
},
|
|
2674
|
+
{
|
|
2675
|
+
"name": "placement",
|
|
2676
|
+
"description": "The placement of the calendar popup relative to the timer control.",
|
|
2677
|
+
"values": [
|
|
2678
|
+
{ "name": "top" },
|
|
2679
|
+
{ "name": "top-end" },
|
|
2680
|
+
{ "name": "top-start" },
|
|
2681
|
+
{ "name": "bottom" },
|
|
2682
|
+
{ "name": "bottom-start" },
|
|
2683
|
+
{ "name": "bottom-end" }
|
|
2684
|
+
]
|
|
2685
|
+
}
|
|
2686
|
+
],
|
|
2687
|
+
"references": []
|
|
2688
|
+
},
|
|
2593
2689
|
{
|
|
2594
2690
|
"name": "flow-ui-tool-button",
|
|
2595
2691
|
"description": "Tool buttons are used to build [toolbars](./flow-ui-tool-button-group). They can be used to toggle a state or perform an action.\n\n\n---\n\n\n\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the radio button.\n- **blur()** - Removes focus from the radio button.\n\n### **Slots:**\n - **prefix** - A presentational prefix icon or similar element.\n- **suffix** - A presentational suffix icon or similar element.\n- **icon** - The tool button's icon.\n- **tooltip** - The tool button's tooltip content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **button** - The button element.\n- **button--checked** - The button element when checked.\n- **tooltip** - The tooltip element.\n- **prefix** - The prefix slot.\n- **suffix** - The suffix slot.\n- **label-wrapper** - The wrapper that contains the icon and label.\n- **icon** - The icon slot. Alternatively, you can use the `icon` attribute.\n- **label** - The button label.",
|
|
@@ -2688,97 +2784,68 @@
|
|
|
2688
2784
|
"references": []
|
|
2689
2785
|
},
|
|
2690
2786
|
{
|
|
2691
|
-
"name": "flow-ui-
|
|
2692
|
-
"description": "
|
|
2787
|
+
"name": "flow-ui-tool-button-group",
|
|
2788
|
+
"description": "Tool buttons groups are used to build toolbars from [tool buttons](./flow-ui-tool-button).\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-change** - Emitted when the control's value changes.\n- **flow-ui-input** - Emitted when the control receives input.\n\n### **Methods:**\n - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message)** - Sets a custom validation message. Pass an empty string to restore validity.",
|
|
2693
2789
|
"attributes": [
|
|
2694
2790
|
{
|
|
2695
|
-
"name": "
|
|
2696
|
-
"description": "The
|
|
2791
|
+
"name": "label",
|
|
2792
|
+
"description": "The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
|
|
2697
2793
|
"values": []
|
|
2698
2794
|
},
|
|
2699
2795
|
{
|
|
2700
|
-
"name": "
|
|
2701
|
-
"description": "
|
|
2796
|
+
"name": "name",
|
|
2797
|
+
"description": "The name of the tool button group, submitted as a name/value pair with form data.",
|
|
2702
2798
|
"values": []
|
|
2703
2799
|
},
|
|
2704
|
-
{
|
|
2705
|
-
"name": "scrollable",
|
|
2706
|
-
"description": "Indicates whether the panel is scrollable. By default overflow is hidden.",
|
|
2707
|
-
"values": []
|
|
2708
|
-
}
|
|
2709
|
-
],
|
|
2710
|
-
"references": []
|
|
2711
|
-
},
|
|
2712
|
-
{
|
|
2713
|
-
"name": "flow-ui-timer",
|
|
2714
|
-
"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.",
|
|
2715
|
-
"attributes": [
|
|
2716
2800
|
{
|
|
2717
2801
|
"name": "value",
|
|
2718
|
-
"description": "The value of the
|
|
2719
|
-
"values": []
|
|
2720
|
-
},
|
|
2721
|
-
{
|
|
2722
|
-
"name": "timezone",
|
|
2723
|
-
"description": "The timezone to use for display. (IANA timezone string).\nIf not set, the timezone will be the browser's local timezone.",
|
|
2724
|
-
"values": []
|
|
2725
|
-
},
|
|
2726
|
-
{
|
|
2727
|
-
"name": "locale",
|
|
2728
|
-
"description": "The locale to use for display. (IETF BCP 47 language tag).\nIf not set, the locale will be the browser's default locale.",
|
|
2729
|
-
"values": []
|
|
2730
|
-
},
|
|
2731
|
-
{
|
|
2732
|
-
"name": "running",
|
|
2733
|
-
"description": "Set to `true` to start the timer running.",
|
|
2734
|
-
"values": []
|
|
2735
|
-
},
|
|
2736
|
-
{
|
|
2737
|
-
"name": "dateFormat",
|
|
2738
|
-
"description": "The date format to use for display as a [Luxon format string](https://moment.github.io/luxon/#/formatting?id=table-of-tokens).",
|
|
2739
|
-
"values": []
|
|
2802
|
+
"description": "The current value of the tool button group, submitted as a name/value pair with form data. When `checkbox` mode is enabled, the\nvalue will be a space-delimited list of values based on the checked tool buttons.",
|
|
2803
|
+
"values": [{ "name": "string[]" }]
|
|
2740
2804
|
},
|
|
2741
2805
|
{
|
|
2742
|
-
"name": "
|
|
2743
|
-
"description": "The
|
|
2744
|
-
"values": [
|
|
2806
|
+
"name": "size",
|
|
2807
|
+
"description": "The radio group's size. This size will be applied to all child radios and radio buttons.",
|
|
2808
|
+
"values": [
|
|
2809
|
+
{ "name": "x-small" },
|
|
2810
|
+
{ "name": "small" },
|
|
2811
|
+
{ "name": "medium" },
|
|
2812
|
+
{ "name": "large" }
|
|
2813
|
+
]
|
|
2745
2814
|
},
|
|
2746
2815
|
{
|
|
2747
|
-
"name": "
|
|
2748
|
-
"description": "
|
|
2816
|
+
"name": "pill",
|
|
2817
|
+
"description": "Draws pill-style tool buttons. This style will be applied to all child tool buttons.",
|
|
2749
2818
|
"values": []
|
|
2750
2819
|
},
|
|
2751
2820
|
{
|
|
2752
|
-
"name": "
|
|
2753
|
-
"description": "
|
|
2821
|
+
"name": "outline",
|
|
2822
|
+
"description": "Draws outline-style tool buttons. This style will be applied to all child tool buttons.",
|
|
2754
2823
|
"values": []
|
|
2755
2824
|
},
|
|
2756
2825
|
{
|
|
2757
|
-
"name": "
|
|
2758
|
-
"
|
|
2759
|
-
|
|
2826
|
+
"name": "variant",
|
|
2827
|
+
"values": [
|
|
2828
|
+
{ "name": "primary" },
|
|
2829
|
+
{ "name": "secondary" },
|
|
2830
|
+
{ "name": "success" },
|
|
2831
|
+
{ "name": "warning" },
|
|
2832
|
+
{ "name": "danger" },
|
|
2833
|
+
{ "name": "neutral" }
|
|
2834
|
+
]
|
|
2760
2835
|
},
|
|
2761
2836
|
{
|
|
2762
|
-
"name": "
|
|
2763
|
-
"description": "
|
|
2837
|
+
"name": "form",
|
|
2838
|
+
"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.",
|
|
2764
2839
|
"values": []
|
|
2765
2840
|
},
|
|
2766
2841
|
{
|
|
2767
|
-
"name": "
|
|
2768
|
-
"description": "
|
|
2842
|
+
"name": "vertical",
|
|
2843
|
+
"description": "Use vertical layout for the radio group.",
|
|
2769
2844
|
"values": []
|
|
2770
2845
|
},
|
|
2771
2846
|
{
|
|
2772
|
-
"name": "
|
|
2773
|
-
"
|
|
2774
|
-
"values": [
|
|
2775
|
-
{ "name": "top" },
|
|
2776
|
-
{ "name": "top-end" },
|
|
2777
|
-
{ "name": "top-start" },
|
|
2778
|
-
{ "name": "bottom" },
|
|
2779
|
-
{ "name": "bottom-start" },
|
|
2780
|
-
{ "name": "bottom-end" }
|
|
2781
|
-
]
|
|
2847
|
+
"name": "mode",
|
|
2848
|
+
"values": [{ "name": "radio" }, { "name": "checkbox" }]
|
|
2782
2849
|
}
|
|
2783
2850
|
],
|
|
2784
2851
|
"references": []
|
|
@@ -2915,73 +2982,6 @@
|
|
|
2915
2982
|
],
|
|
2916
2983
|
"references": []
|
|
2917
2984
|
},
|
|
2918
|
-
{
|
|
2919
|
-
"name": "flow-ui-tool-button-group",
|
|
2920
|
-
"description": "Tool buttons groups are used to build toolbars from [tool buttons](./flow-ui-tool-button).\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-change** - Emitted when the control's value changes.\n- **flow-ui-input** - Emitted when the control receives input.\n\n### **Methods:**\n - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message)** - Sets a custom validation message. Pass an empty string to restore validity.",
|
|
2921
|
-
"attributes": [
|
|
2922
|
-
{
|
|
2923
|
-
"name": "label",
|
|
2924
|
-
"description": "The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
|
|
2925
|
-
"values": []
|
|
2926
|
-
},
|
|
2927
|
-
{
|
|
2928
|
-
"name": "name",
|
|
2929
|
-
"description": "The name of the tool button group, submitted as a name/value pair with form data.",
|
|
2930
|
-
"values": []
|
|
2931
|
-
},
|
|
2932
|
-
{
|
|
2933
|
-
"name": "value",
|
|
2934
|
-
"description": "The current value of the tool button group, submitted as a name/value pair with form data. When `checkbox` mode is enabled, the\nvalue will be a space-delimited list of values based on the checked tool buttons.",
|
|
2935
|
-
"values": [{ "name": "string[]" }]
|
|
2936
|
-
},
|
|
2937
|
-
{
|
|
2938
|
-
"name": "size",
|
|
2939
|
-
"description": "The radio group's size. This size will be applied to all child radios and radio buttons.",
|
|
2940
|
-
"values": [
|
|
2941
|
-
{ "name": "x-small" },
|
|
2942
|
-
{ "name": "small" },
|
|
2943
|
-
{ "name": "medium" },
|
|
2944
|
-
{ "name": "large" }
|
|
2945
|
-
]
|
|
2946
|
-
},
|
|
2947
|
-
{
|
|
2948
|
-
"name": "pill",
|
|
2949
|
-
"description": "Draws pill-style tool buttons. This style will be applied to all child tool buttons.",
|
|
2950
|
-
"values": []
|
|
2951
|
-
},
|
|
2952
|
-
{
|
|
2953
|
-
"name": "outline",
|
|
2954
|
-
"description": "Draws outline-style tool buttons. This style will be applied to all child tool buttons.",
|
|
2955
|
-
"values": []
|
|
2956
|
-
},
|
|
2957
|
-
{
|
|
2958
|
-
"name": "variant",
|
|
2959
|
-
"values": [
|
|
2960
|
-
{ "name": "primary" },
|
|
2961
|
-
{ "name": "secondary" },
|
|
2962
|
-
{ "name": "success" },
|
|
2963
|
-
{ "name": "warning" },
|
|
2964
|
-
{ "name": "danger" },
|
|
2965
|
-
{ "name": "neutral" }
|
|
2966
|
-
]
|
|
2967
|
-
},
|
|
2968
|
-
{
|
|
2969
|
-
"name": "form",
|
|
2970
|
-
"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.",
|
|
2971
|
-
"values": []
|
|
2972
|
-
},
|
|
2973
|
-
{
|
|
2974
|
-
"name": "vertical",
|
|
2975
|
-
"description": "Use vertical layout for the radio group.",
|
|
2976
|
-
"values": []
|
|
2977
|
-
},
|
|
2978
|
-
{
|
|
2979
|
-
"name": "mode",
|
|
2980
|
-
"values": [{ "name": "radio" }, { "name": "checkbox" }]
|
|
2981
|
-
}
|
|
2982
|
-
],
|
|
2983
|
-
"references": []
|
|
2984
|
-
},
|
|
2985
2985
|
{
|
|
2986
2986
|
"name": "flow-ui-visually-hidden",
|
|
2987
2987
|
"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.",
|