@furystack/shades-common-components 12.4.0 → 12.5.0

package/esm/components/data-grid/filters/enum-filter.spec.js

@@ -0,0 +1,136 @@
+import { Injector } from '@furystack/inject';
+import { createComponent, flushUpdates, initializeShadeRoot } from '@furystack/shades';
+import { ObservableValue, usingAsync } from '@furystack/utils';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { EnumFilter } from './enum-filter.js';
+const enumValues = [
+    { label: 'Admin', value: 'admin' },
+    { label: 'User', value: 'user' },
+    { label: 'Guest', value: 'guest' },
+];
+describe('EnumFilter', () => {
+    beforeEach(() => {
+        document.body.innerHTML = '<div id="root"></div>';
+    });
+    afterEach(() => {
+        document.body.innerHTML = '';
+    });
+    const createFindOptions = (options = {}) => {
+        return new ObservableValue(options);
+    };
+    const renderEnumFilter = async (findOptions, field = 'role', values = enumValues, onClose = vi.fn()) => {
+        const injector = new Injector();
+        const rootElement = document.getElementById('root');
+        initializeShadeRoot({
+            injector,
+            rootElement,
+            jsxElement: createComponent(EnumFilter, { field: field, values: values, findOptions: findOptions, onClose: onClose }),
+        });
+        await flushUpdates();
+        return { injector, onClose };
+    };
+    it('should render mode control and checkboxes for each value', async () => {
+        const findOptions = createFindOptions();
+        await usingAsync((await renderEnumFilter(findOptions)).injector, async () => {
+            const control = document.querySelector('shade-segmented-control');
+            expect(control).not.toBeNull();
+            const checkboxes = document.querySelectorAll('shade-checkbox');
+            expect(checkboxes.length).toBe(3);
+        });
+    });
+    it('should apply $in filter when values are selected and Apply is clicked', async () => {
+        const findOptions = createFindOptions();
+        const { injector, onClose } = await renderEnumFilter(findOptions);
+        await usingAsync(injector, async () => {
+            const checkboxes = document.querySelectorAll('shade-checkbox input[type="checkbox"]');
+            const adminCheckbox = checkboxes[0];
+            adminCheckbox.checked = true;
+            adminCheckbox.dispatchEvent(new Event('change', { bubbles: true }));
+            const applyButton = Array.from(document.querySelectorAll('button')).find((b) => b.textContent?.trim() === 'Apply');
+            applyButton?.click();
+            await flushUpdates();
+            expect(findOptions.getValue().filter).toEqual({ role: { $in: ['admin'] } });
+            expect(onClose).toHaveBeenCalled();
+        });
+    });
+    it('should apply $nin filter when exclude mode is selected', async () => {
+        const findOptions = createFindOptions();
+        const { injector, onClose } = await renderEnumFilter(findOptions);
+        await usingAsync(injector, async () => {
+            const excludeButton = document.querySelector('shade-segmented-control button[data-value="exclude"]');
+            excludeButton?.click();
+            await flushUpdates();
+            const checkboxes = document.querySelectorAll('shade-checkbox input[type="checkbox"]');
+            const guestCheckbox = checkboxes[2];
+            guestCheckbox.checked = true;
+            guestCheckbox.dispatchEvent(new Event('change', { bubbles: true }));
+            const applyButton = Array.from(document.querySelectorAll('button')).find((b) => b.textContent?.trim() === 'Apply');
+            applyButton?.click();
+            await flushUpdates();
+            expect(findOptions.getValue().filter).toEqual({ role: { $nin: ['guest'] } });
+            expect(onClose).toHaveBeenCalled();
+        });
+    });
+    it('should remove filter when no values are selected', async () => {
+        const findOptions = createFindOptions({ filter: { role: { $in: ['admin'] } } });
+        const { injector, onClose } = await renderEnumFilter(findOptions);
+        await usingAsync(injector, async () => {
+            const checkboxes = document.querySelectorAll('shade-checkbox input[type="checkbox"]');
+            const adminCheckbox = checkboxes[0];
+            adminCheckbox.checked = false;
+            adminCheckbox.dispatchEvent(new Event('change', { bubbles: true }));
+            const applyButton = Array.from(document.querySelectorAll('button')).find((b) => b.textContent?.trim() === 'Apply');
+            applyButton?.click();
+            await flushUpdates();
+            expect(findOptions.getValue().filter?.role).toBeUndefined();
+            expect(onClose).toHaveBeenCalled();
+        });
+    });
+    it('should clear filter when Clear button is clicked', async () => {
+        const findOptions = createFindOptions({ filter: { role: { $in: ['admin', 'user'] } } });
+        const { injector, onClose } = await renderEnumFilter(findOptions);
+        await usingAsync(injector, async () => {
+            const clearButton = Array.from(document.querySelectorAll('button')).find((b) => b.textContent?.trim() === 'Clear');
+            clearButton?.click();
+            await flushUpdates();
+            expect(findOptions.getValue().filter?.role).toBeUndefined();
+            expect(onClose).toHaveBeenCalled();
+        });
+    });
+    it('should preserve filters on other fields', async () => {
+        const findOptions = createFindOptions({ filter: { role: { $in: ['admin'] }, name: { $regex: 'keep' } } });
+        const { injector } = await renderEnumFilter(findOptions);
+        await usingAsync(injector, async () => {
+            const clearButton = Array.from(document.querySelectorAll('button')).find((b) => b.textContent?.trim() === 'Clear');
+            clearButton?.click();
+            await flushUpdates();
+            const updatedFilter = findOptions.getValue().filter;
+            expect(updatedFilter?.role).toBeUndefined();
+            expect(updatedFilter?.name).toEqual({ $regex: 'keep' });
+        });
+    });
+    it('should reset skip to 0 when applying filter', async () => {
+        const findOptions = createFindOptions({ skip: 20 });
+        const { injector } = await renderEnumFilter(findOptions);
+        await usingAsync(injector, async () => {
+            const checkboxes = document.querySelectorAll('shade-checkbox input[type="checkbox"]');
+            const checkbox = checkboxes[0];
+            checkbox.checked = true;
+            checkbox.dispatchEvent(new Event('change', { bubbles: true }));
+            const applyButton = Array.from(document.querySelectorAll('button')).find((b) => b.textContent?.trim() === 'Apply');
+            applyButton?.click();
+            await flushUpdates();
+            expect(findOptions.getValue().skip).toBe(0);
+        });
+    });
+    it('should pre-check existing $in filter values', async () => {
+        const findOptions = createFindOptions({ filter: { role: { $in: ['admin', 'guest'] } } });
+        await usingAsync((await renderEnumFilter(findOptions)).injector, async () => {
+            const checkboxes = document.querySelectorAll('shade-checkbox input[type="checkbox"]');
+            expect(checkboxes[0].checked).toBe(true);
+            expect(checkboxes[1].checked).toBe(false);
+            expect(checkboxes[2].checked).toBe(true);
+        });
+    });
+});
+//# sourceMappingURL=enum-filter.spec.js.map

package/esm/components/data-grid/filters/enum-filter.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"enum-filter.spec.js","sourceRoot":"","sources":["../../../../src/components/data-grid/filters/enum-filter.spec.tsx"],"names":[],"mappings":"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"}

package/esm/components/data-grid/filters/filter-dropdown.d.ts

@@ -0,0 +1,6 @@
+import type { ChildrenList } from '@furystack/shades';
+export type FilterDropdownProps = {
+    onClose: () => void;
+};
+export declare const FilterDropdown: (props: FilterDropdownProps, children: ChildrenList) => JSX.Element;
+//# sourceMappingURL=filter-dropdown.d.ts.map

package/esm/components/data-grid/filters/filter-dropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/data-grid/filters/filter-dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAKrD,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,CAAC,KAAK,EAAE,mBAAmB,EAAE,QAAQ,EAAE,YAAY,KAAK,GAAG,CAAC,OAkDvF,CAAA"}

package/esm/components/data-grid/filters/filter-dropdown.js

@@ -0,0 +1,41 @@
+import { createComponent, Shade } from '@furystack/shades';
+import { ClickAwayService } from '../../../services/click-away-service.js';
+import { buildTransition, cssVariableTheme } from '../../../services/css-variable-theme.js';
+export const FilterDropdown = Shade({
+    shadowDomName: 'data-grid-filter-dropdown',
+    css: {
+        display: 'block',
+        position: 'absolute',
+        top: '100%',
+        left: '0',
+        zIndex: '10',
+        '& .filter-dropdown-panel': {
+            background: cssVariableTheme.background.paper,
+            borderRadius: cssVariableTheme.shape.borderRadius.md,
+            boxShadow: cssVariableTheme.shadows.lg,
+            border: `1px solid ${cssVariableTheme.divider}`,
+            padding: cssVariableTheme.spacing.md,
+            opacity: '0',
+            transform: 'scale(0.95) translateY(-4px)',
+            transition: buildTransition(['opacity', cssVariableTheme.transitions.duration.fast, 'ease-out'], ['transform', cssVariableTheme.transitions.duration.fast, 'ease-out']),
+        },
+        '& .filter-dropdown-panel.visible': {
+            opacity: '1',
+            transform: 'scale(1) translateY(0)',
+        },
+    },
+    render: ({ props, children, useDisposable, useRef }) => {
+        const panelRef = useRef('panel');
+        useDisposable('clickAway', () => new ClickAwayService(panelRef, () => {
+            props.onClose();
+        }));
+        useDisposable('animateIn', () => {
+            const id = requestAnimationFrame(() => {
+                panelRef.current?.classList.add('visible');
+            });
+            return { [Symbol.dispose]: () => cancelAnimationFrame(id) };
+        });
+        return (createComponent("div", { ref: panelRef, className: "filter-dropdown-panel", onclick: (ev) => ev.stopPropagation() }, children));
+    },
+});
+//# sourceMappingURL=filter-dropdown.js.map

package/esm/components/data-grid/filters/filter-dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-dropdown.js","sourceRoot":"","sources":["../../../../src/components/data-grid/filters/filter-dropdown.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAA;AAC1E,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAA;AAM3F,MAAM,CAAC,MAAM,cAAc,GAAwE,KAAK,CAAC;IACvG,aAAa,EAAE,2BAA2B;IAC1C,GAAG,EAAE;QACH,OAAO,EAAE,OAAO;QAChB,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,MAAM;QACX,IAAI,EAAE,GAAG;QACT,MAAM,EAAE,IAAI;QACZ,0BAA0B,EAAE;YAC1B,UAAU,EAAE,gBAAgB,CAAC,UAAU,CAAC,KAAK;YAC7C,YAAY,EAAE,gBAAgB,CAAC,KAAK,CAAC,YAAY,CAAC,EAAE;YACpD,SAAS,EAAE,gBAAgB,CAAC,OAAO,CAAC,EAAE;YACtC,MAAM,EAAE,aAAa,gBAAgB,CAAC,OAAO,EAAE;YAC/C,OAAO,EAAE,gBAAgB,CAAC,OAAO,CAAC,EAAE;YACpC,OAAO,EAAE,GAAG;YACZ,SAAS,EAAE,8BAA8B;YACzC,UAAU,EAAE,eAAe,CACzB,CAAC,SAAS,EAAE,gBAAgB,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,EAAE,UAAU,CAAC,EACnE,CAAC,WAAW,EAAE,gBAAgB,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,EAAE,UAAU,CAAC,CACtE;SACF;QACD,kCAAkC,EAAE;YAClC,OAAO,EAAE,GAAG;YACZ,SAAS,EAAE,wBAAwB;SACpC;KACF;IACD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,EAAE,EAAE,EAAE;QACrD,MAAM,QAAQ,GAAG,MAAM,CAAiB,OAAO,CAAC,CAAA;QAEhD,aAAa,CACX,WAAW,EACX,GAAG,EAAE,CACH,IAAI,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;YAClC,KAAK,CAAC,OAAO,EAAE,CAAA;QACjB,CAAC,CAAC,CACL,CAAA;QAED,aAAa,CAAC,WAAW,EAAE,GAAG,EAAE;YAC9B,MAAM,EAAE,GAAG,qBAAqB,CAAC,GAAG,EAAE;gBACpC,QAAQ,CAAC,OAAO,EAAE,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA;YAC5C,CAAC,CAAC,CAAA;YACF,OAAO,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,GAAG,EAAE,CAAC,oBAAoB,CAAC,EAAE,CAAC,EAAE,CAAA;QAC7D,CAAC,CAAC,CAAA;QAEF,OAAO,CACL,yBAAK,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAC,uBAAuB,EAAC,OAAO,EAAE,CAAC,EAAc,EAAE,EAAE,CAAC,EAAE,CAAC,eAAe,EAAE,IACpG,QAAQ,CACL,CACP,CAAA;IACH,CAAC;CACF,CAAC,CAAA"}

package/esm/components/data-grid/filters/filter-dropdown.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=filter-dropdown.spec.d.ts.map

package/esm/components/data-grid/filters/filter-dropdown.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-dropdown.spec.d.ts","sourceRoot":"","sources":["../../../../src/components/data-grid/filters/filter-dropdown.spec.tsx"],"names":[],"mappings":""}

package/esm/components/data-grid/filters/filter-dropdown.spec.js

@@ -0,0 +1,69 @@
+import { Injector } from '@furystack/inject';
+import { createComponent, flushUpdates, initializeShadeRoot } from '@furystack/shades';
+import { usingAsync } from '@furystack/utils';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { FilterDropdown } from './filter-dropdown.js';
+describe('FilterDropdown', () => {
+    beforeEach(() => {
+        document.body.innerHTML = '<div id="root"></div>';
+    });
+    afterEach(() => {
+        document.body.innerHTML = '';
+    });
+    it('should render children inside panel', async () => {
+        const onClose = vi.fn();
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: (createComponent(FilterDropdown, { onClose: onClose },
+                    createComponent("span", { className: "test-child" }, "Hello"))),
+            });
+            await flushUpdates();
+            const dropdown = document.querySelector('data-grid-filter-dropdown');
+            expect(dropdown).not.toBeNull();
+            const panel = dropdown?.querySelector('.filter-dropdown-panel');
+            expect(panel).not.toBeNull();
+            const child = panel?.querySelector('.test-child');
+            expect(child).not.toBeNull();
+            expect(child?.textContent).toBe('Hello');
+        });
+    });
+    it('should add visible class after animation frame', async () => {
+        const onClose = vi.fn();
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: (createComponent(FilterDropdown, { onClose: onClose },
+                    createComponent("span", null, "Content"))),
+            });
+            await flushUpdates();
+            await new Promise((resolve) => requestAnimationFrame(() => resolve()));
+            const panel = document.querySelector('.filter-dropdown-panel');
+            expect(panel?.classList.contains('visible')).toBe(true);
+        });
+    });
+    it('should stop click propagation on panel', async () => {
+        const onClose = vi.fn();
+        const outerClick = vi.fn();
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: (createComponent("div", { onclick: outerClick },
+                    createComponent(FilterDropdown, { onClose: onClose },
+                        createComponent("span", { className: "inner" }, "Content")))),
+            });
+            await flushUpdates();
+            const panel = document.querySelector('.filter-dropdown-panel');
+            panel?.click();
+            await flushUpdates();
+            expect(outerClick).not.toHaveBeenCalled();
+        });
+    });
+});
+//# sourceMappingURL=filter-dropdown.spec.js.map

package/esm/components/data-grid/filters/filter-dropdown.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-dropdown.spec.js","sourceRoot":"","sources":["../../../../src/components/data-grid/filters/filter-dropdown.spec.tsx"],"names":[],"mappings":"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"}

package/esm/components/data-grid/filters/filter-styles.d.ts

@@ -0,0 +1,24 @@
+export declare const filterBaseCss: {
+    display: "block";
+    '& .filter-row': {
+        display: string;
+        gap: string;
+        alignItems: string;
+        marginBottom: string;
+    };
+    '& .filter-actions': {
+        display: string;
+        justifyContent: string;
+        gap: string;
+    };
+};
+export declare const filterInputCss: {
+    flex: string;
+    padding: string;
+    borderRadius: string;
+    border: string;
+    background: string;
+    color: string;
+    fontSize: string;
+};
+//# sourceMappingURL=filter-styles.d.ts.map

package/esm/components/data-grid/filters/filter-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-styles.d.ts","sourceRoot":"","sources":["../../../../src/components/data-grid/filters/filter-styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa;;;;;;;;;;;;;CAazB,CAAA;AAED,eAAO,MAAM,cAAc;;;;;;;;CAQ1B,CAAA"}

package/esm/components/data-grid/filters/filter-styles.js

@@ -0,0 +1,25 @@
+import { cssVariableTheme } from '../../../services/css-variable-theme.js';
+export const filterBaseCss = {
+    display: 'block',
+    '& .filter-row': {
+        display: 'flex',
+        gap: '6px',
+        alignItems: 'center',
+        marginBottom: '8px',
+    },
+    '& .filter-actions': {
+        display: 'flex',
+        justifyContent: 'flex-end',
+        gap: '4px',
+    },
+};
+export const filterInputCss = {
+    flex: '1',
+    padding: '4px 6px',
+    borderRadius: cssVariableTheme.shape.borderRadius.sm,
+    border: `1px solid ${cssVariableTheme.divider}`,
+    background: cssVariableTheme.background.default,
+    color: cssVariableTheme.text.primary,
+    fontSize: cssVariableTheme.typography.fontSize.xs,
+};
+//# sourceMappingURL=filter-styles.js.map

package/esm/components/data-grid/filters/filter-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-styles.js","sourceRoot":"","sources":["../../../../src/components/data-grid/filters/filter-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAA;AAE1E,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,OAAO,EAAE,OAAgB;IACzB,eAAe,EAAE;QACf,OAAO,EAAE,MAAM;QACf,GAAG,EAAE,KAAK;QACV,UAAU,EAAE,QAAQ;QACpB,YAAY,EAAE,KAAK;KACpB;IACD,mBAAmB,EAAE;QACnB,OAAO,EAAE,MAAM;QACf,cAAc,EAAE,UAAU;QAC1B,GAAG,EAAE,KAAK;KACX;CACF,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,IAAI,EAAE,GAAG;IACT,OAAO,EAAE,SAAS;IAClB,YAAY,EAAE,gBAAgB,CAAC,KAAK,CAAC,YAAY,CAAC,EAAE;IACpD,MAAM,EAAE,aAAa,gBAAgB,CAAC,OAAO,EAAE;IAC/C,UAAU,EAAE,gBAAgB,CAAC,UAAU,CAAC,OAAO;IAC/C,KAAK,EAAE,gBAAgB,CAAC,IAAI,CAAC,OAAO;IACpC,QAAQ,EAAE,gBAAgB,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE;CAClD,CAAA"}

package/esm/components/data-grid/filters/index.d.ts

@@ -0,0 +1,7 @@
+export * from './filter-dropdown.js';
+export * from './string-filter.js';
+export * from './number-filter.js';
+export * from './boolean-filter.js';
+export * from './enum-filter.js';
+export * from './date-filter.js';
+//# sourceMappingURL=index.d.ts.map

package/esm/components/data-grid/filters/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/data-grid/filters/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,kBAAkB,CAAA;AAChC,cAAc,kBAAkB,CAAA"}

package/esm/components/data-grid/filters/index.js

@@ -0,0 +1,7 @@
+export * from './filter-dropdown.js';
+export * from './string-filter.js';
+export * from './number-filter.js';
+export * from './boolean-filter.js';
+export * from './enum-filter.js';
+export * from './date-filter.js';
+//# sourceMappingURL=index.js.map

package/esm/components/data-grid/filters/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/data-grid/filters/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,kBAAkB,CAAA;AAChC,cAAc,kBAAkB,CAAA"}

package/esm/components/data-grid/filters/number-filter.d.ts

@@ -0,0 +1,12 @@
+import type { ObservableValue } from '@furystack/utils';
+import type { FilterableFindOptions } from '../data-grid.js';
+export declare const NumberFilter: (props: {
+    field: string;
+    findOptions: ObservableValue<FilterableFindOptions>;
+    onClose: () => void;
+} & Omit<Partial<HTMLElement>, "style"> & {
+    style?: Partial<CSSStyleDeclaration>;
+} & {
+    ref?: import("@furystack/shades").RefObject<Element>;
+}, children?: import("@furystack/shades").ChildrenList) => JSX.Element;
+//# sourceMappingURL=number-filter.d.ts.map

package/esm/components/data-grid/filters/number-filter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-filter.d.ts","sourceRoot":"","sources":["../../../../src/components/data-grid/filters/number-filter.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AAKvD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAA;AAa5D,eAAO,MAAM,YAAY;WAChB,MAAM;iBACA,eAAe,CAAC,qBAAqB,CAAC;aAC1C,MAAM,IAAI;;;;;sEA4FnB,CAAA"}

package/esm/components/data-grid/filters/number-filter.js

@@ -0,0 +1,65 @@
+import { createComponent, Shade } from '@furystack/shades';
+import { Button } from '../../button.js';
+import { SegmentedControl } from '../../button-group.js';
+import { Icon } from '../../icons/icon.js';
+import { close as closeIcon, search as searchIcon } from '../../icons/icon-definitions.js';
+import { filterBaseCss, filterInputCss } from './filter-styles.js';
+const operatorLabels = {
+    $eq: '=',
+    $gt: '>',
+    $gte: '>=',
+    $lt: '<',
+    $lte: '<=',
+};
+export const NumberFilter = Shade({
+    shadowDomName: 'data-grid-number-filter',
+    css: {
+        ...filterBaseCss,
+        '& input': filterInputCss,
+    },
+    render: ({ props, useObservable, useState }) => {
+        const [findOptions, setFindOptions] = useObservable('findOptions', props.findOptions);
+        const currentFilter = findOptions.filter?.[props.field];
+        const currentOperator = currentFilter
+            ? (Object.keys(currentFilter).find((k) => k in operatorLabels) ?? '$eq')
+            : '$eq';
+        const currentValue = currentFilter?.[currentOperator];
+        const applyFilter = (operator, value) => {
+            const num = parseFloat(value);
+            const filter = { ...findOptions.filter };
+            if (isNaN(num)) {
+                delete filter[props.field];
+            }
+            else {
+                filter[props.field] = { [operator]: num };
+            }
+            setFindOptions({ ...findOptions, filter, skip: 0 });
+            props.onClose();
+        };
+        const clearFilter = () => {
+            const filter = { ...findOptions.filter };
+            delete filter[props.field];
+            setFindOptions({ ...findOptions, filter, skip: 0 });
+            props.onClose();
+        };
+        const [selectedOperator, setSelectedOperator] = useState('selectedOperator', currentOperator);
+        let inputValue = currentValue !== undefined ? currentValue.toString() : '';
+        return (createComponent("form", { onsubmit: (ev) => {
+                ev.preventDefault();
+                applyFilter(selectedOperator, inputValue);
+            } },
+            createComponent("div", { className: "filter-row" },
+                createComponent(SegmentedControl, { size: "small", value: selectedOperator, onValueChange: (v) => setSelectedOperator(v), options: Object.keys(operatorLabels).map((op) => ({
+                        value: op,
+                        label: operatorLabels[op],
+                    })) })),
+            createComponent("div", { className: "filter-row" },
+                createComponent("input", { "data-testid": "number-filter-value", type: "number", step: "any", placeholder: "Value...", value: inputValue, autofocus: true, oninput: (ev) => {
+                        inputValue = ev.target.value;
+                    } })),
+            createComponent("div", { className: "filter-actions" },
+                createComponent(Button, { type: "button", variant: "outlined", size: "small", onclick: clearFilter, startIcon: createComponent(Icon, { icon: closeIcon, size: 14 }) }, "Clear"),
+                createComponent(Button, { type: "submit", variant: "outlined", size: "small", color: "primary", startIcon: createComponent(Icon, { icon: searchIcon, size: 14 }) }, "Apply"))));
+    },
+});
+//# sourceMappingURL=number-filter.js.map

package/esm/components/data-grid/filters/number-filter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-filter.js","sourceRoot":"","sources":["../../../../src/components/data-grid/filters/number-filter.tsx"],"names":[],"mappings":"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"}

package/esm/components/data-grid/filters/number-filter.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=number-filter.spec.d.ts.map

package/esm/components/data-grid/filters/number-filter.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-filter.spec.d.ts","sourceRoot":"","sources":["../../../../src/components/data-grid/filters/number-filter.spec.tsx"],"names":[],"mappings":""}

package/esm/components/data-grid/filters/number-filter.spec.js

@@ -0,0 +1,142 @@
+import { Injector } from '@furystack/inject';
+import { createComponent, flushUpdates, initializeShadeRoot } from '@furystack/shades';
+import { ObservableValue, usingAsync } from '@furystack/utils';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { NumberFilter } from './number-filter.js';
+describe('NumberFilter', () => {
+    beforeEach(() => {
+        document.body.innerHTML = '<div id="root"></div>';
+    });
+    afterEach(() => {
+        document.body.innerHTML = '';
+    });
+    const createFindOptions = (options = {}) => {
+        return new ObservableValue(options);
+    };
+    const renderNumberFilter = async (findOptions, field = 'level', onClose = vi.fn()) => {
+        const injector = new Injector();
+        const rootElement = document.getElementById('root');
+        initializeShadeRoot({
+            injector,
+            rootElement,
+            jsxElement: createComponent(NumberFilter, { field: field, findOptions: findOptions, onClose: onClose }),
+        });
+        await flushUpdates();
+        return { injector, onClose };
+    };
+    it('should render operator segmented control and input', async () => {
+        const findOptions = createFindOptions();
+        await usingAsync((await renderNumberFilter(findOptions)).injector, async () => {
+            const control = document.querySelector('shade-segmented-control');
+            expect(control).not.toBeNull();
+            const input = document.querySelector('[data-testid="number-filter-value"]');
+            expect(input).not.toBeNull();
+        });
+    });
+    it('should apply $eq filter on submit', async () => {
+        const findOptions = createFindOptions();
+        const { injector, onClose } = await renderNumberFilter(findOptions);
+        await usingAsync(injector, async () => {
+            const input = document.querySelector('[data-testid="number-filter-value"]');
+            input.value = '42';
+            input.dispatchEvent(new Event('input', { bubbles: true }));
+            const form = document.querySelector('form');
+            form.dispatchEvent(new Event('submit', { bubbles: true }));
+            await flushUpdates();
+            expect(findOptions.getValue().filter).toEqual({ level: { $eq: 42 } });
+            expect(onClose).toHaveBeenCalled();
+        });
+    });
+    it('should apply $gt operator when selected', async () => {
+        const findOptions = createFindOptions();
+        const { injector, onClose } = await renderNumberFilter(findOptions);
+        await usingAsync(injector, async () => {
+            const gtButton = document.querySelector('shade-segmented-control button[data-value="$gt"]');
+            gtButton?.click();
+            await flushUpdates();
+            const input = document.querySelector('[data-testid="number-filter-value"]');
+            input.value = '10';
+            input.dispatchEvent(new Event('input', { bubbles: true }));
+            const form = document.querySelector('form');
+            form.dispatchEvent(new Event('submit', { bubbles: true }));
+            await flushUpdates();
+            expect(findOptions.getValue().filter).toEqual({ level: { $gt: 10 } });
+            expect(onClose).toHaveBeenCalled();
+        });
+    });
+    it('should apply $lte operator when selected', async () => {
+        const findOptions = createFindOptions();
+        const { injector, onClose } = await renderNumberFilter(findOptions);
+        await usingAsync(injector, async () => {
+            const lteButton = document.querySelector('shade-segmented-control button[data-value="$lte"]');
+            lteButton?.click();
+            await flushUpdates();
+            const input = document.querySelector('[data-testid="number-filter-value"]');
+            input.value = '99.5';
+            input.dispatchEvent(new Event('input', { bubbles: true }));
+            const form = document.querySelector('form');
+            form.dispatchEvent(new Event('submit', { bubbles: true }));
+            await flushUpdates();
+            expect(findOptions.getValue().filter).toEqual({ level: { $lte: 99.5 } });
+            expect(onClose).toHaveBeenCalled();
+        });
+    });
+    it('should clear filter when Clear button is clicked', async () => {
+        const findOptions = createFindOptions({ filter: { level: { $eq: 5 } } });
+        const { injector, onClose } = await renderNumberFilter(findOptions);
+        await usingAsync(injector, async () => {
+            const clearButton = Array.from(document.querySelectorAll('button')).find((b) => b.textContent?.trim() === 'Clear');
+            clearButton?.click();
+            await flushUpdates();
+            expect(findOptions.getValue().filter?.level).toBeUndefined();
+            expect(onClose).toHaveBeenCalled();
+        });
+    });
+    it('should remove filter when submitting NaN value', async () => {
+        const findOptions = createFindOptions({ filter: { level: { $eq: 5 } } });
+        const { injector, onClose } = await renderNumberFilter(findOptions);
+        await usingAsync(injector, async () => {
+            const input = document.querySelector('[data-testid="number-filter-value"]');
+            input.value = '';
+            input.dispatchEvent(new Event('input', { bubbles: true }));
+            const form = document.querySelector('form');
+            form.dispatchEvent(new Event('submit', { bubbles: true }));
+            await flushUpdates();
+            expect(findOptions.getValue().filter?.level).toBeUndefined();
+            expect(onClose).toHaveBeenCalled();
+        });
+    });
+    it('should preserve filters on other fields', async () => {
+        const findOptions = createFindOptions({ filter: { level: { $gt: 10 }, name: { $regex: 'keep' } } });
+        const { injector } = await renderNumberFilter(findOptions);
+        await usingAsync(injector, async () => {
+            const clearButton = Array.from(document.querySelectorAll('button')).find((b) => b.textContent?.trim() === 'Clear');
+            clearButton?.click();
+            await flushUpdates();
+            const updatedFilter = findOptions.getValue().filter;
+            expect(updatedFilter?.level).toBeUndefined();
+            expect(updatedFilter?.name).toEqual({ $regex: 'keep' });
+        });
+    });
+    it('should reset skip to 0 when applying filter', async () => {
+        const findOptions = createFindOptions({ skip: 20 });
+        const { injector } = await renderNumberFilter(findOptions);
+        await usingAsync(injector, async () => {
+            const input = document.querySelector('[data-testid="number-filter-value"]');
+            input.value = '5';
+            input.dispatchEvent(new Event('input', { bubbles: true }));
+            const form = document.querySelector('form');
+            form.dispatchEvent(new Event('submit', { bubbles: true }));
+            await flushUpdates();
+            expect(findOptions.getValue().skip).toBe(0);
+        });
+    });
+    it('should show current filter value in input', async () => {
+        const findOptions = createFindOptions({ filter: { level: { $eq: 25 } } });
+        await usingAsync((await renderNumberFilter(findOptions)).injector, async () => {
+            const input = document.querySelector('[data-testid="number-filter-value"]');
+            expect(input.value).toBe('25');
+        });
+    });
+});
+//# sourceMappingURL=number-filter.spec.js.map