@styloviz/search-bar 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 StyloViz
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,68 @@
+# @styloviz/search-bar
+
+> Search input with live suggestions, keyboard navigation and a clearable field.
+
+Part of the **StyloViz UI Kit** — a premium Angular 21 + Tailwind CSS 4 dashboard component library. Standalone, `OnPush`, strongly typed, dark-mode ready.
+
+## Installation
+
+```bash
+npm install @styloviz/core @styloviz/search-bar
+```
+
+Requires `@angular/core` and `@angular/common` >= 21. `@styloviz/core` is a peer dependency shared by every component. Prefer everything at once? `@styloviz/all` installs the whole free tier in one command.
+
+## Usage
+
+```ts
+import { SvSearchBarComponent } from '@styloviz/search-bar';
+
+@Component({
+  standalone: true,
+  imports: [SvSearchBarComponent],
+  template: `
+    <sv-search-bar />
+  `,
+})
+export class DemoComponent {}
+```
+
+## Inputs
+
+| Input | Type | Default | Description |
+| --- | --- | --- | --- |
+| `value` | `string (two-way)` | `''` | Current input text. Use `[(value)]` for two-way binding. |
+| `label` | `string` | `''` | Floating label text — only shown when `variant="floating"`. Acts as a Material Design-style animated label. |
+| `placeholder` | `string` | `'Search…'` | Placeholder text. |
+| `ariaLabel` | `string` | `''` | Explicit accessible name for the input. Falls back to `label` then `placeholder`. |
+| `shortcutHint` | `string` | `''` | Keyboard shortcut hint shown on the right side of the input when empty. E.g. `'⌘K'`, `'Ctrl+K'`, `'/''`. Empty string hides the badge. |
+| `suggestions` | `SearchSuggestion[]` | `[]` | Suggestion items to display in the dropdown. Pass a filtered/sliced array; the component renders all provided items. Empty array closes the dropdown. |
+| `suggestionsLabel` | `string` | `''` | Label shown above the suggestions list (e.g. 'Recent searches', 'Results'). Empty string hides the header. |
+| `footerLabel` | `string` | `''` | Text displayed at the bottom of the dropdown — useful for "View all results". Empty string hides the footer. |
+| `filters` | `SearchFilter[]` | `[]` | Active filter chips rendered inside the input track. Each chip has an × button that emits `filterRemoved`. |
+| `size` | `SearchBarSize` | `'md'` | Field size: sm, md or lg. |
+| `variant` | `SearchBarVariant` | `'default'` | Visual variant: default, floating, minimal… |
+| `showSearchIcon` | `boolean` | `true` | Show the magnifier icon on the left. |
+| `loading` | `boolean` | `false` | Show the spinning loader inside the search icon area. |
+| `disabled` | `boolean` | `false` | Whether the input is disabled. |
+| `debounceMs` | `number` | `300` | Debounce delay in milliseconds before `searched` emits. Set to 0 to emit on every keystroke. |
+| `customClass` | `string` | `''` | Additional classes on the root wrapper. |
+
+## Outputs
+
+| Output | Type | Description |
+| --- | --- | --- |
+| `searched` | `string` | Emitted (debounced) on every value change. |
+| `submitted` | `string` | Emitted when the user presses Enter or clicks a suggestion. |
+| `suggestionSelected` | `SearchSuggestion` | Emitted when a suggestion row is clicked, carrying the suggestion object. |
+| `filterRemoved` | `string` | Emitted when the × on a filter chip is clicked. |
+| `footerClick` | `void` | Emitted when the footer link is clicked. |
+| `cleared` | `void` | Emitted when the input is cleared via the × button. |
+
+## Documentation
+
+Full API reference and live demos: https://styloviz.dev/docs
+
+## License
+
+MIT

package/fesm2022/styloviz-search-bar.mjs

@@ -0,0 +1,470 @@
+import * as i0 from '@angular/core';
+import { inject, PLATFORM_ID, ApplicationRef, model, input, output, signal, computed, viewChild, effect, TemplateRef, HostListener, ViewChild, ChangeDetectionStrategy, Component } from '@angular/core';
+import { isPlatformBrowser, NgClass } from '@angular/common';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+
+/** Process-wide counter for generating unique ids per instance. */
+let _svSearchUid = 0;
+// ─── Icon paths keyed to suggestion icon type ─────────────────────────────────
+const SUGGESTION_ICONS = {
+    search: 'M21 21l-6-6m2-5a7 7 0 1 1-14 0 7 7 0 0 1 14 0z',
+    page: 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zM14 2v6h6',
+    user: 'M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z',
+    tag: 'M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82zM7 7h.01',
+};
+// ─── Constants ───────────────────────────────────────────────────────────────
+/** Delay in ms before closing the dropdown on blur — lets suggestion clicks register first. */
+const BLUR_CLOSE_DELAY_MS = 150;
+/** Gap between the input track and the portaled suggestions panel (px). */
+const PANEL_GAP = 4;
+/** Minimum breathing room from the viewport edge before the vertical flip triggers (px). */
+const PANEL_MARGIN = 8;
+/** Preferred panel height used only for the open-above vs open-below decision (px) — ~6 rows. */
+const PANEL_PREFERRED_HEIGHT = 288;
+// ─── Component ───────────────────────────────────────────────────────────────
+/**
+ * SearchBar — A premium, fully-featured search input for dashboards.
+ *
+ * Features:
+ * - Signal-based two-way binding via `[(value)]`
+ * - Configurable debounce (default 300 ms)
+ * - Typeahead dropdown with keyboard navigation (↑ ↓ Enter Escape)
+ * - 4 icon types per suggestion row + custom SVG path support
+ * - Inline filter chip tokens (removable)
+ * - Loading / searching spinner state
+ * - Clear button
+ * - Keyboard shortcut hint badge (e.g. ⌘K)
+ * - 3 sizes × 3 visual variants
+ * - Full dark-mode support
+ * - Accessible: `role="combobox"`, `aria-expanded`, `aria-activedescendant`
+ */
+class SvSearchBarComponent {
+    platformId = inject(PLATFORM_ID);
+    appRef = inject(ApplicationRef);
+    // ── Value ─────────────────────────────────────────────────────────────────
+    /** Current input text. Use `[(value)]` for two-way binding. */
+    value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    // ── Content ───────────────────────────────────────────────────────────────
+    /**
+     * Floating label text — only shown when `variant="floating"`.
+     * Acts as a Material Design-style animated label. @default ''
+     */
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Placeholder text. @default 'Search…' */
+    placeholder = input('Search…', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Explicit accessible name for the input. Falls back to `label` then `placeholder`. */
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Keyboard shortcut hint shown on the right side of the input when empty.
+     * E.g. `'⌘K'`, `'Ctrl+K'`, `'/''`. Empty string hides the badge.
+     * @default ''
+     */
+    shortcutHint = input('', ...(ngDevMode ? [{ debugName: "shortcutHint" }] : /* istanbul ignore next */ []));
+    // ── Suggestions ───────────────────────────────────────────────────────────
+    /**
+     * Suggestion items to display in the dropdown.
+     * Pass a filtered/sliced array; the component renders all provided items.
+     * Empty array closes the dropdown.
+     */
+    suggestions = input([], ...(ngDevMode ? [{ debugName: "suggestions" }] : /* istanbul ignore next */ []));
+    /**
+     * Label shown above the suggestions list (e.g. 'Recent searches', 'Results').
+     * Empty string hides the header. @default ''
+     */
+    suggestionsLabel = input('', ...(ngDevMode ? [{ debugName: "suggestionsLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Text displayed at the bottom of the dropdown — useful for "View all results".
+     * Empty string hides the footer. @default ''
+     */
+    footerLabel = input('', ...(ngDevMode ? [{ debugName: "footerLabel" }] : /* istanbul ignore next */ []));
+    // ── Filters ───────────────────────────────────────────────────────────────
+    /**
+     * Active filter chips rendered inside the input track.
+     * Each chip has an × button that emits `filterRemoved`.
+     */
+    filters = input([], ...(ngDevMode ? [{ debugName: "filters" }] : /* istanbul ignore next */ []));
+    // ── Appearance ────────────────────────────────────────────────────────────
+    /** Field size: sm, md or lg. @default 'md' */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Visual variant: default, floating, minimal… @default 'default' */
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Show the magnifier icon on the left. @default true */
+    showSearchIcon = input(true, ...(ngDevMode ? [{ debugName: "showSearchIcon" }] : /* istanbul ignore next */ []));
+    // ── State ─────────────────────────────────────────────────────────────────
+    /** Show the spinning loader inside the search icon area. @default false */
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    /** Whether the input is disabled. @default false */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /**
+     * Debounce delay in milliseconds before `searched` emits.
+     * Set to 0 to emit on every keystroke. @default 300
+     */
+    debounceMs = input(300, ...(ngDevMode ? [{ debugName: "debounceMs" }] : /* istanbul ignore next */ []));
+    /** Additional classes on the root wrapper. */
+    customClass = input('', ...(ngDevMode ? [{ debugName: "customClass" }] : /* istanbul ignore next */ []));
+    // ── Outputs ───────────────────────────────────────────────────────────────
+    /** Emitted (debounced) on every value change. */
+    searched = output();
+    /** Emitted when the user presses Enter or clicks a suggestion. */
+    submitted = output();
+    /** Emitted when a suggestion row is clicked, carrying the suggestion object. */
+    suggestionSelected = output();
+    /** Emitted when the × on a filter chip is clicked. */
+    filterRemoved = output();
+    /** Emitted when the footer link is clicked. */
+    footerClick = output();
+    /** Emitted when the input is cleared via the × button. */
+    cleared = output();
+    // ── Internal state ────────────────────────────────────────────────────────
+    isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
+    activeIndex = signal(-1, ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    /** Per-instance id base so multiple search bars don't collide. */
+    _baseId = `sv-search-${++_svSearchUid}`;
+    /** id of the suggestions listbox (referenced by aria-controls). */
+    listboxId = `${this._baseId}-listbox`;
+    /** DOM id for an option row at index `i` (used by aria-activedescendant). */
+    optionId(i) { return `${this._baseId}-opt-${i}`; }
+    /** id of the active option, or null when nothing is highlighted. */
+    activeDescendantId = computed(() => this.activeIndex() >= 0 ? this.optionId(this.activeIndex()) : null, ...(ngDevMode ? [{ debugName: "activeDescendantId" }] : /* istanbul ignore next */ []));
+    /** Accessible name: explicit ariaLabel, then floating label, then placeholder. */
+    accessibleName = computed(() => this.ariaLabel() || this.label() || this.placeholder(), ...(ngDevMode ? [{ debugName: "accessibleName" }] : /* istanbul ignore next */ []));
+    debounceTimer = null;
+    /** Template reference to the native <input> element. */
+    inputRef = viewChild('inputEl', ...(ngDevMode ? [{ debugName: "inputRef" }] : /* istanbul ignore next */ []));
+    /** Template reference to the track container — used for dropdown positioning. */
+    trackRef = viewChild('trackEl', ...(ngDevMode ? [{ debugName: "trackRef" }] : /* istanbul ignore next */ []));
+    // ── Body-portal state ────────────────────────────────────────────────────
+    // Portals the suggestions panel into document.body so ancestor overflow/
+    // transform containers can never clip it (see dropdown-instruction.md).
+    /** True once the panel has flipped to open above the track (space below is tight). */
+    openAbove = signal(false, ...(ngDevMode ? [{ debugName: "openAbove" }] : /* istanbul ignore next */ []));
+    /** Suppresses the dropdown after a viewport resize until focus/typing resumes. */
+    resizeSuppressed = signal(false, ...(ngDevMode ? [{ debugName: "resizeSuppressed" }] : /* istanbul ignore next */ []));
+    /** Inline style object applied to the portaled panel (position:fixed + viewport coords). */
+    panelStyle = signal({}, ...(ngDevMode ? [{ debugName: "panelStyle" }] : /* istanbul ignore next */ []));
+    portalEl = null;
+    portalView = null;
+    /** The ng-template holding the suggestions panel — never rendered inline; instantiated into <body> on open. */
+    panelTpl;
+    /** Capture-phase scroll listener — fires for ANY scrollable ancestor, not just the window. */
+    _rafId = null;
+    _scrollHandler = () => {
+        if (!this.showDropdown())
+            return;
+        if (this._rafId !== null)
+            return;
+        this._rafId = requestAnimationFrame(() => {
+            this._rafId = null;
+            if (this.showDropdown()) {
+                this._calcPos();
+                this.portalView?.detectChanges();
+            }
+        });
+    };
+    // ── Computed ──────────────────────────────────────────────────────────────
+    /**
+     * Suggestions pre-processed once per change-detection cycle.
+     * Resolves each item's icon path and highlight split so the template
+     * can bind to plain properties instead of calling methods inside `@for`.
+     */
+    computedSuggestions = computed(() => this.suggestions().map(s => ({
+        ...s,
+        resolvedIconPath: this.getSuggestionIconPath(s),
+        highlighted: this.highlightMatch(s.label),
+    })), ...(ngDevMode ? [{ debugName: "computedSuggestions" }] : /* istanbul ignore next */ []));
+    showDropdown = computed(() => this.isFocused() && !this.resizeSuppressed() && this.computedSuggestions().length > 0, ...(ngDevMode ? [{ debugName: "showDropdown" }] : /* istanbul ignore next */ []));
+    showClear = computed(() => this.value().length > 0 && !this.disabled(), ...(ngDevMode ? [{ debugName: "showClear" }] : /* istanbul ignore next */ []));
+    isFloating = computed(() => false, ...(ngDevMode ? [{ debugName: "isFloating" }] : /* istanbul ignore next */ []));
+    labelIsFloated = computed(() => this.isFocused() || !!this.value(), ...(ngDevMode ? [{ debugName: "labelIsFloated" }] : /* istanbul ignore next */ []));
+    floatingLabelClasses = computed(() => {
+        const floated = this.labelIsFloated();
+        const focused = this.isFocused();
+        const hasIcon = this.showSearchIcon();
+        // Not-floated position must align with the input text cursor.
+        // inputNativePadClass zeroes the left pad when icon is present, so cursor
+        // lands at: iconPaddingClass + iconWidth + gap-1.5
+        //   sm: pl-2.5(10) + 14px + 6px = 30px
+        //   md: pl-3(12)   + 16px + 6px = 34px
+        //   lg: pl-4(16)   + 20px + 6px = 42px
+        const notFloatedLeftMap = hasIcon
+            ? { sm: 'left-[30px]', md: 'left-[34px]', lg: 'left-[42px]' }
+            : { sm: 'left-2', md: 'left-3', lg: 'left-4' };
+        const notFloatedLeft = notFloatedLeftMap[this.size()];
+        const floatedLeft = 'left-3';
+        const textSizeMap = {
+            sm: 'text-xs',
+            md: 'text-sm',
+            lg: 'text-base',
+        };
+        const textSize = floated ? 'text-[0.7rem] leading-none' : textSizeMap[this.size()];
+        const bg = floated ? 'px-1 bg-white dark:bg-gray-900' : '';
+        const color = focused && floated
+            ? 'text-primary-600 dark:text-primary-400'
+            : floated
+                ? 'text-gray-500 dark:text-gray-400'
+                : 'text-gray-500 dark:text-gray-400';
+        return [
+            'pointer-events-none absolute z-10 transition-all duration-200 select-none whitespace-nowrap',
+            floated
+                ? `top-0 -translate-y-1/2 ${textSize} ${bg} ${floatedLeft}`
+                : `top-1/2 -translate-y-1/2 ${textSize} ${notFloatedLeft}`,
+            color,
+        ].filter(Boolean).join(' ');
+    }, ...(ngDevMode ? [{ debugName: "floatingLabelClasses" }] : /* istanbul ignore next */ []));
+    showShortcut = computed(() => !!this.shortcutHint() && !this.value() && !this.isFocused() && !this.loading(), ...(ngDevMode ? [{ debugName: "showShortcut" }] : /* istanbul ignore next */ []));
+    // ── Class maps ────────────────────────────────────────────────────────────
+    wrapperClasses = computed(() => ['relative w-full', this.customClass()].join(' '), ...(ngDevMode ? [{ debugName: "wrapperClasses" }] : /* istanbul ignore next */ []));
+    trackClasses = computed(() => {
+        const sizeMap = {
+            sm: 'h-8  text-xs',
+            md: 'h-10 text-sm',
+            lg: 'h-12 text-base',
+        };
+        const variantMap = {
+            default: 'bg-white border border-gray-300 dark:bg-gray-900 dark:border-gray-700 shadow-sm',
+            filled: 'bg-gray-100 border border-transparent dark:bg-gray-800 dark:border-transparent',
+            borderless: 'bg-transparent border border-transparent',
+        };
+        const focusRing = this.isFocused()
+            ? 'ring-2 ring-primary-500/30 border-primary-500 dark:border-primary-400'
+            : 'hover:border-gray-400 dark:hover:border-gray-500';
+        return [
+            'relative flex w-full items-center gap-1.5 rounded-md transition-all duration-150',
+            sizeMap[this.size()],
+            variantMap[this.variant()],
+            this.disabled() ? 'cursor-not-allowed opacity-60' : focusRing,
+            this.filters().length > 0 ? 'flex-wrap py-1' : '',
+        ].filter(Boolean).join(' ');
+    }, ...(ngDevMode ? [{ debugName: "trackClasses" }] : /* istanbul ignore next */ []));
+    inputPaddingClass = computed(() => {
+        switch (this.size()) {
+            case 'sm': return 'px-2';
+            case 'lg': return 'px-4';
+            default: return 'px-3';
+        }
+    }, ...(ngDevMode ? [{ debugName: "inputPaddingClass" }] : /* istanbul ignore next */ []));
+    /**
+     * When a search icon occupies the left side the input needs no left padding —
+     * the icon span + gap-1.5 already create visual spacing.
+     * Without an icon, use symmetric px-X. Applies to all variants.
+     */
+    inputNativePadClass = computed(() => {
+        if (this.showSearchIcon()) {
+            const rp = { sm: 'pr-2', md: 'pr-3', lg: 'pr-4' };
+            return `pl-0 ${rp[this.size()]}`;
+        }
+        return this.inputPaddingClass();
+    }, ...(ngDevMode ? [{ debugName: "inputNativePadClass" }] : /* istanbul ignore next */ []));
+    iconSizeClass = computed(() => {
+        switch (this.size()) {
+            case 'sm': return 'h-3.5 w-3.5';
+            case 'lg': return 'h-5 w-5';
+            default: return 'h-4 w-4';
+        }
+    }, ...(ngDevMode ? [{ debugName: "iconSizeClass" }] : /* istanbul ignore next */ []));
+    iconPaddingClass = computed(() => {
+        switch (this.size()) {
+            case 'sm': return 'pl-2.5';
+            case 'lg': return 'pl-4';
+            default: return 'pl-3';
+        }
+    }, ...(ngDevMode ? [{ debugName: "iconPaddingClass" }] : /* istanbul ignore next */ []));
+    // ── Suggestion helpers ────────────────────────────────────────────────────
+    getSuggestionIconPath(s) {
+        if (s.iconType === 'custom' && s.iconPath)
+            return s.iconPath;
+        if (s.iconType && s.iconType !== 'custom')
+            return SUGGESTION_ICONS[s.iconType];
+        return SUGGESTION_ICONS.search;
+    }
+    /** Highlight matched portion of a suggestion label. */
+    highlightMatch(text) {
+        const q = this.value().trim().toLowerCase();
+        if (!q)
+            return { pre: text, match: '', post: '' };
+        const idx = text.toLowerCase().indexOf(q);
+        if (idx === -1)
+            return { pre: text, match: '', post: '' };
+        return {
+            pre: text.slice(0, idx),
+            match: text.slice(idx, idx + q.length),
+            post: text.slice(idx + q.length),
+        };
+    }
+    // ── Event handlers ────────────────────────────────────────────────────────
+    onInput(raw) {
+        this.resizeSuppressed.set(false);
+        this.value.set(raw);
+        this.activeIndex.set(-1);
+        if (this.debounceTimer)
+            clearTimeout(this.debounceTimer);
+        const ms = this.debounceMs();
+        if (ms > 0) {
+            this.debounceTimer = setTimeout(() => this.searched.emit(raw), ms);
+        }
+        else {
+            this.searched.emit(raw);
+        }
+    }
+    onFocus() {
+        this.resizeSuppressed.set(false);
+        this.isFocused.set(true);
+    }
+    onBlur() {
+        // Delay so click on a suggestion registers before closing dropdown.
+        setTimeout(() => this.isFocused.set(false), BLUR_CLOSE_DELAY_MS);
+    }
+    onKeydown(event) {
+        const computed = this.computedSuggestions();
+        const count = computed.length;
+        if (!this.showDropdown() && event.key !== 'Enter')
+            return;
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this.activeIndex.update(i => Math.min(i + 1, count - 1));
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.activeIndex.update(i => Math.max(i - 1, -1));
+                break;
+            case 'Enter': {
+                event.preventDefault();
+                const idx = this.activeIndex();
+                if (idx >= 0 && idx < count) {
+                    this.selectSuggestion(computed[idx]);
+                }
+                else {
+                    this.submitted.emit(this.value());
+                    this.isFocused.set(false);
+                }
+                break;
+            }
+            case 'Escape':
+                this.isFocused.set(false);
+                this.activeIndex.set(-1);
+                this.inputRef()?.nativeElement.blur();
+                break;
+        }
+    }
+    selectSuggestion(s) {
+        this.value.set(s.label);
+        this.isFocused.set(false);
+        this.activeIndex.set(-1);
+        this.submitted.emit(s.label);
+        this.suggestionSelected.emit(s);
+    }
+    clearValue() {
+        this.value.set('');
+        this.activeIndex.set(-1);
+        this.cleared.emit();
+        this.searched.emit('');
+        if (isPlatformBrowser(this.platformId)) {
+            setTimeout(() => this.inputRef()?.nativeElement.focus());
+        }
+    }
+    onFooterClick() {
+        this.isFocused.set(false);
+        this.footerClick.emit();
+    }
+    focus() {
+        this.inputRef()?.nativeElement.focus();
+    }
+    onWindowResize() {
+        // Viewport resize invalidates the layout — close rather than reposition
+        // with now-stale coordinates (dropdown-instruction.md §8). Reopens
+        // naturally on the next focus/input.
+        if (this.showDropdown())
+            this.resizeSuppressed.set(true);
+    }
+    _calcPos() {
+        const track = this.trackRef()?.nativeElement;
+        if (!track)
+            return;
+        const rect = track.getBoundingClientRect();
+        const vh = window.innerHeight;
+        const spaceBelow = vh - rect.bottom - PANEL_MARGIN;
+        const spaceAbove = rect.top - PANEL_MARGIN;
+        const above = spaceBelow < PANEL_PREFERRED_HEIGHT && spaceAbove > spaceBelow;
+        this.openAbove.set(above);
+        const style = {
+            position: 'fixed',
+            zIndex: '9999',
+            left: `${rect.left}px`,
+            width: `${rect.width}px`,
+            maxHeight: `${Math.max(120, above ? spaceAbove : spaceBelow)}px`,
+        };
+        style[above ? 'bottom' : 'top'] = above
+            ? `${vh - rect.top + PANEL_GAP}px`
+            : `${rect.bottom + PANEL_GAP}px`;
+        this.panelStyle.set(style);
+    }
+    // ── Lifecycle ─────────────────────────────────────────────────────────────
+    constructor() {
+        // Mount/unmount the body-portaled panel whenever the dropdown's open
+        // state changes — the reactive equivalent of Color Picker's toggle().
+        effect(() => {
+            if (this.showDropdown()) {
+                if (!this.portalView)
+                    this._openPanel();
+            }
+            else if (this.portalView) {
+                this._closePanel();
+            }
+        });
+    }
+    ngOnInit() {
+        // Capture phase catches scroll from any scrollable ancestor, not just window.
+        window.addEventListener('scroll', this._scrollHandler, { passive: true, capture: true });
+    }
+    ngOnDestroy() {
+        window.removeEventListener('scroll', this._scrollHandler, true);
+        if (this._rafId !== null)
+            cancelAnimationFrame(this._rafId);
+        if (this.debounceTimer)
+            clearTimeout(this.debounceTimer);
+        this._closePanel();
+    }
+    // ── Body portal ──────────────────────────────────────────────────────────
+    _openPanel() {
+        if (!this.panelTpl)
+            return;
+        this._calcPos();
+        this.portalEl = document.createElement('div');
+        this.portalEl.className = 'sv-search-portal';
+        document.body.appendChild(this.portalEl);
+        this.portalView = this.panelTpl.createEmbeddedView({});
+        this.appRef.attachView(this.portalView);
+        this.portalView.rootNodes.forEach((n) => this.portalEl.appendChild(n));
+        this.portalView.detectChanges();
+    }
+    _closePanel() {
+        if (this.portalView) {
+            this.appRef.detachView(this.portalView);
+            this.portalView.destroy();
+            this.portalView = null;
+        }
+        this.portalEl?.remove();
+        this.portalEl = null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SvSearchBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SvSearchBarComponent, isStandalone: true, selector: "sv-search-bar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, shortcutHint: { classPropertyName: "shortcutHint", publicName: "shortcutHint", isSignal: true, isRequired: false, transformFunction: null }, suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: true, isRequired: false, transformFunction: null }, suggestionsLabel: { classPropertyName: "suggestionsLabel", publicName: "suggestionsLabel", isSignal: true, isRequired: false, transformFunction: null }, footerLabel: { classPropertyName: "footerLabel", publicName: "footerLabel", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showSearchIcon: { classPropertyName: "showSearchIcon", publicName: "showSearchIcon", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null }, customClass: { classPropertyName: "customClass", publicName: "customClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", searched: "searched", submitted: "submitted", suggestionSelected: "suggestionSelected", filterRemoved: "filterRemoved", footerClick: "footerClick", cleared: "cleared" }, host: { listeners: { "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }, { propertyName: "trackRef", first: true, predicate: ["trackEl"], descendants: true, isSignal: true }, { propertyName: "panelTpl", first: true, predicate: ["panelTpl"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<!-- Root wrapper \u2014 positions the dropdown relative to this element -->\n<div [ngClass]=\"wrapperClasses()\">\n\n  <!-- \u2500\u2500 Input track \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div #trackEl [ngClass]=\"trackClasses()\">\n\n    <!-- Floating label (animates to border on focus or value) -->\n    @if (isFloating() && label()) {\n      <label [ngClass]=\"floatingLabelClasses()\" aria-hidden=\"true\">{{ label() }}</label>\n    }\n    @if (showSearchIcon()) {\n      <span\n        class=\"flex shrink-0 items-center text-gray-500 dark:text-gray-400\"\n        [ngClass]=\"iconPaddingClass()\"\n        aria-hidden=\"true\"\n      >\n        @if (loading()) {\n          <!-- Spinner -->\n          <svg\n            [ngClass]=\"iconSizeClass()\"\n            class=\"animate-spin text-primary-500\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n          >\n            <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\"\n                    stroke=\"currentColor\" stroke-width=\"4\"/>\n            <path class=\"opacity-75\" fill=\"currentColor\"\n                  d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z\"/>\n          </svg>\n        } @else {\n          <!-- Magnifier -->\n          <svg [ngClass]=\"iconSizeClass()\" viewBox=\"0 0 24 24\" fill=\"none\"\n               stroke=\"currentColor\" stroke-width=\"2\"\n               stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <circle cx=\"11\" cy=\"11\" r=\"8\"/>\n            <path d=\"m21 21-4.35-4.35\"/>\n          </svg>\n        }\n      </span>\n    }\n\n    <!-- Active filter chips -->\n    @for (filter of filters(); track filter.id) {\n      <span\n        class=\"inline-flex shrink-0 items-center gap-1 rounded-md\n               bg-primary-50 px-2 py-0.5 text-xs font-medium text-primary-700\n               dark:bg-primary-900/40 dark:text-primary-300\"\n      >\n        {{ filter.label }}\n        <button\n          type=\"button\"\n          class=\"ml-0.5 rounded text-primary-400 hover:text-primary-600\n                 dark:text-primary-400 dark:hover:text-primary-200\n                 focus:outline-none focus-visible:ring-1 focus-visible:ring-primary-400\"\n          (click)=\"filterRemoved.emit(filter.id)\"\n          [attr.aria-label]=\"'Remove filter ' + filter.label\"\n        >\n          <svg class=\"h-3 w-3\" viewBox=\"0 0 14 14\" fill=\"none\"\n               stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\">\n            <path d=\"M3 3l8 8M11 3l-8 8\"/>\n          </svg>\n        </button>\n      </span>\n    }\n\n    <!-- Text input -->\n    <input\n      #inputEl\n      type=\"search\"\n      autocomplete=\"off\"\n      autocorrect=\"off\"\n      spellcheck=\"false\"\n      class=\"min-w-0 flex-1 bg-transparent text-gray-900 placeholder-gray-400\n             outline-none dark:text-white dark:placeholder-gray-500\n             [&::-webkit-search-cancel-button]:hidden\"\n      [ngClass]=\"[\n        inputNativePadClass(),\n        filters().length > 0 ? 'py-0.5' : 'h-full'\n      ]\"\n      [placeholder]=\"isFloating() && label() && !labelIsFloated() ? ' ' : placeholder()\"\n      [disabled]=\"disabled()\"\n      [ngModel]=\"value()\"\n      (ngModelChange)=\"onInput($event)\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      (keydown)=\"onKeydown($event)\"\n      role=\"combobox\"\n      aria-haspopup=\"listbox\"\n      [attr.aria-expanded]=\"showDropdown()\"\n      [attr.aria-label]=\"accessibleName()\"\n      [attr.aria-busy]=\"loading() || null\"\n      [attr.aria-autocomplete]=\"suggestions().length ? 'list' : 'none'\"\n      [attr.aria-controls]=\"showDropdown() ? listboxId : null\"\n      [attr.aria-activedescendant]=\"activeDescendantId()\"\n    />\n\n    <!-- Keyboard shortcut hint -->\n    @if (showShortcut()) {\n      <kbd\n        class=\"mr-2 hidden shrink-0 items-center rounded border border-gray-200 bg-gray-100\n               px-1.5 py-0.5 font-mono text-[10px] text-gray-500\n               dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 sm:inline-flex\"\n        aria-hidden=\"true\"\n      >\n        {{ shortcutHint() }}\n      </kbd>\n    }\n\n    <!-- Clear button -->\n    @if (showClear()) {\n      <button\n        type=\"button\"\n        class=\"mr-2 shrink-0 rounded-full p-0.5 text-gray-400\n               transition-colors hover:bg-gray-100 hover:text-gray-600\n               dark:hover:bg-gray-700 dark:hover:text-gray-300\n               focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-400\"\n        (click)=\"clearValue()\"\n        aria-label=\"Clear search\"\n      >\n        <svg class=\"h-3.5 w-3.5\" viewBox=\"0 0 14 14\" fill=\"none\"\n             stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\">\n          <path d=\"M3 3l8 8M11 3l-8 8\"/>\n        </svg>\n      </button>\n    }\n\n  </div>\n\n  <!-- \u2500\u2500 Suggestions dropdown \u2014 portaled into document.body on open so ancestor\n       overflow/transform containers can never clip it (see dropdown-instruction.md). \u2500\u2500 -->\n  <ng-template #panelTpl>\n    <div\n      [id]=\"listboxId + '-panel'\"\n      class=\"flex flex-col overflow-hidden rounded-xl\n             border border-gray-200 bg-white\n             shadow-lg shadow-gray-200/60\n             dark:border-gray-700 dark:bg-gray-900 dark:shadow-gray-950/60\"\n      [style.position]=\"panelStyle()['position']\"\n      [style.zIndex]=\"panelStyle()['zIndex']\"\n      [style.top]=\"panelStyle()['top']\"\n      [style.bottom]=\"panelStyle()['bottom']\"\n      [style.left]=\"panelStyle()['left']\"\n      [style.width]=\"panelStyle()['width']\"\n      [style.maxHeight]=\"panelStyle()['maxHeight']\"\n    >\n\n      <!-- Dropdown header label -->\n      @if (suggestionsLabel()) {\n        <div class=\"border-b border-gray-100 px-3 py-2 dark:border-gray-800\">\n          <p class=\"text-[11px] font-semibold uppercase tracking-wider\n                    text-gray-500 dark:text-gray-400\">\n            {{ suggestionsLabel() }}\n          </p>\n        </div>\n      }\n\n      <!-- Suggestion rows -->\n      <ul\n        [attr.id]=\"listboxId\"\n        role=\"listbox\"\n        [attr.aria-label]=\"suggestionsLabel() || accessibleName() || 'Search suggestions'\"\n        class=\"min-h-0 flex-1 overflow-y-auto overscroll-contain py-1\"\n      >\n        @for (s of computedSuggestions(); track s.id; let i = $index) {\n          <li\n            [id]=\"optionId(i)\"\n            role=\"option\"\n            [attr.aria-selected]=\"activeIndex() === i\"\n            class=\"flex cursor-pointer items-center gap-3 px-3 py-2.5\n                   transition-colors duration-75 select-none\"\n            [ngClass]=\"activeIndex() === i\n              ? 'bg-primary-50 dark:bg-primary-900/30'\n              : 'hover:bg-gray-50 dark:hover:bg-gray-800/60'\"\n            (mousedown)=\"selectSuggestion(s)\"\n            (mouseenter)=\"activeIndex.set(i)\"\n          >\n            <!-- Row icon -->\n            <span\n              class=\"flex h-7 w-7 shrink-0 items-center justify-center rounded-lg\n                     text-gray-500 dark:text-gray-400\"\n              [ngClass]=\"activeIndex() === i\n                ? 'bg-primary-100 text-primary-600 dark:bg-primary-900/50 dark:text-primary-400'\n                : 'bg-gray-100 dark:bg-gray-800'\"\n              aria-hidden=\"true\"\n            >\n              <svg class=\"h-3.5 w-3.5\" viewBox=\"0 0 24 24\" fill=\"none\"\n                   stroke=\"currentColor\" stroke-width=\"2\"\n                   stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path [attr.d]=\"s.resolvedIconPath\" />\n              </svg>\n            </span>\n\n            <!-- Text -->\n            <span class=\"min-w-0 flex-1\">\n              <!-- Highlighted label (pre-computed, no method call in template) -->\n              <span class=\"block truncate text-sm font-medium text-gray-900 dark:text-white\">\n                {{ s.highlighted.pre }}<mark class=\"bg-transparent font-bold text-primary-600 dark:text-primary-400\">{{ s.highlighted.match }}</mark>{{ s.highlighted.post }}\n              </span>\n              @if (s.sublabel) {\n                <span class=\"block truncate text-xs text-gray-500 dark:text-gray-400\">\n                  {{ s.sublabel }}\n                </span>\n              }\n            </span>\n\n            <!-- Badge -->\n            @if (s.badge) {\n              <span\n                class=\"shrink-0 rounded-full bg-primary-50 px-2 py-0.5\n                       text-[10px] font-semibold text-primary-600\n                       dark:bg-primary-900/40 dark:text-primary-400\"\n              >\n                {{ s.badge }}\n              </span>\n            }\n\n            <!-- Keyboard hint on active row -->\n            @if (activeIndex() === i) {\n              <kbd class=\"shrink-0 rounded border border-gray-200 bg-gray-100 px-1\n                          py-0.5 font-mono text-[9px] text-gray-500\n                          dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400\"\n                   aria-hidden=\"true\">\n                \u21B5\n              </kbd>\n            }\n\n          </li>\n        }\n      </ul>\n\n      <!-- Dropdown footer -->\n      @if (footerLabel()) {\n        <div class=\"border-t border-gray-100 dark:border-gray-800\">\n          <button\n            type=\"button\"\n            class=\"flex w-full items-center justify-between px-3 py-2.5\n                   text-xs font-medium text-primary-600 transition-colors\n                   hover:bg-gray-50 dark:text-primary-400 dark:hover:bg-gray-800/60\n                   focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-400\"\n            (mousedown)=\"onFooterClick()\"\n          >\n            <span>{{ footerLabel() }}</span>\n            <svg class=\"h-3.5 w-3.5\" viewBox=\"0 0 24 24\" fill=\"none\"\n                 stroke=\"currentColor\" stroke-width=\"2\"\n                 stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <path d=\"M5 12h14M12 5l7 7-7 7\"/>\n            </svg>\n          </button>\n        </div>\n      }\n\n    </div>\n  </ng-template>\n\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SvSearchBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sv-search-bar', standalone: true, imports: [NgClass, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Root wrapper \u2014 positions the dropdown relative to this element -->\n<div [ngClass]=\"wrapperClasses()\">\n\n  <!-- \u2500\u2500 Input track \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div #trackEl [ngClass]=\"trackClasses()\">\n\n    <!-- Floating label (animates to border on focus or value) -->\n    @if (isFloating() && label()) {\n      <label [ngClass]=\"floatingLabelClasses()\" aria-hidden=\"true\">{{ label() }}</label>\n    }\n    @if (showSearchIcon()) {\n      <span\n        class=\"flex shrink-0 items-center text-gray-500 dark:text-gray-400\"\n        [ngClass]=\"iconPaddingClass()\"\n        aria-hidden=\"true\"\n      >\n        @if (loading()) {\n          <!-- Spinner -->\n          <svg\n            [ngClass]=\"iconSizeClass()\"\n            class=\"animate-spin text-primary-500\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n          >\n            <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\"\n                    stroke=\"currentColor\" stroke-width=\"4\"/>\n            <path class=\"opacity-75\" fill=\"currentColor\"\n                  d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z\"/>\n          </svg>\n        } @else {\n          <!-- Magnifier -->\n          <svg [ngClass]=\"iconSizeClass()\" viewBox=\"0 0 24 24\" fill=\"none\"\n               stroke=\"currentColor\" stroke-width=\"2\"\n               stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <circle cx=\"11\" cy=\"11\" r=\"8\"/>\n            <path d=\"m21 21-4.35-4.35\"/>\n          </svg>\n        }\n      </span>\n    }\n\n    <!-- Active filter chips -->\n    @for (filter of filters(); track filter.id) {\n      <span\n        class=\"inline-flex shrink-0 items-center gap-1 rounded-md\n               bg-primary-50 px-2 py-0.5 text-xs font-medium text-primary-700\n               dark:bg-primary-900/40 dark:text-primary-300\"\n      >\n        {{ filter.label }}\n        <button\n          type=\"button\"\n          class=\"ml-0.5 rounded text-primary-400 hover:text-primary-600\n                 dark:text-primary-400 dark:hover:text-primary-200\n                 focus:outline-none focus-visible:ring-1 focus-visible:ring-primary-400\"\n          (click)=\"filterRemoved.emit(filter.id)\"\n          [attr.aria-label]=\"'Remove filter ' + filter.label\"\n        >\n          <svg class=\"h-3 w-3\" viewBox=\"0 0 14 14\" fill=\"none\"\n               stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\">\n            <path d=\"M3 3l8 8M11 3l-8 8\"/>\n          </svg>\n        </button>\n      </span>\n    }\n\n    <!-- Text input -->\n    <input\n      #inputEl\n      type=\"search\"\n      autocomplete=\"off\"\n      autocorrect=\"off\"\n      spellcheck=\"false\"\n      class=\"min-w-0 flex-1 bg-transparent text-gray-900 placeholder-gray-400\n             outline-none dark:text-white dark:placeholder-gray-500\n             [&::-webkit-search-cancel-button]:hidden\"\n      [ngClass]=\"[\n        inputNativePadClass(),\n        filters().length > 0 ? 'py-0.5' : 'h-full'\n      ]\"\n      [placeholder]=\"isFloating() && label() && !labelIsFloated() ? ' ' : placeholder()\"\n      [disabled]=\"disabled()\"\n      [ngModel]=\"value()\"\n      (ngModelChange)=\"onInput($event)\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      (keydown)=\"onKeydown($event)\"\n      role=\"combobox\"\n      aria-haspopup=\"listbox\"\n      [attr.aria-expanded]=\"showDropdown()\"\n      [attr.aria-label]=\"accessibleName()\"\n      [attr.aria-busy]=\"loading() || null\"\n      [attr.aria-autocomplete]=\"suggestions().length ? 'list' : 'none'\"\n      [attr.aria-controls]=\"showDropdown() ? listboxId : null\"\n      [attr.aria-activedescendant]=\"activeDescendantId()\"\n    />\n\n    <!-- Keyboard shortcut hint -->\n    @if (showShortcut()) {\n      <kbd\n        class=\"mr-2 hidden shrink-0 items-center rounded border border-gray-200 bg-gray-100\n               px-1.5 py-0.5 font-mono text-[10px] text-gray-500\n               dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 sm:inline-flex\"\n        aria-hidden=\"true\"\n      >\n        {{ shortcutHint() }}\n      </kbd>\n    }\n\n    <!-- Clear button -->\n    @if (showClear()) {\n      <button\n        type=\"button\"\n        class=\"mr-2 shrink-0 rounded-full p-0.5 text-gray-400\n               transition-colors hover:bg-gray-100 hover:text-gray-600\n               dark:hover:bg-gray-700 dark:hover:text-gray-300\n               focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-400\"\n        (click)=\"clearValue()\"\n        aria-label=\"Clear search\"\n      >\n        <svg class=\"h-3.5 w-3.5\" viewBox=\"0 0 14 14\" fill=\"none\"\n             stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\">\n          <path d=\"M3 3l8 8M11 3l-8 8\"/>\n        </svg>\n      </button>\n    }\n\n  </div>\n\n  <!-- \u2500\u2500 Suggestions dropdown \u2014 portaled into document.body on open so ancestor\n       overflow/transform containers can never clip it (see dropdown-instruction.md). \u2500\u2500 -->\n  <ng-template #panelTpl>\n    <div\n      [id]=\"listboxId + '-panel'\"\n      class=\"flex flex-col overflow-hidden rounded-xl\n             border border-gray-200 bg-white\n             shadow-lg shadow-gray-200/60\n             dark:border-gray-700 dark:bg-gray-900 dark:shadow-gray-950/60\"\n      [style.position]=\"panelStyle()['position']\"\n      [style.zIndex]=\"panelStyle()['zIndex']\"\n      [style.top]=\"panelStyle()['top']\"\n      [style.bottom]=\"panelStyle()['bottom']\"\n      [style.left]=\"panelStyle()['left']\"\n      [style.width]=\"panelStyle()['width']\"\n      [style.maxHeight]=\"panelStyle()['maxHeight']\"\n    >\n\n      <!-- Dropdown header label -->\n      @if (suggestionsLabel()) {\n        <div class=\"border-b border-gray-100 px-3 py-2 dark:border-gray-800\">\n          <p class=\"text-[11px] font-semibold uppercase tracking-wider\n                    text-gray-500 dark:text-gray-400\">\n            {{ suggestionsLabel() }}\n          </p>\n        </div>\n      }\n\n      <!-- Suggestion rows -->\n      <ul\n        [attr.id]=\"listboxId\"\n        role=\"listbox\"\n        [attr.aria-label]=\"suggestionsLabel() || accessibleName() || 'Search suggestions'\"\n        class=\"min-h-0 flex-1 overflow-y-auto overscroll-contain py-1\"\n      >\n        @for (s of computedSuggestions(); track s.id; let i = $index) {\n          <li\n            [id]=\"optionId(i)\"\n            role=\"option\"\n            [attr.aria-selected]=\"activeIndex() === i\"\n            class=\"flex cursor-pointer items-center gap-3 px-3 py-2.5\n                   transition-colors duration-75 select-none\"\n            [ngClass]=\"activeIndex() === i\n              ? 'bg-primary-50 dark:bg-primary-900/30'\n              : 'hover:bg-gray-50 dark:hover:bg-gray-800/60'\"\n            (mousedown)=\"selectSuggestion(s)\"\n            (mouseenter)=\"activeIndex.set(i)\"\n          >\n            <!-- Row icon -->\n            <span\n              class=\"flex h-7 w-7 shrink-0 items-center justify-center rounded-lg\n                     text-gray-500 dark:text-gray-400\"\n              [ngClass]=\"activeIndex() === i\n                ? 'bg-primary-100 text-primary-600 dark:bg-primary-900/50 dark:text-primary-400'\n                : 'bg-gray-100 dark:bg-gray-800'\"\n              aria-hidden=\"true\"\n            >\n              <svg class=\"h-3.5 w-3.5\" viewBox=\"0 0 24 24\" fill=\"none\"\n                   stroke=\"currentColor\" stroke-width=\"2\"\n                   stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path [attr.d]=\"s.resolvedIconPath\" />\n              </svg>\n            </span>\n\n            <!-- Text -->\n            <span class=\"min-w-0 flex-1\">\n              <!-- Highlighted label (pre-computed, no method call in template) -->\n              <span class=\"block truncate text-sm font-medium text-gray-900 dark:text-white\">\n                {{ s.highlighted.pre }}<mark class=\"bg-transparent font-bold text-primary-600 dark:text-primary-400\">{{ s.highlighted.match }}</mark>{{ s.highlighted.post }}\n              </span>\n              @if (s.sublabel) {\n                <span class=\"block truncate text-xs text-gray-500 dark:text-gray-400\">\n                  {{ s.sublabel }}\n                </span>\n              }\n            </span>\n\n            <!-- Badge -->\n            @if (s.badge) {\n              <span\n                class=\"shrink-0 rounded-full bg-primary-50 px-2 py-0.5\n                       text-[10px] font-semibold text-primary-600\n                       dark:bg-primary-900/40 dark:text-primary-400\"\n              >\n                {{ s.badge }}\n              </span>\n            }\n\n            <!-- Keyboard hint on active row -->\n            @if (activeIndex() === i) {\n              <kbd class=\"shrink-0 rounded border border-gray-200 bg-gray-100 px-1\n                          py-0.5 font-mono text-[9px] text-gray-500\n                          dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400\"\n                   aria-hidden=\"true\">\n                \u21B5\n              </kbd>\n            }\n\n          </li>\n        }\n      </ul>\n\n      <!-- Dropdown footer -->\n      @if (footerLabel()) {\n        <div class=\"border-t border-gray-100 dark:border-gray-800\">\n          <button\n            type=\"button\"\n            class=\"flex w-full items-center justify-between px-3 py-2.5\n                   text-xs font-medium text-primary-600 transition-colors\n                   hover:bg-gray-50 dark:text-primary-400 dark:hover:bg-gray-800/60\n                   focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-400\"\n            (mousedown)=\"onFooterClick()\"\n          >\n            <span>{{ footerLabel() }}</span>\n            <svg class=\"h-3.5 w-3.5\" viewBox=\"0 0 24 24\" fill=\"none\"\n                 stroke=\"currentColor\" stroke-width=\"2\"\n                 stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <path d=\"M5 12h14M12 5l7 7-7 7\"/>\n            </svg>\n          </button>\n        </div>\n      }\n\n    </div>\n  </ng-template>\n\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], shortcutHint: [{ type: i0.Input, args: [{ isSignal: true, alias: "shortcutHint", required: false }] }], suggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestions", required: false }] }], suggestionsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestionsLabel", required: false }] }], footerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerLabel", required: false }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], showSearchIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSearchIcon", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], debounceMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceMs", required: false }] }], customClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "customClass", required: false }] }], searched: [{ type: i0.Output, args: ["searched"] }], submitted: [{ type: i0.Output, args: ["submitted"] }], suggestionSelected: [{ type: i0.Output, args: ["suggestionSelected"] }], filterRemoved: [{ type: i0.Output, args: ["filterRemoved"] }], footerClick: [{ type: i0.Output, args: ["footerClick"] }], cleared: [{ type: i0.Output, args: ["cleared"] }], inputRef: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], trackRef: [{ type: i0.ViewChild, args: ['trackEl', { isSignal: true }] }], panelTpl: [{
+                type: ViewChild,
+                args: ['panelTpl', { read: TemplateRef }]
+            }], onWindowResize: [{
+                type: HostListener,
+                args: ['window:resize']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SvSearchBarComponent };
+//# sourceMappingURL=styloviz-search-bar.mjs.map

package/fesm2022/styloviz-search-bar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"styloviz-search-bar.mjs","sources":["../../../../projects/search-bar-free/src/lib/search-bar.component.ts","../../../../projects/search-bar-free/src/lib/search-bar.component.html","../../../../projects/search-bar-free/src/styloviz-search-bar.ts"],"sourcesContent":["import {\n  ApplicationRef,\n  Component,\n  HostListener,\n  input,\n  output,\n  model,\n  computed,\n  effect,\n  signal,\n  viewChild,\n  ElementRef,\n  EmbeddedViewRef,\n  ChangeDetectionStrategy,\n  OnDestroy,\n  OnInit,\n  TemplateRef,\n  ViewChild,\n  inject,\n  PLATFORM_ID,\n} from '@angular/core';\nimport { isPlatformBrowser, NgClass } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport type SearchBarSize    = 'sm' | 'md' | 'lg';\nexport type SearchBarVariant = 'default' | 'filled' | 'borderless';\n\n/** Process-wide counter for generating unique ids per instance. */\nlet _svSearchUid = 0;\n\n/**\n * A single suggestion item displayed in the dropdown.\n */\nexport interface SearchSuggestion {\n  /** Unique identifier — emitted on selection. */\n  id:       string;\n  /** Primary display text. */\n  label:    string;\n  /** Optional secondary line (e.g. category, path, role). */\n  sublabel?: string;\n  /**\n   * Optional icon type for the suggestion row.\n   * - `'search'`  — magnifier (recent / query suggestion)\n   * - `'page'`    — document icon\n   * - `'user'`    — person icon\n   * - `'tag'`     — tag icon\n   * - `'custom'`  — uses `iconPath`\n   */\n  iconType?: 'search' | 'page' | 'user' | 'tag' | 'custom';\n  /** SVG path `d` attribute — used when `iconType === 'custom'`. */\n  iconPath?: string;\n  /** Highlight / badge label (e.g. \"New\", \"Popular\"). */\n  badge?:   string;\n}\n\n/**\n * A filter chip rendered inside the search input.\n */\nexport interface SearchFilter {\n  id:    string;\n  label: string;\n}\n\n/**\n * A suggestion item pre-processed for efficient template rendering.\n * Extends `SearchSuggestion` with a resolved icon path and pre-split\n * highlight parts so the template never calls methods inside `@for` loops.\n */\nexport interface ComputedSuggestion extends SearchSuggestion {\n  /** Resolved SVG `d` path for the row icon. */\n  resolvedIconPath: string;\n  /** Pre-split highlight regions for the suggestion label. */\n  highlighted: { pre: string; match: string; post: string };\n}\n\n// ─── Icon paths keyed to suggestion icon type ─────────────────────────────────\n\nconst SUGGESTION_ICONS: Record<Exclude<SearchSuggestion['iconType'], 'custom' | undefined>, string> = {\n  search: 'M21 21l-6-6m2-5a7 7 0 1 1-14 0 7 7 0 0 1 14 0z',\n  page:   'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zM14 2v6h6',\n  user:   'M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z',\n  tag:    'M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82zM7 7h.01',\n};\n\n// ─── Constants ───────────────────────────────────────────────────────────────\n\n/** Delay in ms before closing the dropdown on blur — lets suggestion clicks register first. */\nconst BLUR_CLOSE_DELAY_MS = 150;\n/** Gap between the input track and the portaled suggestions panel (px). */\nconst PANEL_GAP = 4;\n/** Minimum breathing room from the viewport edge before the vertical flip triggers (px). */\nconst PANEL_MARGIN = 8;\n/** Preferred panel height used only for the open-above vs open-below decision (px) — ~6 rows. */\nconst PANEL_PREFERRED_HEIGHT = 288;\n\n// ─── Component ───────────────────────────────────────────────────────────────\n\n/**\n * SearchBar — A premium, fully-featured search input for dashboards.\n *\n * Features:\n * - Signal-based two-way binding via `[(value)]`\n * - Configurable debounce (default 300 ms)\n * - Typeahead dropdown with keyboard navigation (↑ ↓ Enter Escape)\n * - 4 icon types per suggestion row + custom SVG path support\n * - Inline filter chip tokens (removable)\n * - Loading / searching spinner state\n * - Clear button\n * - Keyboard shortcut hint badge (e.g. ⌘K)\n * - 3 sizes × 3 visual variants\n * - Full dark-mode support\n * - Accessible: `role=\"combobox\"`, `aria-expanded`, `aria-activedescendant`\n */\n@Component({\n  selector: 'sv-search-bar',\n  standalone: true,\n  imports: [NgClass, FormsModule],\n  templateUrl: './search-bar.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SvSearchBarComponent implements OnInit, OnDestroy {\n  private readonly platformId = inject(PLATFORM_ID);\n  private readonly appRef     = inject(ApplicationRef);\n\n  // ── Value ─────────────────────────────────────────────────────────────────\n\n  /** Current input text. Use `[(value)]` for two-way binding. */\n  value = model<string>('');\n\n  // ── Content ───────────────────────────────────────────────────────────────\n\n  /**\n   * Floating label text — only shown when `variant=\"floating\"`.\n   * Acts as a Material Design-style animated label. @default ''\n   */\n  label = input<string>('');\n\n  /** Placeholder text. @default 'Search…' */\n  placeholder = input<string>('Search…');\n\n  /** Explicit accessible name for the input. Falls back to `label` then `placeholder`. */\n  ariaLabel = input<string>('');\n\n  /**\n   * Keyboard shortcut hint shown on the right side of the input when empty.\n   * E.g. `'⌘K'`, `'Ctrl+K'`, `'/''`. Empty string hides the badge.\n   * @default ''\n   */\n  shortcutHint = input<string>('');\n\n  // ── Suggestions ───────────────────────────────────────────────────────────\n\n  /**\n   * Suggestion items to display in the dropdown.\n   * Pass a filtered/sliced array; the component renders all provided items.\n   * Empty array closes the dropdown.\n   */\n  suggestions = input<SearchSuggestion[]>([]);\n\n  /**\n   * Label shown above the suggestions list (e.g. 'Recent searches', 'Results').\n   * Empty string hides the header. @default ''\n   */\n  suggestionsLabel = input<string>('');\n\n  /**\n   * Text displayed at the bottom of the dropdown — useful for \"View all results\".\n   * Empty string hides the footer. @default ''\n   */\n  footerLabel = input<string>('');\n\n  // ── Filters ───────────────────────────────────────────────────────────────\n\n  /**\n   * Active filter chips rendered inside the input track.\n   * Each chip has an × button that emits `filterRemoved`.\n   */\n  filters = input<SearchFilter[]>([]);\n\n  // ── Appearance ────────────────────────────────────────────────────────────\n\n  /** Field size: sm, md or lg. @default 'md' */\n  size    = input<SearchBarSize>('md');\n\n  /** Visual variant: default, floating, minimal… @default 'default' */\n  variant = input<SearchBarVariant>('default');\n\n  /** Show the magnifier icon on the left. @default true */\n  showSearchIcon = input<boolean>(true);\n\n  // ── State ─────────────────────────────────────────────────────────────────\n\n  /** Show the spinning loader inside the search icon area. @default false */\n  loading = input<boolean>(false);\n\n  /** Whether the input is disabled. @default false */\n  disabled = input<boolean>(false);\n\n  /**\n   * Debounce delay in milliseconds before `searched` emits.\n   * Set to 0 to emit on every keystroke. @default 300\n   */\n  debounceMs = input<number>(300);\n\n  /** Additional classes on the root wrapper. */\n  customClass = input<string>('');\n\n  // ── Outputs ───────────────────────────────────────────────────────────────\n\n  /** Emitted (debounced) on every value change. */\n  searched      = output<string>();\n\n  /** Emitted when the user presses Enter or clicks a suggestion. */\n  submitted     = output<string>();\n\n  /** Emitted when a suggestion row is clicked, carrying the suggestion object. */\n  suggestionSelected = output<SearchSuggestion>();\n\n  /** Emitted when the × on a filter chip is clicked. */\n  filterRemoved = output<string>();\n\n  /** Emitted when the footer link is clicked. */\n  footerClick   = output<void>();\n\n  /** Emitted when the input is cleared via the × button. */\n  cleared       = output<void>();\n\n  // ── Internal state ────────────────────────────────────────────────────────\n\n  readonly isFocused        = signal(false);\n  readonly activeIndex      = signal(-1);\n\n  /** Per-instance id base so multiple search bars don't collide. */\n  private readonly _baseId = `sv-search-${++_svSearchUid}`;\n  /** id of the suggestions listbox (referenced by aria-controls). */\n  readonly listboxId = `${this._baseId}-listbox`;\n  /** DOM id for an option row at index `i` (used by aria-activedescendant). */\n  optionId(i: number): string { return `${this._baseId}-opt-${i}`; }\n  /** id of the active option, or null when nothing is highlighted. */\n  readonly activeDescendantId = computed<string | null>(() =>\n    this.activeIndex() >= 0 ? this.optionId(this.activeIndex()) : null\n  );\n  /** Accessible name: explicit ariaLabel, then floating label, then placeholder. */\n  readonly accessibleName = computed<string>(() =>\n    this.ariaLabel() || this.label() || this.placeholder()\n  );\n\n  private debounceTimer: ReturnType<typeof setTimeout> | null = null;\n\n  /** Template reference to the native <input> element. */\n  readonly inputRef  = viewChild<ElementRef<HTMLInputElement>>('inputEl');\n  /** Template reference to the track container — used for dropdown positioning. */\n  readonly trackRef  = viewChild<ElementRef<HTMLElement>>('trackEl');\n\n  // ── Body-portal state ────────────────────────────────────────────────────\n  // Portals the suggestions panel into document.body so ancestor overflow/\n  // transform containers can never clip it (see dropdown-instruction.md).\n\n  /** True once the panel has flipped to open above the track (space below is tight). */\n  readonly openAbove = signal(false);\n  /** Suppresses the dropdown after a viewport resize until focus/typing resumes. */\n  readonly resizeSuppressed = signal(false);\n  /** Inline style object applied to the portaled panel (position:fixed + viewport coords). */\n  readonly panelStyle = signal<Record<string, string>>({});\n\n  private portalEl:   HTMLElement | null = null;\n  private portalView: EmbeddedViewRef<object> | null = null;\n\n  /** The ng-template holding the suggestions panel — never rendered inline; instantiated into <body> on open. */\n  @ViewChild('panelTpl', { read: TemplateRef })\n  private readonly panelTpl!: TemplateRef<object>;\n\n  /** Capture-phase scroll listener — fires for ANY scrollable ancestor, not just the window. */\n  private _rafId: number | null = null;\n  private readonly _scrollHandler = (): void => {\n    if (!this.showDropdown()) return;\n    if (this._rafId !== null) return;\n    this._rafId = requestAnimationFrame(() => {\n      this._rafId = null;\n      if (this.showDropdown()) {\n        this._calcPos();\n        this.portalView?.detectChanges();\n      }\n    });\n  };\n\n  // ── Computed ──────────────────────────────────────────────────────────────\n\n  /**\n   * Suggestions pre-processed once per change-detection cycle.\n   * Resolves each item's icon path and highlight split so the template\n   * can bind to plain properties instead of calling methods inside `@for`.\n   */\n  computedSuggestions = computed<ComputedSuggestion[]>(() =>\n    this.suggestions().map(s => ({\n      ...s,\n      resolvedIconPath: this.getSuggestionIconPath(s),\n      highlighted:      this.highlightMatch(s.label),\n    }))\n  );\n\n  showDropdown = computed(() =>\n    this.isFocused() && !this.resizeSuppressed() && this.computedSuggestions().length > 0\n  );\n\n  showClear = computed(() => this.value().length > 0 && !this.disabled());\n\n  isFloating     = computed(() => false);\n  labelIsFloated = computed(() => this.isFocused() || !!this.value());\n\n  floatingLabelClasses = computed<string>(() => {\n    const floated = this.labelIsFloated();\n    const focused = this.isFocused();\n    const hasIcon = this.showSearchIcon();\n\n    // Not-floated position must align with the input text cursor.\n    // inputNativePadClass zeroes the left pad when icon is present, so cursor\n    // lands at: iconPaddingClass + iconWidth + gap-1.5\n    //   sm: pl-2.5(10) + 14px + 6px = 30px\n    //   md: pl-3(12)   + 16px + 6px = 34px\n    //   lg: pl-4(16)   + 20px + 6px = 42px\n    const notFloatedLeftMap: Record<SearchBarSize, string> = hasIcon\n      ? { sm: 'left-[30px]', md: 'left-[34px]', lg: 'left-[42px]' }\n      : { sm: 'left-2',      md: 'left-3',       lg: 'left-4' };\n    const notFloatedLeft = notFloatedLeftMap[this.size()];\n    const floatedLeft    = 'left-3';\n\n    const textSizeMap: Record<SearchBarSize, string> = {\n      sm: 'text-xs',\n      md: 'text-sm',\n      lg: 'text-base',\n    };\n    const textSize = floated ? 'text-[0.7rem] leading-none' : textSizeMap[this.size()];\n    const bg       = floated ? 'px-1 bg-white dark:bg-gray-900' : '';\n\n    const color = focused && floated\n      ? 'text-primary-600 dark:text-primary-400'\n      : floated\n      ? 'text-gray-500 dark:text-gray-400'\n      : 'text-gray-500 dark:text-gray-400';\n\n    return [\n      'pointer-events-none absolute z-10 transition-all duration-200 select-none whitespace-nowrap',\n      floated\n        ? `top-0 -translate-y-1/2 ${textSize} ${bg} ${floatedLeft}`\n        : `top-1/2 -translate-y-1/2 ${textSize} ${notFloatedLeft}`,\n      color,\n    ].filter(Boolean).join(' ');\n  });\n\n  showShortcut = computed(() =>\n    !!this.shortcutHint() && !this.value() && !this.isFocused() && !this.loading()\n  );\n\n  // ── Class maps ────────────────────────────────────────────────────────────\n\n  wrapperClasses = computed<string>(() => ['relative w-full', this.customClass()].join(' '));\n\n  trackClasses = computed<string>(() => {\n    const sizeMap: Record<SearchBarSize, string> = {\n      sm: 'h-8  text-xs',\n      md: 'h-10 text-sm',\n      lg: 'h-12 text-base',\n    };\n\n    const variantMap: Record<SearchBarVariant, string> = {\n      default:    'bg-white border border-gray-300 dark:bg-gray-900 dark:border-gray-700 shadow-sm',\n      filled:     'bg-gray-100 border border-transparent dark:bg-gray-800 dark:border-transparent',\n      borderless: 'bg-transparent border border-transparent',\n    };\n\n    const focusRing = this.isFocused()\n      ? 'ring-2 ring-primary-500/30 border-primary-500 dark:border-primary-400'\n      : 'hover:border-gray-400 dark:hover:border-gray-500';\n\n    return [\n      'relative flex w-full items-center gap-1.5 rounded-md transition-all duration-150',\n      sizeMap[this.size()],\n      variantMap[this.variant()],\n      this.disabled() ? 'cursor-not-allowed opacity-60' : focusRing,\n      this.filters().length > 0 ? 'flex-wrap py-1' : '',\n    ].filter(Boolean).join(' ');\n  });\n\n  inputPaddingClass = computed<string>(() => {\n    switch (this.size()) {\n      case 'sm': return 'px-2';\n      case 'lg': return 'px-4';\n      default:   return 'px-3';\n    }\n  });\n\n  /**\n   * When a search icon occupies the left side the input needs no left padding —\n   * the icon span + gap-1.5 already create visual spacing.\n   * Without an icon, use symmetric px-X. Applies to all variants.\n   */\n  inputNativePadClass = computed<string>(() => {\n    if (this.showSearchIcon()) {\n      const rp: Record<SearchBarSize, string> = { sm: 'pr-2', md: 'pr-3', lg: 'pr-4' };\n      return `pl-0 ${rp[this.size()]}`;\n    }\n    return this.inputPaddingClass();\n  });\n\n  iconSizeClass = computed<string>(() => {\n    switch (this.size()) {\n      case 'sm': return 'h-3.5 w-3.5';\n      case 'lg': return 'h-5 w-5';\n      default:   return 'h-4 w-4';\n    }\n  });\n\n  iconPaddingClass = computed<string>(() => {\n    switch (this.size()) {\n      case 'sm': return 'pl-2.5';\n      case 'lg': return 'pl-4';\n      default:   return 'pl-3';\n    }\n  });\n\n  // ── Suggestion helpers ────────────────────────────────────────────────────\n\n  getSuggestionIconPath(s: SearchSuggestion): string {\n    if (s.iconType === 'custom' && s.iconPath) return s.iconPath;\n    if (s.iconType && s.iconType !== 'custom') return SUGGESTION_ICONS[s.iconType];\n    return SUGGESTION_ICONS.search;\n  }\n\n  /** Highlight matched portion of a suggestion label. */\n  highlightMatch(text: string): { pre: string; match: string; post: string } {\n    const q = this.value().trim().toLowerCase();\n    if (!q) return { pre: text, match: '', post: '' };\n    const idx = text.toLowerCase().indexOf(q);\n    if (idx === -1) return { pre: text, match: '', post: '' };\n    return {\n      pre:   text.slice(0, idx),\n      match: text.slice(idx, idx + q.length),\n      post:  text.slice(idx + q.length),\n    };\n  }\n\n  // ── Event handlers ────────────────────────────────────────────────────────\n\n  onInput(raw: string): void {\n    this.resizeSuppressed.set(false);\n    this.value.set(raw);\n    this.activeIndex.set(-1);\n\n    if (this.debounceTimer) clearTimeout(this.debounceTimer);\n\n    const ms = this.debounceMs();\n    if (ms > 0) {\n      this.debounceTimer = setTimeout(() => this.searched.emit(raw), ms);\n    } else {\n      this.searched.emit(raw);\n    }\n  }\n\n  onFocus(): void {\n    this.resizeSuppressed.set(false);\n    this.isFocused.set(true);\n  }\n  onBlur(): void   {\n    // Delay so click on a suggestion registers before closing dropdown.\n    setTimeout(() => this.isFocused.set(false), BLUR_CLOSE_DELAY_MS);\n  }\n\n  onKeydown(event: KeyboardEvent): void {\n    const computed = this.computedSuggestions();\n    const count = computed.length;\n    if (!this.showDropdown() && event.key !== 'Enter') return;\n\n    switch (event.key) {\n      case 'ArrowDown':\n        event.preventDefault();\n        this.activeIndex.update(i => Math.min(i + 1, count - 1));\n        break;\n      case 'ArrowUp':\n        event.preventDefault();\n        this.activeIndex.update(i => Math.max(i - 1, -1));\n        break;\n      case 'Enter': {\n        event.preventDefault();\n        const idx = this.activeIndex();\n        if (idx >= 0 && idx < count) {\n          this.selectSuggestion(computed[idx]);\n        } else {\n          this.submitted.emit(this.value());\n          this.isFocused.set(false);\n        }\n        break;\n      }\n      case 'Escape':\n        this.isFocused.set(false);\n        this.activeIndex.set(-1);\n        this.inputRef()?.nativeElement.blur();\n        break;\n    }\n  }\n\n  selectSuggestion(s: SearchSuggestion): void {\n    this.value.set(s.label);\n    this.isFocused.set(false);\n    this.activeIndex.set(-1);\n    this.submitted.emit(s.label);\n    this.suggestionSelected.emit(s);\n  }\n\n  clearValue(): void {\n    this.value.set('');\n    this.activeIndex.set(-1);\n    this.cleared.emit();\n    this.searched.emit('');\n    if (isPlatformBrowser(this.platformId)) {\n      setTimeout(() => this.inputRef()?.nativeElement.focus());\n    }\n  }\n\n  onFooterClick(): void {\n    this.isFocused.set(false);\n    this.footerClick.emit();\n  }\n\n  focus(): void {\n    this.inputRef()?.nativeElement.focus();\n  }\n\n  @HostListener('window:resize')\n  onWindowResize(): void {\n    // Viewport resize invalidates the layout — close rather than reposition\n    // with now-stale coordinates (dropdown-instruction.md §8). Reopens\n    // naturally on the next focus/input.\n    if (this.showDropdown()) this.resizeSuppressed.set(true);\n  }\n\n  private _calcPos(): void {\n    const track = this.trackRef()?.nativeElement;\n    if (!track) return;\n\n    const rect = track.getBoundingClientRect();\n    const vh   = window.innerHeight;\n\n    const spaceBelow = vh - rect.bottom - PANEL_MARGIN;\n    const spaceAbove = rect.top - PANEL_MARGIN;\n    const above = spaceBelow < PANEL_PREFERRED_HEIGHT && spaceAbove > spaceBelow;\n\n    this.openAbove.set(above);\n\n    const style: Record<string, string> = {\n      position:  'fixed',\n      zIndex:    '9999',\n      left:      `${rect.left}px`,\n      width:     `${rect.width}px`,\n      maxHeight: `${Math.max(120, above ? spaceAbove : spaceBelow)}px`,\n    };\n    style[above ? 'bottom' : 'top'] = above\n      ? `${vh - rect.top + PANEL_GAP}px`\n      : `${rect.bottom + PANEL_GAP}px`;\n\n    this.panelStyle.set(style);\n  }\n\n  // ── Lifecycle ─────────────────────────────────────────────────────────────\n\n  constructor() {\n    // Mount/unmount the body-portaled panel whenever the dropdown's open\n    // state changes — the reactive equivalent of Color Picker's toggle().\n    effect(() => {\n      if (this.showDropdown()) {\n        if (!this.portalView) this._openPanel();\n      } else if (this.portalView) {\n        this._closePanel();\n      }\n    });\n  }\n\n  ngOnInit(): void {\n    // Capture phase catches scroll from any scrollable ancestor, not just window.\n    window.addEventListener('scroll', this._scrollHandler, { passive: true, capture: true });\n  }\n\n  ngOnDestroy(): void {\n    window.removeEventListener('scroll', this._scrollHandler, true);\n    if (this._rafId !== null) cancelAnimationFrame(this._rafId);\n    if (this.debounceTimer) clearTimeout(this.debounceTimer);\n    this._closePanel();\n  }\n\n  // ── Body portal ──────────────────────────────────────────────────────────\n\n  private _openPanel(): void {\n    if (!this.panelTpl) return;\n    this._calcPos();\n\n    this.portalEl = document.createElement('div');\n    this.portalEl.className = 'sv-search-portal';\n    document.body.appendChild(this.portalEl);\n\n    this.portalView = this.panelTpl.createEmbeddedView({});\n    this.appRef.attachView(this.portalView);\n    this.portalView.rootNodes.forEach((n: Node) => this.portalEl!.appendChild(n));\n    this.portalView.detectChanges();\n  }\n\n  private _closePanel(): void {\n    if (this.portalView) {\n      this.appRef.detachView(this.portalView);\n      this.portalView.destroy();\n      this.portalView = null;\n    }\n    this.portalEl?.remove();\n    this.portalEl = null;\n  }\n}\n","<!-- Root wrapper — positions the dropdown relative to this element -->\n<div [ngClass]=\"wrapperClasses()\">\n\n  <!-- ── Input track ────────────────────────────────────────────────────── -->\n  <div #trackEl [ngClass]=\"trackClasses()\">\n\n    <!-- Floating label (animates to border on focus or value) -->\n    @if (isFloating() && label()) {\n      <label [ngClass]=\"floatingLabelClasses()\" aria-hidden=\"true\">{{ label() }}</label>\n    }\n    @if (showSearchIcon()) {\n      <span\n        class=\"flex shrink-0 items-center text-gray-500 dark:text-gray-400\"\n        [ngClass]=\"iconPaddingClass()\"\n        aria-hidden=\"true\"\n      >\n        @if (loading()) {\n          <!-- Spinner -->\n          <svg\n            [ngClass]=\"iconSizeClass()\"\n            class=\"animate-spin text-primary-500\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n          >\n            <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\"\n                    stroke=\"currentColor\" stroke-width=\"4\"/>\n            <path class=\"opacity-75\" fill=\"currentColor\"\n                  d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z\"/>\n          </svg>\n        } @else {\n          <!-- Magnifier -->\n          <svg [ngClass]=\"iconSizeClass()\" viewBox=\"0 0 24 24\" fill=\"none\"\n               stroke=\"currentColor\" stroke-width=\"2\"\n               stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <circle cx=\"11\" cy=\"11\" r=\"8\"/>\n            <path d=\"m21 21-4.35-4.35\"/>\n          </svg>\n        }\n      </span>\n    }\n\n    <!-- Active filter chips -->\n    @for (filter of filters(); track filter.id) {\n      <span\n        class=\"inline-flex shrink-0 items-center gap-1 rounded-md\n               bg-primary-50 px-2 py-0.5 text-xs font-medium text-primary-700\n               dark:bg-primary-900/40 dark:text-primary-300\"\n      >\n        {{ filter.label }}\n        <button\n          type=\"button\"\n          class=\"ml-0.5 rounded text-primary-400 hover:text-primary-600\n                 dark:text-primary-400 dark:hover:text-primary-200\n                 focus:outline-none focus-visible:ring-1 focus-visible:ring-primary-400\"\n          (click)=\"filterRemoved.emit(filter.id)\"\n          [attr.aria-label]=\"'Remove filter ' + filter.label\"\n        >\n          <svg class=\"h-3 w-3\" viewBox=\"0 0 14 14\" fill=\"none\"\n               stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\">\n            <path d=\"M3 3l8 8M11 3l-8 8\"/>\n          </svg>\n        </button>\n      </span>\n    }\n\n    <!-- Text input -->\n    <input\n      #inputEl\n      type=\"search\"\n      autocomplete=\"off\"\n      autocorrect=\"off\"\n      spellcheck=\"false\"\n      class=\"min-w-0 flex-1 bg-transparent text-gray-900 placeholder-gray-400\n             outline-none dark:text-white dark:placeholder-gray-500\n             [&::-webkit-search-cancel-button]:hidden\"\n      [ngClass]=\"[\n        inputNativePadClass(),\n        filters().length > 0 ? 'py-0.5' : 'h-full'\n      ]\"\n      [placeholder]=\"isFloating() && label() && !labelIsFloated() ? ' ' : placeholder()\"\n      [disabled]=\"disabled()\"\n      [ngModel]=\"value()\"\n      (ngModelChange)=\"onInput($event)\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      (keydown)=\"onKeydown($event)\"\n      role=\"combobox\"\n      aria-haspopup=\"listbox\"\n      [attr.aria-expanded]=\"showDropdown()\"\n      [attr.aria-label]=\"accessibleName()\"\n      [attr.aria-busy]=\"loading() || null\"\n      [attr.aria-autocomplete]=\"suggestions().length ? 'list' : 'none'\"\n      [attr.aria-controls]=\"showDropdown() ? listboxId : null\"\n      [attr.aria-activedescendant]=\"activeDescendantId()\"\n    />\n\n    <!-- Keyboard shortcut hint -->\n    @if (showShortcut()) {\n      <kbd\n        class=\"mr-2 hidden shrink-0 items-center rounded border border-gray-200 bg-gray-100\n               px-1.5 py-0.5 font-mono text-[10px] text-gray-500\n               dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 sm:inline-flex\"\n        aria-hidden=\"true\"\n      >\n        {{ shortcutHint() }}\n      </kbd>\n    }\n\n    <!-- Clear button -->\n    @if (showClear()) {\n      <button\n        type=\"button\"\n        class=\"mr-2 shrink-0 rounded-full p-0.5 text-gray-400\n               transition-colors hover:bg-gray-100 hover:text-gray-600\n               dark:hover:bg-gray-700 dark:hover:text-gray-300\n               focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-400\"\n        (click)=\"clearValue()\"\n        aria-label=\"Clear search\"\n      >\n        <svg class=\"h-3.5 w-3.5\" viewBox=\"0 0 14 14\" fill=\"none\"\n             stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\">\n          <path d=\"M3 3l8 8M11 3l-8 8\"/>\n        </svg>\n      </button>\n    }\n\n  </div>\n\n  <!-- ── Suggestions dropdown — portaled into document.body on open so ancestor\n       overflow/transform containers can never clip it (see dropdown-instruction.md). ── -->\n  <ng-template #panelTpl>\n    <div\n      [id]=\"listboxId + '-panel'\"\n      class=\"flex flex-col overflow-hidden rounded-xl\n             border border-gray-200 bg-white\n             shadow-lg shadow-gray-200/60\n             dark:border-gray-700 dark:bg-gray-900 dark:shadow-gray-950/60\"\n      [style.position]=\"panelStyle()['position']\"\n      [style.zIndex]=\"panelStyle()['zIndex']\"\n      [style.top]=\"panelStyle()['top']\"\n      [style.bottom]=\"panelStyle()['bottom']\"\n      [style.left]=\"panelStyle()['left']\"\n      [style.width]=\"panelStyle()['width']\"\n      [style.maxHeight]=\"panelStyle()['maxHeight']\"\n    >\n\n      <!-- Dropdown header label -->\n      @if (suggestionsLabel()) {\n        <div class=\"border-b border-gray-100 px-3 py-2 dark:border-gray-800\">\n          <p class=\"text-[11px] font-semibold uppercase tracking-wider\n                    text-gray-500 dark:text-gray-400\">\n            {{ suggestionsLabel() }}\n          </p>\n        </div>\n      }\n\n      <!-- Suggestion rows -->\n      <ul\n        [attr.id]=\"listboxId\"\n        role=\"listbox\"\n        [attr.aria-label]=\"suggestionsLabel() || accessibleName() || 'Search suggestions'\"\n        class=\"min-h-0 flex-1 overflow-y-auto overscroll-contain py-1\"\n      >\n        @for (s of computedSuggestions(); track s.id; let i = $index) {\n          <li\n            [id]=\"optionId(i)\"\n            role=\"option\"\n            [attr.aria-selected]=\"activeIndex() === i\"\n            class=\"flex cursor-pointer items-center gap-3 px-3 py-2.5\n                   transition-colors duration-75 select-none\"\n            [ngClass]=\"activeIndex() === i\n              ? 'bg-primary-50 dark:bg-primary-900/30'\n              : 'hover:bg-gray-50 dark:hover:bg-gray-800/60'\"\n            (mousedown)=\"selectSuggestion(s)\"\n            (mouseenter)=\"activeIndex.set(i)\"\n          >\n            <!-- Row icon -->\n            <span\n              class=\"flex h-7 w-7 shrink-0 items-center justify-center rounded-lg\n                     text-gray-500 dark:text-gray-400\"\n              [ngClass]=\"activeIndex() === i\n                ? 'bg-primary-100 text-primary-600 dark:bg-primary-900/50 dark:text-primary-400'\n                : 'bg-gray-100 dark:bg-gray-800'\"\n              aria-hidden=\"true\"\n            >\n              <svg class=\"h-3.5 w-3.5\" viewBox=\"0 0 24 24\" fill=\"none\"\n                   stroke=\"currentColor\" stroke-width=\"2\"\n                   stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path [attr.d]=\"s.resolvedIconPath\" />\n              </svg>\n            </span>\n\n            <!-- Text -->\n            <span class=\"min-w-0 flex-1\">\n              <!-- Highlighted label (pre-computed, no method call in template) -->\n              <span class=\"block truncate text-sm font-medium text-gray-900 dark:text-white\">\n                {{ s.highlighted.pre }}<mark class=\"bg-transparent font-bold text-primary-600 dark:text-primary-400\">{{ s.highlighted.match }}</mark>{{ s.highlighted.post }}\n              </span>\n              @if (s.sublabel) {\n                <span class=\"block truncate text-xs text-gray-500 dark:text-gray-400\">\n                  {{ s.sublabel }}\n                </span>\n              }\n            </span>\n\n            <!-- Badge -->\n            @if (s.badge) {\n              <span\n                class=\"shrink-0 rounded-full bg-primary-50 px-2 py-0.5\n                       text-[10px] font-semibold text-primary-600\n                       dark:bg-primary-900/40 dark:text-primary-400\"\n              >\n                {{ s.badge }}\n              </span>\n            }\n\n            <!-- Keyboard hint on active row -->\n            @if (activeIndex() === i) {\n              <kbd class=\"shrink-0 rounded border border-gray-200 bg-gray-100 px-1\n                          py-0.5 font-mono text-[9px] text-gray-500\n                          dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400\"\n                   aria-hidden=\"true\">\n                ↵\n              </kbd>\n            }\n\n          </li>\n        }\n      </ul>\n\n      <!-- Dropdown footer -->\n      @if (footerLabel()) {\n        <div class=\"border-t border-gray-100 dark:border-gray-800\">\n          <button\n            type=\"button\"\n            class=\"flex w-full items-center justify-between px-3 py-2.5\n                   text-xs font-medium text-primary-600 transition-colors\n                   hover:bg-gray-50 dark:text-primary-400 dark:hover:bg-gray-800/60\n                   focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-400\"\n            (mousedown)=\"onFooterClick()\"\n          >\n            <span>{{ footerLabel() }}</span>\n            <svg class=\"h-3.5 w-3.5\" viewBox=\"0 0 24 24\" fill=\"none\"\n                 stroke=\"currentColor\" stroke-width=\"2\"\n                 stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <path d=\"M5 12h14M12 5l7 7-7 7\"/>\n            </svg>\n          </button>\n        </div>\n      }\n\n    </div>\n  </ng-template>\n\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@styloviz/search-bar",
+  "version": "0.1.1",
+  "description": "Search input with live suggestions, keyboard navigation and a clearable field.",
+  "license": "MIT",
+  "author": "sazzad-bs23",
+  "homepage": "https://styloviz.dev",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rhossain/angular-tailwind-dashboard-components.git",
+    "directory": "projects/search-bar-free"
+  },
+  "bugs": {
+    "url": "https://github.com/rhossain/angular-tailwind-dashboard-components/issues"
+  },
+  "peerDependencies": {
+    "@angular/common": ">=21.0.0",
+    "@angular/core": ">=21.0.0",
+    "@angular/forms": ">=21.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/styloviz-search-bar.mjs",
+  "typings": "types/styloviz-search-bar.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/styloviz-search-bar.d.ts",
+      "default": "./fesm2022/styloviz-search-bar.mjs"
+    }
+  },
+  "type": "module",
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}

package/types/styloviz-search-bar.d.ts

@@ -0,0 +1,218 @@
+import * as _angular_core from '@angular/core';
+import { OnInit, OnDestroy, ElementRef } from '@angular/core';
+
+type SearchBarSize = 'sm' | 'md' | 'lg';
+type SearchBarVariant = 'default' | 'filled' | 'borderless';
+/**
+ * A single suggestion item displayed in the dropdown.
+ */
+interface SearchSuggestion {
+    /** Unique identifier — emitted on selection. */
+    id: string;
+    /** Primary display text. */
+    label: string;
+    /** Optional secondary line (e.g. category, path, role). */
+    sublabel?: string;
+    /**
+     * Optional icon type for the suggestion row.
+     * - `'search'`  — magnifier (recent / query suggestion)
+     * - `'page'`    — document icon
+     * - `'user'`    — person icon
+     * - `'tag'`     — tag icon
+     * - `'custom'`  — uses `iconPath`
+     */
+    iconType?: 'search' | 'page' | 'user' | 'tag' | 'custom';
+    /** SVG path `d` attribute — used when `iconType === 'custom'`. */
+    iconPath?: string;
+    /** Highlight / badge label (e.g. "New", "Popular"). */
+    badge?: string;
+}
+/**
+ * A filter chip rendered inside the search input.
+ */
+interface SearchFilter {
+    id: string;
+    label: string;
+}
+/**
+ * A suggestion item pre-processed for efficient template rendering.
+ * Extends `SearchSuggestion` with a resolved icon path and pre-split
+ * highlight parts so the template never calls methods inside `@for` loops.
+ */
+interface ComputedSuggestion extends SearchSuggestion {
+    /** Resolved SVG `d` path for the row icon. */
+    resolvedIconPath: string;
+    /** Pre-split highlight regions for the suggestion label. */
+    highlighted: {
+        pre: string;
+        match: string;
+        post: string;
+    };
+}
+/**
+ * SearchBar — A premium, fully-featured search input for dashboards.
+ *
+ * Features:
+ * - Signal-based two-way binding via `[(value)]`
+ * - Configurable debounce (default 300 ms)
+ * - Typeahead dropdown with keyboard navigation (↑ ↓ Enter Escape)
+ * - 4 icon types per suggestion row + custom SVG path support
+ * - Inline filter chip tokens (removable)
+ * - Loading / searching spinner state
+ * - Clear button
+ * - Keyboard shortcut hint badge (e.g. ⌘K)
+ * - 3 sizes × 3 visual variants
+ * - Full dark-mode support
+ * - Accessible: `role="combobox"`, `aria-expanded`, `aria-activedescendant`
+ */
+declare class SvSearchBarComponent implements OnInit, OnDestroy {
+    private readonly platformId;
+    private readonly appRef;
+    /** Current input text. Use `[(value)]` for two-way binding. */
+    value: _angular_core.ModelSignal<string>;
+    /**
+     * Floating label text — only shown when `variant="floating"`.
+     * Acts as a Material Design-style animated label. @default ''
+     */
+    label: _angular_core.InputSignal<string>;
+    /** Placeholder text. @default 'Search…' */
+    placeholder: _angular_core.InputSignal<string>;
+    /** Explicit accessible name for the input. Falls back to `label` then `placeholder`. */
+    ariaLabel: _angular_core.InputSignal<string>;
+    /**
+     * Keyboard shortcut hint shown on the right side of the input when empty.
+     * E.g. `'⌘K'`, `'Ctrl+K'`, `'/''`. Empty string hides the badge.
+     * @default ''
+     */
+    shortcutHint: _angular_core.InputSignal<string>;
+    /**
+     * Suggestion items to display in the dropdown.
+     * Pass a filtered/sliced array; the component renders all provided items.
+     * Empty array closes the dropdown.
+     */
+    suggestions: _angular_core.InputSignal<SearchSuggestion[]>;
+    /**
+     * Label shown above the suggestions list (e.g. 'Recent searches', 'Results').
+     * Empty string hides the header. @default ''
+     */
+    suggestionsLabel: _angular_core.InputSignal<string>;
+    /**
+     * Text displayed at the bottom of the dropdown — useful for "View all results".
+     * Empty string hides the footer. @default ''
+     */
+    footerLabel: _angular_core.InputSignal<string>;
+    /**
+     * Active filter chips rendered inside the input track.
+     * Each chip has an × button that emits `filterRemoved`.
+     */
+    filters: _angular_core.InputSignal<SearchFilter[]>;
+    /** Field size: sm, md or lg. @default 'md' */
+    size: _angular_core.InputSignal<SearchBarSize>;
+    /** Visual variant: default, floating, minimal… @default 'default' */
+    variant: _angular_core.InputSignal<SearchBarVariant>;
+    /** Show the magnifier icon on the left. @default true */
+    showSearchIcon: _angular_core.InputSignal<boolean>;
+    /** Show the spinning loader inside the search icon area. @default false */
+    loading: _angular_core.InputSignal<boolean>;
+    /** Whether the input is disabled. @default false */
+    disabled: _angular_core.InputSignal<boolean>;
+    /**
+     * Debounce delay in milliseconds before `searched` emits.
+     * Set to 0 to emit on every keystroke. @default 300
+     */
+    debounceMs: _angular_core.InputSignal<number>;
+    /** Additional classes on the root wrapper. */
+    customClass: _angular_core.InputSignal<string>;
+    /** Emitted (debounced) on every value change. */
+    searched: _angular_core.OutputEmitterRef<string>;
+    /** Emitted when the user presses Enter or clicks a suggestion. */
+    submitted: _angular_core.OutputEmitterRef<string>;
+    /** Emitted when a suggestion row is clicked, carrying the suggestion object. */
+    suggestionSelected: _angular_core.OutputEmitterRef<SearchSuggestion>;
+    /** Emitted when the × on a filter chip is clicked. */
+    filterRemoved: _angular_core.OutputEmitterRef<string>;
+    /** Emitted when the footer link is clicked. */
+    footerClick: _angular_core.OutputEmitterRef<void>;
+    /** Emitted when the input is cleared via the × button. */
+    cleared: _angular_core.OutputEmitterRef<void>;
+    readonly isFocused: _angular_core.WritableSignal<boolean>;
+    readonly activeIndex: _angular_core.WritableSignal<number>;
+    /** Per-instance id base so multiple search bars don't collide. */
+    private readonly _baseId;
+    /** id of the suggestions listbox (referenced by aria-controls). */
+    readonly listboxId: string;
+    /** DOM id for an option row at index `i` (used by aria-activedescendant). */
+    optionId(i: number): string;
+    /** id of the active option, or null when nothing is highlighted. */
+    readonly activeDescendantId: _angular_core.Signal<string | null>;
+    /** Accessible name: explicit ariaLabel, then floating label, then placeholder. */
+    readonly accessibleName: _angular_core.Signal<string>;
+    private debounceTimer;
+    /** Template reference to the native <input> element. */
+    readonly inputRef: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
+    /** Template reference to the track container — used for dropdown positioning. */
+    readonly trackRef: _angular_core.Signal<ElementRef<HTMLElement> | undefined>;
+    /** True once the panel has flipped to open above the track (space below is tight). */
+    readonly openAbove: _angular_core.WritableSignal<boolean>;
+    /** Suppresses the dropdown after a viewport resize until focus/typing resumes. */
+    readonly resizeSuppressed: _angular_core.WritableSignal<boolean>;
+    /** Inline style object applied to the portaled panel (position:fixed + viewport coords). */
+    readonly panelStyle: _angular_core.WritableSignal<Record<string, string>>;
+    private portalEl;
+    private portalView;
+    /** The ng-template holding the suggestions panel — never rendered inline; instantiated into <body> on open. */
+    private readonly panelTpl;
+    /** Capture-phase scroll listener — fires for ANY scrollable ancestor, not just the window. */
+    private _rafId;
+    private readonly _scrollHandler;
+    /**
+     * Suggestions pre-processed once per change-detection cycle.
+     * Resolves each item's icon path and highlight split so the template
+     * can bind to plain properties instead of calling methods inside `@for`.
+     */
+    computedSuggestions: _angular_core.Signal<ComputedSuggestion[]>;
+    showDropdown: _angular_core.Signal<boolean>;
+    showClear: _angular_core.Signal<boolean>;
+    isFloating: _angular_core.Signal<boolean>;
+    labelIsFloated: _angular_core.Signal<boolean>;
+    floatingLabelClasses: _angular_core.Signal<string>;
+    showShortcut: _angular_core.Signal<boolean>;
+    wrapperClasses: _angular_core.Signal<string>;
+    trackClasses: _angular_core.Signal<string>;
+    inputPaddingClass: _angular_core.Signal<string>;
+    /**
+     * When a search icon occupies the left side the input needs no left padding —
+     * the icon span + gap-1.5 already create visual spacing.
+     * Without an icon, use symmetric px-X. Applies to all variants.
+     */
+    inputNativePadClass: _angular_core.Signal<string>;
+    iconSizeClass: _angular_core.Signal<string>;
+    iconPaddingClass: _angular_core.Signal<string>;
+    getSuggestionIconPath(s: SearchSuggestion): string;
+    /** Highlight matched portion of a suggestion label. */
+    highlightMatch(text: string): {
+        pre: string;
+        match: string;
+        post: string;
+    };
+    onInput(raw: string): void;
+    onFocus(): void;
+    onBlur(): void;
+    onKeydown(event: KeyboardEvent): void;
+    selectSuggestion(s: SearchSuggestion): void;
+    clearValue(): void;
+    onFooterClick(): void;
+    focus(): void;
+    onWindowResize(): void;
+    private _calcPos;
+    constructor();
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    private _openPanel;
+    private _closePanel;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SvSearchBarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SvSearchBarComponent, "sv-search-bar", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "shortcutHint": { "alias": "shortcutHint"; "required": false; "isSignal": true; }; "suggestions": { "alias": "suggestions"; "required": false; "isSignal": true; }; "suggestionsLabel": { "alias": "suggestionsLabel"; "required": false; "isSignal": true; }; "footerLabel": { "alias": "footerLabel"; "required": false; "isSignal": true; }; "filters": { "alias": "filters"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "showSearchIcon": { "alias": "showSearchIcon"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "debounceMs": { "alias": "debounceMs"; "required": false; "isSignal": true; }; "customClass": { "alias": "customClass"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "searched": "searched"; "submitted": "submitted"; "suggestionSelected": "suggestionSelected"; "filterRemoved": "filterRemoved"; "footerClick": "footerClick"; "cleared": "cleared"; }, never, never, true, never>;
+}
+
+export { SvSearchBarComponent };
+export type { SearchBarSize, SearchBarVariant, SearchFilter, SearchSuggestion };