@emuanalytics/flow-rdf-ui 4.0.13 → 4.0.15

package/dist/index.d.ts

@@ -1251,61 +1251,177 @@ declare class FlowUiQueryBuilder extends FlowRdfElement {
     render(): lit_html.TemplateResult<1>;
 }
 
+/**
+ * An abstract logical expression used to represent a user-defined query or filter.
+ *
+ * A rule set consists of one or more rules, where each rule is a single logical expression
+ * of the form `<field> <operator> <value>` (for example, `name == 'John'`). A rule set combines
+ * its rules using a condition, which can be either `and` or `or`. Rule sets can be nested to
+ * create complex queries.
+ *
+ * Rule sets are typically created by the end-user using the [Query Builder](/flow-rdf-ui/web-components/flow-ui-query-builder) UI component.
+ */
 interface FlowQueryBuilderRuleSet {
+    /** The combining condition for rules in this rule set (`and` or `or`). */
     condition: string;
+    /** One or more rules or rule sets to combine into a logical expression.*/
     rules: Array<FlowQueryBuilderRuleSet | FlowQueryBuilderRule>;
 }
+/**
+ * A single abstract logical expression. Combined into a {@link FlowQueryBuilderRuleSet} to represent a user-defined query or filter.
+ *
+ * A rule is a single logical expression of the form `<field> <operator> <value>` (for example, `name == 'John'`).
+ *
+ * Supported operators are:
+ *
+ * - `=`: `<field>` exactly equals `<value>`.
+ * - `!=`: `<field>` does not equal `<value>`.
+ * - `<`: `<field>` less than `<value>`.
+ * - `<=`: `<field>` less than or equal to `<value>`.
+ * - `>`: `<field>` greater than `<value>`.
+ * - `>=`: `<field>` greater than or equal to `<value>`.
+ * - `in`: `<field>` in list of values. `<value>` is an array. (select-type fields only)
+ * - `!in`: `<field>` not in list of values. `<value>` is an array. (select-type fields only)
+ * - `contains`: `<field>` contains substring `<value>`. (string fields only)
+ * - `!contains`: `<field>` does not contain substring `<value>`. (string fields only)
+ * - `like`: `<field>` matches a wildcard pattern `<value>`. (string fields only)
+ * - `!like`: `<field>` does not matched a wildcard pattern `<value>`. (string fields only)
+ * - `regex`: `<field>` matches a regular expression pattern `<value>`. (string fields only)
+ * - `!regex`: `<field>` does not match a regular expression pattern `<value>`. (string fields only)
+ *
+ * Wildcard patterns use `*` to match any sequence of characters and `?` to match any single character.
+ *
+ * Regular expressions use the JavaScript regular expression syntax.
+ *
+ * The string-matching operators are case-sensitive by default. Specify `caseInsensitive: true` in the {@link FlowQueryBuilderStringField} field definition to use case-insensitive matching.
+ *
+ */
 interface FlowQueryBuilderRule<ValueType = any> {
+    /** Field identifier. */
     field?: string;
+    /** Rule value. */
     value?: ValueType;
+    /** Rule operator. */
     operator?: string;
+    /** Set to `false` to disable a rule without removing it from its parent ruleset. */
     enabled?: boolean;
 }
+/**
+ * An individual option for a select-type Query Builder field.
+ */
 interface FlowQueryBuilderOption {
+    /** Display name of the value. */
     name: string;
+    /** Option identifier. */
     value: string;
 }
+/** The set of field definitions comprising a {@link FlowQueryBuilderConfig} definition. */
 interface FlowQueryBuilderFieldMap {
     [key: string]: FlowQueryBuilderField;
 }
+/**
+ * Base interface for a Query Builder field definition. The field definition specifies how to display
+ * a field in the Query Builder UI and how to convert the user-entered value to a concrete filter expression.
+ *
+ * The following field types are supported:
+ *
+ * - `string`: A text field, displayed as an input box. Supports string-matching operators.
+ * - `number`: A numeric field, displayed as an numeric input box with stepper controls. Supports numeric comparison operators.
+ * - `date`: A date field, displayed as a date picker. Supports numeric comparison operators.
+ * - `time`: A time field, displayed as a time picker. Supports numeric comparison operators.
+ * - `datetime`: A date-time field, displayed as a date-time picker. Supports numeric comparison operators.
+ * - `select`: A select field, displayed as a dropdown list. Supports `in` and `!in` operators.
+ *
+ * In addition, all field types support equality operators (`=`, `!=`).
+ *
+ * @typeParam ValueType - The underlying type of the field value.
+ */
 interface FlowQueryBuilderFieldBase<ValueType = any> {
+    /** Display name for the field. */
     name: string;
+    /** Field type: `string`, `number`, `datetime`, `date`, `time`, `select`. */
     type: string;
+    /** @internal */
     value?: ValueType;
+    /** Set to `true` to allow the field to be `null`. */
     nullable?: boolean;
+    /** Optionally override supported operators for the field. */
     operators?: string[];
+    /** Default value for the field: static value or value-producing function. */
     defaultValue?: ValueType | (() => ValueType);
+    /** Default operator for the field. */
     defaultOperator?: string;
+    /** Optional function to convert the user-entered value before applying a rule set converter. */
     convertValue?: (value: ValueType) => any;
+    /** Optional validator function to validate the user-entered value. */
     validator?: (rule: FlowQueryBuilderRule<ValueType>) => string;
 }
+/**
+ * Field definition for a string-type Query Builder field.
+ */
 interface FlowQueryBuilderStringField extends FlowQueryBuilderFieldBase<string> {
     type: 'string';
+    /** Set to `true` to perform case-insensitive matching for `like` and `regex` operators. */
+    caseInsensitive?: boolean;
 }
+/**
+ * Field definition for a number-type Query Builder field.
+ */
 interface FlowQueryBuilderNumberField extends FlowQueryBuilderFieldBase<number> {
     type: 'number';
+    /** Minimum allowed value for the field. */
     min?: number;
+    /** Maximum allowed value for the field. */
     max?: number;
+    /** Step size used by the field stepper controls. */
     step?: number;
 }
+/**
+ * Base interface for date/time-type Query Builder fields.
+ *
+ * Note that the underlying value type for date/time fields is an ISO 8601 string.
+ */
 interface FlowQueryBuilderDateTimeFieldBase extends FlowQueryBuilderFieldBase<string> {
+    /** Luxon date format for display of the field value. */
     dateFormat?: string | (() => string);
+    /** Time zone specifier for display of the field value. */
     timezone?: string | (() => string);
+    /** Locale code for display of the field value. */
     locale?: string | (() => string);
 }
-interface FlowQueryBuilderDateTimeField extends FlowQueryBuilderDateTimeFieldBase {
+/**
+ * Field definition for a datetime-type Query Builder field.
+ */ interface FlowQueryBuilderDateTimeField extends FlowQueryBuilderDateTimeFieldBase {
     type: 'datetime';
 }
+/**
+ * Field definition for a date-type Query Builder field.
+ */
 interface FlowQueryBuilderDateField extends FlowQueryBuilderDateTimeFieldBase {
     type: 'date';
 }
+/**
+ * Field definition for a time-type Query Builder field.
+ */
 interface FlowQueryBuilderTimeField extends FlowQueryBuilderDateTimeFieldBase {
     type: 'time';
 }
+/**
+ * Field definition for a select-type Query Builder field.
+ *
+ * The underlying value type for select fields is a string (single-select) or an array of strings (multi-select).
+ * When the `in` or `!in` operator is selected, the field acts as a multi-select field. For other operators,
+ * the field acts as a single-select field.
+ *
+ */
 interface FlowQueryBuilderSelectField extends FlowQueryBuilderFieldBase<string | string[]> {
     type: 'select';
+    /** The selectable options for the field. */
     options?: FlowQueryBuilderOption[];
 }
+/**
+ * Map of field type names to field definitions for expansion of type parameters.
+ */
 interface FlowQueryBuilderFieldTypeMap {
     string: FlowQueryBuilderStringField;
     number: FlowQueryBuilderNumberField;
@@ -1315,8 +1431,17 @@ interface FlowQueryBuilderFieldTypeMap {
     select: FlowQueryBuilderSelectField;
 }
 type FlowQueryBuilderFieldType = keyof FlowQueryBuilderFieldTypeMap;
+/**
+ * The set of field types supported by the Query Builder. See {@link FlowQueryBuilderFieldBase}.
+ */
 type FlowQueryBuilderField = FlowQueryBuilderFieldTypeMap[keyof FlowQueryBuilderFieldTypeMap];
 type FlowQueryBuilderTemplateFn<FieldType extends FlowQueryBuilderFieldType> = (rule: FlowQueryBuilderRule<FlowQueryBuilderFieldTypeMap[FieldType]['value']>, field: FlowQueryBuilderFieldTypeMap[FieldType], qb: FlowUiQueryBuilder, update: () => void) => TemplateResult;
+/**
+ * Configuration for a [Query Builder](/flow-rdf-ui/web-components/flow-ui-query-builder) instance.
+ *
+ * The configuration specifies the set of fields available,
+ * how to display those fields in the Query Builder UI, and how to convert the user-defined query to a concrete filter expression.
+ */
 interface FlowQueryBuilderConfig {
     fields: FlowQueryBuilderFieldMap;
 }
@@ -1324,12 +1449,25 @@ interface FlowQueryBuilderFieldDefinition<Field extends FlowQueryBuilderFieldTyp
     operators: string[];
     template: FlowQueryBuilderTemplateFn<Field>;
 }
+/**
+ * Options common to all Query Builder converters. These options are used to modify how a Query Builder
+ * ruleset is converted to one of the supported concrete filter implementations:
+ *
+ * - Flo.w query definition - {@link flowQueryConverter}
+ * - JavaScript filter function - {@link javascriptFilterConverter}
+ * - Map layer filter - {@link mapLayerFilterConverter}
+ */
 interface FlowQueryBuilderConverterOptions {
+    /** Subset of fields defined in the query ruleset to include in the converted result. */
     includeFields?: string[];
+    /** Subset of fields defined in the query ruleset to exclude from the converted result. */
     excludeFields?: string[];
+    /** Map of fields to rename in the converted result. */
     renameFields?: Record<string, string>;
+    /** Set to `true` to throw an exception on error. By default, the problematic Query Builder field is ignored. */
+    throwOnError?: boolean;
 }
-type FlowQueryBuilderConverter = (ruleSet: FlowQueryBuilderRuleSet, config: FlowQueryBuilderConfig, options?: FlowQueryBuilderConverterOptions) => any;
+type FlowQueryBuilderConverter<R = any> = (ruleSet: FlowQueryBuilderRuleSet, config: FlowQueryBuilderConfig, options?: FlowQueryBuilderConverterOptions) => R;
 
 /**
  * Recursively applies filters to the supplied {@link FlowQueryBuilderRuleSet}
@@ -1412,9 +1550,141 @@ declare const isRuleSet: (r: unknown) => r is FlowQueryBuilderRuleSet;
  */
 declare const isRuleOrRuleset: (r: unknown) => r is FlowQueryBuilderRule | FlowQueryBuilderRuleSet;
 
-declare const converter$1: FlowQueryBuilderConverter;
+declare const converter$2: FlowQueryBuilderConverter;
 
-declare const converter: FlowQueryBuilderConverter;
+declare class JavaScriptFilterError extends Error {
+    constructor(msg: string);
+}
+/**
+ * A JavaScript function that implements the logical expression defined by a user-specified {@link FlowQueryBuilderRuleSet}. The function
+ * accepts a data object as an argument and returns a boolean result indicating whether the data object matches the rule set.
+ *
+ * The filter function is typically created by using the {@link javascriptFilterConverter} converter function, prior to applying
+ * the filter to a collection of data objects returned from a dataset query.
+ *
+ * The filter function has an additional `expression` property that contains the generated JavaScript expression for debugging purposes.
+ *
+ * @typeParam TData The type of the data object to be filtered.
+ */
+type JavaScriptFilterFn<TData = object> = ((data: TData) => boolean) & {
+    /** The generated filter expression (for debugging purposes). */
+    expression: string;
+};
+/**
+ * A Query Builder converter that generates a JavaScript filter function from a user-specified {@link FlowQueryBuilderRuleSet}.
+ *
+ * The generated filter function accepts a data object as an argument and returns a boolean result indicating whether the data object
+ * matches the rule set.
+ *
+ * This converter is typically used to apply a user-defined filter produced by the [Query Builder](/flow-rdf-ui/web-components/flow-ui-query-builder) component to a collection of data objects returned
+ * from a Flo.w reactive query. The filter is applied client-side as an alternative to server-side filtering using the {@link flowQueryConverter} converter.
+ *
+ * See [Examples](#filtering-reactive-query-results) for example usage.
+ *
+ *
+ * ### The generated filter function
+ *
+ * The abstract logical expression defined by the Query Builder ruleset is compiled into a safe and efficient JavaScript function that is designed
+ * to be passed to the Array.filter method. To view the generated JavaScript expression for debugging purposes, inspect the `expression` property
+ * of the returned filter function. Note that the generated expression makes use of two internal helper functions: `get(prop, data)` to retrieve a
+ *  sanitized property from the data object, and `regex(regex, value, caseInsensitive)` to compile, cache and evaluate regular expressions.
+ *
+ * Optionally, specify a type parameter when calling {@link javascriptFilterConverter} to strongly type the `data` parameter of the resulting filter function.
+ *
+ * @param ruleset Flo.w Query Builder ruleset to convert
+ * @param config Flo.w Query Builder field configuration
+ * @param options Converter options
+ *
+ * @typeParam TData The type of the data object to be filtered. Optionally specify to strongly type the returned filter function.
+ *
+ * @returns A function that accepts a data object and returns a boolean result indicating whether the data object matches the ruleset
+ *
+ * @example
+### Basic usage
+```typescript
+// Query Builder field configuration
+const config = {
+  fields: {
+    name: {name: 'Area Name', type: 'string', caseInsensitive: true },
+    no2: {name: 'NO₂ (ppm)', type: 'number' };
+  }
+};
+
+// Query Builder ruleset
+const ruleset = {
+  "condition": "and",
+  "rules": [
+    {
+      "enabled": true,
+      "operator": "like",
+      "value": "bar*",
+      "field": "name"
+    },
+    {
+      "enabled": true,
+      "operator": ">",
+      "value": 20,
+      "field": "no2"
+    }
+  ]
+}
+
+const filterFn = javascriptFilterConverter(ruleset, config);
+filterFn.expression; // -> 'return (regex("^bar.*$", get("name", data), true)) && (get("no2", data) > 20);'
+
+const data = [...]; // Array of data objects
+const filteredData = data.filter(filterFn);
+```
+
+@example
+### Filtering reactive query results
+
+The filter is applied to the results of a Flo.w reactive query in a computed property. The computed property will be re-evaluated whenever
+the query results or the filter ruleset changes.
+
+The computed property can be bound to a map data source to display the filtered results on a map.
+
+```typescript
+// Reactive state store
+class AppState extends StateStore {
+  ...
+
+  // User-defined Query Builder ruleset bound to Query Builder component
+  @observable.ref
+  queryBuilderRuleSet: FlowQueryBuilderRuleSet = { condition: 'and', rules: [] };
+
+  // Reactive query
+  airQualityQuery = query<FeatureCollection<Geometry>>(() => {
+
+    const queryDefinition: QueryDefinition = {
+      datasetId: 'airquality',
+      format: 'geojson'
+    };
+
+    return queryDefinition;
+  });
+
+  // Application of client-side filter to query results
+  @computed
+  get filteredAirQuality() {
+    // Bail out if results not yet retrieved
+    if (!this.airQualityQuery.results) {
+      return null;
+    }
+
+    // Apply javascript filter to features
+    const filterFn = javascriptFilterConverter(this.queryBuilderRuleSet, queryBuilderConfig);
+    const filteredFeatures = this.airQualityQuery.results.features.filter((f) => filterFn(f.properties));
+
+    // Note: return a new FeatureCollection rather than mutating query results in-place
+    return featureCollection(filteredFeatures);
+  }
+}
+```
+*/
+declare const converter$1: <TData = object>(ruleset: FlowQueryBuilderRuleSet, config: FlowQueryBuilderConfig, options?: FlowQueryBuilderConverterOptions) => JavaScriptFilterFn<TData>;
+
+declare const converter: FlowQueryBuilderConverter<string | undefined>;
 
 /**
  * Call this function to register all Flo.w RDF UI custom elements.
@@ -2186,8 +2456,7 @@ declare class FlowUiChart extends FlowRdfElement {
     plugins: Plugin[];
     /** Trigger a repaint of the chart. */
     repaint(): void;
-    firstUpdated(): void;
-    connectedCallback(): void;
+    connectedCallback(): Promise<void>;
     disconnectedCallback(): void;
     render(): lit_html.TemplateResult<1>;
 }
@@ -3573,6 +3842,7 @@ declare class FlowUiMap extends FlowRdfElement {
     private _map?;
     private _initialized;
     private _resolveInitialized;
+    private _pendingCenter?;
     private _mapLoading;
     /**
      * The map ID. If not provided, a unique ID will be generated.
@@ -5688,4 +5958,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, type FlowBlurEvent as FlowUiBlurEvent, FlowUiBreadcrumb, FlowUiBreadcrumbItem, FlowUiButton, FlowUiButtonGroup, FlowUiCalendar, type FlowCancelEvent as FlowUiCancelEvent, FlowUiCard, FlowUiCarousel, FlowUiCarouselItem, type FlowChangeEvent as FlowUiChangeEvent, FlowUiChart, FlowUiCheckbox, type FlowClearEvent as FlowUiClearEvent, type FlowCloseEvent as FlowUiCloseEvent, type FlowCollapseEvent as FlowUiCollapseEvent, FlowUiColorMapper, FlowUiColorPicker, FlowUiColorStop, FlowUiDateTimePicker, FlowUiDetails, FlowUiDialog, FlowUiDivider, type FlowDragEvent as FlowUiDragEvent, type FlowDragStartEvent as FlowUiDragStartEvent, FlowUiDrawer, FlowUiDropdown, type FlowErrorEvent as FlowUiErrorEvent, type FlowExpandEvent as FlowUiExpandEvent, type FlowFinishEvent as FlowUiFinishEvent, type FlowFocusEvent as FlowUiFocusEvent, 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, 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, type FlowDragEndEvent as FlowUiUiDragEndEvent, FlowUiVisuallyHidden, LocalizeController, type NumberColorMapperField, type NumberColorStopOptions, type SelectColorMapperField, type SelectColorStopOptions, type StringColorMapperField, type StringColorStopOptions, type Translation, addIcons, colorMapperValueToMaplibreExpression, escapeMaplibreString, filterRuleSet, converter$1 as flowQueryConverter, getAnimationNames, getEasingNames, initialize, initializeChartJs, isRule, isRuleOrRuleset, isRuleSet, 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, type FlowBlurEvent as FlowUiBlurEvent, FlowUiBreadcrumb, FlowUiBreadcrumbItem, FlowUiButton, FlowUiButtonGroup, FlowUiCalendar, type FlowCancelEvent as FlowUiCancelEvent, FlowUiCard, FlowUiCarousel, FlowUiCarouselItem, type FlowChangeEvent as FlowUiChangeEvent, FlowUiChart, FlowUiCheckbox, type FlowClearEvent as FlowUiClearEvent, type FlowCloseEvent as FlowUiCloseEvent, type FlowCollapseEvent as FlowUiCollapseEvent, FlowUiColorMapper, FlowUiColorPicker, FlowUiColorStop, FlowUiDateTimePicker, FlowUiDetails, FlowUiDialog, FlowUiDivider, type FlowDragEvent as FlowUiDragEvent, type FlowDragStartEvent as FlowUiDragStartEvent, FlowUiDrawer, FlowUiDropdown, type FlowErrorEvent as FlowUiErrorEvent, type FlowExpandEvent as FlowUiExpandEvent, type FlowFinishEvent as FlowUiFinishEvent, type FlowFocusEvent as FlowUiFocusEvent, 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, 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, type FlowDragEndEvent as FlowUiUiDragEndEvent, 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 };

package/dist/index.mjs

@@ -75,5 +75,6 @@ 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 { 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';
 export { registerComponents } from './utilities/register-components.mjs';

package/dist/package.json.mjs

@@ -1,3 +1,3 @@
-const version = "4.0.12";
+const version = "4.0.15";
 
 export { version };

package/dist/utilities/regex.mjs

@@ -0,0 +1,5 @@
+const escape = function(val) {
+  return val.replace(/[.*+\-?^${}()|[\]\\]/g, "\\$&");
+};
+
+export { escape };

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

@@ -35,35 +35,6 @@
       ],
       "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.",
-      "attributes": [
-        {
-          "name": "variant",
-          "description": "The badge's theme variant.",
-          "values": [
-            { "name": "primary" },
-            { "name": "secondary" },
-            { "name": "success" },
-            { "name": "neutral" },
-            { "name": "warning" },
-            { "name": "danger" }
-          ]
-        },
-        {
-          "name": "pill",
-          "description": "Draws a pill-style badge with rounded edges.",
-          "values": []
-        },
-        {
-          "name": "pulse",
-          "description": "Makes the badge pulsate to draw attention.",
-          "values": []
-        }
-      ],
-      "references": []
-    },
     {
       "name": "flow-ui-animation",
       "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.",
@@ -126,33 +97,6 @@
       ],
       "references": []
     },
-    {
-      "name": "flow-ui-breadcrumb-item",
-      "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.",
-      "attributes": [
-        {
-          "name": "href",
-          "description": "Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered\ninternally. When unset, a button will be rendered instead.",
-          "values": []
-        },
-        {
-          "name": "target",
-          "description": "Tells the browser where to open the link. Only used when `href` is set.",
-          "values": [
-            { "name": "_blank" },
-            { "name": "_parent" },
-            { "name": "_self" },
-            { "name": "_top" }
-          ]
-        },
-        {
-          "name": "rel",
-          "description": "The `rel` attribute to use on the link. Only used when `href` is set.",
-          "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.",
@@ -190,41 +134,40 @@
       "references": []
     },
     {
-      "name": "flow-ui-calendar",
-      "description": "A calendar component for selecting dates and times.\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. 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.",
+      "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": "value",
-          "description": "The value of the control. (ISO8601 date/time string)",
+          "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-breadcrumb-item",
+      "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.",
+      "attributes": [
+        {
+          "name": "href",
+          "description": "Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered\ninternally. When unset, a button will be rendered instead.",
           "values": []
         },
         {
-          "name": "display-mode",
-          "description": "Select whether to show date only, time only or both date and time.",
+          "name": "target",
+          "description": "Tells the browser where to open the link. Only used when `href` is set.",
           "values": [
-            { "name": "date" },
-            { "name": "time" },
-            { "name": "datetime" }
+            { "name": "_blank" },
+            { "name": "_parent" },
+            { "name": "_self" },
+            { "name": "_top" }
           ]
         },
         {
-          "name": "timezone",
-          "description": "Set the timezone for display. If not set the default timezone will be used. (TZ name e.g. `'Europe/London'`)",
-          "values": []
-        },
-        {
-          "name": "locale",
-          "description": "Set the locale for display. If not set the default locale will be used. (e.g `'en-GB'`)",
+          "name": "rel",
+          "description": "The `rel` attribute to use on the link. Only used when `href` is set.",
           "values": []
-        },
-        {
-          "name": "size",
-          "description": "Set the size of the calendar.",
-          "values": [
-            { "name": "small" },
-            { "name": "medium" },
-            { "name": "large" }
-          ]
         }
       ],
       "references": []
@@ -379,6 +322,35 @@
       ],
       "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.",
+      "attributes": [
+        {
+          "name": "variant",
+          "description": "The badge's theme variant.",
+          "values": [
+            { "name": "primary" },
+            { "name": "secondary" },
+            { "name": "success" },
+            { "name": "neutral" },
+            { "name": "warning" },
+            { "name": "danger" }
+          ]
+        },
+        {
+          "name": "pill",
+          "description": "Draws a pill-style badge with rounded edges.",
+          "values": []
+        },
+        {
+          "name": "pulse",
+          "description": "Makes the badge pulsate to draw attention.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "flow-ui-button-group",
       "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.",
@@ -397,13 +369,41 @@
       "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.",
+      "name": "flow-ui-calendar",
+      "description": "A calendar component for selecting dates and times.\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. 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.",
       "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.",
+          "name": "value",
+          "description": "The value of the control. (ISO8601 date/time string)",
+          "values": []
+        },
+        {
+          "name": "display-mode",
+          "description": "Select whether to show date only, time only or both date and time.",
+          "values": [
+            { "name": "date" },
+            { "name": "time" },
+            { "name": "datetime" }
+          ]
+        },
+        {
+          "name": "timezone",
+          "description": "Set the timezone for display. If not set the default timezone will be used. (TZ name e.g. `'Europe/London'`)",
           "values": []
+        },
+        {
+          "name": "locale",
+          "description": "Set the locale for display. If not set the default locale will be used. (e.g `'en-GB'`)",
+          "values": []
+        },
+        {
+          "name": "size",
+          "description": "Set the size of the calendar.",
+          "values": [
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "large" }
+          ]
         }
       ],
       "references": []

package/package.json

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