@seekora-ai/ui-sdk-vanilla 1.0.0

package/dist/components/pagination.js

@@ -0,0 +1,364 @@
+/**
+ * Pagination Component
+ *
+ * Displays pagination controls for search results
+ */
+import { log } from '@seekora-ai/ui-sdk-core';
+export class Pagination {
+    constructor(provider, options) {
+        this.unsubscribeStateManager = null;
+        console.log('Pagination: Constructor called', { options });
+        this.provider = provider;
+        const container = typeof options.container === 'string'
+            ? document.querySelector(options.container)
+            : options.container;
+        if (!container) {
+            const error = new Error('Pagination: container element not found');
+            log.error('Pagination: Initialization failed', { error: error.message });
+            throw error;
+        }
+        console.log('Pagination: Container found', { container, containerId: container.id, containerTag: container.tagName });
+        this.container = container;
+        this.currentPage = options.currentPage || 1;
+        this.options = {
+            itemsPerPage: options.itemsPerPage || 10,
+            showFirstLast: options.showFirstLast !== false,
+            showPrevNext: options.showPrevNext !== false,
+            results: options.results,
+            currentPage: options.currentPage || 1,
+            onPageChange: options.onPageChange,
+        };
+        // Attach event delegation listener to the persistent container (not recreated on render)
+        // This ensures clicks work even when buttons are recreated
+        const handleContainerClick = (e) => {
+            const target = e.target;
+            // Debug: log all clicks on container
+            console.log('Pagination: Container clicked', {
+                target: target.tagName,
+                targetClass: target.className,
+                hasDataPage: target.hasAttribute('data-page'),
+                closestButton: target.closest('button[data-page]')
+            });
+            // Ignore clicks on non-interactive elements (like ellipsis spans)
+            if (target.tagName === 'SPAN' || target.tagName === 'DIV') {
+                // Check if it's inside a button
+                const button = target.closest('button[data-page]');
+                if (!button) {
+                    // Click is on ellipsis or other non-button element, ignore it
+                    return;
+                }
+                // If span is inside a button, use the button
+            }
+            // Find the button (could be the target itself or a parent)
+            const button = (target.tagName === 'BUTTON' && target.hasAttribute('data-page'))
+                ? target
+                : target.closest('button[data-page]');
+            if (button) {
+                e.preventDefault();
+                e.stopPropagation();
+                const pageStr = button.getAttribute('data-page');
+                const page = pageStr ? parseInt(pageStr, 10) : 0;
+                console.log('Pagination: Button found', {
+                    page,
+                    currentPage: this.currentPage,
+                    pageStr,
+                    button,
+                    isValid: page > 0 && page !== this.currentPage
+                });
+                if (page > 0) {
+                    // Always update, even if it's the same page (for debugging)
+                    console.log('Pagination: Processing page change', {
+                        page,
+                        currentPage: this.currentPage,
+                        willUpdate: page !== this.currentPage
+                    });
+                    if (page !== this.currentPage) {
+                        // Update state manager (automatically triggers search)
+                        this.provider.stateManager.setPage(page);
+                        // Call callback for backwards compatibility
+                        if (this.options.onPageChange) {
+                            try {
+                                this.options.onPageChange(page);
+                            }
+                            catch (err) {
+                                const error = err instanceof Error ? err : new Error(String(err));
+                                log.error('Pagination: Error in onPageChange callback', {
+                                    page,
+                                    error: error.message,
+                                });
+                            }
+                        }
+                    }
+                    else {
+                        console.log('Pagination: Page is already current, skipping update', { page });
+                    }
+                }
+                else {
+                    console.warn('Pagination: Invalid page number', { page, pageStr, button });
+                }
+            }
+            else {
+                console.log('Pagination: Click not on a button', { target: target.tagName });
+            }
+        };
+        this.container.addEventListener('click', handleContainerClick, { passive: false });
+        console.log('Pagination: Event delegation listener attached to container', { container: this.container });
+        // Subscribe to state manager to get results and current page
+        this.unsubscribeStateManager = this.provider.stateManager.subscribe((state) => {
+            // Update results from state manager
+            if (state.results) {
+                this.options.results = state.results;
+            }
+            // Update current page from state manager
+            if (state.currentPage !== this.currentPage) {
+                this.currentPage = state.currentPage;
+            }
+            // Re-render to sync with state
+            this.render();
+        });
+        this.render();
+    }
+    update(options) {
+        if (options.results !== undefined)
+            this.options.results = options.results;
+        if (options.currentPage !== undefined)
+            this.currentPage = options.currentPage;
+        this.render();
+    }
+    destroy() {
+        if (this.unsubscribeStateManager) {
+            this.unsubscribeStateManager();
+            this.unsubscribeStateManager = null;
+        }
+    }
+    render() {
+        console.log('🔵 Pagination.render() START', {
+            container: this.container,
+            containerId: this.container.id,
+            currentPage: this.currentPage,
+            hasResults: !!this.options.results
+        });
+        this.container.innerHTML = '';
+        const totalPages = this.getTotalPages();
+        console.log('🔵 Pagination: Total pages calculated', { totalPages });
+        if (totalPages <= 1) {
+            console.log('🔵 Pagination: NOT RENDERING - totalPages <= 1', { totalPages });
+            log.verbose('Pagination: Not rendering, totalPages <= 1', { totalPages });
+            return;
+        }
+        console.log('🔵 Pagination: WILL RENDER', {
+            currentPage: this.currentPage,
+            totalPages,
+            hasResults: !!this.options.results
+        });
+        log.verbose('Pagination: Rendering', {
+            currentPage: this.currentPage,
+            totalPages,
+            hasResults: !!this.options.results
+        });
+        const paginationDiv = document.createElement('div');
+        paginationDiv.style.cssText = this.getContainerStyle();
+        paginationDiv.setAttribute('data-pagination-wrapper', 'true');
+        console.log('Pagination: Created paginationDiv', {
+            paginationDiv,
+            style: paginationDiv.style.cssText,
+            container: this.container
+        });
+        // Event delegation listener is attached to this.container in constructor
+        // No need to attach it here since paginationDiv is recreated on each render
+        // Always show First button if not on first page
+        if (this.options.showFirstLast && this.currentPage > 1) {
+            const firstBtn = this.createButton('First', 1);
+            paginationDiv.appendChild(firstBtn);
+        }
+        // Always show Previous button if not on first page
+        if (this.options.showPrevNext && this.currentPage > 1) {
+            const prevBtn = this.createButton('Previous', this.currentPage - 1);
+            paginationDiv.appendChild(prevBtn);
+        }
+        // Calculate page range to display (always show consistent number of pages)
+        const maxPagesToShow = 5; // Always show 5 page numbers
+        let startPage;
+        let endPage;
+        if (totalPages <= maxPagesToShow) {
+            // If total pages is less than max, show all pages
+            startPage = 1;
+            endPage = totalPages;
+        }
+        else {
+            // Calculate start and end to always show maxPagesToShow pages
+            // Try to center current page, but adjust if near boundaries
+            const halfRange = Math.floor(maxPagesToShow / 2);
+            if (this.currentPage <= halfRange + 1) {
+                // Near the beginning: show pages 1 to maxPagesToShow
+                startPage = 1;
+                endPage = maxPagesToShow;
+            }
+            else if (this.currentPage >= totalPages - halfRange) {
+                // Near the end: show last maxPagesToShow pages
+                startPage = totalPages - maxPagesToShow + 1;
+                endPage = totalPages;
+            }
+            else {
+                // In the middle: center around current page
+                startPage = this.currentPage - halfRange;
+                endPage = this.currentPage + halfRange;
+            }
+        }
+        // Show ellipsis if needed
+        if (startPage > 1) {
+            const ellipsis = document.createElement('span');
+            ellipsis.textContent = '...';
+            ellipsis.style.cssText = `
+        padding: ${this.theme.spacing.small} ${this.theme.spacing.medium};
+        color: ${this.theme.colors.textSecondary || this.theme.colors.text};
+      `;
+            paginationDiv.appendChild(ellipsis);
+        }
+        // Render page number buttons
+        console.log('🔵 Pagination: Rendering page buttons', { startPage, endPage, currentPage: this.currentPage });
+        for (let i = startPage; i <= endPage; i++) {
+            console.log('🔵 Pagination: Creating page button', { i, isActive: i === this.currentPage });
+            const pageBtn = this.createButton(String(i), i, i === this.currentPage);
+            paginationDiv.appendChild(pageBtn);
+            console.log('🔵 Pagination: Page button appended', { page: i, button: pageBtn });
+        }
+        // Show ellipsis if needed
+        if (endPage < totalPages) {
+            const ellipsis = document.createElement('span');
+            ellipsis.textContent = '...';
+            ellipsis.style.cssText = `
+        padding: ${this.theme.spacing.small} ${this.theme.spacing.medium};
+        color: ${this.theme.colors.textSecondary || this.theme.colors.text};
+      `;
+            paginationDiv.appendChild(ellipsis);
+        }
+        // Always show Next button if not on last page
+        if (this.options.showPrevNext && this.currentPage < totalPages) {
+            const nextBtn = this.createButton('Next', this.currentPage + 1);
+            paginationDiv.appendChild(nextBtn);
+        }
+        // Always show Last button if not on last page
+        if (this.options.showFirstLast && this.currentPage < totalPages) {
+            const lastBtn = this.createButton('Last', totalPages);
+            paginationDiv.appendChild(lastBtn);
+        }
+        console.log('🔵 Pagination: About to append paginationDiv to container', {
+            paginationDiv,
+            container: this.container,
+            containerChildrenBefore: this.container.children.length,
+            paginationDivChildren: paginationDiv.children.length
+        });
+        this.container.appendChild(paginationDiv);
+        console.log('🔵 Pagination: paginationDiv appended to container', {
+            containerChildrenAfter: this.container.children.length,
+            containerHTML: this.container.innerHTML.substring(0, 300)
+        });
+        // Verify buttons are in DOM
+        const buttons = this.container.querySelectorAll('button[data-page]');
+        console.log('🔵 Pagination: Render complete - buttons in DOM', {
+            buttonCount: buttons.length,
+            buttons: Array.from(buttons).map(b => {
+                const btn = b;
+                return {
+                    text: btn.textContent,
+                    page: btn.getAttribute('data-page'),
+                    element: btn,
+                    parent: btn.parentElement?.tagName
+                };
+            })
+        });
+        // Test click handler directly on first button
+        console.log('🔵 Pagination: Testing direct click handler');
+        const testButton = this.container.querySelector('button[data-page]');
+        if (testButton) {
+            console.log('🔵 Pagination: Found test button, adding DIRECT listener', {
+                testButton,
+                page: testButton.getAttribute('data-page'),
+                text: testButton.textContent
+            });
+            testButton.addEventListener('click', (e) => {
+                console.log('🟢🟢🟢 DIRECT BUTTON CLICK HANDLER FIRED! 🟢🟢🟢', {
+                    e,
+                    button: testButton,
+                    page: testButton.getAttribute('data-page'),
+                    target: e.target
+                });
+                e.preventDefault();
+                e.stopPropagation();
+            }, { passive: false, capture: true });
+            console.log('🔵 Pagination: Direct listener attached to test button');
+        }
+        else {
+            console.warn('🔴 Pagination: NO TEST BUTTON FOUND for direct listener!');
+        }
+        console.log('🔵 Pagination.render() END');
+    }
+    getTotalPages() {
+        if (!this.options.results)
+            return 0;
+        // Check for totalResults (SDK's SearchResponse format)
+        let total;
+        if (typeof this.options.results.totalResults === 'number') {
+            total = this.options.results.totalResults;
+        }
+        else if (typeof this.options.results.total === 'number') {
+            // Fallback to total (alternative format)
+            total = this.options.results.total;
+        }
+        else {
+            // Last resort: use results array length (but log warning)
+            const resultsLength = this.options.results.results?.length || 0;
+            log.warn('Pagination: Using results array length as total (totalResults not found)', {
+                resultsLength,
+                responseKeys: Object.keys(this.options.results),
+            });
+            total = resultsLength;
+        }
+        const totalPages = Math.ceil(total / this.options.itemsPerPage);
+        log.verbose('Pagination: Calculating total pages', {
+            total,
+            itemsPerPage: this.options.itemsPerPage,
+            totalPages,
+            currentPage: this.currentPage,
+        });
+        return totalPages;
+    }
+    createButton(text, page, isActive = false) {
+        const button = document.createElement('button');
+        button.textContent = text;
+        button.style.cssText = this.getButtonStyle(isActive);
+        button.type = 'button'; // Prevent form submission
+        button.setAttribute('data-page', String(page)); // For event delegation
+        // No need to attach individual listeners - we use event delegation on the container
+        // This ensures clicks always work even when buttons are recreated
+        return button;
+    }
+    get theme() {
+        return this.provider.theme;
+    }
+    getContainerStyle() {
+        return `
+      display: flex;
+      align-items: center;
+      gap: ${this.theme.spacing.small};
+      flex-wrap: wrap;
+    `;
+    }
+    getButtonStyle(isActive) {
+        const borderRadius = typeof this.theme.borderRadius === 'string'
+            ? this.theme.borderRadius
+            : this.theme.borderRadius.medium;
+        const transition = this.theme.transitions?.fast || '150ms ease-in-out';
+        return `
+      padding: ${this.theme.spacing.small} ${this.theme.spacing.medium};
+      font-size: ${this.theme.typography.fontSize.medium};
+      border: 1px solid ${this.theme.colors.border};
+      border-radius: ${borderRadius};
+      background-color: ${isActive ? this.theme.colors.primary : this.theme.colors.background};
+      color: ${isActive ? '#ffffff' : this.theme.colors.text};
+      cursor: pointer;
+      transition: ${transition};
+    `;
+    }
+}

package/dist/components/query-suggestions.d.ts

@@ -0,0 +1,39 @@
+/**
+ * QuerySuggestions Component
+ *
+ * Standalone component for displaying query suggestions
+ */
+import { SearchProvider } from './search-provider';
+export interface QuerySuggestionsOptions {
+    container: HTMLElement | string;
+    query?: string;
+    maxSuggestions?: number;
+    debounceMs?: number;
+    minQueryLength?: number;
+    showTitle?: boolean;
+    title?: string;
+    onSuggestionClick?: (suggestion: string) => void;
+}
+export declare class QuerySuggestions {
+    private container;
+    private provider;
+    private options;
+    private suggestions;
+    private loading;
+    private error;
+    private selectedIndex;
+    private debounceTimer;
+    constructor(provider: SearchProvider, options: QuerySuggestionsOptions);
+    update(options: Partial<Pick<QuerySuggestionsOptions, 'query'>>): void;
+    private loadSuggestions;
+    private render;
+    private get theme();
+    private getTitleStyle;
+    private getLoadingStyle;
+    private getEmptyStyle;
+    private getListStyle;
+    private getSuggestionStyle;
+    private getCountStyle;
+    destroy(): void;
+}
+//# sourceMappingURL=query-suggestions.d.ts.map

package/dist/components/query-suggestions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"query-suggestions.d.ts","sourceRoot":"","sources":["../../src/components/query-suggestions.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEnD,MAAM,WAAW,uBAAuB;IACtC,SAAS,EAAE,WAAW,GAAG,MAAM,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CAClD;AAED,qBAAa,gBAAgB;IAC3B,OAAO,CAAC,SAAS,CAAc;IAC/B,OAAO,CAAC,QAAQ,CAAiB;IACjC,OAAO,CAAC,OAAO,CAAsJ;IACrK,OAAO,CAAC,WAAW,CAAwB;IAC3C,OAAO,CAAC,OAAO,CAAkB;IACjC,OAAO,CAAC,KAAK,CAAsB;IACnC,OAAO,CAAC,aAAa,CAAc;IACnC,OAAO,CAAC,aAAa,CAA8C;gBAEvD,QAAQ,EAAE,cAAc,EAAE,OAAO,EAAE,uBAAuB;IA4BtE,MAAM,CAAC,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,uBAAuB,EAAE,OAAO,CAAC,CAAC,GAAG,IAAI;YAiBxD,eAAe;IAyC7B,OAAO,CAAC,MAAM;IAkFd,OAAO,KAAK,KAAK,GAEhB;IAED,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,kBAAkB;IAc1B,OAAO,CAAC,aAAa;IAOrB,OAAO,IAAI,IAAI;CAMhB"}

package/dist/components/query-suggestions.js

@@ -0,0 +1,217 @@
+/**
+ * QuerySuggestions Component
+ *
+ * Standalone component for displaying query suggestions
+ */
+import { log } from '@seekora-ai/ui-sdk-core';
+export class QuerySuggestions {
+    constructor(provider, options) {
+        this.suggestions = [];
+        this.loading = false;
+        this.error = null;
+        this.selectedIndex = -1;
+        this.debounceTimer = null;
+        this.provider = provider;
+        const container = typeof options.container === 'string'
+            ? document.querySelector(options.container)
+            : options.container;
+        if (!container) {
+            throw new Error('QuerySuggestions: container element not found');
+        }
+        this.container = container;
+        this.options = {
+            query: options.query || '',
+            maxSuggestions: options.maxSuggestions || 10,
+            debounceMs: options.debounceMs || 300,
+            minQueryLength: options.minQueryLength || 2,
+            showTitle: options.showTitle || false,
+            title: options.title || 'Suggestions',
+            onSuggestionClick: options.onSuggestionClick,
+        };
+        const q = this.options.query ?? '';
+        if (q.length >= this.options.minQueryLength) {
+            this.loadSuggestions(q);
+        }
+    }
+    update(options) {
+        if (options.query !== undefined) {
+            this.options.query = options.query;
+            if (this.debounceTimer) {
+                clearTimeout(this.debounceTimer);
+            }
+            this.debounceTimer = setTimeout(() => {
+                if (this.options.query && this.options.query.length >= this.options.minQueryLength) {
+                    this.loadSuggestions(this.options.query);
+                }
+                else {
+                    this.suggestions = [];
+                    this.render();
+                }
+            }, this.options.debounceMs);
+        }
+    }
+    async loadSuggestions(query) {
+        this.loading = true;
+        this.error = null;
+        this.render();
+        try {
+            const response = await this.provider.client.getSuggestions(query, this.options.maxSuggestions);
+            const rawSuggestions = Array.isArray(response) ? response : [];
+            this.suggestions = rawSuggestions.map((suggestion) => {
+                const suggestionQuery = suggestion.query ?? suggestion.text ?? suggestion;
+                const count = suggestion.popularity !== undefined
+                    ? suggestion.popularity
+                    : (suggestion.count !== undefined ? suggestion.count : undefined);
+                return {
+                    query: typeof suggestionQuery === 'string' ? suggestionQuery : String(suggestionQuery),
+                    count: typeof count === 'number' ? count : undefined,
+                    metadata: suggestion,
+                };
+            }).slice(0, this.options.maxSuggestions);
+            this.loading = false;
+            this.render();
+            log.verbose('QuerySuggestions: Suggestions loaded', {
+                query: this.options.query,
+                count: this.suggestions.length,
+            });
+        }
+        catch (err) {
+            const error = err instanceof Error ? err : new Error(String(err));
+            log.error('QuerySuggestions: Failed to load suggestions', {
+                query: this.options.query,
+                error: error.message,
+                stack: error.stack,
+            });
+            this.error = error;
+            this.loading = false;
+            this.render();
+        }
+    }
+    render() {
+        this.container.innerHTML = '';
+        if (!this.options.query || this.options.query.length < this.options.minQueryLength) {
+            return;
+        }
+        if (this.loading) {
+            const loadingDiv = document.createElement('div');
+            loadingDiv.style.cssText = this.getLoadingStyle();
+            loadingDiv.textContent = 'Loading suggestions...';
+            this.container.appendChild(loadingDiv);
+            return;
+        }
+        if (this.error || this.suggestions.length === 0) {
+            const emptyDiv = document.createElement('div');
+            emptyDiv.style.cssText = this.getEmptyStyle();
+            emptyDiv.textContent = 'No suggestions available';
+            this.container.appendChild(emptyDiv);
+            return;
+        }
+        if (this.options.showTitle) {
+            const titleDiv = document.createElement('div');
+            titleDiv.style.cssText = this.getTitleStyle();
+            titleDiv.textContent = this.options.title;
+            this.container.appendChild(titleDiv);
+        }
+        const listDiv = document.createElement('div');
+        listDiv.style.cssText = this.getListStyle();
+        this.suggestions.forEach((suggestion, index) => {
+            const item = document.createElement('div');
+            item.style.cssText = this.getSuggestionStyle(index === this.selectedIndex);
+            // Use a named function to ensure the listener is properly attached
+            const handleClick = (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                if (this.options.onSuggestionClick) {
+                    log.verbose('QuerySuggestions: Suggestion clicked', { suggestion: suggestion.query });
+                    try {
+                        this.options.onSuggestionClick(suggestion.query);
+                    }
+                    catch (err) {
+                        const error = err instanceof Error ? err : new Error(String(err));
+                        log.error('QuerySuggestions: Error in onSuggestionClick callback', {
+                            suggestion: suggestion.query,
+                            error: error.message,
+                        });
+                    }
+                }
+            };
+            item.addEventListener('click', handleClick, { passive: false });
+            item.addEventListener('mouseenter', () => {
+                this.selectedIndex = index;
+                this.render();
+            });
+            item.addEventListener('mouseleave', () => {
+                this.selectedIndex = -1;
+                this.render();
+            });
+            const querySpan = document.createElement('span');
+            querySpan.textContent = suggestion.query;
+            item.appendChild(querySpan);
+            if (suggestion.count !== undefined) {
+                const countSpan = document.createElement('span');
+                countSpan.textContent = ` (${suggestion.count})`;
+                countSpan.style.cssText = this.getCountStyle();
+                item.appendChild(countSpan);
+            }
+            listDiv.appendChild(item);
+        });
+        this.container.appendChild(listDiv);
+    }
+    get theme() {
+        return this.provider.theme;
+    }
+    getTitleStyle() {
+        return `
+      font-size: ${this.theme.typography.fontSize.large};
+      font-weight: bold;
+      margin-bottom: ${this.theme.spacing.medium};
+      color: ${this.theme.colors.text};
+    `;
+    }
+    getLoadingStyle() {
+        return `
+      padding: ${this.theme.spacing.medium};
+      text-align: center;
+      color: ${this.theme.colors.text};
+    `;
+    }
+    getEmptyStyle() {
+        return `
+      padding: ${this.theme.spacing.medium};
+      text-align: center;
+      color: ${this.theme.colors.text};
+      opacity: 0.6;
+    `;
+    }
+    getListStyle() {
+        return `
+      display: flex;
+      flex-direction: column;
+    `;
+    }
+    getSuggestionStyle(isSelected) {
+        const borderRadius = typeof this.theme.borderRadius === 'string'
+            ? this.theme.borderRadius
+            : this.theme.borderRadius.medium;
+        return `
+      padding: ${this.theme.spacing.medium};
+      cursor: pointer;
+      border-radius: ${borderRadius};
+      transition: ${this.theme.transitions?.fast || '150ms ease-in-out'};
+      background-color: ${isSelected ? this.theme.colors.hover : 'transparent'};
+      margin-bottom: ${this.theme.spacing.small};
+    `;
+    }
+    getCountStyle() {
+        return `
+      opacity: 0.6;
+      margin-left: ${this.theme.spacing.small};
+    `;
+    }
+    destroy() {
+        if (this.debounceTimer) {
+            clearTimeout(this.debounceTimer);
+        }
+        this.container.innerHTML = '';
+    }
+}

package/dist/components/range-input.d.ts

@@ -0,0 +1,42 @@
+/**
+ * RangeInput Component
+ *
+ * Displays a range input for filtering numeric values (e.g., price range)
+ */
+import { SearchProvider } from './search-provider';
+export interface RangeInputOptions {
+    container: HTMLElement | string;
+    field: string;
+    label?: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    currentMin?: number;
+    currentMax?: number;
+    showApplyButton?: boolean;
+    placeholder?: {
+        min?: string;
+        max?: string;
+    };
+    onRangeChange?: (min: number | undefined, max: number | undefined) => void;
+}
+export declare class RangeInput {
+    private container;
+    private provider;
+    private options;
+    private internalMin?;
+    private internalMax?;
+    constructor(provider: SearchProvider, options: RangeInputOptions);
+    update(options: Partial<Pick<RangeInputOptions, 'currentMin' | 'currentMax'>>): void;
+    private render;
+    private hasValue;
+    private updateStateManager;
+    private get theme();
+    private getLabelStyle;
+    private getInputGroupStyle;
+    private getInputStyle;
+    private getSeparatorStyle;
+    private getApplyButtonStyle;
+    private getResetButtonStyle;
+}
+//# sourceMappingURL=range-input.d.ts.map

package/dist/components/range-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"range-input.d.ts","sourceRoot":"","sources":["../../src/components/range-input.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEnD,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,WAAW,GAAG,MAAM,CAAC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE;QACZ,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,GAAG,CAAC,EAAE,MAAM,CAAC;KACd,CAAC;IACF,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,EAAE,GAAG,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;CAC5E;AAED,qBAAa,UAAU;IACrB,OAAO,CAAC,SAAS,CAAc;IAC/B,OAAO,CAAC,QAAQ,CAAiB;IACjC,OAAO,CAAC,OAAO,CAA0K;IACzL,OAAO,CAAC,WAAW,CAAC,CAAS;IAC7B,OAAO,CAAC,WAAW,CAAC,CAAS;gBAEjB,QAAQ,EAAE,cAAc,EAAE,OAAO,EAAE,iBAAiB;IAgChE,MAAM,CAAC,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,iBAAiB,EAAE,YAAY,GAAG,YAAY,CAAC,CAAC,GAAG,IAAI;IAYpF,OAAO,CAAC,MAAM;IAoJd,OAAO,CAAC,QAAQ;IAIhB,OAAO,CAAC,kBAAkB;IAuB1B,OAAO,KAAK,KAAK,GAEhB;IAED,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,kBAAkB;IAS1B,OAAO,CAAC,aAAa;IAiBrB,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,mBAAmB;IAgB3B,OAAO,CAAC,mBAAmB;CAe5B"}