@emuanalytics/flow-rdf-ui 4.1.0-preview.2 → 4.1.0-preview.21

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.
Files changed (74) hide show
  1. package/dist/components/alert/alert.styles.mjs +1 -1
  2. package/dist/components/badge/badge.component.mjs +4 -0
  3. package/dist/components/badge/badge.styles.mjs +13 -0
  4. package/dist/components/breadcrumb-item/breadcrumb-item.styles.mjs +1 -1
  5. package/dist/components/button/button.styles.mjs +2 -2
  6. package/dist/components/calendar/calendar.component.mjs +3 -0
  7. package/dist/components/calendar/calendar.styles.mjs +13 -4
  8. package/dist/components/card/card.component.mjs +27 -7
  9. package/dist/components/card/card.styles.mjs +9 -37
  10. package/dist/components/chart/chart.component.mjs +19 -3
  11. package/dist/components/chart/chart.styles.mjs +20 -1
  12. package/dist/components/checkbox-group/checkbox-group.component.mjs +4 -0
  13. package/dist/components/date-time-picker/date-time-picker.component.mjs +2 -0
  14. package/dist/components/date-time-picker/date-time-picker.styles.mjs +2 -2
  15. package/dist/components/dialog/dialog.component.mjs +7 -6
  16. package/dist/components/dialog/dialog.styles.mjs +16 -7
  17. package/dist/components/form-group/form-group.component.mjs +19 -14
  18. package/dist/components/form-group/form-group.styles.mjs +10 -5
  19. package/dist/components/gauge/gauge.component.mjs +7 -6
  20. package/dist/components/gauge/gauge.styles.mjs +2 -2
  21. package/dist/components/icon/library.system.mjs +2 -1
  22. package/dist/components/icon-button/icon-button.styles.mjs +1 -1
  23. package/dist/components/list/list.component.mjs +101 -0
  24. package/dist/components/list/list.mjs +5 -0
  25. package/dist/components/list/list.styles.mjs +21 -0
  26. package/dist/components/list-item/list-item.component.mjs +197 -0
  27. package/dist/components/list-item/list-item.mjs +5 -0
  28. package/dist/components/list-item/list-item.styles.mjs +63 -0
  29. package/dist/components/map/map.component.mjs +6 -1
  30. package/dist/components/map/map.styles.mjs +1 -0
  31. package/dist/components/menu/menu.styles.mjs +1 -0
  32. package/dist/components/menu-item/menu-item.styles.mjs +1 -1
  33. package/dist/components/menu-label/menu-label.styles.mjs +1 -1
  34. package/dist/components/option/option.styles.mjs +1 -1
  35. package/dist/components/panel/panel.component.mjs +10 -3
  36. package/dist/components/panel/panel.styles.mjs +4 -0
  37. package/dist/components/panel-header/panel-header.component.mjs +5 -4
  38. package/dist/components/panel-header/panel-header.styles.mjs +3 -2
  39. package/dist/components/query-builder/converters/flow-query-converters.mjs +1 -5
  40. package/dist/components/query-builder/converters/javascript-filter-converter.mjs +1 -5
  41. package/dist/components/query-builder/converters/map-layer-filter-converter.mjs +1 -5
  42. package/dist/components/query-builder/helpers.mjs +15 -1
  43. package/dist/components/query-builder/query-builder.component.mjs +38 -20
  44. package/dist/components/query-builder/query-builder.styles.mjs +21 -5
  45. package/dist/components/range/range.component.mjs +1 -1
  46. package/dist/components/range/range.styles.mjs +5 -1
  47. package/dist/components/select/select.styles.mjs +9 -0
  48. package/dist/components/spinner/spinner.styles.mjs +1 -1
  49. package/dist/components/stepper/stepper.styles.mjs +5 -6
  50. package/dist/components/switch/switch.styles.mjs +35 -15
  51. package/dist/components/tab/tab.component.mjs +4 -0
  52. package/dist/components/tab/tab.styles.mjs +13 -1
  53. package/dist/components/tab-group/tab-group.component.mjs +1 -0
  54. package/dist/components/tab-group/tab-group.styles.mjs +1 -0
  55. package/dist/components/tab-panel/tab-panel.component.mjs +7 -1
  56. package/dist/components/tab-panel/tab-panel.styles.mjs +7 -3
  57. package/dist/components/tag/tag.styles.mjs +13 -13
  58. package/dist/components/timer/timer.component.mjs +2 -1
  59. package/dist/components/timer/timer.styles.mjs +2 -2
  60. package/dist/components/tool-button/tool-button.styles.mjs +9 -9
  61. package/dist/components/tree-item/tree-item.styles.mjs +3 -3
  62. package/dist/custom-elements.json +4739 -3935
  63. package/dist/index.d.mts +200 -19
  64. package/dist/index.d.ts +200 -19
  65. package/dist/index.mjs +3 -1
  66. package/dist/package.json.mjs +1 -1
  67. package/dist/styles/form-control.styles.mjs +5 -0
  68. package/dist/utilities/register-components.mjs +7 -0
  69. package/dist/vscode.html-custom-data.json +169 -91
  70. package/package.json +1 -1
  71. package/themes/dark.css +141 -88
  72. package/themes/dark.styles.js +143 -88
  73. package/themes/light.css +144 -79
  74. package/themes/light.styles.js +146 -79
@@ -97,35 +97,6 @@
97
97
  ],
98
98
  "references": []
99
99
  },
100
- {
101
- "name": "flow-ui-badge",
102
- "description": "Badges are used to draw attention and display statuses or counts.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The badge's content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
103
- "attributes": [
104
- {
105
- "name": "variant",
106
- "description": "The badge's theme variant.",
107
- "values": [
108
- { "name": "primary" },
109
- { "name": "secondary" },
110
- { "name": "success" },
111
- { "name": "neutral" },
112
- { "name": "warning" },
113
- { "name": "danger" }
114
- ]
115
- },
116
- {
117
- "name": "pill",
118
- "description": "Draws a pill-style badge with rounded edges.",
119
- "values": []
120
- },
121
- {
122
- "name": "pulse",
123
- "description": "Makes the badge pulsate to draw attention.",
124
- "values": []
125
- }
126
- ],
127
- "references": []
128
- },
129
100
  {
130
101
  "name": "flow-ui-avatar",
131
102
  "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.",
@@ -162,6 +133,18 @@
162
133
  ],
163
134
  "references": []
164
135
  },
136
+ {
137
+ "name": "flow-ui-breadcrumb",
138
+ "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.",
139
+ "attributes": [
140
+ {
141
+ "name": "label",
142
+ "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.",
143
+ "values": []
144
+ }
145
+ ],
146
+ "references": []
147
+ },
165
148
  {
166
149
  "name": "flow-ui-base-control",
167
150
  "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.",
@@ -223,6 +206,44 @@
223
206
  ],
224
207
  "references": []
225
208
  },
209
+ {
210
+ "name": "flow-ui-badge",
211
+ "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.",
212
+ "attributes": [
213
+ {
214
+ "name": "variant",
215
+ "description": "The badge's theme variant.",
216
+ "values": [
217
+ { "name": "primary" },
218
+ { "name": "secondary" },
219
+ { "name": "success" },
220
+ { "name": "neutral" },
221
+ { "name": "warning" },
222
+ { "name": "danger" }
223
+ ]
224
+ },
225
+ {
226
+ "name": "size",
227
+ "description": "The badge size.",
228
+ "values": [
229
+ { "name": "small" },
230
+ { "name": "medium" },
231
+ { "name": "large" }
232
+ ]
233
+ },
234
+ {
235
+ "name": "pill",
236
+ "description": "Draws a pill-style badge with rounded edges.",
237
+ "values": []
238
+ },
239
+ {
240
+ "name": "pulse",
241
+ "description": "Makes the badge pulsate to draw attention.",
242
+ "values": []
243
+ }
244
+ ],
245
+ "references": []
246
+ },
226
247
  {
227
248
  "name": "flow-ui-breadcrumb-item",
228
249
  "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.",
@@ -400,18 +421,6 @@
400
421
  ],
401
422
  "references": []
402
423
  },
403
- {
404
- "name": "flow-ui-breadcrumb",
405
- "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.",
406
- "attributes": [
407
- {
408
- "name": "label",
409
- "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.",
410
- "values": []
411
- }
412
- ],
413
- "references": []
414
- },
415
424
  {
416
425
  "name": "flow-ui-button-group",
417
426
  "description": "Button groups can be used to group related buttons into sections.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - One or more `<flow-ui-button>` elements to display in the button group.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
@@ -472,7 +481,7 @@
472
481
  {
473
482
  "name": "flow-ui-card",
474
483
  "description": "Cards can be used to group related subjects in a container.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The card's main content.\n- **header** - An optional header for the card.\n- **footer** - An optional footer for the card.\n- **image** - An optional image to render at the start of the card.\n\n### **CSS Properties:**\n - **--border-color** - The card's border color, including borders that occur inside the card. _(default: undefined)_\n- **--border-radius** - The border radius for the card's edges. _(default: undefined)_\n- **--border-width** - The width of the card's borders. _(default: undefined)_\n- **--padding** - The padding to use for the card's sections. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **image** - The container that wraps the card's image.\n- **header** - The container that wraps the card's header.\n- **body** - The container that wraps the card's main content.\n- **footer** - The container that wraps the card's footer.",
475
- "attributes": [],
484
+ "attributes": [{ "name": "title", "values": [] }],
476
485
  "references": []
477
486
  },
478
487
  {
@@ -535,8 +544,13 @@
535
544
  },
536
545
  {
537
546
  "name": "flow-ui-chart",
538
- "description": "The chart component displays Chart.js charts.\n\n\n---\n\n\n\n\n### **Methods:**\n - **repaint()** - Trigger a repaint of the chart.\n\n### **CSS Properties:**\n - **--background-color** - Chart background color (applied as the background color of the base container). _(default: undefined)_\n- **--text-color** - General text color (titles etc.) _(default: undefined)_\n- **--axis-color** - Color of the axis lines. _(default: undefined)_\n- **--x-axis-color** - Color of the x-axis lines. (defaults to `--axis-color`) _(default: undefined)_\n- **--y-axis-color** - Color of the y-axis lines. (defaults to `--axis-color`) _(default: undefined)_\n- **--axis-grid-color** - Color of the axis grid lines. _(default: undefined)_\n- **--x-axis-grid-color** - Color of the x-axis grid lines. (defaults to `--axis-grid-color`) _(default: undefined)_\n- **--y-axis-grid-color** - Color of the y-axis grid lines. (defaults to `--axis-grid-color`) _(default: undefined)_\n- **--axis-label-color** - Color of the axis labels. _(default: undefined)_\n- **--x-axis-label-color** - Color of the x-axis labels. (defaults to `--axis-label-color`) _(default: undefined)_\n- **--y-axis-label-color** - Color of the y-axis labels. (defaults to `--axis-label-color`) _(default: undefined)_\n- **--tick-label-color** - Color of the tick labels. _(default: undefined)_\n- **--x-tick-label-color** - Color of the x-axis tick labels. (defaults to `--tick-label-color`) _(default: undefined)_\n- **--y-tick-label-color** - Color of the y-axis tick labels. (defaults to `--tick-label-color`) _(default: undefined)_\n- **--dataset-stroke-color-n** - Color of the stroke for dataset n (where n = 0-9). _(default: undefined)_\n- **--dataset-fill-color-n** - Color of the fill for dataset n (where n = 0-9). _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The base container of the chart.",
547
+ "description": "The chart component displays Chart.js charts.\n\n\n---\n\n\n\n\n### **Methods:**\n - **repaint()** - Trigger a repaint of the chart.\n\n### **Slots:**\n - **title** - The chart's title. Alternatively, you can use the `title` attribute.\n\n### **CSS Properties:**\n - **--background-color** - Chart background color (applied as the background color of the base container). _(default: undefined)_\n- **--text-color** - General text color (titles etc.) _(default: undefined)_\n- **--axis-color** - Color of the axis lines. _(default: undefined)_\n- **--x-axis-color** - Color of the x-axis lines. (defaults to `--axis-color`) _(default: undefined)_\n- **--y-axis-color** - Color of the y-axis lines. (defaults to `--axis-color`) _(default: undefined)_\n- **--axis-grid-color** - Color of the axis grid lines. _(default: undefined)_\n- **--x-axis-grid-color** - Color of the x-axis grid lines. (defaults to `--axis-grid-color`) _(default: undefined)_\n- **--y-axis-grid-color** - Color of the y-axis grid lines. (defaults to `--axis-grid-color`) _(default: undefined)_\n- **--axis-label-color** - Color of the axis labels. _(default: undefined)_\n- **--x-axis-label-color** - Color of the x-axis labels. (defaults to `--axis-label-color`) _(default: undefined)_\n- **--y-axis-label-color** - Color of the y-axis labels. (defaults to `--axis-label-color`) _(default: undefined)_\n- **--tick-label-color** - Color of the tick labels. _(default: undefined)_\n- **--x-tick-label-color** - Color of the x-axis tick labels. (defaults to `--tick-label-color`) _(default: undefined)_\n- **--y-tick-label-color** - Color of the y-axis tick labels. (defaults to `--tick-label-color`) _(default: undefined)_\n- **--dataset-stroke-color-n** - Color of the stroke for dataset n (where n = 0-9). _(default: undefined)_\n- **--dataset-fill-color-n** - Color of the fill for dataset n (where n = 0-9). _(default: undefined)_\n- **--header-padding** - Chart header padding. _(default: undefined)_\n- **--header-height** - Chart header height. _(default: undefined)_\n- **--header-font-size** - Chart header font size. _(default: undefined)_\n- **--header-color** - Chart header text color. _(default: undefined)_\n\n### **CSS Parts:**\n - **header** - The header container of the chart.\n- **title** - The chart title placed in the header.",
539
548
  "attributes": [
549
+ {
550
+ "name": "title",
551
+ "description": "A label displayed in the chart's header. If you need to display HTML, use the `label` slot instead.",
552
+ "values": []
553
+ },
540
554
  {
541
555
  "name": "type",
542
556
  "description": "The Chart.js chart type (e.g `line`, `bar` or a custom type).",
@@ -658,37 +672,6 @@
658
672
  ],
659
673
  "references": []
660
674
  },
661
- {
662
- "name": "flow-ui-color-mapper",
663
- "description": "A component for defining mappings between data values and colors.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-change** - Fired when the color mapper's value changes.",
664
- "attributes": [
665
- {
666
- "name": "options",
667
- "description": "The color mapper configuration specifying available fields.",
668
- "values": [{ "name": "ColorMapperOptions" }]
669
- },
670
- {
671
- "name": "value",
672
- "description": "The current value of the color mapper.",
673
- "values": [{ "name": "ColorMapperValue" }]
674
- },
675
- {
676
- "name": "size",
677
- "description": "The size of the color mapper component.",
678
- "values": [
679
- { "name": "small" },
680
- { "name": "medium" },
681
- { "name": "large" }
682
- ]
683
- },
684
- {
685
- "name": "swatches",
686
- "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.",
687
- "values": [{ "name": "string[]" }]
688
- }
689
- ],
690
- "references": []
691
- },
692
675
  {
693
676
  "name": "flow-ui-color-picker",
694
677
  "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.",
@@ -804,6 +787,37 @@
804
787
  ],
805
788
  "references": []
806
789
  },
790
+ {
791
+ "name": "flow-ui-color-mapper",
792
+ "description": "A component for defining mappings between data values and colors.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-change** - Fired when the color mapper's value changes.",
793
+ "attributes": [
794
+ {
795
+ "name": "options",
796
+ "description": "The color mapper configuration specifying available fields.",
797
+ "values": [{ "name": "ColorMapperOptions" }]
798
+ },
799
+ {
800
+ "name": "value",
801
+ "description": "The current value of the color mapper.",
802
+ "values": [{ "name": "ColorMapperValue" }]
803
+ },
804
+ {
805
+ "name": "size",
806
+ "description": "The size of the color mapper component.",
807
+ "values": [
808
+ { "name": "small" },
809
+ { "name": "medium" },
810
+ { "name": "large" }
811
+ ]
812
+ },
813
+ {
814
+ "name": "swatches",
815
+ "description": "One or more predefined color swatches to display as presets in the color picker. Can include any format the color\npicker can parse, including HEX(A), RGB(A), HSL(A), HSV(A), and CSS color names. Each color must be separated by a\nsemicolon (`;`). Alternatively, you can pass an array of color values to this property using JavaScript.",
816
+ "values": [{ "name": "string[]" }]
817
+ }
818
+ ],
819
+ "references": []
820
+ },
807
821
  {
808
822
  "name": "flow-ui-color-stop",
809
823
  "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.",
@@ -1011,7 +1025,7 @@
1011
1025
  },
1012
1026
  {
1013
1027
  "name": "flow-ui-dialog",
1014
- "description": "Dialogs, sometimes called \"modals\", appear above the page and require the user's immediate attention.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-show** - Emitted when the dialog opens.\n- **flow-ui-after-show** - Emitted after the dialog opens and all animations are complete.\n- **flow-ui-hide** - Emitted when the dialog closes.\n- **flow-ui-after-hide** - Emitted after the dialog closes and all animations are complete.\n- **flow-ui-initial-focus** - Emitted when the dialog opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n- **flow-ui-request-close** - Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss.\n- **flow-ui-tab-show** - Emitted when a tab is shown.\n- **flow-ui-tab-hide** - Emitted when a tab is hidden.\n\n### **Methods:**\n - **show()** - Shows the dialog.\n- **hide()** - Hides the dialog\n\n### **Slots:**\n - _default_ - The dialog's main content.\n- **heading** - The dialog's heading text. Alternatively, you can use the `heading` attribute.\n- **header-actions** - Optional actions to add to the header. Works best with `<flow-ui-icon-button>`.\n- **footer** - The dialog's footer, usually one or more buttons representing various options.\n\n### **CSS Properties:**\n - **--width** - The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens. _(default: undefined)_\n- **--header-spacing** - The amount of padding to use for the header. _(default: undefined)_\n- **--body-spacing** - The amount of padding to use for the body. _(default: undefined)_\n- **--footer-spacing** - The amount of padding to use for the footer. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **overlay** - The overlay that covers the screen behind the dialog.\n- **panel** - The dialog's panel (where the dialog and its content are rendered).\n- **header** - The dialog's header. This element wraps the title and header actions.\n- **header-actions** - Optional actions to add to the header. Works best with `<flow-ui-icon-button>`.\n- **heading** - The dialog's heading text.\n- **close-button** - The close button, an `<flow-ui-icon-button>`.\n- **close-button__base** - The close button's exported `base` part.\n- **body** - The dialog's body.\n- **footer** - The dialog's footer.\n- **tab-group__nav** - The tab group's navigation container where tabs are slotted in.\n- **tab-group__tabs** - The container that wraps the tabs.\n- **tab-group__active-tab-indicator** - The line that highlights the currently selected tab.\n- **tab-group__body** - The tab group's body where tab panels are slotted in.",
1028
+ "description": "Dialogs, sometimes called \"modals\", appear above the page and require the user's immediate attention.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-show** - Emitted when the dialog opens.\n- **flow-ui-after-show** - Emitted after the dialog opens and all animations are complete.\n- **flow-ui-hide** - Emitted when the dialog closes.\n- **flow-ui-after-hide** - Emitted after the dialog closes and all animations are complete.\n- **flow-ui-initial-focus** - Emitted when the dialog opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n- **flow-ui-request-close** - Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss.\n- **flow-ui-tab-show** - Emitted when a tab is shown.\n- **flow-ui-tab-hide** - Emitted when a tab is hidden.\n\n### **Methods:**\n - **show()** - Shows the dialog.\n- **hide()** - Hides the dialog\n\n### **Slots:**\n - _default_ - The dialog's main content.\n- **title** - The dialog's title text. Alternatively, you can use the `title` attribute.\n- **header-actions** - Optional actions to add to the header. Works best with `<flow-ui-icon-button>`.\n- **footer** - The dialog's footer, usually one or more buttons representing various options.\n\n### **CSS Properties:**\n - **--width** - The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens. _(default: undefined)_\n- **--header-spacing** - The amount of padding to use for the header. _(default: undefined)_\n- **--body-spacing** - The amount of padding to use for the body. _(default: undefined)_\n- **--footer-spacing** - The amount of padding to use for the footer. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **overlay** - The overlay that covers the screen behind the dialog.\n- **panel** - The dialog's panel (where the dialog and its content are rendered).\n- **header** - The dialog's header. This element wraps the title and header actions.\n- **header-actions** - Optional actions to add to the header. Works best with `<flow-ui-icon-button>`.\n- **title** - The dialog's title text.\n- **close-button** - The close button, an `<flow-ui-icon-button>`.\n- **close-button__base** - The close button's exported `base` part.\n- **body** - The dialog's body.\n- **footer** - The dialog's footer.\n- **tab-group__nav** - The tab group's navigation container where tabs are slotted in.\n- **tab-group__tabs** - The container that wraps the tabs.\n- **tab-group__active-tab-indicator** - The line that highlights the currently selected tab.\n- **tab-group__body** - The tab group's body where tab panels are slotted in.",
1015
1029
  "attributes": [
1016
1030
  {
1017
1031
  "name": "open",
@@ -1019,8 +1033,8 @@
1019
1033
  "values": []
1020
1034
  },
1021
1035
  {
1022
- "name": "heading",
1023
- "description": "The dialog's heading text. If you need to display HTML, use the `heading` slot instead.",
1036
+ "name": "title",
1037
+ "description": "The dialog's title text. If you need to display HTML, use the `title` slot instead.",
1024
1038
  "values": []
1025
1039
  },
1026
1040
  {
@@ -1194,13 +1208,8 @@
1194
1208
  "values": []
1195
1209
  },
1196
1210
  {
1197
- "name": "no-dividers",
1198
- "description": "Set to `true` to hide divider lines between child form controls.",
1199
- "values": []
1200
- },
1201
- {
1202
- "name": "no-border",
1203
- "description": "Set to `true` to hide the form group border.",
1211
+ "name": "borders",
1212
+ "description": "Set to `true` to display form group borders.",
1204
1213
  "values": []
1205
1214
  },
1206
1215
  {
@@ -1217,11 +1226,11 @@
1217
1226
  },
1218
1227
  {
1219
1228
  "name": "flow-ui-gauge",
1220
- "description": "Gauges are used to display a single value with an optional icon and heading.\n\n\n---\n\n\n\n\n### **Slots:**\n - **label** - The gauge's label. Alternatively, you can use the `label` attribute.\n- **value** - The gauge's value. Alternatively, you can use the `value` attribute.\n- **unit** - Alternatively, you can use the `unit` attribute.\n- **info** - The content to display in the gauge's info dialog. If this is set then an info button will be displayed in the gauge's header.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **header** - The gauge's header.\n- **header-icon** - The icon in the gauge's header.\n- **label** - The text in the gauge's header.\n- **info-button** - The info button in the gauge's header (if info dialog configured).",
1229
+ "description": "Gauges are used to display a single value with an optional icon and heading.\n\n\n---\n\n\n\n\n### **Slots:**\n - **title** - The gauge's title. Alternatively, you can use the `title` attribute.\n- **value** - The gauge's value. Alternatively, you can use the `value` attribute.\n- **unit** - Alternatively, you can use the `unit` attribute.\n- **info** - The content to display in the gauge's info dialog. If this is set then an info button will be displayed in the gauge's header.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **header** - The gauge's header.\n- **header-icon** - The icon in the gauge's header.\n- **title** - The title text in the gauge's header.\n- **info-button** - The info button in the gauge's header (if info dialog configured).",
1221
1230
  "attributes": [
1222
1231
  {
1223
- "name": "label",
1224
- "description": "The gauge label displayed in the header. Alternatively, use the `label` slot to enhance the label with HTML markup.",
1232
+ "name": "title",
1233
+ "description": "The gauge title displayed in the header. Alternatively, use the `title` slot to enhance the label with HTML markup.",
1225
1234
  "values": []
1226
1235
  },
1227
1236
  {
@@ -1582,6 +1591,60 @@
1582
1591
  ],
1583
1592
  "references": []
1584
1593
  },
1594
+ {
1595
+ "name": "flow-ui-list",
1596
+ "description": "A panel header provides a label, optional accessory controls and expand/collapse behavior for panels.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-change** - Emitted when a list item is renamed.\n- **flow-ui-remove** - Emitted when a list item is removed.\n- **flow-ui-drag-start** - Emitted when the user starts dragging to reorder list items.\n- **flow-ui-drag-drop** - Emitted when the user drops a list item to reorder it.\n- **flow-ui-drag-end** - Emitted when the drag-drop operation has finished or been cancelled.\n\n### **Slots:**\n - **label** - The panel header's text content. Alternatively, use the `label` attribute for plain text.\n- **prefix** - The panel header's prefix content.\n- **suffix** - The panel header's suffix content.\n- **expand-icon** - Specify an alternative `<flow-ui-icon>` to use for the expand icon.\n- **collapse-icon** - Specify an alternative `<flow-ui-icon>` to use for the collapse icon.\n\n### **CSS Properties:**\n - **padding** - The padding around the list item`. _(default: undefined)_\n- **height** - The height of the list item. _(default: undefined)_\n- **background-color** - The background color of the list item. _(default: undefined)_\n- **color** - The text color of the list item. _(default: undefined)_\n- **accessory-color** - The color of the accessory controls. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label** - The container that wraps the label.\n- **prefix** - The container that wraps the prefix.\n- **suffix** - The container that wraps the suffix.\n- **toggle-icon** - The container that wraps the expand/collapse icon.",
1597
+ "attributes": [
1598
+ {
1599
+ "name": "readonly",
1600
+ "description": "Set to enable renaming of the list item text.",
1601
+ "values": []
1602
+ },
1603
+ {
1604
+ "name": "reorder",
1605
+ "description": "Set to reordering of the list item.",
1606
+ "values": []
1607
+ },
1608
+ {
1609
+ "name": "removable",
1610
+ "description": "Set to enable removing the list item.",
1611
+ "values": []
1612
+ }
1613
+ ],
1614
+ "references": []
1615
+ },
1616
+ {
1617
+ "name": "flow-ui-list-item",
1618
+ "description": "A list item.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-change** - Emitted when the list item is renamed.\n- **flow-ui-remove** - Emitted when the list item is removed. Calling `event.preventDefault()` will cancel the removal.\n- **flow-ui-select** - Emitted when a menu item is selected.\n\n### **Slots:**\n - **prefix** - The list item's prefix content.\n- **suffix** - The list item's suffix content.\n- **menu** - Specify custom menu items to add to the list item's menu.\n\n### **CSS Properties:**\n - **padding** - The padding around the header. Defaults to `--flow-ui-panel-header-padding`. _(default: undefined)_\n- **header-height** - The height of the header. Defaults to `--flow-ui-panel-header-height`. _(default: undefined)_\n- **background-color** - The background color of the header. Defaults to `--flow-ui-panel-header-background-color`. _(default: undefined)_\n- **color** - The text color of the header. Defaults to `--flow-ui-panel-header-color`. _(default: undefined)_\n- **accessory-color** - The color of the accessory controls. Defaults to `--flow-ui-panel-header-accessory-color`. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **input** - The list item's flow-ui-input control.\n- **prefix** - The container that wraps the prefix.\n- **suffix** - The container that wraps the suffix.\n- **reorder-icon** - The list item's reorder icon.\n- **menu-button** - The list item's menu-button.",
1619
+ "attributes": [
1620
+ {
1621
+ "name": "label",
1622
+ "description": "The label text for the list item.",
1623
+ "values": []
1624
+ },
1625
+ {
1626
+ "name": "value",
1627
+ "description": "The tracking value (id) for the list item.",
1628
+ "values": []
1629
+ },
1630
+ {
1631
+ "name": "readonly",
1632
+ "description": "Set to enable renaming of the list item text.",
1633
+ "values": []
1634
+ },
1635
+ {
1636
+ "name": "reorder",
1637
+ "description": "Set to reordering of the list item.",
1638
+ "values": []
1639
+ },
1640
+ {
1641
+ "name": "removable",
1642
+ "description": "Set to enable removing the list item.",
1643
+ "values": []
1644
+ }
1645
+ ],
1646
+ "references": []
1647
+ },
1585
1648
  {
1586
1649
  "name": "flow-ui-map",
1587
1650
  "description": "Display a Flo.w map.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-map-load** - Dispatched when the map is first initialized and has completed loading. The Flo.w Core map instance can be retrieved from the event `detail` property.\n\n### **CSS Parts:**\n - **base** - The base element of the component.\n- **busy-indicator** - The busy indicator flow-ui-progress-bar.\n- **control-container** - The map control containers.\n- **control-container--top-left** - The top left control container element.\n- **control-container--top-right** - The top right control container element.\n- **control-container--bottom-left** - The bottom left control container element.\n- **control-container--bottom-right** - The bottom right control container element.",
@@ -1630,6 +1693,11 @@
1630
1693
  "name": "bearing-snap",
1631
1694
  "description": "Set the bearing snap threshold in degrees. Set to 0 to disable bearing snapping.",
1632
1695
  "values": []
1696
+ },
1697
+ {
1698
+ "name": "fade-duration",
1699
+ "description": "Set fade duration in milliseconds for the label collision fade-in/fade-out animation.",
1700
+ "values": []
1633
1701
  }
1634
1702
  ],
1635
1703
  "references": []
@@ -1764,7 +1832,7 @@
1764
1832
  },
1765
1833
  {
1766
1834
  "name": "flow-ui-panel-header",
1767
- "description": "A panel header provides a label, optional accessory controls and expand/collapse behavior for panels.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-collapse** - Emitted when the header is collapsed by UI interaction.\n- **flow-ui-expand** - Emitted when the header is expanded by UI interaction.\n\n### **Slots:**\n - **label** - The panel header's text content. Alternatively, use the `label` attribute for plain text.\n- **prefix** - The panel header's prefix content.\n- **suffix** - The panel header's suffix content.\n- **expand-icon** - Specify an alternative `<flow-ui-icon>` to use for the expand icon.\n- **collapse-icon** - Specify an alternative `<flow-ui-icon>` to use for the collapse icon.\n\n### **CSS Properties:**\n - **padding** - The padding around the header. Defaults to `--flow-ui-panel-header-padding`. _(default: undefined)_\n- **header-height** - The height of the header. Defaults to `--flow-ui-panel-header-height`. _(default: undefined)_\n- **background-color** - The background color of the header. Defaults to `--flow-ui-panel-header-background-color`. _(default: undefined)_\n- **color** - The text color of the header. Defaults to `--flow-ui-panel-header-color`. _(default: undefined)_\n- **accessory-color** - The color of the accessory controls. Defaults to `--flow-ui-panel-header-accessory-color`. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label** - The container that wraps the label.\n- **prefix** - The container that wraps the prefix.\n- **suffix** - The container that wraps the suffix.\n- **toggle-icon** - The container that wraps the expand/collapse icon.",
1835
+ "description": "A panel header provides a label, optional accessory controls and expand/collapse behavior for panels.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-collapse** - Emitted when the header is collapsed by UI interaction.\n- **flow-ui-expand** - Emitted when the header is expanded by UI interaction.\n\n### **Slots:**\n - **title** - The panel header's title content. Alternatively, use the `title` attribute for plain text.\n- **prefix** - The panel header's prefix content.\n- **suffix** - The panel header's suffix content.\n- **expand-icon** - Specify an alternative `<flow-ui-icon>` to use for the expand icon.\n- **collapse-icon** - Specify an alternative `<flow-ui-icon>` to use for the collapse icon.\n\n### **CSS Properties:**\n - **padding** - The padding around the header. Defaults to `--flow-ui-panel-header-padding`. _(default: undefined)_\n- **header-height** - The height of the header. Defaults to `--flow-ui-panel-header-height`. _(default: undefined)_\n- **background-color** - The background color of the header. Defaults to `--flow-ui-panel-header-background-color`. _(default: undefined)_\n- **color** - The text color of the header. Defaults to `--flow-ui-panel-header-color`. _(default: undefined)_\n- **accessory-color** - The color of the accessory controls. Defaults to `--flow-ui-panel-header-accessory-color`. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **title** - The container that wraps the title.\n- **prefix** - The container that wraps the prefix.\n- **suffix** - The container that wraps the suffix.\n- **toggle-icon** - The container that wraps the expand/collapse icon.",
1768
1836
  "attributes": [
1769
1837
  {
1770
1838
  "name": "closed",
@@ -1772,8 +1840,8 @@
1772
1840
  "values": []
1773
1841
  },
1774
1842
  {
1775
- "name": "label",
1776
- "description": "The header text. Use the `label` slot instead to display HTML.",
1843
+ "name": "title",
1844
+ "description": "The header title. Use the `title` slot instead to display HTML.",
1777
1845
  "values": []
1778
1846
  },
1779
1847
  {
@@ -1969,7 +2037,7 @@
1969
2037
  },
1970
2038
  {
1971
2039
  "name": "flow-ui-query-builder",
1972
- "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\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.",
2040
+ "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\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.",
1973
2041
  "attributes": [
1974
2042
  {
1975
2043
  "name": "size",
@@ -1999,6 +2067,11 @@
1999
2067
  "name": "tree-lines",
2000
2068
  "description": "Display tree connector lines between query rules",
2001
2069
  "values": []
2070
+ },
2071
+ {
2072
+ "name": "borders",
2073
+ "description": "Display control borders",
2074
+ "values": []
2002
2075
  }
2003
2076
  ],
2004
2077
  "references": []
@@ -2606,6 +2679,11 @@
2606
2679
  "name": "scrollable",
2607
2680
  "description": "Indicates whether the panel is scrollable. By default overflow is hidden.",
2608
2681
  "values": []
2682
+ },
2683
+ {
2684
+ "name": "padding",
2685
+ "description": "Indicates whether the panel body has padding.",
2686
+ "values": []
2609
2687
  }
2610
2688
  ],
2611
2689
  "references": []
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@emuanalytics/flow-rdf-ui",
3
- "version": "4.1.0-preview.2",
3
+ "version": "4.1.0-preview.21",
4
4
  "type": "module",
5
5
  "module": "dist/index.mjs",
6
6
  "types": "dist/index.d.ts",