@seekora-ai/ui-sdk-angular 1.0.0

package/dist/index.esm.js

@@ -0,0 +1,2526 @@
+import { InjectionToken, Injectable, Component, Input, Output, ViewChild, EventEmitter, ContentChild } from '@angular/core';
+import { createTheme as createTheme$1, log, extractField, formatPrice } from '@seekora-ai/ui-sdk-core';
+export { mergeThemes } from '@seekora-ai/ui-sdk-core';
+import { BehaviorSubject, from, Subject, Subscription } from 'rxjs';
+import { map, catchError, debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+function __esDecorate(ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+}
+function __runInitializers(thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+}
+function __setFunctionName(f, name, prefix) {
+    if (typeof name === "symbol") name = name.description ? "[".concat(name.description, "]") : "";
+    return Object.defineProperty(f, "name", { configurable: true, value: prefix ? "".concat(prefix, " ", name) : name });
+}
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+/**
+ * Default Theme
+ */
+const defaultTheme = {
+    colors: {
+        primary: '#007bff',
+        secondary: '#6c757d',
+        background: '#ffffff',
+        surface: '#f8f9fa',
+        text: '#212529',
+        textSecondary: '#6c757d',
+        border: '#dee2e6',
+        hover: '#f8f9fa',
+        focus: '#007bff',
+        error: '#dc3545',
+        success: '#28a745',
+        warning: '#ffc107',
+    },
+    typography: {
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+        fontSize: {
+            small: '0.875rem',
+            medium: '1rem',
+            large: '1.25rem',
+        },
+        fontWeight: {
+            normal: 400,
+            medium: 500,
+            semibold: 600,
+            bold: 700,
+        },
+        lineHeight: {
+            tight: 1.25,
+            normal: 1.5,
+            relaxed: 1.75,
+        },
+    },
+    spacing: {
+        small: '0.5rem',
+        medium: '1rem',
+        large: '1.5rem',
+    },
+    borderRadius: {
+        none: '0',
+        small: '0.25rem',
+        medium: '0.375rem',
+        large: '0.5rem',
+        full: '9999px',
+    },
+    shadows: {
+        small: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)',
+        medium: '0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)',
+        large: '0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23)',
+    },
+    transitions: {
+        fast: '150ms ease-in-out',
+        normal: '250ms ease-in-out',
+        slow: '350ms ease-in-out',
+    },
+    breakpoints: {
+        sm: '640px',
+        md: '768px',
+        lg: '1024px',
+        xl: '1280px',
+    },
+    zIndex: {
+        dropdown: 1000,
+        modal: 2000,
+        tooltip: 3000,
+    },
+};
+
+/**
+ * createTheme utility
+ *
+ * Creates a complete theme from a partial theme configuration
+ */
+const createTheme = (config) => {
+    return createTheme$1(config, defaultTheme);
+};
+
+/**
+ * SearchContext Service
+ *
+ * Provides search context (client, theme, etc.) to Angular components
+ */
+const SEEKORA_CLIENT = new InjectionToken('SEEKORA_CLIENT');
+const SEEKORA_THEME_CONFIG = new InjectionToken('SEEKORA_THEME_CONFIG');
+let SearchContextService = (() => {
+    let _classDecorators = [Injectable({
+            providedIn: 'root',
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    _classThis = class {
+        constructor(client, themeConfig, enableAnalytics = true, autoTrackSearch = true) {
+            log.verbose('SearchContextService: Initializing', {
+                hasTheme: !!themeConfig,
+                enableAnalytics,
+                autoTrackSearch,
+            });
+            this.client = client;
+            this.theme = themeConfig ? createTheme(themeConfig) : defaultTheme;
+            this.enableAnalytics = enableAnalytics;
+            this.autoTrackSearch = autoTrackSearch;
+            log.info('SearchContextService: Initialized successfully');
+        }
+    };
+    __setFunctionName(_classThis, "SearchContextService");
+    (() => {
+        const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+        __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+        _classThis = _classDescriptor.value;
+        if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        __runInitializers(_classThis, _classExtraInitializers);
+    })();
+    return _classThis;
+})();
+
+/**
+ * SeekoraSearch Service
+ *
+ * Service for performing searches with the Seekora SDK
+ */
+let SeekoraSearchService = (() => {
+    let _classDecorators = [Injectable({
+            providedIn: 'root',
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    _classThis = class {
+        constructor(searchContext) {
+            this.searchContext = searchContext;
+            this.searchStateSubject = new BehaviorSubject({
+                results: null,
+                loading: false,
+                error: null,
+                context: null,
+            });
+            this.searchState$ = this.searchStateSubject.asObservable();
+        }
+        search(options) {
+            const query = options.q || '';
+            log.verbose('SeekoraSearchService: Starting search', { query, options });
+            this.searchStateSubject.next({
+                ...this.searchStateSubject.value,
+                loading: true,
+                error: null,
+            });
+            const { q, ...restOptions } = options;
+            const searchPromise = this.searchContext.client.search(q, restOptions);
+            return from(searchPromise).pipe(map((response) => {
+                log.info('SeekoraSearchService: Search completed', {
+                    query,
+                    resultsCount: response?.results?.length || 0,
+                    hasContext: !!response?.context,
+                });
+                this.searchStateSubject.next({
+                    results: response,
+                    loading: false,
+                    error: null,
+                    context: response.context || null,
+                });
+                return response;
+            }), catchError((err) => {
+                const error = err instanceof Error ? err : new Error(String(err));
+                log.error('SeekoraSearchService: Search failed', {
+                    query,
+                    error: error.message,
+                    stack: error.stack,
+                });
+                this.searchStateSubject.next({
+                    results: null,
+                    loading: false,
+                    error,
+                    context: null,
+                });
+                throw error;
+            }));
+        }
+        clearResults() {
+            this.searchStateSubject.next({
+                results: null,
+                loading: false,
+                error: null,
+                context: null,
+            });
+        }
+        getCurrentState() {
+            return this.searchStateSubject.value;
+        }
+    };
+    __setFunctionName(_classThis, "SeekoraSearchService");
+    (() => {
+        const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+        __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+        _classThis = _classDescriptor.value;
+        if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        __runInitializers(_classThis, _classExtraInitializers);
+    })();
+    return _classThis;
+})();
+
+/**
+ * QuerySuggestions Service
+ *
+ * Service for fetching query suggestions with debouncing
+ */
+let QuerySuggestionsService = (() => {
+    let _classDecorators = [Injectable({
+            providedIn: 'root',
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    _classThis = class {
+        constructor(searchContext, debounceMs = 300, maxSuggestions = 10) {
+            this.searchContext = searchContext;
+            this.debounceMs = debounceMs;
+            this.maxSuggestions = maxSuggestions;
+            this.querySubject = new BehaviorSubject('');
+            this.suggestionsStateSubject = new BehaviorSubject({
+                suggestions: [],
+                loading: false,
+                error: null,
+            });
+            this.suggestionsState$ = this.suggestionsStateSubject.asObservable();
+            this.querySubject.pipe(debounceTime(300), distinctUntilChanged(), switchMap((query) => {
+                if (!query.trim()) {
+                    this.suggestionsStateSubject.next({
+                        suggestions: [],
+                        loading: false,
+                        error: null,
+                    });
+                    return from(Promise.resolve([]));
+                }
+                this.suggestionsStateSubject.next({
+                    ...this.suggestionsStateSubject.value,
+                    loading: true,
+                    error: null,
+                });
+                return from(this.searchContext.client.getSuggestions(query, 10)).pipe(map((response) => {
+                    const rawSuggestions = Array.isArray(response) ? response : [];
+                    const suggestionItems = 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,
+                        };
+                    });
+                    this.suggestionsStateSubject.next({
+                        suggestions: suggestionItems,
+                        loading: false,
+                        error: null,
+                    });
+                    log.verbose('QuerySuggestionsService: Suggestions fetched', {
+                        query,
+                        count: suggestionItems.length,
+                    });
+                    return suggestionItems;
+                }), catchError((err) => {
+                    const error = err instanceof Error ? err : new Error(String(err));
+                    log.error('QuerySuggestionsService: Failed to fetch suggestions', {
+                        query,
+                        error: error.message,
+                        stack: error.stack,
+                    });
+                    this.suggestionsStateSubject.next({
+                        suggestions: [],
+                        loading: false,
+                        error,
+                    });
+                    return from(Promise.resolve([]));
+                }));
+            })).subscribe();
+        }
+        setQuery(query) {
+            this.querySubject.next(query);
+        }
+        getCurrentState() {
+            return this.suggestionsStateSubject.value;
+        }
+    };
+    __setFunctionName(_classThis, "QuerySuggestionsService");
+    (() => {
+        const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+        __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+        _classThis = _classDescriptor.value;
+        if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        __runInitializers(_classThis, _classExtraInitializers);
+    })();
+    return _classThis;
+})();
+
+/**
+ * SearchProvider Component
+ *
+ * Provides Seekora client and context to child components
+ */
+let SearchProviderComponent = (() => {
+    let _classDecorators = [Component({
+            selector: 'seekora-search-provider',
+            template: '<ng-content></ng-content>',
+            providers: [
+                {
+                    provide: SEEKORA_CLIENT,
+                    useFactory: (component) => component.client,
+                    deps: [SearchProviderComponent],
+                },
+                {
+                    provide: SEEKORA_THEME_CONFIG,
+                    useFactory: (component) => component.theme,
+                    deps: [SearchProviderComponent],
+                },
+                SearchContextService,
+            ],
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _client_decorators;
+    let _client_initializers = [];
+    let _client_extraInitializers = [];
+    let _theme_decorators;
+    let _theme_initializers = [];
+    let _theme_extraInitializers = [];
+    let _enableAnalytics_decorators;
+    let _enableAnalytics_initializers = [];
+    let _enableAnalytics_extraInitializers = [];
+    let _autoTrackSearch_decorators;
+    let _autoTrackSearch_initializers = [];
+    let _autoTrackSearch_extraInitializers = [];
+    var SearchProviderComponent = _classThis = class {
+        constructor(injector) {
+            this.injector = injector;
+            this.client = __runInitializers(this, _client_initializers, void 0);
+            this.theme = (__runInitializers(this, _client_extraInitializers), __runInitializers(this, _theme_initializers, void 0));
+            this.enableAnalytics = (__runInitializers(this, _theme_extraInitializers), __runInitializers(this, _enableAnalytics_initializers, true));
+            this.autoTrackSearch = (__runInitializers(this, _enableAnalytics_extraInitializers), __runInitializers(this, _autoTrackSearch_initializers, true));
+            __runInitializers(this, _autoTrackSearch_extraInitializers);
+            this.injector = injector;
+        }
+        ngOnInit() {
+            if (!this.client) {
+                throw new Error('SearchProvider: client is required');
+            }
+        }
+        ngOnDestroy() {
+            // Cleanup if needed
+        }
+    };
+    __setFunctionName(_classThis, "SearchProviderComponent");
+    (() => {
+        const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+        _client_decorators = [Input()];
+        _theme_decorators = [Input()];
+        _enableAnalytics_decorators = [Input()];
+        _autoTrackSearch_decorators = [Input()];
+        __esDecorate(null, null, _client_decorators, { kind: "field", name: "client", static: false, private: false, access: { has: obj => "client" in obj, get: obj => obj.client, set: (obj, value) => { obj.client = value; } }, metadata: _metadata }, _client_initializers, _client_extraInitializers);
+        __esDecorate(null, null, _theme_decorators, { kind: "field", name: "theme", static: false, private: false, access: { has: obj => "theme" in obj, get: obj => obj.theme, set: (obj, value) => { obj.theme = value; } }, metadata: _metadata }, _theme_initializers, _theme_extraInitializers);
+        __esDecorate(null, null, _enableAnalytics_decorators, { kind: "field", name: "enableAnalytics", static: false, private: false, access: { has: obj => "enableAnalytics" in obj, get: obj => obj.enableAnalytics, set: (obj, value) => { obj.enableAnalytics = value; } }, metadata: _metadata }, _enableAnalytics_initializers, _enableAnalytics_extraInitializers);
+        __esDecorate(null, null, _autoTrackSearch_decorators, { kind: "field", name: "autoTrackSearch", static: false, private: false, access: { has: obj => "autoTrackSearch" in obj, get: obj => obj.autoTrackSearch, set: (obj, value) => { obj.autoTrackSearch = value; } }, metadata: _metadata }, _autoTrackSearch_initializers, _autoTrackSearch_extraInitializers);
+        __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+        SearchProviderComponent = _classThis = _classDescriptor.value;
+        if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        __runInitializers(_classThis, _classExtraInitializers);
+    })();
+    return SearchProviderComponent = _classThis;
+})();
+
+/**
+ * SearchBar Component
+ *
+ * Interactive search input component with query suggestions support
+ */
+let SearchBarComponent = (() => {
+    let _classDecorators = [Component({
+            selector: 'seekora-search-bar',
+            template: `
+    <div [style.position]="'relative'">
+      <input
+        #searchInput
+        type="text"
+        [value]="query"
+        (input)="onInputChange($event)"
+        (focus)="onFocus()"
+        (blur)="onBlur()"
+        (keydown)="onKeyDown($event)"
+        [placeholder]="placeholder"
+        [style]="getInputStyle()"
+      />
+      
+      <div
+        *ngIf="showSuggestionsList"
+        [style]="getSuggestionsStyle()"
+      >
+        <div *ngIf="suggestionsLoading" [style]="loadingStyle">
+          Loading suggestions...
+        </div>
+        
+        <div
+          *ngFor="let suggestion of displayedSuggestions; let i = index"
+          (click)="selectSuggestion(suggestion.query)"
+          (mouseenter)="selectedIndex = i"
+          [style]="getSuggestionStyle(i)"
+        >
+          {{ suggestion.query }}
+        </div>
+        
+        <div *ngIf="!suggestionsLoading && displayedSuggestions.length === 0 && query.length >= minQueryLength" [style]="emptyStyle">
+          No suggestions found
+        </div>
+      </div>
+    </div>
+  `,
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _placeholder_decorators;
+    let _placeholder_initializers = [];
+    let _placeholder_extraInitializers = [];
+    let _showSuggestions_decorators;
+    let _showSuggestions_initializers = [];
+    let _showSuggestions_extraInitializers = [];
+    let _minQueryLength_decorators;
+    let _minQueryLength_initializers = [];
+    let _minQueryLength_extraInitializers = [];
+    let _maxSuggestions_decorators;
+    let _maxSuggestions_initializers = [];
+    let _maxSuggestions_extraInitializers = [];
+    let _debounceMs_decorators;
+    let _debounceMs_initializers = [];
+    let _debounceMs_extraInitializers = [];
+    let _searchOptions_decorators;
+    let _searchOptions_initializers = [];
+    let _searchOptions_extraInitializers = [];
+    let _search_decorators;
+    let _search_initializers = [];
+    let _search_extraInitializers = [];
+    let _suggestionSelect_decorators;
+    let _suggestionSelect_initializers = [];
+    let _suggestionSelect_extraInitializers = [];
+    let _queryChange_decorators;
+    let _queryChange_initializers = [];
+    let _queryChange_extraInitializers = [];
+    let _searchStateChange_decorators;
+    let _searchStateChange_initializers = [];
+    let _searchStateChange_extraInitializers = [];
+    let _searchInput_decorators;
+    let _searchInput_initializers = [];
+    let _searchInput_extraInitializers = [];
+    _classThis = class {
+        constructor(searchContext, searchService, suggestionsService) {
+            this.searchContext = searchContext;
+            this.searchService = searchService;
+            this.suggestionsService = suggestionsService;
+            this.placeholder = __runInitializers(this, _placeholder_initializers, 'Search...');
+            this.showSuggestions = (__runInitializers(this, _placeholder_extraInitializers), __runInitializers(this, _showSuggestions_initializers, true));
+            this.minQueryLength = (__runInitializers(this, _showSuggestions_extraInitializers), __runInitializers(this, _minQueryLength_initializers, 1));
+            this.maxSuggestions = (__runInitializers(this, _minQueryLength_extraInitializers), __runInitializers(this, _maxSuggestions_initializers, 10));
+            this.debounceMs = (__runInitializers(this, _maxSuggestions_extraInitializers), __runInitializers(this, _debounceMs_initializers, 300));
+            this.searchOptions = (__runInitializers(this, _debounceMs_extraInitializers), __runInitializers(this, _searchOptions_initializers, void 0));
+            this.search = (__runInitializers(this, _searchOptions_extraInitializers), __runInitializers(this, _search_initializers, new EventEmitter()));
+            this.suggestionSelect = (__runInitializers(this, _search_extraInitializers), __runInitializers(this, _suggestionSelect_initializers, new EventEmitter()));
+            this.queryChange = (__runInitializers(this, _suggestionSelect_extraInitializers), __runInitializers(this, _queryChange_initializers, new EventEmitter()));
+            this.searchStateChange = (__runInitializers(this, _queryChange_extraInitializers), __runInitializers(this, _searchStateChange_initializers, new EventEmitter()));
+            this.searchInput = (__runInitializers(this, _searchStateChange_extraInitializers), __runInitializers(this, _searchInput_initializers, void 0));
+            this.query = (__runInitializers(this, _searchInput_extraInitializers), '');
+            this.isFocused = false;
+            this.selectedIndex = -1;
+            this.suggestions = [];
+            this.suggestionsLoading = false;
+            this.querySubject = new Subject();
+            this.subscriptions = new Subscription();
+        }
+        ngOnInit() {
+            // Subscribe to query changes for suggestions
+            const querySub = this.querySubject.pipe(debounceTime(this.debounceMs), distinctUntilChanged()).subscribe(query => {
+                if (this.showSuggestions && query.length >= this.minQueryLength) {
+                    this.suggestionsService.setQuery(query);
+                }
+            });
+            // Subscribe to suggestions state
+            const suggestionsSub = this.suggestionsService.suggestionsState$.subscribe(state => {
+                this.suggestions = state.suggestions;
+                this.suggestionsLoading = state.loading;
+            });
+            // Subscribe to search state
+            const searchSub = this.searchService.searchState$.subscribe(state => {
+                this.searchStateChange.emit({
+                    results: state.results,
+                    loading: state.loading,
+                    error: state.error,
+                });
+            });
+            this.subscriptions.add(querySub);
+            this.subscriptions.add(suggestionsSub);
+            this.subscriptions.add(searchSub);
+        }
+        ngOnDestroy() {
+            this.subscriptions.unsubscribe();
+        }
+        get displayedSuggestions() {
+            return this.suggestions.slice(0, this.maxSuggestions);
+        }
+        get showSuggestionsList() {
+            return this.isFocused && this.showSuggestions && this.query.length >= this.minQueryLength;
+        }
+        onInputChange(event) {
+            const target = event.target;
+            this.query = target.value;
+            this.selectedIndex = -1;
+            this.querySubject.next(this.query);
+            this.queryChange.emit(this.query);
+        }
+        onFocus() {
+            this.isFocused = true;
+        }
+        onBlur() {
+            setTimeout(() => {
+                this.isFocused = false;
+                this.selectedIndex = -1;
+            }, 100);
+        }
+        onKeyDown(event) {
+            switch (event.key) {
+                case 'ArrowDown':
+                    event.preventDefault();
+                    if (this.showSuggestions && this.displayedSuggestions.length > 0) {
+                        this.selectedIndex = this.selectedIndex < this.displayedSuggestions.length - 1
+                            ? this.selectedIndex + 1
+                            : this.selectedIndex;
+                    }
+                    break;
+                case 'ArrowUp':
+                    event.preventDefault();
+                    if (this.showSuggestions && this.displayedSuggestions.length > 0) {
+                        this.selectedIndex = this.selectedIndex > 0 ? this.selectedIndex - 1 : -1;
+                    }
+                    break;
+                case 'Enter':
+                    event.preventDefault();
+                    if (this.showSuggestions && this.displayedSuggestions.length > 0 &&
+                        this.selectedIndex >= 0 && this.selectedIndex < this.displayedSuggestions.length) {
+                        this.selectSuggestion(this.displayedSuggestions[this.selectedIndex].query);
+                    }
+                    else {
+                        // Search with "*" if query is empty
+                        this.performSearch();
+                    }
+                    break;
+                case 'Escape':
+                    this.isFocused = false;
+                    this.selectedIndex = -1;
+                    this.searchInput?.nativeElement.blur();
+                    break;
+            }
+        }
+        selectSuggestion(suggestion) {
+            log.verbose('SearchBar: Suggestion selected', { suggestion });
+            this.query = suggestion;
+            this.selectedIndex = -1;
+            this.isFocused = false;
+            this.searchInput?.nativeElement.blur();
+            this.suggestionSelect.emit(suggestion);
+            this.performSearch();
+        }
+        performSearch() {
+            const query = this.query.trim() || '';
+            if (!query) {
+                log.verbose('SearchBar: Empty query, skipping search');
+                return;
+            }
+            log.info('SearchBar: Performing search', { query });
+            this.searchService.search({
+                q: query,
+                ...this.searchOptions,
+            }).subscribe({
+                next: (results) => {
+                    if (results) {
+                        this.search.emit({ query, results });
+                    }
+                },
+                error: (err) => {
+                    const error = err instanceof Error ? err : new Error(String(err));
+                    log.error('SearchBar: Search failed', {
+                        query,
+                        error: error.message,
+                    });
+                    // Error is handled by searchStateChange
+                },
+            });
+        }
+        getInputStyle() {
+            const theme = this.searchContext.theme;
+            return {
+                width: '100%',
+                padding: theme.spacing.medium,
+                fontSize: theme.typography.fontSize.medium,
+                borderWidth: '1px',
+                borderStyle: 'solid',
+                borderColor: this.isFocused ? theme.colors.focus : theme.colors.border,
+                borderRadius: typeof theme.borderRadius === 'string'
+                    ? theme.borderRadius
+                    : theme.borderRadius.medium,
+                outline: 'none',
+                ...(this.isFocused && {
+                    boxShadow: theme.shadows.small,
+                }),
+            };
+        }
+        getSuggestionsStyle() {
+            const theme = this.searchContext.theme;
+            return {
+                position: 'absolute',
+                top: '100%',
+                left: 0,
+                right: 0,
+                marginTop: theme.spacing.small,
+                backgroundColor: theme.colors.background,
+                border: `1px solid ${theme.colors.border}`,
+                borderRadius: typeof theme.borderRadius === 'string'
+                    ? theme.borderRadius
+                    : theme.borderRadius.medium,
+                boxShadow: theme.shadows.medium,
+                maxHeight: '400px',
+                overflowY: 'auto',
+                zIndex: 1000,
+            };
+        }
+        get loadingStyle() {
+            const theme = this.searchContext.theme;
+            return {
+                padding: theme.spacing.medium,
+                textAlign: 'center',
+            };
+        }
+        get emptyStyle() {
+            const theme = this.searchContext.theme;
+            return {
+                padding: theme.spacing.medium,
+                textAlign: 'center',
+                color: theme.colors.text,
+            };
+        }
+        getSuggestionStyle(index) {
+            const theme = this.searchContext.theme;
+            return {
+                padding: theme.spacing.medium,
+                cursor: 'pointer',
+                backgroundColor: index === this.selectedIndex ? theme.colors.hover : 'transparent',
+            };
+        }
+    };
+    __setFunctionName(_classThis, "SearchBarComponent");
+    (() => {
+        const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+        _placeholder_decorators = [Input()];
+        _showSuggestions_decorators = [Input()];
+        _minQueryLength_decorators = [Input()];
+        _maxSuggestions_decorators = [Input()];
+        _debounceMs_decorators = [Input()];
+        _searchOptions_decorators = [Input()];
+        _search_decorators = [Output()];
+        _suggestionSelect_decorators = [Output()];
+        _queryChange_decorators = [Output()];
+        _searchStateChange_decorators = [Output()];
+        _searchInput_decorators = [ViewChild('searchInput')];
+        __esDecorate(null, null, _placeholder_decorators, { kind: "field", name: "placeholder", static: false, private: false, access: { has: obj => "placeholder" in obj, get: obj => obj.placeholder, set: (obj, value) => { obj.placeholder = value; } }, metadata: _metadata }, _placeholder_initializers, _placeholder_extraInitializers);
+        __esDecorate(null, null, _showSuggestions_decorators, { kind: "field", name: "showSuggestions", static: false, private: false, access: { has: obj => "showSuggestions" in obj, get: obj => obj.showSuggestions, set: (obj, value) => { obj.showSuggestions = value; } }, metadata: _metadata }, _showSuggestions_initializers, _showSuggestions_extraInitializers);
+        __esDecorate(null, null, _minQueryLength_decorators, { kind: "field", name: "minQueryLength", static: false, private: false, access: { has: obj => "minQueryLength" in obj, get: obj => obj.minQueryLength, set: (obj, value) => { obj.minQueryLength = value; } }, metadata: _metadata }, _minQueryLength_initializers, _minQueryLength_extraInitializers);
+        __esDecorate(null, null, _maxSuggestions_decorators, { kind: "field", name: "maxSuggestions", static: false, private: false, access: { has: obj => "maxSuggestions" in obj, get: obj => obj.maxSuggestions, set: (obj, value) => { obj.maxSuggestions = value; } }, metadata: _metadata }, _maxSuggestions_initializers, _maxSuggestions_extraInitializers);
+        __esDecorate(null, null, _debounceMs_decorators, { kind: "field", name: "debounceMs", static: false, private: false, access: { has: obj => "debounceMs" in obj, get: obj => obj.debounceMs, set: (obj, value) => { obj.debounceMs = value; } }, metadata: _metadata }, _debounceMs_initializers, _debounceMs_extraInitializers);
+        __esDecorate(null, null, _searchOptions_decorators, { kind: "field", name: "searchOptions", static: false, private: false, access: { has: obj => "searchOptions" in obj, get: obj => obj.searchOptions, set: (obj, value) => { obj.searchOptions = value; } }, metadata: _metadata }, _searchOptions_initializers, _searchOptions_extraInitializers);
+        __esDecorate(null, null, _search_decorators, { kind: "field", name: "search", static: false, private: false, access: { has: obj => "search" in obj, get: obj => obj.search, set: (obj, value) => { obj.search = value; } }, metadata: _metadata }, _search_initializers, _search_extraInitializers);
+        __esDecorate(null, null, _suggestionSelect_decorators, { kind: "field", name: "suggestionSelect", static: false, private: false, access: { has: obj => "suggestionSelect" in obj, get: obj => obj.suggestionSelect, set: (obj, value) => { obj.suggestionSelect = value; } }, metadata: _metadata }, _suggestionSelect_initializers, _suggestionSelect_extraInitializers);
+        __esDecorate(null, null, _queryChange_decorators, { kind: "field", name: "queryChange", static: false, private: false, access: { has: obj => "queryChange" in obj, get: obj => obj.queryChange, set: (obj, value) => { obj.queryChange = value; } }, metadata: _metadata }, _queryChange_initializers, _queryChange_extraInitializers);
+        __esDecorate(null, null, _searchStateChange_decorators, { kind: "field", name: "searchStateChange", static: false, private: false, access: { has: obj => "searchStateChange" in obj, get: obj => obj.searchStateChange, set: (obj, value) => { obj.searchStateChange = value; } }, metadata: _metadata }, _searchStateChange_initializers, _searchStateChange_extraInitializers);
+        __esDecorate(null, null, _searchInput_decorators, { kind: "field", name: "searchInput", static: false, private: false, access: { has: obj => "searchInput" in obj, get: obj => obj.searchInput, set: (obj, value) => { obj.searchInput = value; } }, metadata: _metadata }, _searchInput_initializers, _searchInput_extraInitializers);
+        __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+        _classThis = _classDescriptor.value;
+        if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        __runInitializers(_classThis, _classExtraInitializers);
+    })();
+    return _classThis;
+})();
+
+/**
+ * SearchResults Component
+ *
+ * Displays search results with customizable rendering
+ */
+let SearchResultsComponent = (() => {
+    let _classDecorators = [Component({
+            selector: 'seekora-search-results',
+            template: `
+    <div *ngIf="loading" [style]="containerStyle">
+      <div [style]="loadingStyle">Loading results...</div>
+    </div>
+
+    <div *ngIf="error && !loading" [style]="containerStyle">
+      <div [style]="errorStyle">Error: {{ error.message }}</div>
+    </div>
+
+    <div *ngIf="!loading && !error && displayedResults.length === 0" [style]="containerStyle">
+      <div [style]="emptyStyle">No results found</div>
+    </div>
+
+    <div *ngIf="!loading && !error && displayedResults.length > 0" [style]="getContainerStyle()">
+      <div
+        *ngFor="let result of displayedResults; let i = index"
+        (click)="onResultClick(result, i)"
+        [style]="getResultStyle()"
+      >
+        <div *ngIf="extractedFields(result).image" [style]="imageStyle">
+          <img [src]="extractedFields(result).image" [alt]="extractedFields(result).title" [style]="imageImgStyle" />
+        </div>
+        <div>
+          <h3 [style]="titleStyle">{{ extractedFields(result).title }}</h3>
+          <p *ngIf="extractedFields(result).description" [style]="descriptionStyle">
+            {{ extractedFields(result).description }}
+          </p>
+          <div *ngIf="extractedFields(result).price" [style]="priceStyle">
+            {{ extractedFields(result).price }}
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _results_decorators;
+    let _results_initializers = [];
+    let _results_extraInitializers = [];
+    let _loading_decorators;
+    let _loading_initializers = [];
+    let _loading_extraInitializers = [];
+    let _error_decorators;
+    let _error_initializers = [];
+    let _error_extraInitializers = [];
+    let _viewMode_decorators;
+    let _viewMode_initializers = [];
+    let _viewMode_extraInitializers = [];
+    let _fieldMapping_decorators;
+    let _fieldMapping_initializers = [];
+    let _fieldMapping_extraInitializers = [];
+    let _itemsPerPage_decorators;
+    let _itemsPerPage_initializers = [];
+    let _itemsPerPage_extraInitializers = [];
+    let _resultClick_decorators;
+    let _resultClick_initializers = [];
+    let _resultClick_extraInitializers = [];
+    _classThis = class {
+        constructor(searchContext, searchService) {
+            this.searchContext = searchContext;
+            this.searchService = searchService;
+            this.results = __runInitializers(this, _results_initializers, void 0);
+            this.loading = (__runInitializers(this, _results_extraInitializers), __runInitializers(this, _loading_initializers, false));
+            this.error = (__runInitializers(this, _loading_extraInitializers), __runInitializers(this, _error_initializers, void 0));
+            this.viewMode = (__runInitializers(this, _error_extraInitializers), __runInitializers(this, _viewMode_initializers, 'list'));
+            this.fieldMapping = (__runInitializers(this, _viewMode_extraInitializers), __runInitializers(this, _fieldMapping_initializers, void 0));
+            this.itemsPerPage = (__runInitializers(this, _fieldMapping_extraInitializers), __runInitializers(this, _itemsPerPage_initializers, 10));
+            this.resultClick = (__runInitializers(this, _itemsPerPage_extraInitializers), __runInitializers(this, _resultClick_initializers, new EventEmitter()));
+            this.subscriptions = (__runInitializers(this, _resultClick_extraInitializers), new Subscription());
+        }
+        ngOnInit() {
+            const searchSub = this.searchService.searchState$.subscribe(state => {
+                // Component can react to search state changes if needed
+            });
+            this.subscriptions.add(searchSub);
+        }
+        ngOnDestroy() {
+            this.subscriptions.unsubscribe();
+        }
+        extractResults(results) {
+            if (!results)
+                return [];
+            if (Array.isArray(results))
+                return results;
+            if (results.results && Array.isArray(results.results))
+                return results.results;
+            if (results.data) {
+                if (Array.isArray(results.data))
+                    return results.data;
+                if (results.data.results && Array.isArray(results.data.results))
+                    return results.data.results;
+                if (results.data.data?.results && Array.isArray(results.data.data.results)) {
+                    return results.data.data.results;
+                }
+            }
+            return [];
+        }
+        get displayedResults() {
+            const allResults = this.extractResults(this.results);
+            return this.itemsPerPage > 0 ? allResults.slice(0, this.itemsPerPage) : allResults;
+        }
+        extractedFields(item) {
+            const mapping = this.fieldMapping || {};
+            return {
+                id: extractField(item, mapping.id) || String(item.id || ''),
+                title: extractField(item, mapping.title) || extractField(item, mapping.primaryText) || 'Untitled',
+                description: extractField(item, mapping.description) || extractField(item, mapping.secondaryText),
+                image: extractField(item, mapping.image) || extractField(item, mapping.imageUrl),
+                price: mapping.price ? formatPrice(extractField(item, mapping.price)) : undefined,
+                url: extractField(item, mapping.url),
+                metadata: item,
+            };
+        }
+        onResultClick(result, index) {
+            this.resultClick.emit({ result, index });
+        }
+        get containerStyle() {
+            return {};
+        }
+        get loadingStyle() {
+            const theme = this.searchContext.theme;
+            return {
+                padding: theme.spacing.large,
+                textAlign: 'center',
+                color: theme.colors.text,
+            };
+        }
+        get errorStyle() {
+            const theme = this.searchContext.theme;
+            return {
+                padding: theme.spacing.large,
+                textAlign: 'center',
+                color: theme.colors.error,
+            };
+        }
+        get emptyStyle() {
+            const theme = this.searchContext.theme;
+            return {
+                padding: theme.spacing.large,
+                textAlign: 'center',
+                color: theme.colors.textSecondary || theme.colors.text,
+            };
+        }
+        getContainerStyle() {
+            return {};
+        }
+        getResultStyle() {
+            const theme = this.searchContext.theme;
+            const baseStyle = {
+                cursor: 'pointer',
+            };
+            if (this.viewMode === 'list') {
+                return {
+                    ...baseStyle,
+                    padding: theme.spacing.medium,
+                    borderBottom: `1px solid ${theme.colors.border}`,
+                };
+            }
+            else if (this.viewMode === 'card') {
+                return {
+                    ...baseStyle,
+                    padding: theme.spacing.medium,
+                    border: `1px solid ${theme.colors.border}`,
+                    borderRadius: typeof theme.borderRadius === 'string'
+                        ? theme.borderRadius
+                        : theme.borderRadius.medium,
+                    marginBottom: theme.spacing.medium,
+                    boxShadow: theme.shadows.small,
+                };
+            }
+            return baseStyle;
+        }
+        get imageStyle() {
+            return {
+                float: 'left',
+                marginRight: this.searchContext.theme.spacing.medium,
+            };
+        }
+        get imageImgStyle() {
+            const theme = this.searchContext.theme;
+            return {
+                width: '100px',
+                height: '100px',
+                objectFit: 'cover',
+                borderRadius: typeof theme.borderRadius === 'string'
+                    ? theme.borderRadius
+                    : theme.borderRadius.medium,
+            };
+        }
+        get titleStyle() {
+            const theme = this.searchContext.theme;
+            return {
+                fontSize: theme.typography.fontSize.large,
+                fontWeight: 'bold',
+                margin: 0,
+                marginBottom: theme.spacing.small,
+                color: theme.colors.text,
+            };
+        }
+        get descriptionStyle() {
+            const theme = this.searchContext.theme;
+            return {
+                fontSize: theme.typography.fontSize.medium,
+                color: theme.colors.text,
+                margin: 0,
+                marginBottom: theme.spacing.small,
+                opacity: 0.8,
+            };
+        }
+        get priceStyle() {
+            const theme = this.searchContext.theme;
+            return {
+                fontSize: theme.typography.fontSize.medium,
+                fontWeight: 'bold',
+                color: theme.colors.primary,
+            };
+        }
+    };
+    __setFunctionName(_classThis, "SearchResultsComponent");
+    (() => {
+        const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+        _results_decorators = [Input()];
+        _loading_decorators = [Input()];
+        _error_decorators = [Input()];
+        _viewMode_decorators = [Input()];
+        _fieldMapping_decorators = [Input()];
+        _itemsPerPage_decorators = [Input()];
+        _resultClick_decorators = [Output()];
+        __esDecorate(null, null, _results_decorators, { kind: "field", name: "results", static: false, private: false, access: { has: obj => "results" in obj, get: obj => obj.results, set: (obj, value) => { obj.results = value; } }, metadata: _metadata }, _results_initializers, _results_extraInitializers);
+        __esDecorate(null, null, _loading_decorators, { kind: "field", name: "loading", static: false, private: false, access: { has: obj => "loading" in obj, get: obj => obj.loading, set: (obj, value) => { obj.loading = value; } }, metadata: _metadata }, _loading_initializers, _loading_extraInitializers);
+        __esDecorate(null, null, _error_decorators, { kind: "field", name: "error", static: false, private: false, access: { has: obj => "error" in obj, get: obj => obj.error, set: (obj, value) => { obj.error = value; } }, metadata: _metadata }, _error_initializers, _error_extraInitializers);
+        __esDecorate(null, null, _viewMode_decorators, { kind: "field", name: "viewMode", static: false, private: false, access: { has: obj => "viewMode" in obj, get: obj => obj.viewMode, set: (obj, value) => { obj.viewMode = value; } }, metadata: _metadata }, _viewMode_initializers, _viewMode_extraInitializers);
+        __esDecorate(null, null, _fieldMapping_decorators, { kind: "field", name: "fieldMapping", static: false, private: false, access: { has: obj => "fieldMapping" in obj, get: obj => obj.fieldMapping, set: (obj, value) => { obj.fieldMapping = value; } }, metadata: _metadata }, _fieldMapping_initializers, _fieldMapping_extraInitializers);
+        __esDecorate(null, null, _itemsPerPage_decorators, { kind: "field", name: "itemsPerPage", static: false, private: false, access: { has: obj => "itemsPerPage" in obj, get: obj => obj.itemsPerPage, set: (obj, value) => { obj.itemsPerPage = value; } }, metadata: _metadata }, _itemsPerPage_initializers, _itemsPerPage_extraInitializers);
+        __esDecorate(null, null, _resultClick_decorators, { kind: "field", name: "resultClick", static: false, private: false, access: { has: obj => "resultClick" in obj, get: obj => obj.resultClick, set: (obj, value) => { obj.resultClick = value; } }, metadata: _metadata }, _resultClick_initializers, _resultClick_extraInitializers);
+        __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+        _classThis = _classDescriptor.value;
+        if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        __runInitializers(_classThis, _classExtraInitializers);
+    })();
+    return _classThis;
+})();
+
+/**
+ * QuerySuggestions Component
+ *
+ * Standalone component for displaying query suggestions
+ */
+let QuerySuggestionsComponent = (() => {
+    let _classDecorators = [Component({
+            selector: 'seekora-query-suggestions',
+            template: `
+    <div
+      *ngIf="query.length >= minQueryLength"
+      [style]="getContainerStyle()"
+    >
+      <div
+        *ngIf="showTitle"
+        [style]="getTitleStyle()"
+      >
+        {{ title }}
+      </div>
+
+      <div *ngIf="suggestionsLoading">
+        <ng-content select="[loading]">
+          <div [style]="getLoadingStyle()">
+            Loading suggestions...
+          </div>
+        </ng-content>
+      </div>
+
+      <div *ngIf="!suggestionsLoading && (error || displayedSuggestions.length === 0)">
+        <ng-content select="[empty]">
+          <div [style]="getEmptyStyle()">
+            No suggestions available
+          </div>
+        </ng-content>
+      </div>
+
+      <div *ngIf="!suggestionsLoading && !error && displayedSuggestions.length > 0">
+        <div
+          *ngFor="let suggestion of displayedSuggestions; let i = index"
+          [style]="getSuggestionStyle(i)"
+          (click)="onSuggestionClick(suggestion)"
+          (mouseenter)="selectedIndex = i"
+          (mouseleave)="selectedIndex = -1"
+        >
+          <ng-content select="[suggestion]">
+            <span>{{ suggestion.query }}</span>
+            <span *ngIf="suggestion.count !== undefined" [style]="getCountStyle()">
+              ({{ suggestion.count }})
+            </span>
+          </ng-content>
+        </div>
+      </div>
+    </div>
+  `,
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _query_decorators;
+    let _query_initializers = [];
+    let _query_extraInitializers = [];
+    let _maxSuggestions_decorators;
+    let _maxSuggestions_initializers = [];
+    let _maxSuggestions_extraInitializers = [];
+    let _debounceMs_decorators;
+    let _debounceMs_initializers = [];
+    let _debounceMs_extraInitializers = [];
+    let _minQueryLength_decorators;
+    let _minQueryLength_initializers = [];
+    let _minQueryLength_extraInitializers = [];
+    let _showTitle_decorators;
+    let _showTitle_initializers = [];
+    let _showTitle_extraInitializers = [];
+    let _title_decorators;
+    let _title_initializers = [];
+    let _title_extraInitializers = [];
+    let _className_decorators;
+    let _className_initializers = [];
+    let _className_extraInitializers = [];
+    let _style_decorators;
+    let _style_initializers = [];
+    let _style_extraInitializers = [];
+    let _suggestionClick_decorators;
+    let _suggestionClick_initializers = [];
+    let _suggestionClick_extraInitializers = [];
+    _classThis = class {
+        constructor(searchContext) {
+            this.searchContext = searchContext;
+            this.query = __runInitializers(this, _query_initializers, '');
+            this.maxSuggestions = (__runInitializers(this, _query_extraInitializers), __runInitializers(this, _maxSuggestions_initializers, 10));
+            this.debounceMs = (__runInitializers(this, _maxSuggestions_extraInitializers), __runInitializers(this, _debounceMs_initializers, 300));
+            this.minQueryLength = (__runInitializers(this, _debounceMs_extraInitializers), __runInitializers(this, _minQueryLength_initializers, 2));
+            this.showTitle = (__runInitializers(this, _minQueryLength_extraInitializers), __runInitializers(this, _showTitle_initializers, false));
+            this.title = (__runInitializers(this, _showTitle_extraInitializers), __runInitializers(this, _title_initializers, 'Suggestions'));
+            this.className = (__runInitializers(this, _title_extraInitializers), __runInitializers(this, _className_initializers, void 0));
+            this.style = (__runInitializers(this, _className_extraInitializers), __runInitializers(this, _style_initializers, void 0));
+            this.suggestionClick = (__runInitializers(this, _style_extraInitializers), __runInitializers(this, _suggestionClick_initializers, new EventEmitter()));
+            this.displayedSuggestions = (__runInitializers(this, _suggestionClick_extraInitializers), []);
+            this.suggestionsLoading = false;
+            this.error = null;
+            this.selectedIndex = -1;
+            this.querySubject = new Subject();
+        }
+        ngOnInit() {
+            // Debounce query changes
+            this.subscription = this.querySubject
+                .pipe(debounceTime(this.debounceMs), distinctUntilChanged())
+                .subscribe(query => {
+                if (query.length >= this.minQueryLength) {
+                    this.loadSuggestions(query);
+                }
+                else {
+                    this.displayedSuggestions = [];
+                    this.suggestionsLoading = false;
+                    this.error = null;
+                }
+            });
+            // Initial load if query is provided
+            if (this.query.length >= this.minQueryLength) {
+                this.querySubject.next(this.query);
+            }
+        }
+        ngOnDestroy() {
+            this.subscription?.unsubscribe();
+            this.suggestionsSubscription?.unsubscribe();
+        }
+        ngOnChanges() {
+            if (this.query !== undefined) {
+                this.querySubject.next(this.query);
+            }
+        }
+        loadSuggestions(query) {
+            this.suggestionsLoading = true;
+            this.error = null;
+            this.suggestionsSubscription = this.searchContext.client
+                .getSuggestions(query, this.maxSuggestions)
+                .then((response) => {
+                const rawSuggestions = Array.isArray(response) ? response : [];
+                const suggestionItems = 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,
+                    };
+                });
+                this.displayedSuggestions = suggestionItems.slice(0, this.maxSuggestions);
+                this.suggestionsLoading = false;
+            })
+                .catch((err) => {
+                this.error = err instanceof Error ? err : new Error(String(err));
+                this.suggestionsLoading = false;
+            });
+        }
+        onSuggestionClick(suggestion) {
+            this.suggestionClick.emit(suggestion.query);
+        }
+        get theme() {
+            return this.searchContext.theme;
+        }
+        getContainerStyle() {
+            return {
+                ...this.style,
+            };
+        }
+        getTitleStyle() {
+            return {
+                fontSize: this.theme.typography.fontSize.large,
+                fontWeight: 'bold',
+                marginBottom: this.theme.spacing.medium,
+                color: this.theme.colors.text,
+            };
+        }
+        getLoadingStyle() {
+            return {
+                padding: this.theme.spacing.medium,
+                textAlign: 'center',
+                color: this.theme.colors.text,
+            };
+        }
+        getEmptyStyle() {
+            return {
+                padding: this.theme.spacing.medium,
+                textAlign: 'center',
+                color: this.theme.colors.text,
+                opacity: 0.6,
+            };
+        }
+        getSuggestionStyle(index) {
+            const borderRadius = typeof this.theme.borderRadius === 'string'
+                ? this.theme.borderRadius
+                : this.theme.borderRadius.medium;
+            return {
+                padding: this.theme.spacing.medium,
+                cursor: 'pointer',
+                borderRadius,
+                transition: this.theme.transitions?.fast || '150ms ease-in-out',
+                backgroundColor: index === this.selectedIndex ? this.theme.colors.hover : 'transparent',
+                marginBottom: index < this.displayedSuggestions.length - 1 ? this.theme.spacing.small : 0,
+            };
+        }
+        getCountStyle() {
+            return {
+                opacity: 0.6,
+                marginLeft: this.theme.spacing.small,
+            };
+        }
+    };
+    __setFunctionName(_classThis, "QuerySuggestionsComponent");
+    (() => {
+        const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+        _query_decorators = [Input()];
+        _maxSuggestions_decorators = [Input()];
+        _debounceMs_decorators = [Input()];
+        _minQueryLength_decorators = [Input()];
+        _showTitle_decorators = [Input()];
+        _title_decorators = [Input()];
+        _className_decorators = [Input()];
+        _style_decorators = [Input()];
+        _suggestionClick_decorators = [Output()];
+        __esDecorate(null, null, _query_decorators, { kind: "field", name: "query", static: false, private: false, access: { has: obj => "query" in obj, get: obj => obj.query, set: (obj, value) => { obj.query = value; } }, metadata: _metadata }, _query_initializers, _query_extraInitializers);
+        __esDecorate(null, null, _maxSuggestions_decorators, { kind: "field", name: "maxSuggestions", static: false, private: false, access: { has: obj => "maxSuggestions" in obj, get: obj => obj.maxSuggestions, set: (obj, value) => { obj.maxSuggestions = value; } }, metadata: _metadata }, _maxSuggestions_initializers, _maxSuggestions_extraInitializers);
+        __esDecorate(null, null, _debounceMs_decorators, { kind: "field", name: "debounceMs", static: false, private: false, access: { has: obj => "debounceMs" in obj, get: obj => obj.debounceMs, set: (obj, value) => { obj.debounceMs = value; } }, metadata: _metadata }, _debounceMs_initializers, _debounceMs_extraInitializers);
+        __esDecorate(null, null, _minQueryLength_decorators, { kind: "field", name: "minQueryLength", static: false, private: false, access: { has: obj => "minQueryLength" in obj, get: obj => obj.minQueryLength, set: (obj, value) => { obj.minQueryLength = value; } }, metadata: _metadata }, _minQueryLength_initializers, _minQueryLength_extraInitializers);
+        __esDecorate(null, null, _showTitle_decorators, { kind: "field", name: "showTitle", static: false, private: false, access: { has: obj => "showTitle" in obj, get: obj => obj.showTitle, set: (obj, value) => { obj.showTitle = value; } }, metadata: _metadata }, _showTitle_initializers, _showTitle_extraInitializers);
+        __esDecorate(null, null, _title_decorators, { kind: "field", name: "title", static: false, private: false, access: { has: obj => "title" in obj, get: obj => obj.title, set: (obj, value) => { obj.title = value; } }, metadata: _metadata }, _title_initializers, _title_extraInitializers);
+        __esDecorate(null, null, _className_decorators, { kind: "field", name: "className", static: false, private: false, access: { has: obj => "className" in obj, get: obj => obj.className, set: (obj, value) => { obj.className = value; } }, metadata: _metadata }, _className_initializers, _className_extraInitializers);
+        __esDecorate(null, null, _style_decorators, { kind: "field", name: "style", static: false, private: false, access: { has: obj => "style" in obj, get: obj => obj.style, set: (obj, value) => { obj.style = value; } }, metadata: _metadata }, _style_initializers, _style_extraInitializers);
+        __esDecorate(null, null, _suggestionClick_decorators, { kind: "field", name: "suggestionClick", static: false, private: false, access: { has: obj => "suggestionClick" in obj, get: obj => obj.suggestionClick, set: (obj, value) => { obj.suggestionClick = value; } }, metadata: _metadata }, _suggestionClick_initializers, _suggestionClick_extraInitializers);
+        __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+        _classThis = _classDescriptor.value;
+        if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        __runInitializers(_classThis, _classExtraInitializers);
+    })();
+    return _classThis;
+})();
+
+/**
+ * Stats Component
+ *
+ * Displays search statistics
+ */
+let StatsComponent = (() => {
+    let _classDecorators = [Component({
+            selector: 'seekora-stats',
+            template: `
+    <div *ngIf="loading" [style]="containerStyle">
+      <span [style]="textStyle">Loading...</span>
+    </div>
+    <div *ngIf="!loading && hasResults" [style]="containerStyle">
+      <span [style]="textStyle">
+        {{ resultsText }}
+        <span *ngIf="showProcessingTime && processingTime !== undefined">
+          {{ processingTimeText }}
+        </span>
+      </span>
+    </div>
+  `,
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _results_decorators;
+    let _results_initializers = [];
+    let _results_extraInitializers = [];
+    let _loading_decorators;
+    let _loading_initializers = [];
+    let _loading_extraInitializers = [];
+    let _showProcessingTime_decorators;
+    let _showProcessingTime_initializers = [];
+    let _showProcessingTime_extraInitializers = [];
+    let _showQuery_decorators;
+    let _showQuery_initializers = [];
+    let _showQuery_extraInitializers = [];
+    let _labels_decorators;
+    let _labels_initializers = [];
+    let _labels_extraInitializers = [];
+    _classThis = class {
+        constructor(searchContext) {
+            this.searchContext = searchContext;
+            this.results = __runInitializers(this, _results_initializers, void 0);
+            this.loading = (__runInitializers(this, _results_extraInitializers), __runInitializers(this, _loading_initializers, false));
+            this.showProcessingTime = (__runInitializers(this, _loading_extraInitializers), __runInitializers(this, _showProcessingTime_initializers, true));
+            this.showQuery = (__runInitializers(this, _showProcessingTime_extraInitializers), __runInitializers(this, _showQuery_initializers, false));
+            this.labels = (__runInitializers(this, _showQuery_extraInitializers), __runInitializers(this, _labels_initializers, void 0));
+            __runInitializers(this, _labels_extraInitializers);
+            this.searchContext = searchContext;
+        }
+        get totalResults() {
+            if (!this.results)
+                return 0;
+            return this.results.totalResults || this.results.data?.total_results || 0;
+        }
+        get processingTime() {
+            if (!this.results)
+                return undefined;
+            return this.results.processingTimeMs || this.results.data?.processing_time_ms;
+        }
+        get hasResults() {
+            return this.totalResults > 0;
+        }
+        get resultsText() {
+            const defaultLabel = (total) => `${total} results found`;
+            const labelFn = this.labels?.resultsFound || defaultLabel;
+            return labelFn(this.totalResults);
+        }
+        get processingTimeText() {
+            if (this.processingTime === undefined)
+                return '';
+            const defaultLabel = (time) => `in ${time} ms`;
+            const labelFn = this.labels?.processingTime || defaultLabel;
+            return ` ${labelFn(this.processingTime)}`;
+        }
+        get containerStyle() {
+            return {};
+        }
+        get textStyle() {
+            const theme = this.searchContext.theme;
+            return {
+                color: theme.colors.text,
+                fontSize: theme.typography.fontSize.medium,
+            };
+        }
+    };
+    __setFunctionName(_classThis, "StatsComponent");
+    (() => {
+        const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+        _results_decorators = [Input()];
+        _loading_decorators = [Input()];
+        _showProcessingTime_decorators = [Input()];
+        _showQuery_decorators = [Input()];
+        _labels_decorators = [Input()];
+        __esDecorate(null, null, _results_decorators, { kind: "field", name: "results", static: false, private: false, access: { has: obj => "results" in obj, get: obj => obj.results, set: (obj, value) => { obj.results = value; } }, metadata: _metadata }, _results_initializers, _results_extraInitializers);
+        __esDecorate(null, null, _loading_decorators, { kind: "field", name: "loading", static: false, private: false, access: { has: obj => "loading" in obj, get: obj => obj.loading, set: (obj, value) => { obj.loading = value; } }, metadata: _metadata }, _loading_initializers, _loading_extraInitializers);
+        __esDecorate(null, null, _showProcessingTime_decorators, { kind: "field", name: "showProcessingTime", static: false, private: false, access: { has: obj => "showProcessingTime" in obj, get: obj => obj.showProcessingTime, set: (obj, value) => { obj.showProcessingTime = value; } }, metadata: _metadata }, _showProcessingTime_initializers, _showProcessingTime_extraInitializers);
+        __esDecorate(null, null, _showQuery_decorators, { kind: "field", name: "showQuery", static: false, private: false, access: { has: obj => "showQuery" in obj, get: obj => obj.showQuery, set: (obj, value) => { obj.showQuery = value; } }, metadata: _metadata }, _showQuery_initializers, _showQuery_extraInitializers);
+        __esDecorate(null, null, _labels_decorators, { kind: "field", name: "labels", static: false, private: false, access: { has: obj => "labels" in obj, get: obj => obj.labels, set: (obj, value) => { obj.labels = value; } }, metadata: _metadata }, _labels_initializers, _labels_extraInitializers);
+        __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+        _classThis = _classDescriptor.value;
+        if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        __runInitializers(_classThis, _classExtraInitializers);
+    })();
+    return _classThis;
+})();
+
+/**
+ * Pagination Component
+ *
+ * Displays pagination controls for search results
+ */
+let PaginationComponent = (() => {
+    let _classDecorators = [Component({
+            selector: 'seekora-pagination',
+            template: `
+    <div *ngIf="totalPages > 1" [style]="containerStyle">
+      <button
+        *ngIf="showFirstLast"
+        [disabled]="currentPage === 1"
+        (click)="handlePageChange(1)"
+        [style]="getButtonStyle(1)"
+      >
+        First
+      </button>
+
+      <button
+        *ngIf="showPrevNext"
+        [disabled]="currentPage === 1"
+        (click)="handlePageChange(currentPage - 1)"
+        [style]="getButtonStyle(currentPage - 1)"
+      >
+        Previous
+      </button>
+
+      <button
+        *ngFor="let page of visiblePages"
+        [disabled]="page === currentPage"
+        (click)="handlePageChange(page)"
+        [style]="getButtonStyle(page, page === currentPage)"
+      >
+        {{ page }}
+      </button>
+
+      <button
+        *ngIf="showPrevNext"
+        [disabled]="currentPage === totalPages"
+        (click)="handlePageChange(currentPage + 1)"
+        [style]="getButtonStyle(currentPage + 1)"
+      >
+        Next
+      </button>
+
+      <button
+        *ngIf="showFirstLast"
+        [disabled]="currentPage === totalPages"
+        (click)="handlePageChange(totalPages)"
+        [style]="getButtonStyle(totalPages)"
+      >
+        Last
+      </button>
+    </div>
+  `,
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _results_decorators;
+    let _results_initializers = [];
+    let _results_extraInitializers = [];
+    let _currentPage_decorators;
+    let _currentPage_initializers = [];
+    let _currentPage_extraInitializers = [];
+    let _itemsPerPage_decorators;
+    let _itemsPerPage_initializers = [];
+    let _itemsPerPage_extraInitializers = [];
+    let _maxVisiblePages_decorators;
+    let _maxVisiblePages_initializers = [];
+    let _maxVisiblePages_extraInitializers = [];
+    let _showFirstLast_decorators;
+    let _showFirstLast_initializers = [];
+    let _showFirstLast_extraInitializers = [];
+    let _showPrevNext_decorators;
+    let _showPrevNext_initializers = [];
+    let _showPrevNext_extraInitializers = [];
+    let _pageChange_decorators;
+    let _pageChange_initializers = [];
+    let _pageChange_extraInitializers = [];
+    _classThis = class {
+        constructor(searchContext) {
+            this.searchContext = searchContext;
+            this.results = __runInitializers(this, _results_initializers, void 0);
+            this.currentPage = (__runInitializers(this, _results_extraInitializers), __runInitializers(this, _currentPage_initializers, 1));
+            this.itemsPerPage = (__runInitializers(this, _currentPage_extraInitializers), __runInitializers(this, _itemsPerPage_initializers, 10));
+            this.maxVisiblePages = (__runInitializers(this, _itemsPerPage_extraInitializers), __runInitializers(this, _maxVisiblePages_initializers, 5));
+            this.showFirstLast = (__runInitializers(this, _maxVisiblePages_extraInitializers), __runInitializers(this, _showFirstLast_initializers, false));
+            this.showPrevNext = (__runInitializers(this, _showFirstLast_extraInitializers), __runInitializers(this, _showPrevNext_initializers, true));
+            this.pageChange = (__runInitializers(this, _showPrevNext_extraInitializers), __runInitializers(this, _pageChange_initializers, new EventEmitter()));
+            __runInitializers(this, _pageChange_extraInitializers);
+            this.searchContext = searchContext;
+        }
+        get totalResults() {
+            if (!this.results)
+                return 0;
+            return this.results.totalResults || this.results.data?.total_results || 0;
+        }
+        get totalPages() {
+            return Math.ceil(this.totalResults / this.itemsPerPage);
+        }
+        get visiblePages() {
+            const pages = [];
+            const maxVisible = this.maxVisiblePages || 5;
+            const half = Math.floor(maxVisible / 2);
+            let start = Math.max(1, this.currentPage - half);
+            let end = Math.min(this.totalPages, start + maxVisible - 1);
+            if (end - start < maxVisible - 1) {
+                start = Math.max(1, end - maxVisible + 1);
+            }
+            for (let i = start; i <= end; i++) {
+                pages.push(i);
+            }
+            return pages;
+        }
+        handlePageChange(page) {
+            if (page < 1 || page > this.totalPages)
+                return;
+            this.pageChange.emit(page);
+        }
+        get containerStyle() {
+            const theme = this.searchContext.theme;
+            return {
+                display: 'flex',
+                gap: theme.spacing.small,
+                justifyContent: 'center',
+                alignItems: 'center',
+            };
+        }
+        getButtonStyle(page, isActive = false) {
+            const theme = this.searchContext.theme;
+            return {
+                padding: `${theme.spacing.small} ${theme.spacing.medium}`,
+                border: `1px solid ${theme.colors.border}`,
+                borderRadius: typeof theme.borderRadius === 'string'
+                    ? theme.borderRadius
+                    : theme.borderRadius.medium,
+                backgroundColor: isActive ? theme.colors.primary : theme.colors.background,
+                color: isActive ? '#fff' : theme.colors.text,
+                cursor: 'pointer',
+                fontSize: theme.typography.fontSize.small,
+            };
+        }
+    };
+    __setFunctionName(_classThis, "PaginationComponent");
+    (() => {
+        const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+        _results_decorators = [Input()];
+        _currentPage_decorators = [Input()];
+        _itemsPerPage_decorators = [Input()];
+        _maxVisiblePages_decorators = [Input()];
+        _showFirstLast_decorators = [Input()];
+        _showPrevNext_decorators = [Input()];
+        _pageChange_decorators = [Output()];
+        __esDecorate(null, null, _results_decorators, { kind: "field", name: "results", static: false, private: false, access: { has: obj => "results" in obj, get: obj => obj.results, set: (obj, value) => { obj.results = value; } }, metadata: _metadata }, _results_initializers, _results_extraInitializers);
+        __esDecorate(null, null, _currentPage_decorators, { kind: "field", name: "currentPage", static: false, private: false, access: { has: obj => "currentPage" in obj, get: obj => obj.currentPage, set: (obj, value) => { obj.currentPage = value; } }, metadata: _metadata }, _currentPage_initializers, _currentPage_extraInitializers);
+        __esDecorate(null, null, _itemsPerPage_decorators, { kind: "field", name: "itemsPerPage", static: false, private: false, access: { has: obj => "itemsPerPage" in obj, get: obj => obj.itemsPerPage, set: (obj, value) => { obj.itemsPerPage = value; } }, metadata: _metadata }, _itemsPerPage_initializers, _itemsPerPage_extraInitializers);
+        __esDecorate(null, null, _maxVisiblePages_decorators, { kind: "field", name: "maxVisiblePages", static: false, private: false, access: { has: obj => "maxVisiblePages" in obj, get: obj => obj.maxVisiblePages, set: (obj, value) => { obj.maxVisiblePages = value; } }, metadata: _metadata }, _maxVisiblePages_initializers, _maxVisiblePages_extraInitializers);
+        __esDecorate(null, null, _showFirstLast_decorators, { kind: "field", name: "showFirstLast", static: false, private: false, access: { has: obj => "showFirstLast" in obj, get: obj => obj.showFirstLast, set: (obj, value) => { obj.showFirstLast = value; } }, metadata: _metadata }, _showFirstLast_initializers, _showFirstLast_extraInitializers);
+        __esDecorate(null, null, _showPrevNext_decorators, { kind: "field", name: "showPrevNext", static: false, private: false, access: { has: obj => "showPrevNext" in obj, get: obj => obj.showPrevNext, set: (obj, value) => { obj.showPrevNext = value; } }, metadata: _metadata }, _showPrevNext_initializers, _showPrevNext_extraInitializers);
+        __esDecorate(null, null, _pageChange_decorators, { kind: "field", name: "pageChange", static: false, private: false, access: { has: obj => "pageChange" in obj, get: obj => obj.pageChange, set: (obj, value) => { obj.pageChange = value; } }, metadata: _metadata }, _pageChange_initializers, _pageChange_extraInitializers);
+        __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+        _classThis = _classDescriptor.value;
+        if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        __runInitializers(_classThis, _classExtraInitializers);
+    })();
+    return _classThis;
+})();
+
+/**
+ * SortBy Component
+ *
+ * Displays sort options for search results
+ */
+let SortByComponent = (() => {
+    let _classDecorators = [Component({
+            selector: 'seekora-sort-by',
+            template: `
+    <div [style]="containerStyle">
+      <label *ngIf="label" [style]="labelStyle">{{ label }}</label>
+      <select
+        [value]="value"
+        (change)="handleChange($event)"
+        [style]="selectStyle"
+      >
+        <option
+          *ngFor="let option of options"
+          [value]="option.value"
+        >
+          {{ option.label }}
+        </option>
+      </select>
+    </div>
+  `,
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _options_decorators;
+    let _options_initializers = [];
+    let _options_extraInitializers = [];
+    let _value_decorators;
+    let _value_initializers = [];
+    let _value_extraInitializers = [];
+    let _label_decorators;
+    let _label_initializers = [];
+    let _label_extraInitializers = [];
+    let _sortChange_decorators;
+    let _sortChange_initializers = [];
+    let _sortChange_extraInitializers = [];
+    _classThis = class {
+        constructor(searchContext) {
+            this.searchContext = searchContext;
+            this.options = __runInitializers(this, _options_initializers, []);
+            this.value = (__runInitializers(this, _options_extraInitializers), __runInitializers(this, _value_initializers, ''));
+            this.label = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _label_initializers, void 0));
+            this.sortChange = (__runInitializers(this, _label_extraInitializers), __runInitializers(this, _sortChange_initializers, new EventEmitter()));
+            __runInitializers(this, _sortChange_extraInitializers);
+            this.searchContext = searchContext;
+        }
+        handleChange(event) {
+            const target = event.target;
+            this.sortChange.emit(target.value);
+        }
+        get containerStyle() {
+            const theme = this.searchContext.theme;
+            return {
+                display: 'flex',
+                alignItems: 'center',
+                gap: theme.spacing.small,
+            };
+        }
+        get labelStyle() {
+            const theme = this.searchContext.theme;
+            return {
+                fontSize: theme.typography.fontSize.medium,
+                color: theme.colors.text,
+                fontWeight: theme.typography.fontWeight?.medium || 500,
+            };
+        }
+        get selectStyle() {
+            const theme = this.searchContext.theme;
+            return {
+                padding: theme.spacing.small,
+                fontSize: theme.typography.fontSize.medium,
+                border: `1px solid ${theme.colors.border}`,
+                borderRadius: typeof theme.borderRadius === 'string'
+                    ? theme.borderRadius
+                    : theme.borderRadius.medium,
+                backgroundColor: theme.colors.background,
+                color: theme.colors.text,
+                cursor: 'pointer',
+                outline: 'none',
+            };
+        }
+    };
+    __setFunctionName(_classThis, "SortByComponent");
+    (() => {
+        const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+        _options_decorators = [Input()];
+        _value_decorators = [Input()];
+        _label_decorators = [Input()];
+        _sortChange_decorators = [Output()];
+        __esDecorate(null, null, _options_decorators, { kind: "field", name: "options", static: false, private: false, access: { has: obj => "options" in obj, get: obj => obj.options, set: (obj, value) => { obj.options = value; } }, metadata: _metadata }, _options_initializers, _options_extraInitializers);
+        __esDecorate(null, null, _value_decorators, { kind: "field", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
+        __esDecorate(null, null, _label_decorators, { kind: "field", name: "label", static: false, private: false, access: { has: obj => "label" in obj, get: obj => obj.label, set: (obj, value) => { obj.label = value; } }, metadata: _metadata }, _label_initializers, _label_extraInitializers);
+        __esDecorate(null, null, _sortChange_decorators, { kind: "field", name: "sortChange", static: false, private: false, access: { has: obj => "sortChange" in obj, get: obj => obj.sortChange, set: (obj, value) => { obj.sortChange = value; } }, metadata: _metadata }, _sortChange_initializers, _sortChange_extraInitializers);
+        __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+        _classThis = _classDescriptor.value;
+        if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        __runInitializers(_classThis, _classExtraInitializers);
+    })();
+    return _classThis;
+})();
+
+/**
+ * Facets Component
+ *
+ * Displays facet filters for search results
+ */
+let FacetsComponent = (() => {
+    let _classDecorators = [Component({
+            selector: 'seekora-facets',
+            template: `
+    <div
+      *ngFor="let facet of facets"
+      [style]="containerStyle"
+    >
+      <h3 [style]="titleStyle">{{ facet.field_name }}</h3>
+      <div
+        *ngFor="let count of visibleCounts(facet); let i = index"
+        [style]="getFacetItemStyle(facet.field_name, count.value)"
+        (click)="handleFacetClick(facet.field_name, count.value)"
+      >
+        <input
+          type="checkbox"
+          [checked]="isSelected(facet.field_name, count.value)"
+          (change)="handleFacetChange(facet.field_name, count.value, !isSelected(facet.field_name, count.value))"
+          [style]="checkboxStyle"
+        />
+        <span [style]="labelStyle">{{ count.value }}</span>
+        <span [style]="countStyle">({{ count.count }})</span>
+      </div>
+      <button
+        *ngIf="facet.counts.length > maxItems"
+        (click)="toggleShowMore(facet.field_name)"
+        [style]="showMoreStyle"
+      >
+        {{ getShowMoreLabel(facet) }}
+      </button>
+    </div>
+  `,
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _results_decorators;
+    let _results_initializers = [];
+    let _results_extraInitializers = [];
+    let _maxItems_decorators;
+    let _maxItems_initializers = [];
+    let _maxItems_extraInitializers = [];
+    let _showMore_decorators;
+    let _showMore_initializers = [];
+    let _showMore_extraInitializers = [];
+    let _selectedFacets_decorators;
+    let _selectedFacets_initializers = [];
+    let _selectedFacets_extraInitializers = [];
+    let _facetChange_decorators;
+    let _facetChange_initializers = [];
+    let _facetChange_extraInitializers = [];
+    _classThis = class {
+        constructor(searchContext) {
+            this.searchContext = searchContext;
+            this.results = __runInitializers(this, _results_initializers, void 0);
+            this.maxItems = (__runInitializers(this, _results_extraInitializers), __runInitializers(this, _maxItems_initializers, 5));
+            this.showMore = (__runInitializers(this, _maxItems_extraInitializers), __runInitializers(this, _showMore_initializers, true));
+            this.selectedFacets = (__runInitializers(this, _showMore_extraInitializers), __runInitializers(this, _selectedFacets_initializers, {}));
+            this.facetChange = (__runInitializers(this, _selectedFacets_extraInitializers), __runInitializers(this, _facetChange_initializers, new EventEmitter()));
+            this.expandedFacets = (__runInitializers(this, _facetChange_extraInitializers), {});
+        }
+        get facets() {
+            if (!this.results)
+                return [];
+            const facetsData = this.results.facets || this.results.data?.facets || [];
+            return Array.isArray(facetsData) ? facetsData : [];
+        }
+        visibleCounts(facet) {
+            const isExpanded = this.expandedFacets[facet.field_name];
+            if (isExpanded || !this.showMore) {
+                return facet.counts;
+            }
+            return facet.counts.slice(0, this.maxItems);
+        }
+        isSelected(field, value) {
+            const selected = this.selectedFacets?.[field] || [];
+            return selected.includes(value);
+        }
+        toggleShowMore(field) {
+            this.expandedFacets[field] = !this.expandedFacets[field];
+        }
+        handleFacetClick(field, value) {
+            this.handleFacetChange(field, value, !this.isSelected(field, value));
+        }
+        handleFacetChange(field, value, selected) {
+            this.facetChange.emit({ field, value, selected });
+        }
+        get containerStyle() {
+            const theme = this.searchContext.theme;
+            return {
+                marginBottom: theme.spacing.large,
+            };
+        }
+        get titleStyle() {
+            const theme = this.searchContext.theme;
+            return {
+                fontSize: theme.typography.fontSize.medium,
+                fontWeight: theme.typography.fontWeight?.bold || 700,
+                marginBottom: theme.spacing.small,
+                color: theme.colors.text,
+            };
+        }
+        getFacetItemStyle(field, value) {
+            const theme = this.searchContext.theme;
+            return {
+                display: 'flex',
+                alignItems: 'center',
+                gap: theme.spacing.small,
+                padding: theme.spacing.small,
+                cursor: 'pointer',
+                backgroundColor: this.isSelected(field, value) ? theme.colors.hover : 'transparent',
+                borderRadius: typeof theme.borderRadius === 'string'
+                    ? theme.borderRadius
+                    : theme.borderRadius.small,
+            };
+        }
+        get checkboxStyle() {
+            return {
+                cursor: 'pointer',
+            };
+        }
+        get labelStyle() {
+            const theme = this.searchContext.theme;
+            return {
+                flex: 1,
+                fontSize: theme.typography.fontSize.small,
+                color: theme.colors.text,
+            };
+        }
+        get countStyle() {
+            const theme = this.searchContext.theme;
+            return {
+                fontSize: theme.typography.fontSize.small,
+                color: theme.colors.textSecondary || theme.colors.text,
+                opacity: 0.7,
+            };
+        }
+        get showMoreStyle() {
+            const theme = this.searchContext.theme;
+            return {
+                marginTop: theme.spacing.small,
+                padding: theme.spacing.small,
+                backgroundColor: 'transparent',
+                border: 'none',
+                color: theme.colors.primary,
+                cursor: 'pointer',
+                fontSize: theme.typography.fontSize.small,
+                textDecoration: 'underline',
+            };
+        }
+        isExpanded(field) {
+            return this.expandedFacets[field] || false;
+        }
+        getShowMoreLabel(facet) {
+            if (this.isExpanded(facet.field_name)) {
+                return 'Show Less';
+            }
+            return `Show More (${facet.counts.length - this.maxItems})`;
+        }
+    };
+    __setFunctionName(_classThis, "FacetsComponent");
+    (() => {
+        const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+        _results_decorators = [Input()];
+        _maxItems_decorators = [Input()];
+        _showMore_decorators = [Input()];
+        _selectedFacets_decorators = [Input()];
+        _facetChange_decorators = [Output()];
+        __esDecorate(null, null, _results_decorators, { kind: "field", name: "results", static: false, private: false, access: { has: obj => "results" in obj, get: obj => obj.results, set: (obj, value) => { obj.results = value; } }, metadata: _metadata }, _results_initializers, _results_extraInitializers);
+        __esDecorate(null, null, _maxItems_decorators, { kind: "field", name: "maxItems", static: false, private: false, access: { has: obj => "maxItems" in obj, get: obj => obj.maxItems, set: (obj, value) => { obj.maxItems = value; } }, metadata: _metadata }, _maxItems_initializers, _maxItems_extraInitializers);
+        __esDecorate(null, null, _showMore_decorators, { kind: "field", name: "showMore", static: false, private: false, access: { has: obj => "showMore" in obj, get: obj => obj.showMore, set: (obj, value) => { obj.showMore = value; } }, metadata: _metadata }, _showMore_initializers, _showMore_extraInitializers);
+        __esDecorate(null, null, _selectedFacets_decorators, { kind: "field", name: "selectedFacets", static: false, private: false, access: { has: obj => "selectedFacets" in obj, get: obj => obj.selectedFacets, set: (obj, value) => { obj.selectedFacets = value; } }, metadata: _metadata }, _selectedFacets_initializers, _selectedFacets_extraInitializers);
+        __esDecorate(null, null, _facetChange_decorators, { kind: "field", name: "facetChange", static: false, private: false, access: { has: obj => "facetChange" in obj, get: obj => obj.facetChange, set: (obj, value) => { obj.facetChange = value; } }, metadata: _metadata }, _facetChange_initializers, _facetChange_extraInitializers);
+        __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+        _classThis = _classDescriptor.value;
+        if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        __runInitializers(_classThis, _classExtraInitializers);
+    })();
+    return _classThis;
+})();
+
+/**
+ * CurrentRefinements Component
+ *
+ * Displays currently active filters/refinements with ability to clear them
+ */
+let CurrentRefinementsComponent = (() => {
+    let _classDecorators = [Component({
+            selector: 'seekora-current-refinements',
+            template: `
+    <div *ngIf="refinements.length > 0" [style]="containerStyle">
+      <div *ngIf="showLabel" [style]="labelStyle">{{ label }}</div>
+      <div [style]="refinementsStyle">
+        <div
+          *ngFor="let refinement of refinements; let i = index"
+          [style]="refinementStyle"
+        >
+          <span [style]="refinementTextStyle">
+            {{ getRefinementLabel(refinement) }}
+          </span>
+          <button
+            (click)="handleClear(refinement.field, refinement.value)"
+            [style]="clearButtonStyle"
+          >
+            ×
+          </button>
+        </div>
+        <button
+          *ngIf="showClearAll"
+          (click)="handleClearAll()"
+          [style]="clearAllStyle"
+        >
+          Clear All
+        </button>
+      </div>
+    </div>
+  `,
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _refinements_decorators;
+    let _refinements_initializers = [];
+    let _refinements_extraInitializers = [];
+    let _showLabel_decorators;
+    let _showLabel_initializers = [];
+    let _showLabel_extraInitializers = [];
+    let _label_decorators;
+    let _label_initializers = [];
+    let _label_extraInitializers = [];
+    let _showClearAll_decorators;
+    let _showClearAll_initializers = [];
+    let _showClearAll_extraInitializers = [];
+    let _refinementClear_decorators;
+    let _refinementClear_initializers = [];
+    let _refinementClear_extraInitializers = [];
+    let _clearAll_decorators;
+    let _clearAll_initializers = [];
+    let _clearAll_extraInitializers = [];
+    _classThis = class {
+        constructor(searchContext) {
+            this.searchContext = searchContext;
+            this.refinements = __runInitializers(this, _refinements_initializers, []);
+            this.showLabel = (__runInitializers(this, _refinements_extraInitializers), __runInitializers(this, _showLabel_initializers, true));
+            this.label = (__runInitializers(this, _showLabel_extraInitializers), __runInitializers(this, _label_initializers, 'Active Filters'));
+            this.showClearAll = (__runInitializers(this, _label_extraInitializers), __runInitializers(this, _showClearAll_initializers, true));
+            this.refinementClear = (__runInitializers(this, _showClearAll_extraInitializers), __runInitializers(this, _refinementClear_initializers, new EventEmitter()));
+            this.clearAll = (__runInitializers(this, _refinementClear_extraInitializers), __runInitializers(this, _clearAll_initializers, new EventEmitter()));
+            __runInitializers(this, _clearAll_extraInitializers);
+            this.searchContext = searchContext;
+        }
+        getRefinementLabel(refinement) {
+            if (refinement.label)
+                return refinement.label;
+            return `${refinement.field}: ${refinement.value}`;
+        }
+        handleClear(field, value) {
+            this.refinementClear.emit({ field, value });
+        }
+        handleClearAll() {
+            this.clearAll.emit();
+        }
+        get containerStyle() {
+            const theme = this.searchContext.theme;
+            return {
+                marginBottom: theme.spacing.medium,
+            };
+        }
+        get labelStyle() {
+            const theme = this.searchContext.theme;
+            return {
+                fontSize: theme.typography.fontSize.medium,
+                fontWeight: theme.typography.fontWeight?.semibold || 600,
+                marginBottom: theme.spacing.small,
+                color: theme.colors.text,
+            };
+        }
+        get refinementsStyle() {
+            const theme = this.searchContext.theme;
+            return {
+                display: 'flex',
+                flexWrap: 'wrap',
+                gap: theme.spacing.small,
+                alignItems: 'center',
+            };
+        }
+        get refinementStyle() {
+            const theme = this.searchContext.theme;
+            return {
+                display: 'flex',
+                alignItems: 'center',
+                gap: theme.spacing.small,
+                padding: `${theme.spacing.small} ${theme.spacing.medium}`,
+                backgroundColor: theme.colors.hover,
+                border: `1px solid ${theme.colors.border}`,
+                borderRadius: typeof theme.borderRadius === 'string'
+                    ? theme.borderRadius
+                    : theme.borderRadius.medium,
+            };
+        }
+        get refinementTextStyle() {
+            const theme = this.searchContext.theme;
+            return {
+                fontSize: theme.typography.fontSize.small,
+                color: theme.colors.text,
+            };
+        }
+        get clearButtonStyle() {
+            const theme = this.searchContext.theme;
+            return {
+                backgroundColor: 'transparent',
+                border: 'none',
+                color: theme.colors.text,
+                cursor: 'pointer',
+                fontSize: theme.typography.fontSize.large,
+                lineHeight: 1,
+                padding: 0,
+                marginLeft: theme.spacing.small,
+            };
+        }
+        get clearAllStyle() {
+            const theme = this.searchContext.theme;
+            return {
+                padding: `${theme.spacing.small} ${theme.spacing.medium}`,
+                backgroundColor: theme.colors.primary,
+                color: '#fff',
+                border: 'none',
+                borderRadius: typeof theme.borderRadius === 'string'
+                    ? theme.borderRadius
+                    : theme.borderRadius.medium,
+                cursor: 'pointer',
+                fontSize: theme.typography.fontSize.small,
+                fontWeight: theme.typography.fontWeight?.medium || 500,
+            };
+        }
+    };
+    __setFunctionName(_classThis, "CurrentRefinementsComponent");
+    (() => {
+        const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+        _refinements_decorators = [Input()];
+        _showLabel_decorators = [Input()];
+        _label_decorators = [Input()];
+        _showClearAll_decorators = [Input()];
+        _refinementClear_decorators = [Output()];
+        _clearAll_decorators = [Output()];
+        __esDecorate(null, null, _refinements_decorators, { kind: "field", name: "refinements", static: false, private: false, access: { has: obj => "refinements" in obj, get: obj => obj.refinements, set: (obj, value) => { obj.refinements = value; } }, metadata: _metadata }, _refinements_initializers, _refinements_extraInitializers);
+        __esDecorate(null, null, _showLabel_decorators, { kind: "field", name: "showLabel", static: false, private: false, access: { has: obj => "showLabel" in obj, get: obj => obj.showLabel, set: (obj, value) => { obj.showLabel = value; } }, metadata: _metadata }, _showLabel_initializers, _showLabel_extraInitializers);
+        __esDecorate(null, null, _label_decorators, { kind: "field", name: "label", static: false, private: false, access: { has: obj => "label" in obj, get: obj => obj.label, set: (obj, value) => { obj.label = value; } }, metadata: _metadata }, _label_initializers, _label_extraInitializers);
+        __esDecorate(null, null, _showClearAll_decorators, { kind: "field", name: "showClearAll", static: false, private: false, access: { has: obj => "showClearAll" in obj, get: obj => obj.showClearAll, set: (obj, value) => { obj.showClearAll = value; } }, metadata: _metadata }, _showClearAll_initializers, _showClearAll_extraInitializers);
+        __esDecorate(null, null, _refinementClear_decorators, { kind: "field", name: "refinementClear", static: false, private: false, access: { has: obj => "refinementClear" in obj, get: obj => obj.refinementClear, set: (obj, value) => { obj.refinementClear = value; } }, metadata: _metadata }, _refinementClear_initializers, _refinementClear_extraInitializers);
+        __esDecorate(null, null, _clearAll_decorators, { kind: "field", name: "clearAll", static: false, private: false, access: { has: obj => "clearAll" in obj, get: obj => obj.clearAll, set: (obj, value) => { obj.clearAll = value; } }, metadata: _metadata }, _clearAll_initializers, _clearAll_extraInitializers);
+        __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+        _classThis = _classDescriptor.value;
+        if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        __runInitializers(_classThis, _classExtraInitializers);
+    })();
+    return _classThis;
+})();
+
+/**
+ * RangeInput Component
+ *
+ * Displays a range input for filtering numeric values (e.g., price range)
+ */
+let RangeInputComponent = (() => {
+    let _classDecorators = [Component({
+            selector: 'seekora-range-input',
+            template: `
+    <div [style]="getContainerStyle()">
+      <label *ngIf="label" [style]="getLabelStyle()">
+        {{ label }}
+      </label>
+      <div [style]="getInputGroupStyle()">
+        <input
+          type="number"
+          [min]="min"
+          [max]="max"
+          [step]="step"
+          [value]="currentMin !== undefined ? currentMin : ''"
+          (input)="onMinChange($event)"
+          [placeholder]="placeholder?.min || 'Min'"
+          [style]="getInputStyle()"
+        />
+        <span [style]="getSeparatorStyle()">to</span>
+        <input
+          type="number"
+          [min]="min"
+          [max]="max"
+          [step]="step"
+          [value]="currentMax !== undefined ? currentMax : ''"
+          (input)="onMaxChange($event)"
+          [placeholder]="placeholder?.max || 'Max'"
+          [style]="getInputStyle()"
+        />
+        <button
+          *ngIf="showApplyButton"
+          type="button"
+          (click)="onApply()"
+          [style]="getApplyButtonStyle()"
+        >
+          Apply
+        </button>
+        <button
+          *ngIf="hasValue()"
+          type="button"
+          (click)="onReset()"
+          [style]="getResetButtonStyle()"
+        >
+          Reset
+        </button>
+      </div>
+    </div>
+  `,
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _field_decorators;
+    let _field_initializers = [];
+    let _field_extraInitializers = [];
+    let _label_decorators;
+    let _label_initializers = [];
+    let _label_extraInitializers = [];
+    let _min_decorators;
+    let _min_initializers = [];
+    let _min_extraInitializers = [];
+    let _max_decorators;
+    let _max_initializers = [];
+    let _max_extraInitializers = [];
+    let _step_decorators;
+    let _step_initializers = [];
+    let _step_extraInitializers = [];
+    let _currentMin_decorators;
+    let _currentMin_initializers = [];
+    let _currentMin_extraInitializers = [];
+    let _currentMax_decorators;
+    let _currentMax_initializers = [];
+    let _currentMax_extraInitializers = [];
+    let _showApplyButton_decorators;
+    let _showApplyButton_initializers = [];
+    let _showApplyButton_extraInitializers = [];
+    let _placeholder_decorators;
+    let _placeholder_initializers = [];
+    let _placeholder_extraInitializers = [];
+    let _className_decorators;
+    let _className_initializers = [];
+    let _className_extraInitializers = [];
+    let _style_decorators;
+    let _style_initializers = [];
+    let _style_extraInitializers = [];
+    let _rangeChange_decorators;
+    let _rangeChange_initializers = [];
+    let _rangeChange_extraInitializers = [];
+    _classThis = class {
+        constructor(searchContext) {
+            this.searchContext = searchContext;
+            this.field = __runInitializers(this, _field_initializers, void 0);
+            this.label = (__runInitializers(this, _field_extraInitializers), __runInitializers(this, _label_initializers, void 0));
+            this.min = (__runInitializers(this, _label_extraInitializers), __runInitializers(this, _min_initializers, void 0));
+            this.max = (__runInitializers(this, _min_extraInitializers), __runInitializers(this, _max_initializers, void 0));
+            this.step = (__runInitializers(this, _max_extraInitializers), __runInitializers(this, _step_initializers, 1));
+            this.currentMin = (__runInitializers(this, _step_extraInitializers), __runInitializers(this, _currentMin_initializers, void 0));
+            this.currentMax = (__runInitializers(this, _currentMin_extraInitializers), __runInitializers(this, _currentMax_initializers, void 0));
+            this.showApplyButton = (__runInitializers(this, _currentMax_extraInitializers), __runInitializers(this, _showApplyButton_initializers, true));
+            this.placeholder = (__runInitializers(this, _showApplyButton_extraInitializers), __runInitializers(this, _placeholder_initializers, void 0));
+            this.className = (__runInitializers(this, _placeholder_extraInitializers), __runInitializers(this, _className_initializers, void 0));
+            this.style = (__runInitializers(this, _className_extraInitializers), __runInitializers(this, _style_initializers, void 0));
+            this.rangeChange = (__runInitializers(this, _style_extraInitializers), __runInitializers(this, _rangeChange_initializers, new EventEmitter()));
+            this.internalMin = __runInitializers(this, _rangeChange_extraInitializers);
+        }
+        ngOnInit() {
+            this.internalMin = this.currentMin;
+            this.internalMax = this.currentMax;
+            this.appliedMin = this.currentMin;
+            this.appliedMax = this.currentMax;
+        }
+        get theme() {
+            return this.searchContext.theme;
+        }
+        get effectiveMin() {
+            return this.currentMin !== undefined ? this.currentMin : this.internalMin;
+        }
+        get effectiveMax() {
+            return this.currentMax !== undefined ? this.currentMax : this.internalMax;
+        }
+        hasValue() {
+            return this.effectiveMin !== undefined || this.effectiveMax !== undefined;
+        }
+        onMinChange(event) {
+            const target = event.target;
+            const value = target.value === '' ? undefined : parseFloat(target.value);
+            this.internalMin = value;
+            if (!this.showApplyButton) {
+                this.rangeChange.emit({ min: value, max: this.effectiveMax });
+            }
+        }
+        onMaxChange(event) {
+            const target = event.target;
+            const value = target.value === '' ? undefined : parseFloat(target.value);
+            this.internalMax = value;
+            if (!this.showApplyButton) {
+                this.rangeChange.emit({ min: this.effectiveMin, max: value });
+            }
+        }
+        onApply() {
+            this.appliedMin = this.internalMin;
+            this.appliedMax = this.internalMax;
+            this.rangeChange.emit({ min: this.internalMin, max: this.internalMax });
+        }
+        onReset() {
+            this.internalMin = undefined;
+            this.internalMax = undefined;
+            this.appliedMin = undefined;
+            this.appliedMax = undefined;
+            this.rangeChange.emit({ min: undefined, max: undefined });
+        }
+        getContainerStyle() {
+            return {
+                ...this.style,
+            };
+        }
+        getLabelStyle() {
+            return {
+                fontSize: this.theme.typography.fontSize.medium,
+                color: this.theme.colors.text,
+                fontWeight: this.theme.typography.fontWeight?.medium || 500,
+                marginBottom: this.theme.spacing.small,
+                display: 'block',
+            };
+        }
+        getInputGroupStyle() {
+            return {
+                display: 'flex',
+                alignItems: 'center',
+                gap: this.theme.spacing.small,
+                flexWrap: 'wrap',
+            };
+        }
+        getInputStyle() {
+            const borderRadius = typeof this.theme.borderRadius === 'string'
+                ? this.theme.borderRadius
+                : this.theme.borderRadius.medium;
+            return {
+                padding: this.theme.spacing.small,
+                fontSize: this.theme.typography.fontSize.medium,
+                border: `1px solid ${this.theme.colors.border}`,
+                borderRadius,
+                backgroundColor: this.theme.colors.background,
+                color: this.theme.colors.text,
+                outline: 'none',
+                flex: 1,
+                minWidth: '80px',
+            };
+        }
+        getSeparatorStyle() {
+            return {
+                color: this.theme.colors.textSecondary || this.theme.colors.text,
+                fontSize: this.theme.typography.fontSize.medium,
+            };
+        }
+        getApplyButtonStyle() {
+            const borderRadius = typeof this.theme.borderRadius === 'string'
+                ? this.theme.borderRadius
+                : this.theme.borderRadius.medium;
+            return {
+                padding: `${this.theme.spacing.small} ${this.theme.spacing.medium}`,
+                fontSize: this.theme.typography.fontSize.medium,
+                backgroundColor: this.theme.colors.primary,
+                color: '#ffffff',
+                border: 'none',
+                borderRadius,
+                cursor: 'pointer',
+                transition: this.theme.transitions?.fast || '150ms ease-in-out',
+            };
+        }
+        getResetButtonStyle() {
+            const borderRadius = typeof this.theme.borderRadius === 'string'
+                ? this.theme.borderRadius
+                : this.theme.borderRadius.medium;
+            return {
+                padding: `${this.theme.spacing.small} ${this.theme.spacing.medium}`,
+                fontSize: this.theme.typography.fontSize.medium,
+                backgroundColor: 'transparent',
+                color: this.theme.colors.text,
+                border: `1px solid ${this.theme.colors.border}`,
+                borderRadius,
+                cursor: 'pointer',
+                transition: this.theme.transitions?.fast || '150ms ease-in-out',
+            };
+        }
+    };
+    __setFunctionName(_classThis, "RangeInputComponent");
+    (() => {
+        const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+        _field_decorators = [Input()];
+        _label_decorators = [Input()];
+        _min_decorators = [Input()];
+        _max_decorators = [Input()];
+        _step_decorators = [Input()];
+        _currentMin_decorators = [Input()];
+        _currentMax_decorators = [Input()];
+        _showApplyButton_decorators = [Input()];
+        _placeholder_decorators = [Input()];
+        _className_decorators = [Input()];
+        _style_decorators = [Input()];
+        _rangeChange_decorators = [Output()];
+        __esDecorate(null, null, _field_decorators, { kind: "field", name: "field", static: false, private: false, access: { has: obj => "field" in obj, get: obj => obj.field, set: (obj, value) => { obj.field = value; } }, metadata: _metadata }, _field_initializers, _field_extraInitializers);
+        __esDecorate(null, null, _label_decorators, { kind: "field", name: "label", static: false, private: false, access: { has: obj => "label" in obj, get: obj => obj.label, set: (obj, value) => { obj.label = value; } }, metadata: _metadata }, _label_initializers, _label_extraInitializers);
+        __esDecorate(null, null, _min_decorators, { kind: "field", name: "min", static: false, private: false, access: { has: obj => "min" in obj, get: obj => obj.min, set: (obj, value) => { obj.min = value; } }, metadata: _metadata }, _min_initializers, _min_extraInitializers);
+        __esDecorate(null, null, _max_decorators, { kind: "field", name: "max", static: false, private: false, access: { has: obj => "max" in obj, get: obj => obj.max, set: (obj, value) => { obj.max = value; } }, metadata: _metadata }, _max_initializers, _max_extraInitializers);
+        __esDecorate(null, null, _step_decorators, { kind: "field", name: "step", static: false, private: false, access: { has: obj => "step" in obj, get: obj => obj.step, set: (obj, value) => { obj.step = value; } }, metadata: _metadata }, _step_initializers, _step_extraInitializers);
+        __esDecorate(null, null, _currentMin_decorators, { kind: "field", name: "currentMin", static: false, private: false, access: { has: obj => "currentMin" in obj, get: obj => obj.currentMin, set: (obj, value) => { obj.currentMin = value; } }, metadata: _metadata }, _currentMin_initializers, _currentMin_extraInitializers);
+        __esDecorate(null, null, _currentMax_decorators, { kind: "field", name: "currentMax", static: false, private: false, access: { has: obj => "currentMax" in obj, get: obj => obj.currentMax, set: (obj, value) => { obj.currentMax = value; } }, metadata: _metadata }, _currentMax_initializers, _currentMax_extraInitializers);
+        __esDecorate(null, null, _showApplyButton_decorators, { kind: "field", name: "showApplyButton", static: false, private: false, access: { has: obj => "showApplyButton" in obj, get: obj => obj.showApplyButton, set: (obj, value) => { obj.showApplyButton = value; } }, metadata: _metadata }, _showApplyButton_initializers, _showApplyButton_extraInitializers);
+        __esDecorate(null, null, _placeholder_decorators, { kind: "field", name: "placeholder", static: false, private: false, access: { has: obj => "placeholder" in obj, get: obj => obj.placeholder, set: (obj, value) => { obj.placeholder = value; } }, metadata: _metadata }, _placeholder_initializers, _placeholder_extraInitializers);
+        __esDecorate(null, null, _className_decorators, { kind: "field", name: "className", static: false, private: false, access: { has: obj => "className" in obj, get: obj => obj.className, set: (obj, value) => { obj.className = value; } }, metadata: _metadata }, _className_initializers, _className_extraInitializers);
+        __esDecorate(null, null, _style_decorators, { kind: "field", name: "style", static: false, private: false, access: { has: obj => "style" in obj, get: obj => obj.style, set: (obj, value) => { obj.style = value; } }, metadata: _metadata }, _style_initializers, _style_extraInitializers);
+        __esDecorate(null, null, _rangeChange_decorators, { kind: "field", name: "rangeChange", static: false, private: false, access: { has: obj => "rangeChange" in obj, get: obj => obj.rangeChange, set: (obj, value) => { obj.rangeChange = value; } }, metadata: _metadata }, _rangeChange_initializers, _rangeChange_extraInitializers);
+        __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+        _classThis = _classDescriptor.value;
+        if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        __runInitializers(_classThis, _classExtraInitializers);
+    })();
+    return _classThis;
+})();
+
+/**
+ * SearchLayout Component
+ *
+ * Provides a layout structure for search interfaces with sidebar and main content
+ */
+let SearchLayoutComponent = (() => {
+    let _classDecorators = [Component({
+            selector: 'seekora-search-layout',
+            template: `
+    <div [style]="getContainerStyle()">
+      <header
+        *ngIf="header || headerTemplate"
+        [style]="getHeaderStyle()"
+      >
+        <ng-container *ngTemplateOutlet="headerTemplate || defaultHeaderTemplate"></ng-container>
+        <ng-template #defaultHeaderTemplate>
+          <ng-content select="[header]"></ng-content>
+        </ng-template>
+      </header>
+
+      <div [style]="getContentStyle()">
+        <aside
+          *ngIf="sidebar || sidebarTemplate"
+          [style]="getSidebarStyle()"
+          [class]="getSidebarClass()"
+        >
+          <ng-container *ngTemplateOutlet="sidebarTemplate || defaultSidebarTemplate"></ng-container>
+          <ng-template #defaultSidebarTemplate>
+            <ng-content select="[sidebar]"></ng-content>
+          </ng-template>
+        </aside>
+
+        <main [style]="getMainStyle()">
+          <ng-content></ng-content>
+        </main>
+      </div>
+
+      <footer
+        *ngIf="footer || footerTemplate"
+        [style]="getFooterStyle()"
+      >
+        <ng-container *ngTemplateOutlet="footerTemplate || defaultFooterTemplate"></ng-container>
+        <ng-template #defaultFooterTemplate>
+          <ng-content select="[footer]"></ng-content>
+        </ng-template>
+      </footer>
+    </div>
+  `,
+            styles: [`
+    @media (max-width: 768px) {
+      .search-layout-sidebar-hidden-mobile {
+        display: none;
+      }
+    }
+  `]
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _sidebar_decorators;
+    let _sidebar_initializers = [];
+    let _sidebar_extraInitializers = [];
+    let _header_decorators;
+    let _header_initializers = [];
+    let _header_extraInitializers = [];
+    let _footer_decorators;
+    let _footer_initializers = [];
+    let _footer_extraInitializers = [];
+    let _sidebarWidth_decorators;
+    let _sidebarWidth_initializers = [];
+    let _sidebarWidth_extraInitializers = [];
+    let _showSidebarOnMobile_decorators;
+    let _showSidebarOnMobile_initializers = [];
+    let _showSidebarOnMobile_extraInitializers = [];
+    let _className_decorators;
+    let _className_initializers = [];
+    let _className_extraInitializers = [];
+    let _style_decorators;
+    let _style_initializers = [];
+    let _style_extraInitializers = [];
+    let _headerTemplate_decorators;
+    let _headerTemplate_initializers = [];
+    let _headerTemplate_extraInitializers = [];
+    let _sidebarTemplate_decorators;
+    let _sidebarTemplate_initializers = [];
+    let _sidebarTemplate_extraInitializers = [];
+    let _footerTemplate_decorators;
+    let _footerTemplate_initializers = [];
+    let _footerTemplate_extraInitializers = [];
+    _classThis = class {
+        constructor(searchContext) {
+            this.searchContext = searchContext;
+            this.sidebar = __runInitializers(this, _sidebar_initializers, void 0);
+            this.header = (__runInitializers(this, _sidebar_extraInitializers), __runInitializers(this, _header_initializers, void 0));
+            this.footer = (__runInitializers(this, _header_extraInitializers), __runInitializers(this, _footer_initializers, void 0));
+            this.sidebarWidth = (__runInitializers(this, _footer_extraInitializers), __runInitializers(this, _sidebarWidth_initializers, '300px'));
+            this.showSidebarOnMobile = (__runInitializers(this, _sidebarWidth_extraInitializers), __runInitializers(this, _showSidebarOnMobile_initializers, false));
+            this.className = (__runInitializers(this, _showSidebarOnMobile_extraInitializers), __runInitializers(this, _className_initializers, void 0));
+            this.style = (__runInitializers(this, _className_extraInitializers), __runInitializers(this, _style_initializers, void 0));
+            this.headerTemplate = (__runInitializers(this, _style_extraInitializers), __runInitializers(this, _headerTemplate_initializers, void 0));
+            this.sidebarTemplate = (__runInitializers(this, _headerTemplate_extraInitializers), __runInitializers(this, _sidebarTemplate_initializers, void 0));
+            this.footerTemplate = (__runInitializers(this, _sidebarTemplate_extraInitializers), __runInitializers(this, _footerTemplate_initializers, void 0));
+            __runInitializers(this, _footerTemplate_extraInitializers);
+            this.searchContext = searchContext;
+        }
+        get theme() {
+            return this.searchContext.theme;
+        }
+        getContainerStyle() {
+            return {
+                display: 'flex',
+                flexDirection: 'column',
+                minHeight: '100vh',
+                backgroundColor: this.theme.colors.background,
+                ...this.style,
+            };
+        }
+        getHeaderStyle() {
+            return {
+                padding: this.theme.spacing.medium,
+                borderBottom: `1px solid ${this.theme.colors.border}`,
+                backgroundColor: this.theme.colors.background,
+            };
+        }
+        getContentStyle() {
+            return {
+                display: 'flex',
+                flex: 1,
+                gap: this.theme.spacing.large,
+                padding: this.theme.spacing.medium,
+            };
+        }
+        getSidebarStyle() {
+            return {
+                width: this.sidebarWidth,
+                minWidth: this.sidebarWidth,
+            };
+        }
+        getSidebarClass() {
+            return this.showSidebarOnMobile ? '' : 'search-layout-sidebar-hidden-mobile';
+        }
+        getMainStyle() {
+            return {
+                flex: 1,
+                minWidth: 0,
+            };
+        }
+        getFooterStyle() {
+            return {
+                padding: this.theme.spacing.medium,
+                borderTop: `1px solid ${this.theme.colors.border}`,
+                backgroundColor: this.theme.colors.background,
+            };
+        }
+    };
+    __setFunctionName(_classThis, "SearchLayoutComponent");
+    (() => {
+        const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+        _sidebar_decorators = [Input()];
+        _header_decorators = [Input()];
+        _footer_decorators = [Input()];
+        _sidebarWidth_decorators = [Input()];
+        _showSidebarOnMobile_decorators = [Input()];
+        _className_decorators = [Input()];
+        _style_decorators = [Input()];
+        _headerTemplate_decorators = [ContentChild('headerTemplate')];
+        _sidebarTemplate_decorators = [ContentChild('sidebarTemplate')];
+        _footerTemplate_decorators = [ContentChild('footerTemplate')];
+        __esDecorate(null, null, _sidebar_decorators, { kind: "field", name: "sidebar", static: false, private: false, access: { has: obj => "sidebar" in obj, get: obj => obj.sidebar, set: (obj, value) => { obj.sidebar = value; } }, metadata: _metadata }, _sidebar_initializers, _sidebar_extraInitializers);
+        __esDecorate(null, null, _header_decorators, { kind: "field", name: "header", static: false, private: false, access: { has: obj => "header" in obj, get: obj => obj.header, set: (obj, value) => { obj.header = value; } }, metadata: _metadata }, _header_initializers, _header_extraInitializers);
+        __esDecorate(null, null, _footer_decorators, { kind: "field", name: "footer", static: false, private: false, access: { has: obj => "footer" in obj, get: obj => obj.footer, set: (obj, value) => { obj.footer = value; } }, metadata: _metadata }, _footer_initializers, _footer_extraInitializers);
+        __esDecorate(null, null, _sidebarWidth_decorators, { kind: "field", name: "sidebarWidth", static: false, private: false, access: { has: obj => "sidebarWidth" in obj, get: obj => obj.sidebarWidth, set: (obj, value) => { obj.sidebarWidth = value; } }, metadata: _metadata }, _sidebarWidth_initializers, _sidebarWidth_extraInitializers);
+        __esDecorate(null, null, _showSidebarOnMobile_decorators, { kind: "field", name: "showSidebarOnMobile", static: false, private: false, access: { has: obj => "showSidebarOnMobile" in obj, get: obj => obj.showSidebarOnMobile, set: (obj, value) => { obj.showSidebarOnMobile = value; } }, metadata: _metadata }, _showSidebarOnMobile_initializers, _showSidebarOnMobile_extraInitializers);
+        __esDecorate(null, null, _className_decorators, { kind: "field", name: "className", static: false, private: false, access: { has: obj => "className" in obj, get: obj => obj.className, set: (obj, value) => { obj.className = value; } }, metadata: _metadata }, _className_initializers, _className_extraInitializers);
+        __esDecorate(null, null, _style_decorators, { kind: "field", name: "style", static: false, private: false, access: { has: obj => "style" in obj, get: obj => obj.style, set: (obj, value) => { obj.style = value; } }, metadata: _metadata }, _style_initializers, _style_extraInitializers);
+        __esDecorate(null, null, _headerTemplate_decorators, { kind: "field", name: "headerTemplate", static: false, private: false, access: { has: obj => "headerTemplate" in obj, get: obj => obj.headerTemplate, set: (obj, value) => { obj.headerTemplate = value; } }, metadata: _metadata }, _headerTemplate_initializers, _headerTemplate_extraInitializers);
+        __esDecorate(null, null, _sidebarTemplate_decorators, { kind: "field", name: "sidebarTemplate", static: false, private: false, access: { has: obj => "sidebarTemplate" in obj, get: obj => obj.sidebarTemplate, set: (obj, value) => { obj.sidebarTemplate = value; } }, metadata: _metadata }, _sidebarTemplate_initializers, _sidebarTemplate_extraInitializers);
+        __esDecorate(null, null, _footerTemplate_decorators, { kind: "field", name: "footerTemplate", static: false, private: false, access: { has: obj => "footerTemplate" in obj, get: obj => obj.footerTemplate, set: (obj, value) => { obj.footerTemplate = value; } }, metadata: _metadata }, _footerTemplate_initializers, _footerTemplate_extraInitializers);
+        __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+        _classThis = _classDescriptor.value;
+        if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        __runInitializers(_classThis, _classExtraInitializers);
+    })();
+    return _classThis;
+})();
+
+/**
+ * Dark Theme
+ */
+const darkTheme = {
+    colors: {
+        primary: '#0d6efd',
+        secondary: '#6c757d',
+        background: '#1a1a1a',
+        text: '#ffffff',
+        border: '#333333',
+        hover: '#2a2a2a',
+        focus: '#0d6efd',
+        error: '#dc3545',
+    },
+    typography: {
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+        fontSize: {
+            small: '0.875rem',
+            medium: '1rem',
+            large: '1.25rem',
+        },
+    },
+    spacing: {
+        small: '0.5rem',
+        medium: '1rem',
+        large: '1.5rem',
+    },
+    borderRadius: '0.25rem',
+    shadows: {
+        small: '0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.7)',
+        medium: '0 3px 6px rgba(0, 0, 0, 0.6), 0 3px 6px rgba(0, 0, 0, 0.8)',
+        large: '0 10px 20px rgba(0, 0, 0, 0.7), 0 6px 6px rgba(0, 0, 0, 0.9)',
+    },
+};
+
+/**
+ * Minimal Theme
+ */
+const minimalTheme = {
+    colors: {
+        primary: '#000000',
+        secondary: '#666666',
+        background: '#ffffff',
+        text: '#000000',
+        border: '#e0e0e0',
+        hover: '#f5f5f5',
+        focus: '#000000',
+        error: '#cc0000',
+    },
+    typography: {
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+        fontSize: {
+            small: '0.875rem',
+            medium: '1rem',
+            large: '1.125rem',
+        },
+    },
+    spacing: {
+        small: '0.5rem',
+        medium: '0.75rem',
+        large: '1rem',
+    },
+    borderRadius: '0',
+    shadows: {
+        small: 'none',
+        medium: 'none',
+        large: 'none',
+    },
+};
+
+export { CurrentRefinementsComponent, FacetsComponent, PaginationComponent, QuerySuggestionsComponent, QuerySuggestionsService, RangeInputComponent, SEEKORA_CLIENT, SEEKORA_THEME_CONFIG, SearchBarComponent, SearchContextService, SearchLayoutComponent, SearchProviderComponent, SearchResultsComponent, SeekoraSearchService, SortByComponent, StatsComponent, createTheme, darkTheme, defaultTheme, minimalTheme };
+//# sourceMappingURL=index.esm.js.map