@genspectrum/dashboard-components 0.19.2 → 0.19.4

package/src/preact/numberRangeFilter/useSelectedRangeReducer.ts

@@ -0,0 +1,137 @@
+import { useEffect, useReducer, useState } from 'preact/hooks';
+
+import { type NumberRange } from './NumberRangeFilterChangedEvent';
+
+type InputState = {
+    min: string;
+    max: string;
+};
+
+export type RangeState = {
+    inputState: InputState;
+    range: NumberRange & { isValidRange: boolean };
+    wasDispatched: boolean;
+};
+
+export function useSelectedRangeReducer(initialValue: NumberRange) {
+    const [range, dispatchRange] = useReducer(
+        rangeReducer,
+        addRange({
+            min: initialValue.min?.toString() ?? '',
+            max: initialValue.max?.toString() ?? '',
+        }),
+    );
+    const [isInitialRender, setIsInitialRender] = useState(true);
+
+    useEffect(
+        () => {
+            if (isInitialRender) {
+                setIsInitialRender(false);
+                return;
+            }
+
+            dispatchRange({
+                type: SetRangeActionType.SET_VALUE_FROM_CONTROLLED_INPUT,
+                range: initialValue,
+            });
+        },
+        [initialValue], // eslint-disable-line react-hooks/exhaustive-deps -- only run this when initialValue changes
+    );
+
+    return [range, dispatchRange] as const;
+}
+
+export const SetRangeActionType = {
+    SET_MIN: 'setMin',
+    SET_MAX: 'setMax',
+    SET_VALUE_FROM_CONTROLLED_INPUT: 'setValueFromControlledInput',
+    DISPATCHED_EVENT: 'dispatchedEvent',
+} as const;
+
+type SetRangeAction =
+    | {
+          type: typeof SetRangeActionType.SET_MIN | typeof SetRangeActionType.SET_MAX;
+          value: string;
+      }
+    | {
+          type: typeof SetRangeActionType.SET_VALUE_FROM_CONTROLLED_INPUT;
+          range: NumberRange;
+      }
+    | {
+          type: typeof SetRangeActionType.DISPATCHED_EVENT;
+      };
+
+function rangeReducer(currentState: RangeState, action: SetRangeAction) {
+    const { min, max } = currentState.inputState;
+
+    switch (action.type) {
+        case SetRangeActionType.SET_MIN:
+            return addRange({ min: action.value, max });
+        case SetRangeActionType.SET_MAX:
+            return addRange({ min, max: action.value });
+
+        case SetRangeActionType.SET_VALUE_FROM_CONTROLLED_INPUT:
+            return addRange({
+                min: action.range.min?.toString() ?? '',
+                max: action.range.max?.toString() ?? '',
+            });
+
+        case SetRangeActionType.DISPATCHED_EVENT:
+            return {
+                ...currentState,
+                wasDispatched: true,
+            };
+    }
+}
+
+function addRange(inputState: InputState): RangeState {
+    const parsedMin = parseRangeValue(inputState.min);
+    const parsedMax = parseRangeValue(inputState.max);
+
+    const range = {
+        min: parsedMin.value,
+        max: parsedMax.value,
+    };
+
+    const isValidRange = parsedMin.valid && parsedMax.valid && isValid(range);
+
+    return {
+        inputState,
+        range: {
+            ...range,
+            isValidRange,
+        },
+        wasDispatched: false,
+    };
+}
+
+function parseRangeValue(inputValue: string) {
+    const trimmedInput = inputValue.trim();
+
+    if (trimmedInput === '') {
+        return {
+            valid: true,
+            value: undefined,
+        };
+    }
+
+    const value = Number(trimmedInput);
+    if (!Number.isFinite(value)) {
+        return {
+            valid: false,
+            value: undefined,
+        };
+    }
+
+    return {
+        valid: true,
+        value,
+    };
+}
+
+function isValid(range: NumberRange) {
+    if (range.min === undefined || range.max === undefined) {
+        return true;
+    }
+    return range.min <= range.max;
+}

package/src/preact/shared/charts/colors.ts

@@ -1,6 +1,6 @@
 // colorblind friendly colors taken from https://personal.sron.nl/~pault/
 
-const ColorsRGB = {
+export const ColorsRGB = {
     indigo: [51, 34, 136],
     green: [17, 119, 51],
     cyan: [136, 204, 238],

package/src/preact/textFilter/TextFilterChangedEvent.ts

@@ -1,8 +1,10 @@
+import { gsEventNames } from '../../utils/gsEventNames';
+
 type LapisTextFilter = Record<string, string | undefined>;
 
 export class TextFilterChangedEvent extends CustomEvent<LapisTextFilter> {
     constructor(detail: LapisTextFilter) {
-        super('gs-text-filter-changed', {
+        super(gsEventNames.textFilterChanged, {
             detail,
             bubbles: true,
             composed: true,

package/src/preact/textFilter/text-filter.stories.tsx

@@ -5,6 +5,7 @@ import data from './__mockData__/aggregated_hosts.json';
 import { TextFilter, type TextFilterProps } from './text-filter';
 import { previewHandles } from '../../../.storybook/preview';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
+import { gsEventNames } from '../../utils/gsEventNames';
 import { LapisUrlContextProvider } from '../LapisUrlContext';
 import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectErrorMessage';
 
@@ -13,7 +14,7 @@ const meta: Meta<TextFilterProps> = {
     component: TextFilter,
     parameters: {
         actions: {
-            handles: ['gs-text-filter-changed', ...previewHandles],
+            handles: [gsEventNames.textFilterChanged, ...previewHandles],
         },
         fetchMock: {
             mocks: [
@@ -93,7 +94,7 @@ export const RemoveInitialValue: StoryObj<TextFilterProps> = {
 
         const changedListenerMock = fn();
         await step('Setup event listener mock', () => {
-            canvasElement.addEventListener('gs-text-filter-changed', changedListenerMock);
+            canvasElement.addEventListener(gsEventNames.textFilterChanged, changedListenerMock);
         });
 
         await waitFor(async () => {
@@ -136,7 +137,7 @@ export const KeepsPartialInputInInputField: StoryObj<TextFilterProps> = {
 
         const changedListenerMock = fn();
         await step('Setup event listener mock', () => {
-            canvasElement.addEventListener('gs-text-filter-changed', changedListenerMock);
+            canvasElement.addEventListener(gsEventNames.textFilterChanged, changedListenerMock);
         });
         const inputField = () => canvas.getByPlaceholderText('Enter a host name', { exact: false });
         async function typeAndBlur(input: string) {

package/src/utilEntrypoint.ts

@@ -38,3 +38,5 @@ export { LineageFilterChangedEvent } from './preact/lineageFilter/LineageFilterC
 export { TextFilterChangedEvent } from './preact/textFilter/TextFilterChangedEvent';
 
 export type { MutationAnnotations, MutationAnnotation } from './web-components/mutation-annotations-context';
+
+export { gsEventNames } from './utils/gsEventNames';

package/src/utils/gsEventNames.ts

@@ -0,0 +1,11 @@
+export const gsEventNames = {
+    error: 'gs-error',
+    dateRangeFilterChanged: 'gs-date-range-filter-changed',
+    dateRangeOptionChanged: 'gs-date-range-option-changed',
+    mutationFilterChanged: 'gs-mutation-filter-changed',
+    lineageFilterChanged: 'gs-lineage-filter-changed',
+    locationChanged: 'gs-location-changed',
+    textFilterChanged: 'gs-text-filter-changed',
+    numberRangeFilterChanged: 'gs-number-range-filter-changed',
+    numberRangeValueChanged: 'gs-number-range-value-changed',
+} as const;

package/src/web-components/input/gs-date-range-filter.stories.ts

@@ -10,6 +10,7 @@ import './gs-date-range-filter';
 import '../gs-app';
 import { toYYYYMMDD } from '../../preact/dateRangeFilter/dateConversion';
 import { dateRangeOptionPresets } from '../../preact/dateRangeFilter/dateRangeOption';
+import { gsEventNames } from '../../utils/gsEventNames';
 import { withinShadowRoot } from '../withinShadowRoot.story';
 
 const codeExample = String.raw`
@@ -29,7 +30,7 @@ const meta: Meta<Required<DateRangeFilterProps>> = {
     component: 'gs-date-range-filter',
     parameters: withComponentDocs({
         actions: {
-            handles: ['gs-date-range-filter-changed', 'gs-date-range-option-changed', ...previewHandles],
+            handles: [gsEventNames.dateRangeFilterChanged, gsEventNames.dateRangeOptionChanged, ...previewHandles],
         },
         fetchMock: {},
         componentDocs: {
@@ -144,8 +145,8 @@ export const FiresEvents: StoryObj<Required<DateRangeFilterProps>> = {
         const filterChangedListenerMock = fn();
         const optionChangedListenerMock = fn();
         await step('Setup event listener mock', () => {
-            canvasElement.addEventListener('gs-date-range-filter-changed', filterChangedListenerMock);
-            canvasElement.addEventListener('gs-date-range-option-changed', optionChangedListenerMock);
+            canvasElement.addEventListener(gsEventNames.dateRangeFilterChanged, filterChangedListenerMock);
+            canvasElement.addEventListener(gsEventNames.dateRangeOptionChanged, optionChangedListenerMock);
         });
 
         await step('Expect last 6 months to be selected', async () => {

package/src/web-components/input/gs-date-range-filter.tsx

@@ -5,6 +5,7 @@ import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { DateRangeFilter, type DateRangeFilterProps } from '../../preact/dateRangeFilter/date-range-filter';
 import { type DateRangeOptionChangedEvent } from '../../preact/dateRangeFilter/dateRangeOption';
+import { type gsEventNames } from '../../utils/gsEventNames';
 import { type Equals, type Expect } from '../../utils/typeAssertions';
 import { PreactLitAdapter } from '../PreactLitAdapter';
 
@@ -143,8 +144,8 @@ declare global {
     }
 
     interface HTMLElementEventMap {
-        'gs-date-range-filter-changed': CustomEvent<Record<string, string>>;
-        'gs-date-range-option-changed': DateRangeOptionChangedEvent;
+        [gsEventNames.dateRangeFilterChanged]: CustomEvent<Record<string, string>>;
+        [gsEventNames.dateRangeOptionChanged]: DateRangeOptionChangedEvent;
     }
 }
 

package/src/web-components/input/gs-lineage-filter.stories.ts

@@ -9,6 +9,7 @@ import '../gs-app';
 import './gs-lineage-filter';
 import aggregatedData from '../../preact/lineageFilter/__mockData__/aggregated.json';
 import { type LineageFilterProps } from '../../preact/lineageFilter/lineage-filter';
+import { gsEventNames } from '../../utils/gsEventNames';
 import { withinShadowRoot } from '../withinShadowRoot.story';
 
 const codeExample = String.raw`
@@ -25,7 +26,7 @@ const meta: Meta<Required<LineageFilterProps>> = {
     component: 'gs-lineage-filter',
     parameters: withComponentDocs({
         actions: {
-            handles: ['gs-lineage-filter-changed', ...previewHandles],
+            handles: [gsEventNames.lineageFilterChanged, ...previewHandles],
         },
         fetchMock: {
             mocks: [
@@ -182,7 +183,7 @@ export const FiresEvent: StoryObj<Required<LineageFilterProps>> = {
         const inputField = () => canvas.getByPlaceholderText('Enter a lineage');
         const listenerMock = fn();
         await step('Setup event listener mock', () => {
-            canvasElement.addEventListener('gs-lineage-filter-changed', listenerMock);
+            canvasElement.addEventListener(gsEventNames.lineageFilterChanged, listenerMock);
         });
 
         await step('wait until data is loaded', async () => {

package/src/web-components/input/gs-lineage-filter.tsx

@@ -3,6 +3,7 @@ import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { type LineageFilterChangedEvent } from '../../preact/lineageFilter/LineageFilterChangedEvent';
 import { LineageFilter, type LineageFilterProps } from '../../preact/lineageFilter/lineage-filter';
+import { type gsEventNames } from '../../utils/gsEventNames';
 import type { Equals, Expect } from '../../utils/typeAssertions';
 import { PreactLitAdapter } from '../PreactLitAdapter';
 
@@ -91,7 +92,7 @@ declare global {
     }
 
     interface HTMLElementEventMap {
-        'gs-lineage-filter-changed': LineageFilterChangedEvent;
+        [gsEventNames.lineageFilterChanged]: LineageFilterChangedEvent;
     }
 }
 

package/src/web-components/input/gs-location-filter.stories.ts

@@ -10,6 +10,7 @@ import '../gs-app';
 import './gs-location-filter';
 import data from '../../preact/locationFilter/__mockData__/aggregated.json';
 import { type LocationFilterProps } from '../../preact/locationFilter/location-filter';
+import { gsEventNames } from '../../utils/gsEventNames';
 import { withinShadowRoot } from '../withinShadowRoot.story';
 
 const codeExample = String.raw`
@@ -26,7 +27,7 @@ const meta: Meta = {
     component: 'gs-location-filter',
     parameters: withComponentDocs({
         actions: {
-            handles: ['gs-location-changed', ...previewHandles],
+            handles: [gsEventNames.locationChanged, ...previewHandles],
         },
         componentDocs: {
             opensShadowDom: true,
@@ -189,7 +190,7 @@ export const FiresEvent: StoryObj<LocationFilterProps> = {
 
         const listenerMock = fn();
         await step('Setup event listener mock', () => {
-            canvasElement.addEventListener('gs-location-changed', listenerMock);
+            canvasElement.addEventListener(gsEventNames.locationChanged, listenerMock);
         });
 
         await step('wait until data is loaded', async () => {

package/src/web-components/input/gs-location-filter.tsx

@@ -3,6 +3,7 @@ import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { type LocationChangedEvent } from '../../preact/locationFilter/LocationChangedEvent';
 import { LocationFilter, type LocationFilterProps } from '../../preact/locationFilter/location-filter';
+import { type gsEventNames } from '../../utils/gsEventNames';
 import type { Equals, Expect } from '../../utils/typeAssertions';
 import { PreactLitAdapter } from '../PreactLitAdapter';
 
@@ -95,7 +96,7 @@ declare global {
     }
 
     interface HTMLElementEventMap {
-        'gs-location-changed': LocationChangedEvent;
+        [gsEventNames.locationChanged]: LocationChangedEvent;
     }
 }
 

package/src/web-components/input/gs-mutation-filter.stories.ts

@@ -7,6 +7,7 @@ import { previewHandles } from '../../../.storybook/preview';
 import { LAPIS_URL, REFERENCE_GENOME_ENDPOINT } from '../../constants';
 import '../gs-app';
 import { type MutationFilterProps } from '../../preact/mutationFilter/mutation-filter';
+import { gsEventNames } from '../../utils/gsEventNames';
 import { withinShadowRoot } from '../withinShadowRoot.story';
 import './gs-mutation-filter';
 
@@ -21,7 +22,7 @@ const meta: Meta<MutationFilterProps> = {
     component: 'gs-mutation-filter',
     parameters: withComponentDocs({
         actions: {
-            handles: ['gs-mutation-filter-changed', ...previewHandles],
+            handles: [gsEventNames.mutationFilterChanged, ...previewHandles],
         },
         fetchMock: {},
         componentDocs: {
@@ -73,7 +74,7 @@ export const FiresFilterChangedEvent: StoryObj<MutationFilterProps> = {
         const inputField = () => canvas.getByPlaceholderText('Enter a mutation', { exact: false });
         const listenerMock = fn();
         await step('Setup event listener mock', () => {
-            canvasElement.addEventListener('gs-mutation-filter-changed', listenerMock);
+            canvasElement.addEventListener(gsEventNames.mutationFilterChanged, listenerMock);
         });
 
         await step('wait until data is loaded', async () => {

package/src/web-components/input/gs-mutation-filter.tsx

@@ -4,6 +4,7 @@ import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 import { ReferenceGenomesAwaiter } from '../../preact/components/ReferenceGenomesAwaiter';
 import { MutationFilter, type MutationFilterProps } from '../../preact/mutationFilter/mutation-filter';
 import type { MutationsFilter } from '../../types';
+import { type gsEventNames } from '../../utils/gsEventNames';
 import type { Equals, Expect } from '../../utils/typeAssertions';
 import { PreactLitAdapter } from '../PreactLitAdapter';
 
@@ -95,7 +96,7 @@ declare global {
     }
 
     interface HTMLElementEventMap {
-        'gs-mutation-filter-changed': CustomEvent<MutationsFilter>;
+        [gsEventNames.mutationFilterChanged]: CustomEvent<MutationsFilter>;
     }
 }
 

package/src/web-components/input/gs-number-range-filter.spec.ts

@@ -0,0 +1,27 @@
+import { describe, expectTypeOf, test } from 'vitest';
+
+import { NumberRangeFilterComponent } from './gs-number-range-filter';
+import { type NumberRangeFilterProps } from '../../preact/numberRangeFilter/number-range-filter';
+
+describe('gs-number-range-filter types', () => {
+    test('should match', ({}) => {
+        expectTypeOf(NumberRangeFilterComponent.prototype)
+            .toHaveProperty('value')
+            .toEqualTypeOf<NumberRangeFilterProps['value']>();
+        expectTypeOf(NumberRangeFilterComponent.prototype)
+            .toHaveProperty('lapisField')
+            .toEqualTypeOf<NumberRangeFilterProps['lapisField']>();
+        expectTypeOf(NumberRangeFilterComponent.prototype)
+            .toHaveProperty('sliderMin')
+            .toEqualTypeOf<NumberRangeFilterProps['sliderMin']>();
+        expectTypeOf(NumberRangeFilterComponent.prototype)
+            .toHaveProperty('sliderMax')
+            .toEqualTypeOf<NumberRangeFilterProps['sliderMax']>();
+        expectTypeOf(NumberRangeFilterComponent.prototype)
+            .toHaveProperty('sliderStep')
+            .toEqualTypeOf<NumberRangeFilterProps['sliderStep']>();
+        expectTypeOf(NumberRangeFilterComponent.prototype)
+            .toHaveProperty('width')
+            .toEqualTypeOf<NumberRangeFilterProps['width']>();
+    });
+});

package/src/web-components/input/gs-number-range-filter.stories.ts

@@ -0,0 +1,96 @@
+import '../gs-app';
+import './gs-number-range-filter';
+
+import { type Meta, type StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+
+import { withComponentDocs } from '../../../.storybook/ComponentDocsBlock';
+import { LAPIS_URL } from '../../constants';
+import { type NumberRangeFilterProps } from '../../preact/numberRangeFilter/number-range-filter';
+import { gsEventNames } from '../../utils/gsEventNames';
+
+const codeExample = String.raw`
+<gs-number-range-filter
+    value='{"ageFrom": 10, "ageTo": 90}'
+    lapisField="age"
+    sliderMin="0"
+    sliderMax="100"
+    sliderStep="1"
+    width="50%"
+></gs-number-range-filter>`;
+
+const meta: Meta<NumberRangeFilterProps> = {
+    title: 'Input/Number range filter',
+    component: 'gs-number-range-filter',
+    parameters: withComponentDocs({
+        actions: {
+            handles: [gsEventNames.numberRangeFilterChanged, gsEventNames.numberRangeValueChanged],
+        },
+        componentDocs: {
+            opensShadowDom: true,
+            expectsChildren: false,
+            codeExample,
+        },
+    }),
+    tags: ['autodocs'],
+    argTypes: {
+        value: {
+            control: {
+                type: 'object',
+            },
+        },
+        lapisField: {
+            control: {
+                type: 'text',
+            },
+        },
+        sliderMin: {
+            control: {
+                type: 'number',
+            },
+        },
+        sliderMax: {
+            control: {
+                type: 'number',
+            },
+        },
+        sliderStep: {
+            control: {
+                type: 'number',
+            },
+        },
+        width: {
+            control: {
+                type: 'text',
+            },
+        },
+    },
+};
+
+export default meta;
+
+export const Default: StoryObj<NumberRangeFilterProps> = {
+    render: (args) => {
+        return html`
+            <gs-app lapis="${LAPIS_URL}">
+                <gs-number-range-filter
+                    .value=${args.value}
+                    .lapisField=${args.lapisField}
+                    .sliderMin=${args.sliderMin}
+                    .sliderMax=${args.sliderMax}
+                    .sliderStep=${args.sliderStep}
+                    .width=${args.width}
+                >
+                </gs-number-range-filter>
+            </gs-app>
+        `;
+    },
+    args: {
+        lapisField: 'age',
+        value: { min: 10, max: 90 },
+        sliderMin: 0,
+        sliderMax: 100,
+        sliderStep: 0.1,
+        width: '100%',
+    },
+};

package/src/web-components/input/gs-number-range-filter.tsx

@@ -0,0 +1,148 @@
+import { customElement, property } from 'lit/decorators.js';
+import type { DetailedHTMLProps, HTMLAttributes } from 'react';
+
+import {
+    type NumberRangeFilterChangedEvent,
+    type NumberRangeValueChangedEvent,
+} from '../../preact/numberRangeFilter/NumberRangeFilterChangedEvent';
+import { NumberRangeFilter } from '../../preact/numberRangeFilter/number-range-filter';
+import { type gsEventNames } from '../../utils/gsEventNames';
+import { PreactLitAdapter } from '../PreactLitAdapter';
+
+/**
+ *
+ * ## Context
+ *
+ * This component lets the user specify filters for a `float` or `int` field in LAPIS.
+ * It consists of two text input fields and a slider.
+ *
+ * The slider must be restricted to a certain range.
+ * Users can however still enter values outside of this range in the text input fields.
+ *
+ * @fires {CustomEvent<Record<string, string | undefined>>} gs-number-range-filter-changed
+ * Fired when the slider is released,
+ * `onBlur` on the input fields after the user has typed a valid range in the input fields,
+ * or when one of the input fields is cleared.
+ * The `details` of this event contain an object with `${lapisField}From` and `${lapisField}To` as keys.
+ * The values are the numbers from the input fields or `undefined` if the input field is empty:
+ * ```
+ * {
+ *     [`${lapisField}From`]: number | undefined
+ *     [`${lapisField}To`]: number | undefined
+ * }
+ * ```
+ * Example:
+ * ```
+ * {
+ *     ageFrom: 18,
+ *     ageTo: undefined
+ * }
+ * ```
+ *
+ * @fires {CustomEvent<Record<string, string | undefined>>} gs-number-range-value-changed
+ * Similar to the `gs-number-range-filter-changed` event,
+ * but contains an `event.detail` that has a fixed format:
+ * ```
+ * {
+ *     min: number | undefined
+ *     max: number | undefined
+ * }
+ * ```
+ * This event should be used when you want to control this component externally.
+ * The `event.detail` can be used as the value of the component.
+ * Example:
+ * ```
+ * {
+ *     min: 18,
+ *     max: undefined
+ * }
+ * ```
+ */
+@customElement('gs-number-range-filter')
+export class NumberRangeFilterComponent extends PreactLitAdapter {
+    /**
+     * The value to use for this number filter.
+     *
+     * Must be of the form:
+     * ```
+     * {
+     *     [`${lapisField}From`]: number | undefined
+     *     [`${lapisField}To`]: number | undefined
+     * }
+     * ```
+     *
+     * This is the same format that the `gs-number-value-changed` event will emit.
+     */
+    @property({ type: Object })
+    value: { min?: number; max?: number } = {};
+
+    /**
+     * Required.
+     *
+     * The LAPIS field name to use for this text filter.
+     * The field must exist on this LAPIS instance.
+     */
+    @property()
+    lapisField = '';
+
+    /**
+     * The `min` value to use for the slider.
+     */
+    @property({ type: Number })
+    sliderMin = 0;
+
+    /**
+     * The `max` value to use for the slider.
+     */
+    @property({ type: Number })
+    sliderMax = 100;
+
+    /**
+     * The `step` value to use for the slider.
+     *
+     * This attribute has no effect on the text input.
+     */
+    @property({ type: Number })
+    sliderStep = 1;
+
+    /**
+     * The width of the component.
+     *
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.
+     */
+    @property({ type: String })
+    width: string = '100%';
+
+    override render() {
+        return (
+            <NumberRangeFilter
+                value={this.value}
+                lapisField={this.lapisField}
+                sliderMin={this.sliderMin}
+                sliderMax={this.sliderMax}
+                sliderStep={this.sliderStep}
+                width={this.width}
+            />
+        );
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'gs-number-range-filter': NumberRangeFilterComponent;
+    }
+
+    interface HTMLElementEventMap {
+        [gsEventNames.numberRangeFilterChanged]: NumberRangeFilterChangedEvent;
+        [gsEventNames.numberRangeValueChanged]: NumberRangeValueChangedEvent;
+    }
+}
+
+declare global {
+    // eslint-disable-next-line @typescript-eslint/no-namespace
+    namespace JSX {
+        interface IntrinsicElements {
+            'gs-number-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}