@emuanalytics/flow-rdf-ui 4.1.0-preview.13 → 4.1.0-preview.14

package/dist/components/chart/chart.component.mjs

@@ -1,10 +1,12 @@
 import { Chart } from 'chart.js';
-import { html } from 'lit';
+import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import FlowRdfElement from '../../internal/flow-ui-rdf-element.mjs';
 import { watch } from '../../internal/watch.mjs';
 import styles from './chart.styles.mjs';
+import { HasSlotController } from '../../internal/slot.mjs';
+import { isStringFull } from '../../internal/type-checks.mjs';
 import { initializeChartJs } from './chartjs-support.mjs';
 
 var __defProp = Object.defineProperty;
@@ -21,7 +23,9 @@ var __decorateClass = (decorators, target, key, kind) => {
 class FlowUiChart extends FlowRdfElement {
   constructor() {
     super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "label");
     this._chartRef = createRef();
+    this.label = "";
     this.plugins = [];
   }
   /** The Chart.js chart instance. */
@@ -54,14 +58,26 @@ class FlowUiChart extends FlowRdfElement {
     }
   }
   render() {
+    const hasHeader = isStringFull(this.label) || this.hasSlotController.test("label");
     return html`
       <div part="base" class="chart">
-        <canvas ${ref(this._chartRef)}></canvas>
+        ${hasHeader ? html`
+              <header part="header" class="chart__header">
+                <span part="label" class="chart__label"><slot name="label">${this.label}</slot></span>
+              </header>
+            ` : nothing}
+
+        <div class="chart_container">
+          <canvas ${ref(this._chartRef)}></canvas>
+        </div>
       </div>
     `;
   }
 }
 FlowUiChart.styles = styles;
+__decorateClass([
+  property()
+], FlowUiChart.prototype, "label", 2);
 __decorateClass([
   property()
 ], FlowUiChart.prototype, "type", 2);

package/dist/components/chart/chart.styles.mjs

@@ -66,14 +66,33 @@ const styles = css`
 
     --dataset-stroke-color-9: var(--flow-ui-chart-stroke-color-9, hsl(292.1 88.4% 57.7%));
     --dataset-fill-color-9: var(--flow-ui-chart-fill-color-9, hsl(292.1 88.4% 57.7%));
+
+    --header-padding: var(--flow-ui-chart-header-padding, var(--flow-ui-spacing-x-small));
+    --header-height: var(--flow-ui-chart-header-height, var(--flow-ui-control-height-medium));
+    --header-font-size: var(--flow-ui-chart-header-font-size, var(--flow-ui-font-size-medium));
+    --header-color: var(--flow-ui-chart-header-color, var(--flow-ui-color-text));
   }
 
   .chart {
+    height: 100%;
     background-color: var(--background-color);
+    display: flex;
+    flex-direction: column;
+  }
+
+  .chart__header {
+    flex: 0 0 auto;
+    padding: var(--header-padding);
+    height: var(--header-height);
+    font-size: var(--header-font-size);
+    color: var(--header-color);
+  }
+
+  .chart_container {
+    flex: 1;
     position: relative;
     width: 100%;
     height: 100%;
-    /* padding: var(--flow-ui-spacing-x-small); */
   }
 `;
 

package/dist/components/query-builder/helpers.mjs

@@ -35,8 +35,22 @@ function transformRuleSet(ruleSet, transformFn, clone = true) {
   }).filter(isRuleOrRuleset);
   return ruleSet;
 }
+function countRuleSet(ruleset) {
+  const activeFilters = (ruleSet) => {
+    let count = 0;
+    for (const rule of ruleSet.rules) {
+      if (isRule(rule) && rule.field && rule.enabled) {
+        count += 1;
+      } else if (isRuleSet(rule)) {
+        count += activeFilters(rule);
+      }
+    }
+    return count;
+  };
+  return activeFilters(ruleset);
+}
 const isRule = (r) => isObjectFull(r) && "field" in r;
 const isRuleSet = (r) => isObjectFull(r) && "rules" in r;
 const isRuleOrRuleset = (r) => isRule(r) || isRuleSet(r);
 
-export { filterRuleSet, isRule, isRuleOrRuleset, isRuleSet, renameRuleSetFields, transformRuleSet };
+export { countRuleSet, filterRuleSet, isRule, isRuleOrRuleset, isRuleSet, renameRuleSetFields, transformRuleSet };

package/dist/custom-elements.json

@@ -1129,129 +1129,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/breadcrumb/breadcrumb.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "FlowUiBreadcrumb",
-          "cssParts": [
-            {
-              "description": "The component's base wrapper.",
-              "name": "base"
-            }
-          ],
-          "slots": [
-            {
-              "description": "One or more breadcrumb items to display.",
-              "name": ""
-            },
-            {
-              "description": "The separator to use between breadcrumb items. Works best with `<flow-ui-icon>`.",
-              "name": "separator"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "localize",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new LocalizeController(this)"
-            },
-            {
-              "kind": "field",
-              "name": "separatorDir",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "defaultSlot",
-              "type": {
-                "text": "HTMLSlotElement"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "separatorSlot",
-              "type": {
-                "text": "HTMLSlotElement"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "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.",
-              "attribute": "label"
-            },
-            {
-              "kind": "method",
-              "name": "getSeparator",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "handleSlotChange",
-              "privacy": "private"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "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.",
-              "fieldName": "label"
-            }
-          ],
-          "superclass": {
-            "name": "FlowRdfElement",
-            "module": "/src/internal/flow-ui-rdf-element"
-          },
-          "tagName": "flow-ui-breadcrumb",
-          "summary": "Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.",
-          "dependencies": [
-            "flow-ui-icon"
-          ],
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "FlowUiBreadcrumb",
-            "module": "components/breadcrumb/breadcrumb.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/breadcrumb/breadcrumb.js",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "FlowUiBreadcrumb",
-            "module": "components/breadcrumb/breadcrumb.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/avatar/avatar.component.js",
@@ -1437,6 +1314,129 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/breadcrumb/breadcrumb.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "FlowUiBreadcrumb",
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            }
+          ],
+          "slots": [
+            {
+              "description": "One or more breadcrumb items to display.",
+              "name": ""
+            },
+            {
+              "description": "The separator to use between breadcrumb items. Works best with `<flow-ui-icon>`.",
+              "name": "separator"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "separatorDir",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "defaultSlot",
+              "type": {
+                "text": "HTMLSlotElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "separatorSlot",
+              "type": {
+                "text": "HTMLSlotElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "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.",
+              "attribute": "label"
+            },
+            {
+              "kind": "method",
+              "name": "getSeparator",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleSlotChange",
+              "privacy": "private"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "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.",
+              "fieldName": "label"
+            }
+          ],
+          "superclass": {
+            "name": "FlowRdfElement",
+            "module": "/src/internal/flow-ui-rdf-element"
+          },
+          "tagName": "flow-ui-breadcrumb",
+          "summary": "Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.",
+          "dependencies": [
+            "flow-ui-icon"
+          ],
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "FlowUiBreadcrumb",
+            "module": "components/breadcrumb/breadcrumb.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/breadcrumb/breadcrumb.js",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "FlowUiBreadcrumb",
+            "module": "components/breadcrumb/breadcrumb.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/badge/badge.component.js",
@@ -3897,6 +3897,13 @@
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "hasSlotController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new HasSlotController(this, 'label')"
+            },
             {
               "kind": "field",
               "name": "_chartRef",
@@ -3919,6 +3926,16 @@
               "description": "The Chart.js chart instance.",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "A label displayed in the chart's header. If you need to display HTML, use the `label` slot instead.",
+              "attribute": "label"
+            },
             {
               "kind": "field",
               "name": "type",
@@ -3961,6 +3978,15 @@
             }
           ],
           "attributes": [
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "A label displayed in the chart's header. If you need to display HTML, use the `label` slot instead.",
+              "fieldName": "label"
+            },
             {
               "name": "type",
               "type": {
@@ -14816,6 +14842,28 @@
           ],
           "description": "Recursively applies a tranform function to the supplied FlowQueryBuilderRuleSet returning a new rule set.\n\nThe transform function should expect a single `FlowQueryBuilderRule` and return:\n\n- the same rule unmodified or modified in place\n- `undefined` to exclude the rule from the rule set\n\nThis can be used to modify and sanitize rule sets before they are used to perform queries."
         },
+        {
+          "kind": "function",
+          "name": "countRuleSet",
+          "return": {
+            "type": {
+              "text": ""
+            }
+          },
+          "parameters": [
+            {
+              "name": "ruleset",
+              "type": {
+                "text": "FlowQueryBuilderRuleSet"
+              }
+            },
+            {
+              "description": "Query builder rule set to count.",
+              "name": "ruleSet"
+            }
+          ],
+          "description": "Recursively count the number of active rules in the supplied FlowQueryBuilderRuleSet.\n\nAn 'active' rules is defined as having a valid field and being enabled."
+        },
         {
           "kind": "function",
           "name": "isRule",
@@ -14896,6 +14944,14 @@
             "module": "components/query-builder/helpers.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "countRuleSet",
+          "declaration": {
+            "name": "countRuleSet",
+            "module": "components/query-builder/helpers.js"
+          }
+        },
         {
           "kind": "js",
           "name": "isRule",

package/dist/index.d.mts

@@ -1574,6 +1574,15 @@ declare function renameRuleSetFields(ruleset: FlowQueryBuilderRuleSet, replaceme
  * @returns A new {@link FlowQueryBuilderRuleSet} with transformed rules.
  */
 declare function transformRuleSet(ruleSet: FlowQueryBuilderRuleSet, transformFn: (rule: FlowQueryBuilderRule) => FlowQueryBuilderRule | undefined, clone?: boolean): FlowQueryBuilderRuleSet;
+/**
+ * Recursively count the number of active rules in the supplied {@link FlowQueryBuilderRuleSet}.
+ *
+ * An 'active' rules is defined as having a valid field and being enabled.
+ *
+ * @param ruleSet Query builder rule set to count.
+ * @returns The number of active rules in the rule set.
+ */
+declare function countRuleSet(ruleset: FlowQueryBuilderRuleSet): number;
 /**
  * Helper function to determine if the supplied argument is a {@link FlowQueryBuilderRule}
  */
@@ -2579,10 +2588,13 @@ declare global {
  */
 declare class FlowUiChart extends FlowRdfElement {
     static styles: CSSResultGroup;
+    private readonly hasSlotController;
     private _chartRef;
     private _chart;
     /** The Chart.js chart instance. */
     get chart(): Chart<keyof ChartTypeRegistry, (number | chart_js.Point | [number, number] | chart_js.BubbleDataPoint | chartjs_chart_matrix.MatrixDataPoint | null)[], unknown>;
+    /** A label displayed in the chart's header. If you need to display HTML, use the `label` slot instead. */
+    label: string;
     /** The Chart.js chart type (e.g `line`, `bar` or a custom type). */
     type: string;
     /** The Chart.js `options` object. */
@@ -6422,4 +6434,4 @@ declare global {
     }
 }
 
-export { type BaseColorMapperField, type BaseColorStopOptions, type ColorMapperField, type ColorMapperOptions, type ColorMapperValue, type ColorStopOptions, type ColorStopValue, type FlowQueryBuilderConfig, type FlowQueryBuilderConverter, type FlowQueryBuilderConverterOptions, type FlowQueryBuilderDateField, type FlowQueryBuilderDateTimeField, type FlowQueryBuilderDateTimeFieldBase, type FlowQueryBuilderField, type FlowQueryBuilderFieldBase, type FlowQueryBuilderFieldDefinition, type FlowQueryBuilderFieldMap, type FlowQueryBuilderFieldType, type FlowQueryBuilderFieldTypeMap, type FlowQueryBuilderNumberField, type FlowQueryBuilderOption, type FlowQueryBuilderRule, type FlowQueryBuilderRuleSet, type FlowQueryBuilderSelectField, type FlowQueryBuilderStringField, type FlowQueryBuilderTemplateFn, type FlowQueryBuilderTimeField, type FlowAfterCollapseEvent as FlowUiAfterCollapseEvent, type FlowAfterExpandEvent as FlowUiAfterExpandEvent, type FlowAfterHideEvent as FlowUiAfterHideEvent, type FlowAfterShowEvent as FlowUiAfterShowEvent, FlowUiAlert, FlowUiAnimation, FlowUiAvatar, FlowUiBadge, FlowUiBaseControl, type FlowBlurEvent as FlowUiBlurEvent, FlowUiBreadcrumb, FlowUiBreadcrumbItem, FlowUiButton, FlowUiButtonGroup, FlowUiCalendar, type FlowCancelEvent as FlowUiCancelEvent, FlowUiCard, FlowUiCarousel, FlowUiCarouselItem, type FlowChangeEvent as FlowUiChangeEvent, FlowUiChart, FlowUiCheckbox, FlowUiCheckboxGroup, type FlowClearEvent as FlowUiClearEvent, type FlowCloseEvent as FlowUiCloseEvent, type FlowCollapseEvent as FlowUiCollapseEvent, type FlowCollapseTreeEvent as FlowUiCollapseSplitViewEvent, FlowUiColorMapper, FlowUiColorPicker, FlowUiColorStop, FlowUiDateTimePicker, FlowUiDetails, FlowUiDialog, FlowUiDivider, type FlowDragDropEvent as FlowUiDragDrop, type FlowDragEndEvent as FlowUiDragEndEvent, type FlowDragEvent as FlowUiDragEvent, type FlowDragOverEvent as FlowUiDragOverEvent, type FlowDragStartEvent as FlowUiDragStartEvent, FlowUiDrawer, FlowUiDropdown, type FlowErrorEvent as FlowUiErrorEvent, type FlowExpandEvent as FlowUiExpandEvent, type FlowExpandTreeEvent as FlowUiExpandSplitViewEvent, type FlowFinishEvent as FlowUiFinishEvent, type FlowFocusEvent as FlowUiFocusEvent, FlowUiFormGroup, FlowUiGauge, type FlowHideEvent as FlowUiHideEvent, type FlowHoverEvent as FlowUiHoverEvent, FlowUiIcon, FlowUiIconButton, type FlowInitialFocusEvent as FlowUiInitialFocusEvent, FlowUiInput, type FlowInputEvent as FlowUiInputEvent, type FlowInvalidEvent as FlowUiInvalidEvent, type FlowLazyChangeEvent as FlowUiLazyChangeEvent, type FlowLazyLoadEvent as FlowUiLazyLoadEvent, FlowUiList, FlowUiListItem, type FlowLoadEvent as FlowUiLoadEvent, FlowUiMap, type FlowMapLoadEvent as FlowUiMapLoadEvent, FlowUiMenu, FlowUiMenuItem, FlowUiMenuLabel, type FlowMutationEvent as FlowUiMutationEvent, FlowUiMutationObserver, FlowUiOption, FlowUiPanel, FlowUiPanelHeader, type FlowPanelToggleEvent as FlowUiPanelToggleEvent, FlowUiPopup, FlowUiProgressBar, FlowUiProgressRing, FlowUiQueryBuilder, FlowUiRadio, FlowUiRadioGroup, FlowUiRange, type FlowRemoveEvent as FlowUiRemoveEvent, type FlowRepositionEvent as FlowUiRepositionEvent, type FlowRequestCloseEvent as FlowUiRequestCloseEvent, type FlowResizeEvent as FlowUiResizeEvent, FlowUiResizeObserver, FlowUiScrollView, FlowUiSelect, type FlowSelectEvent as FlowUiSelectEvent, type FlowShowEvent as FlowUiShowEvent, type FlowSlideChange as FlowUiSlideChange, FlowUiSpinner, FlowUiSplitView, FlowUiSplitViewDivider, FlowUiSplitViewPane, FlowUiSplitViewToggleButton, type FlowStartEvent as FlowUiStartEvent, FlowUiStepper, FlowUiStepperPanel, FlowUiSwitch, FlowUiTab, FlowUiTabGroup, type FlowTabHideEvent as FlowUiTabHideEvent, FlowUiTabPanel, type FlowTabShowEvent as FlowUiTabShowEvent, FlowUiTag, FlowUiTextarea, FlowUiTimer, FlowUiToolButton, FlowUiToolButtonGroup, FlowUiTooltip, FlowUiTree, FlowUiTreeItem, FlowUiVisuallyHidden, JavaScriptFilterError, type JavaScriptFilterFn, LocalizeController, type NumberColorMapperField, type NumberColorStopOptions, type SelectColorMapperField, type SelectColorStopOptions, type StringColorMapperField, type StringColorStopOptions, type Translation, addIcons, colorMapperValueToMaplibreExpression, escapeMaplibreString, filterRuleSet, converter$2 as flowQueryConverter, getAnimationNames, getEasingNames, initialize, initializeChartJs, isRule, isRuleOrRuleset, isRuleSet, converter$1 as javascriptFilterConverter, converter as mapLayerFilterConverter, registerChartComponent, registerComponents, registerIconLibrary, registerTranslation, renameRuleSetFields, setDefaultLocale, setDefaultTimeZone, transformRuleSet, unregisterIconLibrary };
+export { type BaseColorMapperField, type BaseColorStopOptions, type ColorMapperField, type ColorMapperOptions, type ColorMapperValue, type ColorStopOptions, type ColorStopValue, type FlowQueryBuilderConfig, type FlowQueryBuilderConverter, type FlowQueryBuilderConverterOptions, type FlowQueryBuilderDateField, type FlowQueryBuilderDateTimeField, type FlowQueryBuilderDateTimeFieldBase, type FlowQueryBuilderField, type FlowQueryBuilderFieldBase, type FlowQueryBuilderFieldDefinition, type FlowQueryBuilderFieldMap, type FlowQueryBuilderFieldType, type FlowQueryBuilderFieldTypeMap, type FlowQueryBuilderNumberField, type FlowQueryBuilderOption, type FlowQueryBuilderRule, type FlowQueryBuilderRuleSet, type FlowQueryBuilderSelectField, type FlowQueryBuilderStringField, type FlowQueryBuilderTemplateFn, type FlowQueryBuilderTimeField, type FlowAfterCollapseEvent as FlowUiAfterCollapseEvent, type FlowAfterExpandEvent as FlowUiAfterExpandEvent, type FlowAfterHideEvent as FlowUiAfterHideEvent, type FlowAfterShowEvent as FlowUiAfterShowEvent, FlowUiAlert, FlowUiAnimation, FlowUiAvatar, FlowUiBadge, FlowUiBaseControl, type FlowBlurEvent as FlowUiBlurEvent, FlowUiBreadcrumb, FlowUiBreadcrumbItem, FlowUiButton, FlowUiButtonGroup, FlowUiCalendar, type FlowCancelEvent as FlowUiCancelEvent, FlowUiCard, FlowUiCarousel, FlowUiCarouselItem, type FlowChangeEvent as FlowUiChangeEvent, FlowUiChart, FlowUiCheckbox, FlowUiCheckboxGroup, type FlowClearEvent as FlowUiClearEvent, type FlowCloseEvent as FlowUiCloseEvent, type FlowCollapseEvent as FlowUiCollapseEvent, type FlowCollapseTreeEvent as FlowUiCollapseSplitViewEvent, FlowUiColorMapper, FlowUiColorPicker, FlowUiColorStop, FlowUiDateTimePicker, FlowUiDetails, FlowUiDialog, FlowUiDivider, type FlowDragDropEvent as FlowUiDragDrop, type FlowDragEndEvent as FlowUiDragEndEvent, type FlowDragEvent as FlowUiDragEvent, type FlowDragOverEvent as FlowUiDragOverEvent, type FlowDragStartEvent as FlowUiDragStartEvent, FlowUiDrawer, FlowUiDropdown, type FlowErrorEvent as FlowUiErrorEvent, type FlowExpandEvent as FlowUiExpandEvent, type FlowExpandTreeEvent as FlowUiExpandSplitViewEvent, type FlowFinishEvent as FlowUiFinishEvent, type FlowFocusEvent as FlowUiFocusEvent, FlowUiFormGroup, FlowUiGauge, type FlowHideEvent as FlowUiHideEvent, type FlowHoverEvent as FlowUiHoverEvent, FlowUiIcon, FlowUiIconButton, type FlowInitialFocusEvent as FlowUiInitialFocusEvent, FlowUiInput, type FlowInputEvent as FlowUiInputEvent, type FlowInvalidEvent as FlowUiInvalidEvent, type FlowLazyChangeEvent as FlowUiLazyChangeEvent, type FlowLazyLoadEvent as FlowUiLazyLoadEvent, FlowUiList, FlowUiListItem, type FlowLoadEvent as FlowUiLoadEvent, FlowUiMap, type FlowMapLoadEvent as FlowUiMapLoadEvent, FlowUiMenu, FlowUiMenuItem, FlowUiMenuLabel, type FlowMutationEvent as FlowUiMutationEvent, FlowUiMutationObserver, FlowUiOption, FlowUiPanel, FlowUiPanelHeader, type FlowPanelToggleEvent as FlowUiPanelToggleEvent, FlowUiPopup, FlowUiProgressBar, FlowUiProgressRing, FlowUiQueryBuilder, FlowUiRadio, FlowUiRadioGroup, FlowUiRange, type FlowRemoveEvent as FlowUiRemoveEvent, type FlowRepositionEvent as FlowUiRepositionEvent, type FlowRequestCloseEvent as FlowUiRequestCloseEvent, type FlowResizeEvent as FlowUiResizeEvent, FlowUiResizeObserver, FlowUiScrollView, FlowUiSelect, type FlowSelectEvent as FlowUiSelectEvent, type FlowShowEvent as FlowUiShowEvent, type FlowSlideChange as FlowUiSlideChange, FlowUiSpinner, FlowUiSplitView, FlowUiSplitViewDivider, FlowUiSplitViewPane, FlowUiSplitViewToggleButton, type FlowStartEvent as FlowUiStartEvent, FlowUiStepper, FlowUiStepperPanel, FlowUiSwitch, FlowUiTab, FlowUiTabGroup, type FlowTabHideEvent as FlowUiTabHideEvent, FlowUiTabPanel, type FlowTabShowEvent as FlowUiTabShowEvent, FlowUiTag, FlowUiTextarea, FlowUiTimer, FlowUiToolButton, FlowUiToolButtonGroup, FlowUiTooltip, FlowUiTree, FlowUiTreeItem, FlowUiVisuallyHidden, JavaScriptFilterError, type JavaScriptFilterFn, LocalizeController, type NumberColorMapperField, type NumberColorStopOptions, type SelectColorMapperField, type SelectColorStopOptions, type StringColorMapperField, type StringColorStopOptions, type Translation, addIcons, colorMapperValueToMaplibreExpression, countRuleSet, escapeMaplibreString, filterRuleSet, converter$2 as flowQueryConverter, getAnimationNames, getEasingNames, initialize, initializeChartJs, isRule, isRuleOrRuleset, isRuleSet, converter$1 as javascriptFilterConverter, converter as mapLayerFilterConverter, registerChartComponent, registerComponents, registerIconLibrary, registerTranslation, renameRuleSetFields, setDefaultLocale, setDefaultTimeZone, transformRuleSet, unregisterIconLibrary };

package/dist/index.d.ts

@@ -1574,6 +1574,15 @@ declare function renameRuleSetFields(ruleset: FlowQueryBuilderRuleSet, replaceme
  * @returns A new {@link FlowQueryBuilderRuleSet} with transformed rules.
  */
 declare function transformRuleSet(ruleSet: FlowQueryBuilderRuleSet, transformFn: (rule: FlowQueryBuilderRule) => FlowQueryBuilderRule | undefined, clone?: boolean): FlowQueryBuilderRuleSet;
+/**
+ * Recursively count the number of active rules in the supplied {@link FlowQueryBuilderRuleSet}.
+ *
+ * An 'active' rules is defined as having a valid field and being enabled.
+ *
+ * @param ruleSet Query builder rule set to count.
+ * @returns The number of active rules in the rule set.
+ */
+declare function countRuleSet(ruleset: FlowQueryBuilderRuleSet): number;
 /**
  * Helper function to determine if the supplied argument is a {@link FlowQueryBuilderRule}
  */
@@ -2579,10 +2588,13 @@ declare global {
  */
 declare class FlowUiChart extends FlowRdfElement {
     static styles: CSSResultGroup;
+    private readonly hasSlotController;
     private _chartRef;
     private _chart;
     /** The Chart.js chart instance. */
     get chart(): Chart<keyof ChartTypeRegistry, (number | chart_js.Point | [number, number] | chart_js.BubbleDataPoint | chartjs_chart_matrix.MatrixDataPoint | null)[], unknown>;
+    /** A label displayed in the chart's header. If you need to display HTML, use the `label` slot instead. */
+    label: string;
     /** The Chart.js chart type (e.g `line`, `bar` or a custom type). */
     type: string;
     /** The Chart.js `options` object. */
@@ -6422,4 +6434,4 @@ declare global {
     }
 }
 
-export { type BaseColorMapperField, type BaseColorStopOptions, type ColorMapperField, type ColorMapperOptions, type ColorMapperValue, type ColorStopOptions, type ColorStopValue, type FlowQueryBuilderConfig, type FlowQueryBuilderConverter, type FlowQueryBuilderConverterOptions, type FlowQueryBuilderDateField, type FlowQueryBuilderDateTimeField, type FlowQueryBuilderDateTimeFieldBase, type FlowQueryBuilderField, type FlowQueryBuilderFieldBase, type FlowQueryBuilderFieldDefinition, type FlowQueryBuilderFieldMap, type FlowQueryBuilderFieldType, type FlowQueryBuilderFieldTypeMap, type FlowQueryBuilderNumberField, type FlowQueryBuilderOption, type FlowQueryBuilderRule, type FlowQueryBuilderRuleSet, type FlowQueryBuilderSelectField, type FlowQueryBuilderStringField, type FlowQueryBuilderTemplateFn, type FlowQueryBuilderTimeField, type FlowAfterCollapseEvent as FlowUiAfterCollapseEvent, type FlowAfterExpandEvent as FlowUiAfterExpandEvent, type FlowAfterHideEvent as FlowUiAfterHideEvent, type FlowAfterShowEvent as FlowUiAfterShowEvent, FlowUiAlert, FlowUiAnimation, FlowUiAvatar, FlowUiBadge, FlowUiBaseControl, type FlowBlurEvent as FlowUiBlurEvent, FlowUiBreadcrumb, FlowUiBreadcrumbItem, FlowUiButton, FlowUiButtonGroup, FlowUiCalendar, type FlowCancelEvent as FlowUiCancelEvent, FlowUiCard, FlowUiCarousel, FlowUiCarouselItem, type FlowChangeEvent as FlowUiChangeEvent, FlowUiChart, FlowUiCheckbox, FlowUiCheckboxGroup, type FlowClearEvent as FlowUiClearEvent, type FlowCloseEvent as FlowUiCloseEvent, type FlowCollapseEvent as FlowUiCollapseEvent, type FlowCollapseTreeEvent as FlowUiCollapseSplitViewEvent, FlowUiColorMapper, FlowUiColorPicker, FlowUiColorStop, FlowUiDateTimePicker, FlowUiDetails, FlowUiDialog, FlowUiDivider, type FlowDragDropEvent as FlowUiDragDrop, type FlowDragEndEvent as FlowUiDragEndEvent, type FlowDragEvent as FlowUiDragEvent, type FlowDragOverEvent as FlowUiDragOverEvent, type FlowDragStartEvent as FlowUiDragStartEvent, FlowUiDrawer, FlowUiDropdown, type FlowErrorEvent as FlowUiErrorEvent, type FlowExpandEvent as FlowUiExpandEvent, type FlowExpandTreeEvent as FlowUiExpandSplitViewEvent, type FlowFinishEvent as FlowUiFinishEvent, type FlowFocusEvent as FlowUiFocusEvent, FlowUiFormGroup, FlowUiGauge, type FlowHideEvent as FlowUiHideEvent, type FlowHoverEvent as FlowUiHoverEvent, FlowUiIcon, FlowUiIconButton, type FlowInitialFocusEvent as FlowUiInitialFocusEvent, FlowUiInput, type FlowInputEvent as FlowUiInputEvent, type FlowInvalidEvent as FlowUiInvalidEvent, type FlowLazyChangeEvent as FlowUiLazyChangeEvent, type FlowLazyLoadEvent as FlowUiLazyLoadEvent, FlowUiList, FlowUiListItem, type FlowLoadEvent as FlowUiLoadEvent, FlowUiMap, type FlowMapLoadEvent as FlowUiMapLoadEvent, FlowUiMenu, FlowUiMenuItem, FlowUiMenuLabel, type FlowMutationEvent as FlowUiMutationEvent, FlowUiMutationObserver, FlowUiOption, FlowUiPanel, FlowUiPanelHeader, type FlowPanelToggleEvent as FlowUiPanelToggleEvent, FlowUiPopup, FlowUiProgressBar, FlowUiProgressRing, FlowUiQueryBuilder, FlowUiRadio, FlowUiRadioGroup, FlowUiRange, type FlowRemoveEvent as FlowUiRemoveEvent, type FlowRepositionEvent as FlowUiRepositionEvent, type FlowRequestCloseEvent as FlowUiRequestCloseEvent, type FlowResizeEvent as FlowUiResizeEvent, FlowUiResizeObserver, FlowUiScrollView, FlowUiSelect, type FlowSelectEvent as FlowUiSelectEvent, type FlowShowEvent as FlowUiShowEvent, type FlowSlideChange as FlowUiSlideChange, FlowUiSpinner, FlowUiSplitView, FlowUiSplitViewDivider, FlowUiSplitViewPane, FlowUiSplitViewToggleButton, type FlowStartEvent as FlowUiStartEvent, FlowUiStepper, FlowUiStepperPanel, FlowUiSwitch, FlowUiTab, FlowUiTabGroup, type FlowTabHideEvent as FlowUiTabHideEvent, FlowUiTabPanel, type FlowTabShowEvent as FlowUiTabShowEvent, FlowUiTag, FlowUiTextarea, FlowUiTimer, FlowUiToolButton, FlowUiToolButtonGroup, FlowUiTooltip, FlowUiTree, FlowUiTreeItem, FlowUiVisuallyHidden, JavaScriptFilterError, type JavaScriptFilterFn, LocalizeController, type NumberColorMapperField, type NumberColorStopOptions, type SelectColorMapperField, type SelectColorStopOptions, type StringColorMapperField, type StringColorStopOptions, type Translation, addIcons, colorMapperValueToMaplibreExpression, escapeMaplibreString, filterRuleSet, converter$2 as flowQueryConverter, getAnimationNames, getEasingNames, initialize, initializeChartJs, isRule, isRuleOrRuleset, isRuleSet, converter$1 as javascriptFilterConverter, converter as mapLayerFilterConverter, registerChartComponent, registerComponents, registerIconLibrary, registerTranslation, renameRuleSetFields, setDefaultLocale, setDefaultTimeZone, transformRuleSet, unregisterIconLibrary };
+export { type BaseColorMapperField, type BaseColorStopOptions, type ColorMapperField, type ColorMapperOptions, type ColorMapperValue, type ColorStopOptions, type ColorStopValue, type FlowQueryBuilderConfig, type FlowQueryBuilderConverter, type FlowQueryBuilderConverterOptions, type FlowQueryBuilderDateField, type FlowQueryBuilderDateTimeField, type FlowQueryBuilderDateTimeFieldBase, type FlowQueryBuilderField, type FlowQueryBuilderFieldBase, type FlowQueryBuilderFieldDefinition, type FlowQueryBuilderFieldMap, type FlowQueryBuilderFieldType, type FlowQueryBuilderFieldTypeMap, type FlowQueryBuilderNumberField, type FlowQueryBuilderOption, type FlowQueryBuilderRule, type FlowQueryBuilderRuleSet, type FlowQueryBuilderSelectField, type FlowQueryBuilderStringField, type FlowQueryBuilderTemplateFn, type FlowQueryBuilderTimeField, type FlowAfterCollapseEvent as FlowUiAfterCollapseEvent, type FlowAfterExpandEvent as FlowUiAfterExpandEvent, type FlowAfterHideEvent as FlowUiAfterHideEvent, type FlowAfterShowEvent as FlowUiAfterShowEvent, FlowUiAlert, FlowUiAnimation, FlowUiAvatar, FlowUiBadge, FlowUiBaseControl, type FlowBlurEvent as FlowUiBlurEvent, FlowUiBreadcrumb, FlowUiBreadcrumbItem, FlowUiButton, FlowUiButtonGroup, FlowUiCalendar, type FlowCancelEvent as FlowUiCancelEvent, FlowUiCard, FlowUiCarousel, FlowUiCarouselItem, type FlowChangeEvent as FlowUiChangeEvent, FlowUiChart, FlowUiCheckbox, FlowUiCheckboxGroup, type FlowClearEvent as FlowUiClearEvent, type FlowCloseEvent as FlowUiCloseEvent, type FlowCollapseEvent as FlowUiCollapseEvent, type FlowCollapseTreeEvent as FlowUiCollapseSplitViewEvent, FlowUiColorMapper, FlowUiColorPicker, FlowUiColorStop, FlowUiDateTimePicker, FlowUiDetails, FlowUiDialog, FlowUiDivider, type FlowDragDropEvent as FlowUiDragDrop, type FlowDragEndEvent as FlowUiDragEndEvent, type FlowDragEvent as FlowUiDragEvent, type FlowDragOverEvent as FlowUiDragOverEvent, type FlowDragStartEvent as FlowUiDragStartEvent, FlowUiDrawer, FlowUiDropdown, type FlowErrorEvent as FlowUiErrorEvent, type FlowExpandEvent as FlowUiExpandEvent, type FlowExpandTreeEvent as FlowUiExpandSplitViewEvent, type FlowFinishEvent as FlowUiFinishEvent, type FlowFocusEvent as FlowUiFocusEvent, FlowUiFormGroup, FlowUiGauge, type FlowHideEvent as FlowUiHideEvent, type FlowHoverEvent as FlowUiHoverEvent, FlowUiIcon, FlowUiIconButton, type FlowInitialFocusEvent as FlowUiInitialFocusEvent, FlowUiInput, type FlowInputEvent as FlowUiInputEvent, type FlowInvalidEvent as FlowUiInvalidEvent, type FlowLazyChangeEvent as FlowUiLazyChangeEvent, type FlowLazyLoadEvent as FlowUiLazyLoadEvent, FlowUiList, FlowUiListItem, type FlowLoadEvent as FlowUiLoadEvent, FlowUiMap, type FlowMapLoadEvent as FlowUiMapLoadEvent, FlowUiMenu, FlowUiMenuItem, FlowUiMenuLabel, type FlowMutationEvent as FlowUiMutationEvent, FlowUiMutationObserver, FlowUiOption, FlowUiPanel, FlowUiPanelHeader, type FlowPanelToggleEvent as FlowUiPanelToggleEvent, FlowUiPopup, FlowUiProgressBar, FlowUiProgressRing, FlowUiQueryBuilder, FlowUiRadio, FlowUiRadioGroup, FlowUiRange, type FlowRemoveEvent as FlowUiRemoveEvent, type FlowRepositionEvent as FlowUiRepositionEvent, type FlowRequestCloseEvent as FlowUiRequestCloseEvent, type FlowResizeEvent as FlowUiResizeEvent, FlowUiResizeObserver, FlowUiScrollView, FlowUiSelect, type FlowSelectEvent as FlowUiSelectEvent, type FlowShowEvent as FlowUiShowEvent, type FlowSlideChange as FlowUiSlideChange, FlowUiSpinner, FlowUiSplitView, FlowUiSplitViewDivider, FlowUiSplitViewPane, FlowUiSplitViewToggleButton, type FlowStartEvent as FlowUiStartEvent, FlowUiStepper, FlowUiStepperPanel, FlowUiSwitch, FlowUiTab, FlowUiTabGroup, type FlowTabHideEvent as FlowUiTabHideEvent, FlowUiTabPanel, type FlowTabShowEvent as FlowUiTabShowEvent, FlowUiTag, FlowUiTextarea, FlowUiTimer, FlowUiToolButton, FlowUiToolButtonGroup, FlowUiTooltip, FlowUiTree, FlowUiTreeItem, FlowUiVisuallyHidden, JavaScriptFilterError, type JavaScriptFilterFn, LocalizeController, type NumberColorMapperField, type NumberColorStopOptions, type SelectColorMapperField, type SelectColorStopOptions, type StringColorMapperField, type StringColorStopOptions, type Translation, addIcons, colorMapperValueToMaplibreExpression, countRuleSet, escapeMaplibreString, filterRuleSet, converter$2 as flowQueryConverter, getAnimationNames, getEasingNames, initialize, initializeChartJs, isRule, isRuleOrRuleset, isRuleSet, converter$1 as javascriptFilterConverter, converter as mapLayerFilterConverter, registerChartComponent, registerComponents, registerIconLibrary, registerTranslation, renameRuleSetFields, setDefaultLocale, setDefaultTimeZone, transformRuleSet, unregisterIconLibrary };

package/dist/index.mjs

@@ -78,7 +78,7 @@ export { registerIconLibrary, unregisterIconLibrary } from './components/icon/li
 export { setDefaultLocale, setDefaultTimeZone } from './utilities/locale.mjs';
 export { registerTranslation } from './internal/localize.mjs';
 export { LocalizeController } from './utilities/localize.mjs';
-export { filterRuleSet, isRule, isRuleOrRuleset, isRuleSet, renameRuleSetFields, transformRuleSet } from './components/query-builder/helpers.mjs';
+export { countRuleSet, filterRuleSet, isRule, isRuleOrRuleset, isRuleSet, renameRuleSetFields, transformRuleSet } from './components/query-builder/helpers.mjs';
 export { default as flowQueryConverter } from './components/query-builder/converters/flow-query-converters.mjs';
 export { default as javascriptFilterConverter } from './components/query-builder/converters/javascript-filter-converter.mjs';
 export { default as mapLayerFilterConverter } from './components/query-builder/converters/map-layer-filter-converter.mjs';

package/dist/vscode.html-custom-data.json

@@ -158,18 +158,6 @@
       ],
       "references": []
     },
-    {
-      "name": "flow-ui-breadcrumb",
-      "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.",
-      "attributes": [
-        {
-          "name": "label",
-          "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.",
-          "values": []
-        }
-      ],
-      "references": []
-    },
     {
       "name": "flow-ui-avatar",
       "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.",
@@ -206,6 +194,18 @@
       ],
       "references": []
     },
+    {
+      "name": "flow-ui-breadcrumb",
+      "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.",
+      "attributes": [
+        {
+          "name": "label",
+          "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.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "flow-ui-badge",
       "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.",
@@ -537,6 +537,11 @@
       "name": "flow-ui-chart",
       "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.",
       "attributes": [
+        {
+          "name": "label",
+          "description": "A label displayed in the chart's header. If you need to display HTML, use the `label` slot instead.",
+          "values": []
+        },
         {
           "name": "type",
           "description": "The Chart.js chart type (e.g `line`, `bar` or a custom type).",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@emuanalytics/flow-rdf-ui",
-  "version": "4.1.0-preview.13",
+  "version": "4.1.0-preview.14",
   "type": "module",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",

package/themes/dark.css

@@ -601,7 +601,7 @@
   --flow-ui-gauge-units-font-size: var(--flow-ui-font-size-small);
   --flow-ui-gauge-units-color: var(--flow-ui-color-neutral-1000);
 
-  --flow-ui-chart-background-color: transparent;
+  --flow-ui-chart-background-color: var(--flow-ui-color-neutral-300);
   --flow-ui-chart-text-color: var(--flow-ui-color-neutral-900);
 
   --flow-ui-chart-axis-color: var(--flow-ui-color-neutral-600);

package/themes/dark.styles.js

@@ -622,7 +622,7 @@ export default css`
     --flow-ui-gauge-units-font-size: var(--flow-ui-font-size-small);
     --flow-ui-gauge-units-color: var(--flow-ui-color-neutral-1000);
 
-    --flow-ui-chart-background-color: transparent;
+    --flow-ui-chart-background-color: var(--flow-ui-color-neutral-300);
     --flow-ui-chart-text-color: var(--flow-ui-color-neutral-900);
 
     --flow-ui-chart-axis-color: var(--flow-ui-color-neutral-600);