@seekora-ai/ui-sdk-vanilla 1.0.0

package/dist/components/clear-refinements.d.ts

@@ -0,0 +1,39 @@
+/**
+ * ClearRefinements Component
+ *
+ * A standalone button to clear all active refinements/filters
+ * Integrates with SearchStateManager for automatic state sync
+ */
+import { SearchProvider } from './search-provider';
+export interface ClearRefinementsOptions {
+    container: HTMLElement | string;
+    /** Whether clicking should also clear the search query */
+    clearsQuery?: boolean;
+    /** Button text when there are refinements to clear */
+    resetLabel?: string;
+    /** Button text shown when there are no refinements */
+    disabledLabel?: string;
+    /** Fields to include (if not specified, all fields are included) */
+    includedFields?: string[];
+    /** Fields to exclude from clearing */
+    excludedFields?: string[];
+    /** Callback when refinements are cleared */
+    onClear?: () => void;
+    /** Whether to hide when there are no refinements */
+    hideWhenEmpty?: boolean;
+}
+export declare class ClearRefinements {
+    private container;
+    private provider;
+    private options;
+    private unsubscribeStateManager;
+    constructor(provider: SearchProvider, options: ClearRefinementsOptions);
+    destroy(): void;
+    private getRelevantRefinements;
+    private canClear;
+    private handleClick;
+    private render;
+    private get theme();
+    private getButtonStyle;
+}
+//# sourceMappingURL=clear-refinements.d.ts.map

package/dist/components/clear-refinements.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"clear-refinements.d.ts","sourceRoot":"","sources":["../../src/components/clear-refinements.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEnD,MAAM,WAAW,uBAAuB;IACtC,SAAS,EAAE,WAAW,GAAG,MAAM,CAAC;IAChC,0DAA0D;IAC1D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,sDAAsD;IACtD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,sDAAsD;IACtD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oEAAoE;IACpE,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,sCAAsC;IACtC,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,oDAAoD;IACpD,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,qBAAa,gBAAgB;IAC3B,OAAO,CAAC,SAAS,CAAc;IAC/B,OAAO,CAAC,QAAQ,CAAiB;IACjC,OAAO,CAAC,OAAO,CAQb;IACF,OAAO,CAAC,uBAAuB,CAA6B;gBAEhD,QAAQ,EAAE,cAAc,EAAE,OAAO,EAAE,uBAAuB;IAgCtE,OAAO,IAAI,IAAI;IAQf,OAAO,CAAC,sBAAsB;IAS9B,OAAO,CAAC,QAAQ;IAMhB,OAAO,CAAC,WAAW;IAyCnB,OAAO,CAAC,MAAM;IAqBd,OAAO,KAAK,KAAK,GAEhB;IAED,OAAO,CAAC,cAAc;CAkBvB"}

package/dist/components/clear-refinements.js

@@ -0,0 +1,133 @@
+/**
+ * ClearRefinements Component
+ *
+ * A standalone button to clear all active refinements/filters
+ * Integrates with SearchStateManager for automatic state sync
+ */
+import { log } from '@seekora-ai/ui-sdk-core';
+export class ClearRefinements {
+    constructor(provider, options) {
+        this.unsubscribeStateManager = null;
+        this.provider = provider;
+        const container = typeof options.container === 'string'
+            ? document.querySelector(options.container)
+            : options.container;
+        if (!container) {
+            const error = new Error('ClearRefinements: container element not found');
+            log.error('ClearRefinements: Initialization failed', { error: error.message });
+            throw error;
+        }
+        this.container = container;
+        this.options = {
+            clearsQuery: options.clearsQuery ?? false,
+            resetLabel: options.resetLabel ?? 'Clear all filters',
+            disabledLabel: options.disabledLabel ?? 'No filters applied',
+            includedFields: options.includedFields,
+            excludedFields: options.excludedFields ?? [],
+            onClear: options.onClear,
+            hideWhenEmpty: options.hideWhenEmpty ?? false,
+        };
+        // Subscribe to state manager to update on refinement changes
+        this.unsubscribeStateManager = this.provider.stateManager.subscribe(() => {
+            this.render();
+        });
+        this.render();
+    }
+    destroy() {
+        if (this.unsubscribeStateManager) {
+            this.unsubscribeStateManager();
+            this.unsubscribeStateManager = null;
+        }
+        this.container.innerHTML = '';
+    }
+    getRelevantRefinements() {
+        const refinements = this.provider.stateManager.getRefinements();
+        return refinements.filter(r => {
+            if (this.options.excludedFields.includes(r.field))
+                return false;
+            if (this.options.includedFields && !this.options.includedFields.includes(r.field))
+                return false;
+            return true;
+        });
+    }
+    canClear() {
+        const relevantRefinements = this.getRelevantRefinements();
+        const query = this.provider.stateManager.getQuery();
+        return relevantRefinements.length > 0 || (this.options.clearsQuery && query.length > 0);
+    }
+    handleClick() {
+        const canClear = this.canClear();
+        if (!canClear)
+            return;
+        const relevantRefinements = this.getRelevantRefinements();
+        log.verbose('ClearRefinements: Clearing refinements', {
+            count: relevantRefinements.length,
+            clearsQuery: this.options.clearsQuery,
+        });
+        // Clear relevant refinements
+        if (this.options.includedFields || this.options.excludedFields.length > 0) {
+            // Clear only specific refinements
+            relevantRefinements.forEach(r => {
+                this.provider.stateManager.removeRefinement(r.field, r.value, false);
+            });
+        }
+        else {
+            // Clear all refinements
+            this.provider.stateManager.clearRefinements(false);
+        }
+        // Clear query if requested
+        if (this.options.clearsQuery) {
+            this.provider.stateManager.setQuery('', true);
+        }
+        else if (relevantRefinements.length > 0) {
+            // Trigger search after clearing
+            this.provider.stateManager.search();
+        }
+        // Call the callback
+        if (this.options.onClear) {
+            try {
+                this.options.onClear();
+            }
+            catch (err) {
+                const error = err instanceof Error ? err : new Error(String(err));
+                log.error('ClearRefinements: Error in onClear callback', { error: error.message });
+            }
+        }
+    }
+    render() {
+        this.container.innerHTML = '';
+        const canClear = this.canClear();
+        // Hide when empty if requested
+        if (this.options.hideWhenEmpty && !canClear) {
+            return;
+        }
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.textContent = canClear ? this.options.resetLabel : this.options.disabledLabel;
+        button.disabled = !canClear;
+        button.style.cssText = this.getButtonStyle(canClear);
+        button.setAttribute('aria-label', canClear ? this.options.resetLabel : this.options.disabledLabel);
+        button.addEventListener('click', () => this.handleClick());
+        this.container.appendChild(button);
+    }
+    get theme() {
+        return this.provider.theme;
+    }
+    getButtonStyle(canClear) {
+        const borderRadius = typeof this.theme.borderRadius === 'string'
+            ? this.theme.borderRadius
+            : this.theme.borderRadius.medium;
+        return `
+      padding: ${this.theme.spacing.small} ${this.theme.spacing.medium};
+      font-size: ${this.theme.typography.fontSize.medium};
+      font-weight: ${this.theme.typography.fontWeight?.medium || 500};
+      background-color: ${canClear ? this.theme.colors.primary : this.theme.colors.hover};
+      color: ${canClear ? '#ffffff' : this.theme.colors.textSecondary};
+      border: none;
+      border-radius: ${borderRadius};
+      cursor: ${canClear ? 'pointer' : 'not-allowed'};
+      opacity: ${canClear ? '1' : '0.6'};
+      transition: ${this.theme.transitions?.fast || '150ms ease-in-out'};
+    `;
+    }
+}

package/dist/components/current-refinements.d.ts

@@ -0,0 +1,36 @@
+/**
+ * CurrentRefinements Component
+ *
+ * Displays currently active filters/refinements with ability to clear them
+ */
+import { SearchProvider } from './search-provider';
+export interface Refinement {
+    field: string;
+    label?: string;
+    value: string;
+    displayValue?: string;
+}
+export interface CurrentRefinementsOptions {
+    container: HTMLElement | string;
+    refinements?: Refinement[];
+    showClearAll?: boolean;
+    onRefinementClear?: (field: string, value: string) => void;
+    onClearAll?: () => void;
+}
+export declare class CurrentRefinements {
+    private container;
+    private provider;
+    private options;
+    private unsubscribeStateManager;
+    constructor(provider: SearchProvider, options: CurrentRefinementsOptions);
+    update(options: Partial<Pick<CurrentRefinementsOptions, 'refinements'>>): void;
+    private render;
+    private get theme();
+    private getContainerStyle;
+    private getItemStyle;
+    private getLabelStyle;
+    private getValueStyle;
+    private getClearButtonStyle;
+    private getClearAllButtonStyle;
+}
+//# sourceMappingURL=current-refinements.d.ts.map

package/dist/components/current-refinements.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"current-refinements.d.ts","sourceRoot":"","sources":["../../src/components/current-refinements.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEnD,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,yBAAyB;IACxC,SAAS,EAAE,WAAW,GAAG,MAAM,CAAC;IAChC,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC;IAC3B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3D,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,qBAAa,kBAAkB;IAC7B,OAAO,CAAC,SAAS,CAAc;IAC/B,OAAO,CAAC,QAAQ,CAAiB;IACjC,OAAO,CAAC,OAAO,CAAoM;IACnN,OAAO,CAAC,uBAAuB,CAA6B;gBAEhD,QAAQ,EAAE,cAAc,EAAE,OAAO,EAAE,yBAAyB;IAmCxE,MAAM,CAAC,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,yBAAyB,EAAE,aAAa,CAAC,CAAC,GAAG,IAAI;IAO9E,OAAO,CAAC,MAAM;IAqFd,OAAO,KAAK,KAAK,GAEhB;IAED,OAAO,CAAC,iBAAiB;IASzB,OAAO,CAAC,YAAY;IAepB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,mBAAmB;IAqB3B,OAAO,CAAC,sBAAsB;CAe/B"}

package/dist/components/current-refinements.js

@@ -0,0 +1,186 @@
+/**
+ * CurrentRefinements Component
+ *
+ * Displays currently active filters/refinements with ability to clear them
+ */
+import { log } from '@seekora-ai/ui-sdk-core';
+export class CurrentRefinements {
+    constructor(provider, options) {
+        this.unsubscribeStateManager = null;
+        this.provider = provider;
+        const container = typeof options.container === 'string'
+            ? document.querySelector(options.container)
+            : options.container;
+        if (!container) {
+            const error = new Error('CurrentRefinements: container element not found');
+            log.error('CurrentRefinements: Initialization failed', { error: error.message });
+            throw error;
+        }
+        this.container = container;
+        this.options = {
+            showClearAll: options.showClearAll !== false,
+            refinements: options.refinements || [],
+            onRefinementClear: options.onRefinementClear,
+            onClearAll: options.onClearAll,
+        };
+        // Subscribe to state manager to get refinements automatically
+        this.unsubscribeStateManager = this.provider.stateManager.subscribe((state) => {
+            // Convert state manager refinements to CurrentRefinements format
+            this.options.refinements = state.refinements.map(r => ({
+                field: r.field,
+                value: r.value,
+                label: r.field, // Use field as label if not provided
+            }));
+            this.render();
+        });
+        this.render();
+    }
+    update(options) {
+        if (options.refinements !== undefined) {
+            this.options.refinements = options.refinements;
+            this.render();
+        }
+    }
+    render() {
+        this.container.innerHTML = '';
+        if (!this.options.refinements || this.options.refinements.length === 0) {
+            return;
+        }
+        const wrapper = document.createElement('div');
+        wrapper.style.cssText = this.getContainerStyle();
+        this.options.refinements.forEach((refinement, index) => {
+            const item = document.createElement('div');
+            item.style.cssText = this.getItemStyle();
+            const label = document.createElement('span');
+            label.textContent = `${refinement.label || refinement.field}: `;
+            label.style.cssText = this.getLabelStyle();
+            item.appendChild(label);
+            const value = document.createElement('span');
+            value.textContent = refinement.displayValue || refinement.value;
+            value.style.cssText = this.getValueStyle();
+            item.appendChild(value);
+            const clearBtn = document.createElement('button');
+            clearBtn.innerHTML = '×';
+            clearBtn.type = 'button'; // Prevent form submission
+            clearBtn.style.cssText = this.getClearButtonStyle();
+            clearBtn.setAttribute('aria-label', `Clear ${refinement.field} filter`);
+            // Use a named function to ensure the listener is properly attached
+            const handleClearClick = (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                // Update state manager (automatically triggers search)
+                this.provider.stateManager.removeRefinement(refinement.field, refinement.value);
+                // Call callback for backwards compatibility
+                if (this.options.onRefinementClear) {
+                    log.verbose('CurrentRefinements: Refinement cleared', { field: refinement.field, value: refinement.value });
+                    try {
+                        this.options.onRefinementClear(refinement.field, refinement.value);
+                    }
+                    catch (err) {
+                        const error = err instanceof Error ? err : new Error(String(err));
+                        log.error('CurrentRefinements: Error in onRefinementClear callback', {
+                            field: refinement.field,
+                            value: refinement.value,
+                            error: error.message,
+                        });
+                    }
+                }
+            };
+            clearBtn.addEventListener('click', handleClearClick, { passive: false });
+            item.appendChild(clearBtn);
+            wrapper.appendChild(item);
+        });
+        if (this.options.showClearAll && this.options.refinements.length > 1) {
+            const clearAllBtn = document.createElement('button');
+            clearAllBtn.textContent = 'Clear all';
+            clearAllBtn.style.cssText = this.getClearAllButtonStyle();
+            // Use a named function to ensure the listener is properly attached
+            const handleClearAllClick = (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                // Clear all refinements in state manager (automatically triggers search)
+                this.provider.stateManager.clearRefinements();
+                // Call callback for backwards compatibility
+                if (this.options.onClearAll) {
+                    this.options.onClearAll();
+                }
+            };
+            clearAllBtn.addEventListener('click', handleClearAllClick, { passive: false });
+            wrapper.appendChild(clearAllBtn);
+        }
+        this.container.appendChild(wrapper);
+    }
+    get theme() {
+        return this.provider.theme;
+    }
+    getContainerStyle() {
+        return `
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: ${this.theme.spacing.small};
+    `;
+    }
+    getItemStyle() {
+        const borderRadius = typeof this.theme.borderRadius === 'string'
+            ? this.theme.borderRadius
+            : this.theme.borderRadius.medium;
+        return `
+      display: inline-flex;
+      align-items: center;
+      padding: ${this.theme.spacing.small} ${this.theme.spacing.medium};
+      background-color: ${this.theme.colors.hover};
+      border: 1px solid ${this.theme.colors.border};
+      border-radius: ${borderRadius};
+      font-size: ${this.theme.typography.fontSize.small};
+    `;
+    }
+    getLabelStyle() {
+        return `
+      margin-right: ${this.theme.spacing.small};
+      color: ${this.theme.colors.text};
+      font-weight: ${this.theme.typography.fontWeight?.medium || 500};
+    `;
+    }
+    getValueStyle() {
+        return `
+      margin-right: ${this.theme.spacing.small};
+      color: ${this.theme.colors.text};
+    `;
+    }
+    getClearButtonStyle() {
+        const borderRadius = typeof this.theme.borderRadius === 'string'
+            ? this.theme.borderRadius
+            : this.theme.borderRadius.full || '50%';
+        return `
+      width: 20px;
+      height: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: ${borderRadius};
+      background-color: transparent;
+      border: none;
+      color: ${this.theme.colors.text};
+      cursor: pointer;
+      font-size: ${this.theme.typography.fontSize.medium};
+      line-height: 1;
+      transition: ${this.theme.transitions?.fast || '150ms ease-in-out'};
+    `;
+    }
+    getClearAllButtonStyle() {
+        const borderRadius = typeof this.theme.borderRadius === 'string'
+            ? this.theme.borderRadius
+            : this.theme.borderRadius.medium;
+        return `
+      padding: ${this.theme.spacing.small} ${this.theme.spacing.medium};
+      font-size: ${this.theme.typography.fontSize.small};
+      color: ${this.theme.colors.primary};
+      background: transparent;
+      border: 1px solid ${this.theme.colors.border};
+      border-radius: ${borderRadius};
+      cursor: pointer;
+      transition: ${this.theme.transitions?.fast || '150ms ease-in-out'};
+    `;
+    }
+}

package/dist/components/facets.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Facets Component
+ *
+ * Displays facet filters for search results
+ */
+import type { SearchResponse } from '@seekora-ai/search-sdk';
+import { SearchProvider } from './search-provider';
+export interface FacetItem {
+    value: string;
+    count: number;
+    selected?: boolean;
+}
+export interface Facet {
+    field: string;
+    label?: string;
+    items: FacetItem[];
+}
+export interface FacetsOptions {
+    container: HTMLElement | string;
+    results?: SearchResponse | null;
+    facets?: Facet[];
+    maxItems?: number;
+    showMore?: boolean;
+    onFacetChange?: (field: string, value: string, selected: boolean) => void;
+}
+export declare class Facets {
+    private container;
+    private provider;
+    private options;
+    private expandedFacets;
+    private unsubscribeStateManager;
+    constructor(provider: SearchProvider, options: FacetsOptions);
+    update(options: Partial<Pick<FacetsOptions, 'results' | 'facets'>>): void;
+    private render;
+    private getFacets;
+    private get theme();
+    private getFacetStyle;
+    private getFacetHeaderStyle;
+    private getFacetListStyle;
+    private getFacetItemStyle;
+    private getFacetItemLabelStyle;
+    private getFacetItemCountStyle;
+    private getShowMoreStyle;
+}
+//# sourceMappingURL=facets.d.ts.map

package/dist/components/facets.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"facets.d.ts","sourceRoot":"","sources":["../../src/components/facets.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAE7D,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEnD,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,KAAK;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,SAAS,EAAE,CAAC;CACpB;AAED,MAAM,WAAW,aAAa;IAC5B,SAAS,EAAE,WAAW,GAAG,MAAM,CAAC;IAChC,OAAO,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IAChC,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CAC3E;AAED,qBAAa,MAAM;IACjB,OAAO,CAAC,SAAS,CAAc;IAC/B,OAAO,CAAC,QAAQ,CAAiB;IACjC,OAAO,CAAC,OAAO,CAAoJ;IACnK,OAAO,CAAC,cAAc,CAA+B;IACrD,OAAO,CAAC,uBAAuB,CAA6B;gBAEhD,QAAQ,EAAE,cAAc,EAAE,OAAO,EAAE,aAAa;IAiC5D,MAAM,CAAC,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,aAAa,EAAE,SAAS,GAAG,QAAQ,CAAC,CAAC,GAAG,IAAI;IAMzE,OAAO,CAAC,MAAM;IA0Gd,OAAO,CAAC,SAAS;IA8EjB,OAAO,KAAK,KAAK,GAEhB;IAED,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,iBAAiB;IAQzB,OAAO,CAAC,iBAAiB;IAazB,OAAO,CAAC,sBAAsB;IAS9B,OAAO,CAAC,sBAAsB;IAQ9B,OAAO,CAAC,gBAAgB;CAezB"}