@emuanalytics/flow-rdf-ui 4.1.27 → 4.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/autocomplete/autocomplete.component.mjs +135 -28
- package/dist/components/calendar/calendar.component.mjs +534 -118
- package/dist/components/calendar/calendar.styles.mjs +142 -2
- package/dist/components/date-time-picker/date-time-picker.component.mjs +125 -9
- package/dist/components/query-builder/converters/flow-query-converters.mjs +21 -9
- package/dist/components/query-builder/converters/javascript-filter-converter.mjs +17 -1
- package/dist/components/query-builder/converters/map-layer-filter-converter.mjs +16 -1
- package/dist/components/query-builder/default-value-templates.mjs +68 -71
- package/dist/components/query-builder/helpers.mjs +18 -2
- package/dist/components/query-builder/query-builder.component.mjs +8 -3
- package/dist/custom-elements.json +3989 -3278
- package/dist/index.d.mts +288 -19
- package/dist/index.d.ts +288 -19
- package/dist/index.mjs +1 -1
- package/dist/internal/date-range.mjs +107 -0
- package/dist/internal/datetime.mjs +2 -13
- package/dist/package.json.mjs +1 -1
- package/dist/translations/en.mjs +5 -0
- package/dist/vscode.html-custom-data.json +348 -298
- package/package.json +3 -3
|
@@ -36,48 +36,112 @@
|
|
|
36
36
|
"references": []
|
|
37
37
|
},
|
|
38
38
|
{
|
|
39
|
-
"name": "flow-ui-
|
|
40
|
-
"description": "
|
|
39
|
+
"name": "flow-ui-animation",
|
|
40
|
+
"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.",
|
|
41
41
|
"attributes": [
|
|
42
42
|
{
|
|
43
|
-
"name": "
|
|
44
|
-
"description": "The
|
|
43
|
+
"name": "name",
|
|
44
|
+
"description": "The name of the built-in animation to use. For custom animations, use the `keyframes` prop.\nUse `getAnimationNames()` to retrieve a list of available animations.",
|
|
45
45
|
"values": []
|
|
46
46
|
},
|
|
47
47
|
{
|
|
48
|
-
"name": "
|
|
49
|
-
"description": "
|
|
48
|
+
"name": "play",
|
|
49
|
+
"description": "Plays the animation. When omitted, the animation will be paused. This attribute will be automatically removed when\nthe animation finishes or gets canceled.",
|
|
50
50
|
"values": []
|
|
51
51
|
},
|
|
52
52
|
{
|
|
53
|
-
"name": "
|
|
54
|
-
"description": "
|
|
53
|
+
"name": "delay",
|
|
54
|
+
"description": "The number of milliseconds to delay the start of the animation.",
|
|
55
55
|
"values": []
|
|
56
56
|
},
|
|
57
57
|
{
|
|
58
|
-
"name": "
|
|
59
|
-
"description": "
|
|
60
|
-
"values": [{ "name": "
|
|
58
|
+
"name": "direction",
|
|
59
|
+
"description": "Determines the direction of playback as well as the behavior when reaching the end of an iteration.\n[Learn more](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction)",
|
|
60
|
+
"values": [{ "name": "PlaybackDirection" }]
|
|
61
61
|
},
|
|
62
62
|
{
|
|
63
|
-
"name": "
|
|
64
|
-
"description": "The
|
|
63
|
+
"name": "duration",
|
|
64
|
+
"description": "The number of milliseconds each iteration of the animation takes to complete.",
|
|
65
|
+
"values": []
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
"name": "easing",
|
|
69
|
+
"description": "The easing function to use for the animation. This can be a Shoelace easing function or a custom easing function\nsuch as `cubic-bezier(0, 1, .76, 1.14)`.",
|
|
70
|
+
"values": []
|
|
71
|
+
},
|
|
72
|
+
{
|
|
73
|
+
"name": "end-delay",
|
|
74
|
+
"description": "The number of milliseconds to delay after the active period of an animation sequence.",
|
|
75
|
+
"values": []
|
|
76
|
+
},
|
|
77
|
+
{
|
|
78
|
+
"name": "fill",
|
|
79
|
+
"description": "Sets how the animation applies styles to its target before and after its execution.",
|
|
80
|
+
"values": [{ "name": "FillMode" }]
|
|
81
|
+
},
|
|
82
|
+
{
|
|
83
|
+
"name": "iterations",
|
|
84
|
+
"description": "The number of iterations to run before the animation completes. Defaults to `Infinity`, which loops.",
|
|
85
|
+
"values": []
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
"name": "iteration-start",
|
|
89
|
+
"description": "The offset at which to start the animation, usually between 0 (start) and 1 (end).",
|
|
90
|
+
"values": []
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
"name": "playback-rate",
|
|
94
|
+
"description": "Sets the animation's playback rate. The default is `1`, which plays the animation at a normal speed. Setting this\nto `2`, for example, will double the animation's speed. A negative value can be used to reverse the animation. This\nvalue can be changed without causing the animation to restart.",
|
|
95
|
+
"values": []
|
|
96
|
+
}
|
|
97
|
+
],
|
|
98
|
+
"references": []
|
|
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.",
|
|
65
107
|
"values": [
|
|
66
|
-
{ "name": "
|
|
67
|
-
{ "name": "
|
|
68
|
-
{ "name": "
|
|
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" }
|
|
69
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": []
|
|
70
134
|
}
|
|
71
135
|
],
|
|
72
136
|
"references": []
|
|
73
137
|
},
|
|
74
138
|
{
|
|
75
|
-
"name": "flow-ui-
|
|
76
|
-
"description": "
|
|
139
|
+
"name": "flow-ui-base-control",
|
|
140
|
+
"description": "Inputs collect data from the user.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-blur** - Emitted when the control loses focus.\n- **flow-ui-change** - Emitted when an alteration to the control's value is committed by the user.\n- **flow-ui-clear** - Emitted when the clear button is activated.\n- **flow-ui-focus** - Emitted when the control gains focus.\n- **flow-ui-input** - Emitted when the control receives input.\n- **flow-ui-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the input.\n- **blur()** - Removes focus from the input.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **prefix** - Used to prepend a presentational icon or similar element to the input.\n- **suffix** - Used to append a presentational icon or similar element to the input.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **show-password-icon** - An icon to use in lieu of the default show password icon.\n- **hide-password-icon** - An icon to use in lieu of the default hide password icon.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's base wrapper.\n- **input** - The internal `<input>` control.\n- **prefix** - The container that wraps the prefix.\n- **clear-button** - The clear button.\n- **password-toggle-button** - The password toggle button.\n- **suffix** - The container that wraps the suffix.",
|
|
77
141
|
"attributes": [
|
|
78
142
|
{
|
|
79
143
|
"name": "size",
|
|
80
|
-
"description": "The
|
|
144
|
+
"description": "The input's size.",
|
|
81
145
|
"values": [
|
|
82
146
|
{ "name": "small" },
|
|
83
147
|
{ "name": "medium" },
|
|
@@ -86,164 +150,107 @@
|
|
|
86
150
|
},
|
|
87
151
|
{
|
|
88
152
|
"name": "filled",
|
|
89
|
-
"description": "Draws a filled
|
|
153
|
+
"description": "Draws a filled input.",
|
|
90
154
|
"values": []
|
|
91
155
|
},
|
|
92
156
|
{
|
|
93
157
|
"name": "pill",
|
|
94
|
-
"description": "Draws a pill-style
|
|
158
|
+
"description": "Draws a pill-style input with rounded edges.",
|
|
95
159
|
"values": []
|
|
96
160
|
},
|
|
97
161
|
{
|
|
98
162
|
"name": "label",
|
|
99
|
-
"description": "The
|
|
163
|
+
"description": "The input's label. If you need to display HTML, use the `label` slot instead.",
|
|
100
164
|
"values": []
|
|
101
165
|
},
|
|
102
166
|
{
|
|
103
167
|
"name": "help-text",
|
|
104
|
-
"description": "The
|
|
105
|
-
"values": []
|
|
106
|
-
},
|
|
107
|
-
{
|
|
108
|
-
"name": "placeholder",
|
|
109
|
-
"description": "The autocomplete input's placeholder text",
|
|
168
|
+
"description": "The input's help text. If you need to display HTML, use the `help-text` slot instead.",
|
|
110
169
|
"values": []
|
|
111
170
|
},
|
|
112
171
|
{
|
|
113
172
|
"name": "disabled",
|
|
114
|
-
"description": "Disables the
|
|
173
|
+
"description": "Disables the input.",
|
|
115
174
|
"values": []
|
|
116
175
|
},
|
|
117
176
|
{
|
|
118
177
|
"name": "form",
|
|
119
|
-
"description": "
|
|
178
|
+
"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.",
|
|
120
179
|
"values": []
|
|
121
180
|
},
|
|
122
181
|
{
|
|
123
182
|
"name": "required",
|
|
124
|
-
"description": "Makes the
|
|
183
|
+
"description": "Makes the input a required field.",
|
|
125
184
|
"values": []
|
|
126
185
|
},
|
|
127
186
|
{
|
|
128
187
|
"name": "inline",
|
|
129
|
-
"description": "Display the
|
|
188
|
+
"description": "Display the input in the 'inline' form control style.",
|
|
130
189
|
"values": []
|
|
131
190
|
},
|
|
132
191
|
{
|
|
133
192
|
"name": "divider",
|
|
134
193
|
"description": "Indicates that the control should display a divider",
|
|
135
194
|
"values": []
|
|
136
|
-
},
|
|
137
|
-
{
|
|
138
|
-
"name": "hoist",
|
|
139
|
-
"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.",
|
|
140
|
-
"values": []
|
|
141
|
-
},
|
|
142
|
-
{
|
|
143
|
-
"name": "placement",
|
|
144
|
-
"description": "The preferred placement of the autocomplete's menu. Note that the actual placement may vary as needed to keep the listbox\ninside of the viewport.",
|
|
145
|
-
"values": [{ "name": "top" }, { "name": "bottom" }]
|
|
146
|
-
},
|
|
147
|
-
{
|
|
148
|
-
"name": "value",
|
|
149
|
-
"description": "Current value of the control, selected from one of the valid options available",
|
|
150
|
-
"values": []
|
|
151
|
-
},
|
|
152
|
-
{
|
|
153
|
-
"name": "displayWith",
|
|
154
|
-
"description": "Function for determining the `displayValue` for a given `value`.\nBy default, it will show the `value` itself.",
|
|
155
|
-
"values": [
|
|
156
|
-
{ "name": "((value: string) => string)" },
|
|
157
|
-
{ "name": "((value: string) => Promise<string>)" }
|
|
158
|
-
]
|
|
159
|
-
},
|
|
160
|
-
{
|
|
161
|
-
"name": "debounce-delay",
|
|
162
|
-
"description": "Debounce delay",
|
|
163
|
-
"values": []
|
|
164
|
-
},
|
|
165
|
-
{
|
|
166
|
-
"name": "clearable",
|
|
167
|
-
"description": "Show the option to clear input",
|
|
168
|
-
"values": []
|
|
169
|
-
},
|
|
170
|
-
{
|
|
171
|
-
"name": "clear-on-focus",
|
|
172
|
-
"description": "Clear the value when the autocomplete is focused on",
|
|
173
|
-
"values": []
|
|
174
195
|
}
|
|
175
196
|
],
|
|
176
197
|
"references": []
|
|
177
198
|
},
|
|
178
199
|
{
|
|
179
|
-
"name": "flow-ui-
|
|
180
|
-
"description": "
|
|
200
|
+
"name": "flow-ui-breadcrumb",
|
|
201
|
+
"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.",
|
|
181
202
|
"attributes": [
|
|
182
203
|
{
|
|
183
|
-
"name": "
|
|
184
|
-
"description": "The
|
|
185
|
-
"values": []
|
|
186
|
-
},
|
|
187
|
-
{
|
|
188
|
-
"name": "play",
|
|
189
|
-
"description": "Plays the animation. When omitted, the animation will be paused. This attribute will be automatically removed when\nthe animation finishes or gets canceled.",
|
|
190
|
-
"values": []
|
|
191
|
-
},
|
|
192
|
-
{
|
|
193
|
-
"name": "delay",
|
|
194
|
-
"description": "The number of milliseconds to delay the start of the animation.",
|
|
195
|
-
"values": []
|
|
196
|
-
},
|
|
197
|
-
{
|
|
198
|
-
"name": "direction",
|
|
199
|
-
"description": "Determines the direction of playback as well as the behavior when reaching the end of an iteration.\n[Learn more](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction)",
|
|
200
|
-
"values": [{ "name": "PlaybackDirection" }]
|
|
201
|
-
},
|
|
202
|
-
{
|
|
203
|
-
"name": "duration",
|
|
204
|
-
"description": "The number of milliseconds each iteration of the animation takes to complete.",
|
|
204
|
+
"name": "label",
|
|
205
|
+
"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.",
|
|
205
206
|
"values": []
|
|
206
|
-
}
|
|
207
|
+
}
|
|
208
|
+
],
|
|
209
|
+
"references": []
|
|
210
|
+
},
|
|
211
|
+
{
|
|
212
|
+
"name": "flow-ui-avatar",
|
|
213
|
+
"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.",
|
|
214
|
+
"attributes": [
|
|
207
215
|
{
|
|
208
|
-
"name": "
|
|
209
|
-
"description": "The
|
|
216
|
+
"name": "image",
|
|
217
|
+
"description": "The image source to use for the avatar.",
|
|
210
218
|
"values": []
|
|
211
219
|
},
|
|
212
220
|
{
|
|
213
|
-
"name": "
|
|
214
|
-
"description": "
|
|
221
|
+
"name": "label",
|
|
222
|
+
"description": "A label to use to describe the avatar to assistive devices.",
|
|
215
223
|
"values": []
|
|
216
224
|
},
|
|
217
225
|
{
|
|
218
|
-
"name": "
|
|
219
|
-
"description": "
|
|
220
|
-
"values": [{ "name": "FillMode" }]
|
|
221
|
-
},
|
|
222
|
-
{
|
|
223
|
-
"name": "iterations",
|
|
224
|
-
"description": "The number of iterations to run before the animation completes. Defaults to `Infinity`, which loops.",
|
|
226
|
+
"name": "initials",
|
|
227
|
+
"description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
|
|
225
228
|
"values": []
|
|
226
229
|
},
|
|
227
230
|
{
|
|
228
|
-
"name": "
|
|
229
|
-
"description": "
|
|
230
|
-
"values": []
|
|
231
|
+
"name": "loading",
|
|
232
|
+
"description": "Indicates how the browser should load the image.",
|
|
233
|
+
"values": [{ "name": "eager" }, { "name": "lazy" }]
|
|
231
234
|
},
|
|
232
235
|
{
|
|
233
|
-
"name": "
|
|
234
|
-
"description": "
|
|
235
|
-
"values": [
|
|
236
|
+
"name": "shape",
|
|
237
|
+
"description": "The shape of the avatar.",
|
|
238
|
+
"values": [
|
|
239
|
+
{ "name": "circle" },
|
|
240
|
+
{ "name": "square" },
|
|
241
|
+
{ "name": "rounded" }
|
|
242
|
+
]
|
|
236
243
|
}
|
|
237
244
|
],
|
|
238
245
|
"references": []
|
|
239
246
|
},
|
|
240
247
|
{
|
|
241
|
-
"name": "flow-ui-
|
|
242
|
-
"description": "
|
|
248
|
+
"name": "flow-ui-autocomplete",
|
|
249
|
+
"description": "The Autocomplete is a Text input enhanced by a panel of suggested options.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-input** - Emitted when the display value changes.\n- **flow-ui-change** - Emitted when the input value changes.\n- **flow-ui-focus** - Emitted when the input is focused.\n- **flow-ui-blur** - Emitted when the input is blurred.\n- **flow-ui-show** - Emitted when the dropdown is shown.\n- **flow-ui-after-show** - Emitted when the dropdown is shown.\n- **flow-ui-hide** - Emitted when the dropdown is hidden.\n- **flow-ui-after-hide** - Emitted when the dropdown is hidden.\n- **flow-ui-invalid** - Emitted when the input is invalid.\n- **flow-ui-valid** - Emitted when the input is valid.\n- **flow-ui-validate** - Emitted when the input is validated.\n- **flow-ui-validate-complete** - Emitted when the input is validated and the validity state is updated.\n- **flow-ui-validate-error** - Emitted when the input is validated and an error occurs.\n- **flow-ui-validate-success** - Emitted when the input is validated and no errors occur.\n\n### **Methods:**\n - **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **checkValidity(): _boolean_** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **reportValidity(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(_: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **focus()** - Focuses on the control\n- **blur()** - Blurs from the control.\n- **show()** - Shows the listbox.\n- **hide()** - Hides the listbox.\n- **getInputText()** - Gets the current value of the text input\n\n### **Slots:**\n - _default_ - The listbox options. Must be `<flow-option>` elements. You can use `<flow-divider>` to group items visually.\n- **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **prefix** - Used to prepend a presentational icon or similar element to the combobox.\n- **suffix** - Used to append a presentational icon or similar element to the combobox.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The select's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **combobox** - The container the wraps the prefix, suffix, combobox, clear icon, and expand button.\n- **prefix** - The container that wraps the prefix slot.\n- **suffix** - The container that wraps the suffix slot.\n- **display-input** - The element that displays the selected option's label, an `<input>` element.\n- **listbox** - The listbox container where options are slotted.\n- **clear-button** - The clear button.",
|
|
243
250
|
"attributes": [
|
|
244
251
|
{
|
|
245
252
|
"name": "size",
|
|
246
|
-
"description": "The
|
|
253
|
+
"description": "The autocomplete's size",
|
|
247
254
|
"values": [
|
|
248
255
|
{ "name": "small" },
|
|
249
256
|
{ "name": "medium" },
|
|
@@ -252,48 +259,91 @@
|
|
|
252
259
|
},
|
|
253
260
|
{
|
|
254
261
|
"name": "filled",
|
|
255
|
-
"description": "Draws a filled input
|
|
262
|
+
"description": "Draws a filled autocomplete input",
|
|
256
263
|
"values": []
|
|
257
264
|
},
|
|
258
265
|
{
|
|
259
266
|
"name": "pill",
|
|
260
|
-
"description": "Draws a pill-style input with rounded edges
|
|
267
|
+
"description": "Draws a pill-style autocomplete input with rounded edges",
|
|
261
268
|
"values": []
|
|
262
269
|
},
|
|
263
270
|
{
|
|
264
271
|
"name": "label",
|
|
265
|
-
"description": "The input's label. If you need to display HTML, use the `
|
|
272
|
+
"description": "The autocomplete input's label. If you need to display HTML, use the `help-text` slot instead",
|
|
266
273
|
"values": []
|
|
267
274
|
},
|
|
268
275
|
{
|
|
269
276
|
"name": "help-text",
|
|
270
|
-
"description": "The input's help text. If you need to display HTML, use the `help-text` slot instead
|
|
277
|
+
"description": "The autocomplete input's help text. If you need to display HTML, use the `help-text` slot instead",
|
|
278
|
+
"values": []
|
|
279
|
+
},
|
|
280
|
+
{
|
|
281
|
+
"name": "placeholder",
|
|
282
|
+
"description": "The autocomplete input's placeholder text",
|
|
271
283
|
"values": []
|
|
272
284
|
},
|
|
273
285
|
{
|
|
274
286
|
"name": "disabled",
|
|
275
|
-
"description": "Disables the
|
|
287
|
+
"description": "Disables the autocomplete",
|
|
276
288
|
"values": []
|
|
277
289
|
},
|
|
278
290
|
{
|
|
279
291
|
"name": "form",
|
|
280
|
-
"description": "
|
|
292
|
+
"description": "The \"form owner\" to associate the button with. If omitted, the closest containing form will be used instead. The\nvalue of this attribute must be an id of a form in the same document or shadow root as the button.",
|
|
281
293
|
"values": []
|
|
282
294
|
},
|
|
283
295
|
{
|
|
284
296
|
"name": "required",
|
|
285
|
-
"description": "Makes the
|
|
297
|
+
"description": "Makes the autocomplete a required field",
|
|
286
298
|
"values": []
|
|
287
299
|
},
|
|
288
300
|
{
|
|
289
301
|
"name": "inline",
|
|
290
|
-
"description": "Display the
|
|
302
|
+
"description": "Display the autocomplete in the 'inline' form control style",
|
|
291
303
|
"values": []
|
|
292
304
|
},
|
|
293
305
|
{
|
|
294
306
|
"name": "divider",
|
|
295
307
|
"description": "Indicates that the control should display a divider",
|
|
296
308
|
"values": []
|
|
309
|
+
},
|
|
310
|
+
{
|
|
311
|
+
"name": "hoist",
|
|
312
|
+
"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.",
|
|
313
|
+
"values": []
|
|
314
|
+
},
|
|
315
|
+
{
|
|
316
|
+
"name": "placement",
|
|
317
|
+
"description": "The preferred placement of the autocomplete's menu. Note that the actual placement may vary as needed to keep the listbox\ninside of the viewport.",
|
|
318
|
+
"values": [{ "name": "top" }, { "name": "bottom" }]
|
|
319
|
+
},
|
|
320
|
+
{
|
|
321
|
+
"name": "value",
|
|
322
|
+
"description": "Current value of the control, selected from one of the valid options available",
|
|
323
|
+
"values": []
|
|
324
|
+
},
|
|
325
|
+
{
|
|
326
|
+
"name": "displayWith",
|
|
327
|
+
"description": "Function for determining the `displayValue` for a given `value`.\nBy default, it will show the `value` itself.",
|
|
328
|
+
"values": [
|
|
329
|
+
{ "name": "((value: string) => string)" },
|
|
330
|
+
{ "name": "((value: string) => Promise<string>)" }
|
|
331
|
+
]
|
|
332
|
+
},
|
|
333
|
+
{
|
|
334
|
+
"name": "debounce-delay",
|
|
335
|
+
"description": "Debounce delay",
|
|
336
|
+
"values": []
|
|
337
|
+
},
|
|
338
|
+
{
|
|
339
|
+
"name": "clearable",
|
|
340
|
+
"description": "Show the option to clear input",
|
|
341
|
+
"values": []
|
|
342
|
+
},
|
|
343
|
+
{
|
|
344
|
+
"name": "clear-on-focus",
|
|
345
|
+
"description": "Clear the value when the autocomplete is focused on",
|
|
346
|
+
"values": []
|
|
297
347
|
}
|
|
298
348
|
],
|
|
299
349
|
"references": []
|
|
@@ -325,56 +375,6 @@
|
|
|
325
375
|
],
|
|
326
376
|
"references": []
|
|
327
377
|
},
|
|
328
|
-
{
|
|
329
|
-
"name": "flow-ui-breadcrumb",
|
|
330
|
-
"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.",
|
|
331
|
-
"attributes": [
|
|
332
|
-
{
|
|
333
|
-
"name": "label",
|
|
334
|
-
"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.",
|
|
335
|
-
"values": []
|
|
336
|
-
}
|
|
337
|
-
],
|
|
338
|
-
"references": []
|
|
339
|
-
},
|
|
340
|
-
{
|
|
341
|
-
"name": "flow-ui-badge",
|
|
342
|
-
"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.",
|
|
343
|
-
"attributes": [
|
|
344
|
-
{
|
|
345
|
-
"name": "variant",
|
|
346
|
-
"description": "The badge's theme variant.",
|
|
347
|
-
"values": [
|
|
348
|
-
{ "name": "primary" },
|
|
349
|
-
{ "name": "secondary" },
|
|
350
|
-
{ "name": "success" },
|
|
351
|
-
{ "name": "neutral" },
|
|
352
|
-
{ "name": "warning" },
|
|
353
|
-
{ "name": "danger" }
|
|
354
|
-
]
|
|
355
|
-
},
|
|
356
|
-
{
|
|
357
|
-
"name": "size",
|
|
358
|
-
"description": "The badge size.",
|
|
359
|
-
"values": [
|
|
360
|
-
{ "name": "small" },
|
|
361
|
-
{ "name": "medium" },
|
|
362
|
-
{ "name": "large" }
|
|
363
|
-
]
|
|
364
|
-
},
|
|
365
|
-
{
|
|
366
|
-
"name": "pill",
|
|
367
|
-
"description": "Draws a pill-style badge with rounded edges.",
|
|
368
|
-
"values": []
|
|
369
|
-
},
|
|
370
|
-
{
|
|
371
|
-
"name": "pulse",
|
|
372
|
-
"description": "Makes the badge pulsate to draw attention.",
|
|
373
|
-
"values": []
|
|
374
|
-
}
|
|
375
|
-
],
|
|
376
|
-
"references": []
|
|
377
|
-
},
|
|
378
378
|
{
|
|
379
379
|
"name": "flow-ui-busy-overlay",
|
|
380
380
|
"description": "Busy overlay is used to indicate that a component which displays data is being currently updated.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The component to overlay with when busy.\n- **busy-animation** - The indeterminate custom loading animation to display when busy.\n\n### **CSS Properties:**\n - **--transition-delay** - The delay after which the overlay is shown. _(default: undefined)_\n- **--transition-duration** - The duration of the overlay's fade-in/out transition. _(default: undefined)_\n- **--progress-ring-size** - The size of the default progress ring loading animation. _(default: undefined)_\n- **--progress-ring-track-width** - The width of the default progress ring's track. _(default: undefined)_\n- **--progress-ring-track-color** - The color of the default progress ring's track. _(default: undefined)_\n- **--overlay-background-color** - The background color of the overlay. _(default: undefined)_",
|
|
@@ -578,22 +578,27 @@
|
|
|
578
578
|
},
|
|
579
579
|
{
|
|
580
580
|
"name": "flow-ui-calendar",
|
|
581
|
-
"description": "
|
|
581
|
+
"description": "Calendars allow users to select a date, time or date range.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-input** - Emitted when the calendar value changes.\n- **flow-ui-change** - Emitted when the calendar value changes.\n\n### **CSS Properties:**\n - **--width** - The width of the calendar in CSS units, or of each month when `months` is `2`. Set automatically if `size` is set. _(default: undefined)_\n- **--font-size** - The font size of the calendar. Set automatically if `size` is set. _(default: undefined)_\n- **--day-font-size** - The font size of the day labels. Set automatically if `size` is set. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
582
582
|
"attributes": [
|
|
583
583
|
{
|
|
584
584
|
"name": "value",
|
|
585
|
-
"description": "The value of the control. (ISO8601 date/time string)",
|
|
585
|
+
"description": "The value of the control. (ISO8601 date/time string) In range mode, the value is an ISO8601 interval string\n(`<start>/<end>`) and the end is exclusive. For example, the date range October 1 to October 2 has the value\n`2026-10-01T00:00:00.000+01:00/2026-10-03T00:00:00.000+01:00`.",
|
|
586
586
|
"values": []
|
|
587
587
|
},
|
|
588
588
|
{
|
|
589
589
|
"name": "display-mode",
|
|
590
|
-
"description": "
|
|
590
|
+
"description": "The display mode: date only, time only, or both date and time.",
|
|
591
591
|
"values": [
|
|
592
592
|
{ "name": "date" },
|
|
593
593
|
{ "name": "time" },
|
|
594
594
|
{ "name": "datetime" }
|
|
595
595
|
]
|
|
596
596
|
},
|
|
597
|
+
{
|
|
598
|
+
"name": "range",
|
|
599
|
+
"description": "Set to `true` to select a date, datetime or time range instead of a single value, depending on `display-mode`.",
|
|
600
|
+
"values": []
|
|
601
|
+
},
|
|
597
602
|
{
|
|
598
603
|
"name": "timezone",
|
|
599
604
|
"description": "Set the timezone for display. If not set the default timezone will be used. (TZ name e.g. `'Europe/London'`)",
|
|
@@ -612,6 +617,26 @@
|
|
|
612
617
|
{ "name": "medium" },
|
|
613
618
|
{ "name": "large" }
|
|
614
619
|
]
|
|
620
|
+
},
|
|
621
|
+
{
|
|
622
|
+
"name": "months",
|
|
623
|
+
"description": "The number of months to show side by side.",
|
|
624
|
+
"values": [{ "name": "1" }, { "name": "2" }]
|
|
625
|
+
},
|
|
626
|
+
{
|
|
627
|
+
"name": "min",
|
|
628
|
+
"description": "The earliest date that can be selected. (ISO8601 date or date/time string) Note that `min` is ignored when\n`display-mode` is `time`.",
|
|
629
|
+
"values": []
|
|
630
|
+
},
|
|
631
|
+
{
|
|
632
|
+
"name": "max",
|
|
633
|
+
"description": "The latest date that can be selected. (ISO8601 date or date/time string) Note that `max` is ignored when\n`display-mode` is `time`.",
|
|
634
|
+
"values": []
|
|
635
|
+
},
|
|
636
|
+
{
|
|
637
|
+
"name": "max-range",
|
|
638
|
+
"description": "The maximum length of a range. (Duration string, e.g. `'7 days'` or `'1 month'`) Supported units are milliseconds,\nseconds, minutes, hours, days, weeks and months.",
|
|
639
|
+
"values": []
|
|
615
640
|
}
|
|
616
641
|
],
|
|
617
642
|
"references": []
|
|
@@ -1014,7 +1039,7 @@
|
|
|
1014
1039
|
},
|
|
1015
1040
|
{
|
|
1016
1041
|
"name": "flow-ui-date-time-picker",
|
|
1017
|
-
"description": "Date time pickers allow users to select a date and time
|
|
1042
|
+
"description": "Date time pickers allow users to select a date and time, or a date range, from a calendar.\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.",
|
|
1018
1043
|
"attributes": [
|
|
1019
1044
|
{
|
|
1020
1045
|
"name": "name",
|
|
@@ -1023,21 +1048,26 @@
|
|
|
1023
1048
|
},
|
|
1024
1049
|
{
|
|
1025
1050
|
"name": "value",
|
|
1026
|
-
"description": "The current value of the date/time picker. (ISO8601 date/time string)",
|
|
1051
|
+
"description": "The current value of the date/time picker. (ISO8601 date/time string) In range mode, the value is an ISO8601\ninterval string (`<start>/<end>`) and the end is exclusive. For example, the date range October 1 to October 2 has\nthe value `2026-10-01T00:00:00.000+01:00/2026-10-03T00:00:00.000+01:00`.",
|
|
1027
1052
|
"values": []
|
|
1028
1053
|
},
|
|
1029
1054
|
{
|
|
1030
1055
|
"name": "display-mode",
|
|
1031
|
-
"description": "
|
|
1056
|
+
"description": "The display mode: date only, time only, or both date and time.",
|
|
1032
1057
|
"values": [
|
|
1033
1058
|
{ "name": "date" },
|
|
1034
1059
|
{ "name": "time" },
|
|
1035
1060
|
{ "name": "datetime" }
|
|
1036
1061
|
]
|
|
1037
1062
|
},
|
|
1063
|
+
{
|
|
1064
|
+
"name": "range",
|
|
1065
|
+
"description": "Set to `true` to select a date, datetime or time range instead of a single value, depending on `display-mode`.",
|
|
1066
|
+
"values": []
|
|
1067
|
+
},
|
|
1038
1068
|
{
|
|
1039
1069
|
"name": "format",
|
|
1040
|
-
"description": "
|
|
1070
|
+
"description": "The format to use for display as a\n[Luxon format string](https://moment.github.io/luxon/#/formatting?id=table-of-tokens). If not set, the format\ndepends on `display-mode` (`'DD'` for `date`, `'HH:mm'` for `time` and `'FFF'` for `datetime`).",
|
|
1041
1071
|
"values": []
|
|
1042
1072
|
},
|
|
1043
1073
|
{
|
|
@@ -1059,6 +1089,26 @@
|
|
|
1059
1089
|
{ "name": "large" }
|
|
1060
1090
|
]
|
|
1061
1091
|
},
|
|
1092
|
+
{
|
|
1093
|
+
"name": "months",
|
|
1094
|
+
"description": "The number of months to show side by side in the calendar.",
|
|
1095
|
+
"values": [{ "name": "1" }, { "name": "2" }]
|
|
1096
|
+
},
|
|
1097
|
+
{
|
|
1098
|
+
"name": "min",
|
|
1099
|
+
"description": "The earliest date that can be selected. (ISO8601 date or date/time string) Note that `min` is ignored when\n`display-mode` is `time`.",
|
|
1100
|
+
"values": []
|
|
1101
|
+
},
|
|
1102
|
+
{
|
|
1103
|
+
"name": "max",
|
|
1104
|
+
"description": "The latest date that can be selected. (ISO8601 date or date/time string) Note that `max` is ignored when\n`display-mode` is `time`.",
|
|
1105
|
+
"values": []
|
|
1106
|
+
},
|
|
1107
|
+
{
|
|
1108
|
+
"name": "max-range",
|
|
1109
|
+
"description": "The maximum length of a range. (Duration string, e.g. `'7 days'` or `'1 month'`) Supported units are milliseconds,\nseconds, minutes, hours, days, weeks and months.",
|
|
1110
|
+
"values": []
|
|
1111
|
+
},
|
|
1062
1112
|
{
|
|
1063
1113
|
"name": "placeholder",
|
|
1064
1114
|
"description": "Placeholder text to show as a hint when the date/time picker is empty.",
|
|
@@ -2016,6 +2066,83 @@
|
|
|
2016
2066
|
],
|
|
2017
2067
|
"references": []
|
|
2018
2068
|
},
|
|
2069
|
+
{
|
|
2070
|
+
"name": "flow-ui-progress-bar",
|
|
2071
|
+
"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.",
|
|
2072
|
+
"attributes": [
|
|
2073
|
+
{
|
|
2074
|
+
"name": "label",
|
|
2075
|
+
"description": "A custom label for assistive devices.",
|
|
2076
|
+
"values": []
|
|
2077
|
+
},
|
|
2078
|
+
{
|
|
2079
|
+
"name": "value",
|
|
2080
|
+
"description": "The current progress as a percentage, 0 to 100.",
|
|
2081
|
+
"values": []
|
|
2082
|
+
},
|
|
2083
|
+
{
|
|
2084
|
+
"name": "indeterminate",
|
|
2085
|
+
"description": "When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state.",
|
|
2086
|
+
"values": []
|
|
2087
|
+
},
|
|
2088
|
+
{
|
|
2089
|
+
"name": "variant",
|
|
2090
|
+
"description": "The progress bar's theme variant",
|
|
2091
|
+
"values": [
|
|
2092
|
+
{ "name": "primary" },
|
|
2093
|
+
{ "name": "secondary" },
|
|
2094
|
+
{ "name": "success" },
|
|
2095
|
+
{ "name": "neutral" },
|
|
2096
|
+
{ "name": "warning" },
|
|
2097
|
+
{ "name": "danger" }
|
|
2098
|
+
]
|
|
2099
|
+
}
|
|
2100
|
+
],
|
|
2101
|
+
"references": []
|
|
2102
|
+
},
|
|
2103
|
+
{
|
|
2104
|
+
"name": "flow-ui-progress-ring",
|
|
2105
|
+
"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.",
|
|
2106
|
+
"attributes": [
|
|
2107
|
+
{
|
|
2108
|
+
"name": "label",
|
|
2109
|
+
"description": "A custom label for assistive devices.",
|
|
2110
|
+
"values": []
|
|
2111
|
+
},
|
|
2112
|
+
{
|
|
2113
|
+
"name": "value",
|
|
2114
|
+
"description": "The current progress as a percentage, 0 to 100.",
|
|
2115
|
+
"values": []
|
|
2116
|
+
},
|
|
2117
|
+
{
|
|
2118
|
+
"name": "indeterminate",
|
|
2119
|
+
"description": "If the progress animation is indeterminate",
|
|
2120
|
+
"values": []
|
|
2121
|
+
},
|
|
2122
|
+
{
|
|
2123
|
+
"name": "variant",
|
|
2124
|
+
"description": "The progress ring's theme variant",
|
|
2125
|
+
"values": [
|
|
2126
|
+
{ "name": "primary" },
|
|
2127
|
+
{ "name": "secondary" },
|
|
2128
|
+
{ "name": "success" },
|
|
2129
|
+
{ "name": "neutral" },
|
|
2130
|
+
{ "name": "warning" },
|
|
2131
|
+
{ "name": "danger" }
|
|
2132
|
+
]
|
|
2133
|
+
},
|
|
2134
|
+
{
|
|
2135
|
+
"name": "size",
|
|
2136
|
+
"description": "The progress ring's size",
|
|
2137
|
+
"values": [
|
|
2138
|
+
{ "name": "small" },
|
|
2139
|
+
{ "name": "medium" },
|
|
2140
|
+
{ "name": "large" }
|
|
2141
|
+
]
|
|
2142
|
+
}
|
|
2143
|
+
],
|
|
2144
|
+
"references": []
|
|
2145
|
+
},
|
|
2019
2146
|
{
|
|
2020
2147
|
"name": "flow-ui-popup",
|
|
2021
2148
|
"description": "Popup is a utility that lets you declaratively anchor \"popup\" containers to another element.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-reposition** - Emitted when the popup is repositioned. This event can fire a lot, so avoid putting expensive operations in your listener or consider debouncing it.\n\n### **Methods:**\n - **reposition()** - Forces the popup to recalculate and reposition itself.\n\n### **Slots:**\n - _default_ - The popup's content.\n- **anchor** - The element the popup will be anchored to. If the anchor lives outside of the popup, you can use the `anchor` attribute or property instead.\n\n### **CSS Properties:**\n - **--arrow-size** - The size of the arrow. Note that an arrow won't be shown unless the `arrow` attribute is used. _(default: 6px)_\n- **--arrow-color** - The color of the arrow. _(default: undefined)_\n- **--auto-size-available-width** - A read-only custom property that determines the amount of width the popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only available when using `auto-size`. _(default: undefined)_\n- **--auto-size-available-height** - A read-only custom property that determines the amount of height the popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only available when using `auto-size`. _(default: undefined)_\n\n### **CSS Parts:**\n - **arrow** - The arrow's container. Avoid setting `top|bottom|left|right` properties, as these values are assigned dynamically as the popup moves. This is most useful for applying a background color to match the popup, and maybe a border or box shadow.\n- **popup** - The popup's container. Useful for setting a background color, box shadow, etc.\n- **hover-bridge** - The hover bridge element. Only available when the `hover-bridge` option is enabled.",
|
|
@@ -2160,124 +2287,6 @@
|
|
|
2160
2287
|
],
|
|
2161
2288
|
"references": []
|
|
2162
2289
|
},
|
|
2163
|
-
{
|
|
2164
|
-
"name": "flow-ui-progress-bar",
|
|
2165
|
-
"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.",
|
|
2166
|
-
"attributes": [
|
|
2167
|
-
{
|
|
2168
|
-
"name": "label",
|
|
2169
|
-
"description": "A custom label for assistive devices.",
|
|
2170
|
-
"values": []
|
|
2171
|
-
},
|
|
2172
|
-
{
|
|
2173
|
-
"name": "value",
|
|
2174
|
-
"description": "The current progress as a percentage, 0 to 100.",
|
|
2175
|
-
"values": []
|
|
2176
|
-
},
|
|
2177
|
-
{
|
|
2178
|
-
"name": "indeterminate",
|
|
2179
|
-
"description": "When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state.",
|
|
2180
|
-
"values": []
|
|
2181
|
-
},
|
|
2182
|
-
{
|
|
2183
|
-
"name": "variant",
|
|
2184
|
-
"description": "The progress bar's theme variant",
|
|
2185
|
-
"values": [
|
|
2186
|
-
{ "name": "primary" },
|
|
2187
|
-
{ "name": "secondary" },
|
|
2188
|
-
{ "name": "success" },
|
|
2189
|
-
{ "name": "neutral" },
|
|
2190
|
-
{ "name": "warning" },
|
|
2191
|
-
{ "name": "danger" }
|
|
2192
|
-
]
|
|
2193
|
-
}
|
|
2194
|
-
],
|
|
2195
|
-
"references": []
|
|
2196
|
-
},
|
|
2197
|
-
{
|
|
2198
|
-
"name": "flow-ui-progress-ring",
|
|
2199
|
-
"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.",
|
|
2200
|
-
"attributes": [
|
|
2201
|
-
{
|
|
2202
|
-
"name": "label",
|
|
2203
|
-
"description": "A custom label for assistive devices.",
|
|
2204
|
-
"values": []
|
|
2205
|
-
},
|
|
2206
|
-
{
|
|
2207
|
-
"name": "value",
|
|
2208
|
-
"description": "The current progress as a percentage, 0 to 100.",
|
|
2209
|
-
"values": []
|
|
2210
|
-
},
|
|
2211
|
-
{
|
|
2212
|
-
"name": "indeterminate",
|
|
2213
|
-
"description": "If the progress animation is indeterminate",
|
|
2214
|
-
"values": []
|
|
2215
|
-
},
|
|
2216
|
-
{
|
|
2217
|
-
"name": "variant",
|
|
2218
|
-
"description": "The progress ring's theme variant",
|
|
2219
|
-
"values": [
|
|
2220
|
-
{ "name": "primary" },
|
|
2221
|
-
{ "name": "secondary" },
|
|
2222
|
-
{ "name": "success" },
|
|
2223
|
-
{ "name": "neutral" },
|
|
2224
|
-
{ "name": "warning" },
|
|
2225
|
-
{ "name": "danger" }
|
|
2226
|
-
]
|
|
2227
|
-
},
|
|
2228
|
-
{
|
|
2229
|
-
"name": "size",
|
|
2230
|
-
"description": "The progress ring's size",
|
|
2231
|
-
"values": [
|
|
2232
|
-
{ "name": "small" },
|
|
2233
|
-
{ "name": "medium" },
|
|
2234
|
-
{ "name": "large" }
|
|
2235
|
-
]
|
|
2236
|
-
}
|
|
2237
|
-
],
|
|
2238
|
-
"references": []
|
|
2239
|
-
},
|
|
2240
|
-
{
|
|
2241
|
-
"name": "flow-ui-query-builder",
|
|
2242
|
-
"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.",
|
|
2243
|
-
"attributes": [
|
|
2244
|
-
{
|
|
2245
|
-
"name": "size",
|
|
2246
|
-
"description": "The query builder's size.",
|
|
2247
|
-
"values": [
|
|
2248
|
-
{ "name": "small" },
|
|
2249
|
-
{ "name": "medium" },
|
|
2250
|
-
{ "name": "large" }
|
|
2251
|
-
]
|
|
2252
|
-
},
|
|
2253
|
-
{
|
|
2254
|
-
"name": "disabled",
|
|
2255
|
-
"description": "Disables the select control.",
|
|
2256
|
-
"values": []
|
|
2257
|
-
},
|
|
2258
|
-
{
|
|
2259
|
-
"name": "label",
|
|
2260
|
-
"description": "The query builders's label. If you need to display HTML, use the `label` slot instead.",
|
|
2261
|
-
"values": []
|
|
2262
|
-
},
|
|
2263
|
-
{
|
|
2264
|
-
"name": "help-text",
|
|
2265
|
-
"description": "The query builders's help text. If you need to display HTML, use the `help-text` slot instead.",
|
|
2266
|
-
"values": []
|
|
2267
|
-
},
|
|
2268
|
-
{
|
|
2269
|
-
"name": "tree-lines",
|
|
2270
|
-
"description": "Display tree connector lines between query rules",
|
|
2271
|
-
"values": []
|
|
2272
|
-
},
|
|
2273
|
-
{
|
|
2274
|
-
"name": "borders",
|
|
2275
|
-
"description": "Display control borders",
|
|
2276
|
-
"values": []
|
|
2277
|
-
}
|
|
2278
|
-
],
|
|
2279
|
-
"references": []
|
|
2280
|
-
},
|
|
2281
2290
|
{
|
|
2282
2291
|
"name": "flow-ui-radio",
|
|
2283
2292
|
"description": "Radios allow the user to select a single option from a group.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-blur** - Emitted when the control loses focus.\n- **flow-ui-focus** - Emitted when the control gains focus.\n\n### **Slots:**\n - _default_ - The radio's label.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control** - The circular container that wraps the radio's checked state.\n- **control--checked** - The radio control when the radio is checked.\n- **checked-icon** - The checked icon, an `<flow-ui-icon>` element.\n- **label** - The container that wraps the radio's label.",
|
|
@@ -2372,6 +2381,47 @@
|
|
|
2372
2381
|
],
|
|
2373
2382
|
"references": []
|
|
2374
2383
|
},
|
|
2384
|
+
{
|
|
2385
|
+
"name": "flow-ui-query-builder",
|
|
2386
|
+
"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.",
|
|
2387
|
+
"attributes": [
|
|
2388
|
+
{
|
|
2389
|
+
"name": "size",
|
|
2390
|
+
"description": "The query builder's size.",
|
|
2391
|
+
"values": [
|
|
2392
|
+
{ "name": "small" },
|
|
2393
|
+
{ "name": "medium" },
|
|
2394
|
+
{ "name": "large" }
|
|
2395
|
+
]
|
|
2396
|
+
},
|
|
2397
|
+
{
|
|
2398
|
+
"name": "disabled",
|
|
2399
|
+
"description": "Disables the select control.",
|
|
2400
|
+
"values": []
|
|
2401
|
+
},
|
|
2402
|
+
{
|
|
2403
|
+
"name": "label",
|
|
2404
|
+
"description": "The query builders's label. If you need to display HTML, use the `label` slot instead.",
|
|
2405
|
+
"values": []
|
|
2406
|
+
},
|
|
2407
|
+
{
|
|
2408
|
+
"name": "help-text",
|
|
2409
|
+
"description": "The query builders's help text. If you need to display HTML, use the `help-text` slot instead.",
|
|
2410
|
+
"values": []
|
|
2411
|
+
},
|
|
2412
|
+
{
|
|
2413
|
+
"name": "tree-lines",
|
|
2414
|
+
"description": "Display tree connector lines between query rules",
|
|
2415
|
+
"values": []
|
|
2416
|
+
},
|
|
2417
|
+
{
|
|
2418
|
+
"name": "borders",
|
|
2419
|
+
"description": "Display control borders",
|
|
2420
|
+
"values": []
|
|
2421
|
+
}
|
|
2422
|
+
],
|
|
2423
|
+
"references": []
|
|
2424
|
+
},
|
|
2375
2425
|
{
|
|
2376
2426
|
"name": "flow-ui-range",
|
|
2377
2427
|
"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.",
|