@ship-ui/core 0.22.3 → 0.22.5

package/fesm2022/ship-ui-core-ship-spotlight.mjs

@@ -0,0 +1,590 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, viewChild, input, model, output, computed, signal, effect, ChangeDetectionStrategy, ViewEncapsulation, Component, inject, DOCUMENT, DestroyRef, Injectable } from '@angular/core';
+import { ShipIcon } from '@ship-ui/core/ship-icon';
+import { ShipList } from '@ship-ui/core/ship-list';
+import { ShipKbd } from '@ship-ui/core/ship-kbd';
+import { ShipDialogService } from '@ship-ui/core/ship-dialog';
+
+const SHIP_SPOTLIGHT_CONFIG = new InjectionToken('SHIP_SPOTLIGHT_CONFIG');
+function provideShipSpotlight(config) {
+    return {
+        provide: SHIP_SPOTLIGHT_CONFIG,
+        useValue: config,
+    };
+}
+class ShipSpotlight {
+    constructor() {
+        this.inputRef = viewChild('inputRef', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inputRef" }] : /* istanbul ignore next */ []));
+        this.resultsRef = viewChild('resultsRef', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resultsRef" }] : /* istanbul ignore next */ []));
+        // Input config passed from ShipDialogService
+        this.data = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "data" }] : /* istanbul ignore next */ []));
+        // Standard inputs (fallback)
+        this.items = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+        this.placeholder = input('Search actions, settings, or pages...', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        this.customFilter = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "customFilter" }] : /* istanbul ignore next */ []));
+        this.searchQuery = model('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "searchQuery" }] : /* istanbul ignore next */ []));
+        this.itemSelected = output();
+        this.closed = output();
+        // Merged config properties
+        this.mergedItems = computed(() => this.data()?.items ?? this.items(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "mergedItems" }] : /* istanbul ignore next */ []));
+        this.mergedPlaceholder = computed(() => this.data()?.placeholder ?? this.placeholder(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "mergedPlaceholder" }] : /* istanbul ignore next */ []));
+        this.mergedCustomFilter = computed(() => this.data()?.customFilter ?? this.customFilter(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "mergedCustomFilter" }] : /* istanbul ignore next */ []));
+        this.activeOptionIndex = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeOptionIndex" }] : /* istanbul ignore next */ []));
+        // Computes the scored and filtered flat list of items
+        this.flatFilteredItems = computed(() => {
+            const query = this.searchQuery().toLowerCase().trim();
+            const allItems = this.mergedItems();
+            if (this.mergedCustomFilter() || !query) {
+                return allItems;
+            }
+            const scored = allItems
+                .map((item) => {
+                const labelScore = this.#calculateMatchScore(item.label.toLowerCase(), query);
+                const descScore = item.description ? this.#calculateMatchScore(item.description.toLowerCase(), query) : 0;
+                return { item, score: Math.max(labelScore, descScore) };
+            })
+                .filter((x) => x.score > 0)
+                .sort((a, b) => b.score - a.score);
+            return scored.map((x) => x.item);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "flatFilteredItems" }] : /* istanbul ignore next */ []));
+        // Groups flat list of items by category and precomputes flat indices
+        this.groupedFilteredItems = computed(() => {
+            const flat = this.flatFilteredItems();
+            const groups = [];
+            let currentFlatIndex = 0;
+            flat.forEach((item) => {
+                const cat = item.category || 'Actions';
+                let group = groups.find((g) => g.category === cat);
+                if (!group) {
+                    group = { category: cat, items: [] };
+                    groups.push(group);
+                }
+                group.items.push({ item, flatIndex: currentFlatIndex++ });
+            });
+            return groups;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "groupedFilteredItems" }] : /* istanbul ignore next */ []));
+        this.validateItemsEffect = effect(() => {
+            const items = this.mergedItems();
+            for (const item of items) {
+                if (item.shortcut) {
+                    this.#validateShortcut(item.shortcut);
+                }
+            }
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "validateItemsEffect" }] : /* istanbul ignore next */ []));
+        // Sync initial search query if provided in dialog data
+        effect(() => {
+            const initialQuery = this.data()?.searchQuery;
+            if (initialQuery !== undefined) {
+                this.searchQuery.set(initialQuery);
+            }
+        });
+        // Auto-focus input when the view is initialized
+        effect(() => {
+            const inputEl = this.inputRef()?.nativeElement;
+            if (inputEl && typeof inputEl.focus === 'function') {
+                setTimeout(() => inputEl.focus(), 50);
+            }
+        });
+        // Scroll active item into view
+        effect(() => {
+            const index = this.activeOptionIndex();
+            if (index > -1) {
+                queueMicrotask(() => this.scrollToActiveItem());
+            }
+        });
+    }
+    onSearchInput(event) {
+        const val = event.target.value;
+        this.searchQuery.set(val);
+        this.activeOptionIndex.set(0);
+    }
+    clearSearch() {
+        this.searchQuery.set('');
+        const inputEl = this.inputRef()?.nativeElement;
+        if (inputEl) {
+            inputEl.value = '';
+            if (typeof inputEl.focus === 'function') {
+                inputEl.focus();
+            }
+        }
+        this.activeOptionIndex.set(0);
+    }
+    onKeyDown(event) {
+        // Check if the event matches any item shortcut
+        const allItems = this.mergedItems();
+        const shortcutMatch = allItems.find((item) => item.shortcut && this.#checkShortcutMatch(event, item.shortcut));
+        if (shortcutMatch) {
+            event.preventDefault();
+            event.stopPropagation();
+            // Delay selection to ensure the browser honors preventDefault before the DOM node is potentially destroyed
+            setTimeout(() => this.selectItem(shortcutMatch), 10);
+            return;
+        }
+        const flat = this.flatFilteredItems();
+        if (flat.length === 0)
+            return;
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            const nextIdx = (this.activeOptionIndex() + 1) % flat.length;
+            this.activeOptionIndex.set(nextIdx);
+        }
+        else if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            const prevIdx = (this.activeOptionIndex() - 1 + flat.length) % flat.length;
+            this.activeOptionIndex.set(prevIdx);
+        }
+        else if (event.key === 'Tab') {
+            event.preventDefault();
+            if (event.shiftKey) {
+                const prevIdx = (this.activeOptionIndex() - 1 + flat.length) % flat.length;
+                this.activeOptionIndex.set(prevIdx);
+            }
+            else {
+                const nextIdx = (this.activeOptionIndex() + 1) % flat.length;
+                this.activeOptionIndex.set(nextIdx);
+            }
+        }
+        else if (event.key === 'Enter') {
+            event.preventDefault();
+            const selected = flat[this.activeOptionIndex()];
+            if (selected) {
+                this.selectItem(selected);
+            }
+        }
+    }
+    selectItem(item) {
+        this.itemSelected.emit(item);
+        this.closed.emit();
+    }
+    scrollToActiveItem() {
+        const resultsEl = this.resultsRef()?.nativeElement;
+        if (!resultsEl)
+            return;
+        const activeEl = resultsEl.querySelector('[action].active');
+        if (activeEl && typeof activeEl.scrollIntoView === 'function') {
+            activeEl.scrollIntoView({ block: 'nearest' });
+        }
+    }
+    parseShortcutKeys(shortcut) {
+        if (!shortcut)
+            return [];
+        return shortcut.split('+').map((s) => s.trim().toLowerCase());
+    }
+    #validateShortcut(shortcut) {
+        const normalized = shortcut
+            .toLowerCase()
+            .split('+')
+            .map((k) => k.trim())
+            .join('+');
+        const reserved = [
+            'meta+n', 'ctrl+n',
+            'meta+t', 'ctrl+t',
+            'meta+w', 'ctrl+w',
+            'meta+q', 'ctrl+q',
+            'meta+r', 'ctrl+r',
+            'meta+l', 'ctrl+l',
+            'meta+shift+n', 'ctrl+shift+n',
+            'meta+shift+t', 'ctrl+shift+t',
+            'meta+shift+w', 'ctrl+shift+w',
+            'cmd+n', 'cmd+t', 'cmd+w', 'cmd+q', 'cmd+r', 'cmd+l',
+            'cmd+shift+n', 'cmd+shift+t', 'cmd+shift+w',
+        ];
+        if (reserved.includes(normalized)) {
+            throw new Error(`[ShipUI Error] The shortcut "${shortcut}" uses a reserved browser hotkey that cannot be reliably prevented (e.g. New Window, New Tab). Please choose a different shortcut.`);
+        }
+    }
+    #checkShortcutMatch(event, shortcut) {
+        if (!shortcut)
+            return false;
+        const keys = this.parseShortcutKeys(shortcut);
+        const needsMeta = keys.includes('meta') || keys.includes('cmd') || keys.includes('command');
+        const needsCtrl = keys.includes('ctrl') || keys.includes('control');
+        const needsAlt = keys.includes('alt') || keys.includes('option');
+        const needsShift = keys.includes('shift');
+        if (event.metaKey !== needsMeta)
+            return false;
+        if (event.ctrlKey !== needsCtrl)
+            return false;
+        if (event.altKey !== needsAlt)
+            return false;
+        if (event.shiftKey !== needsShift)
+            return false;
+        const mainKeys = keys.filter((k) => !['meta', 'cmd', 'command', 'ctrl', 'control', 'alt', 'option', 'shift'].includes(k));
+        if (mainKeys.length === 1) {
+            return event.key.toLowerCase() === mainKeys[0].toLowerCase();
+        }
+        return false;
+    }
+    #calculateMatchScore(option, input) {
+        if (!input)
+            return 0;
+        let score = 0;
+        let lastIndex = -1;
+        let matchCount = 0;
+        let inSequence = true;
+        for (let i = 0; i < input.length; i++) {
+            const char = input[i];
+            if (option.length > lastIndex + 1 && option[lastIndex + 1] === char) {
+                score += i === 0 ? 100 : 150;
+                lastIndex++;
+                matchCount++;
+            }
+            else {
+                const charIndex = option.indexOf(char, lastIndex + 1);
+                if (i > 0) {
+                    inSequence = false;
+                }
+                if (charIndex === -1) {
+                    return 0;
+                }
+                score += 100;
+                lastIndex = charIndex;
+                matchCount++;
+            }
+        }
+        if (inSequence && input.length === matchCount) {
+            score += 1000;
+        }
+        score += matchCount * 20;
+        return score;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipSpotlight, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ShipSpotlight, isStandalone: true, selector: "sh-spotlight", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, customFilter: { classPropertyName: "customFilter", publicName: "customFilter", isSignal: true, isRequired: false, transformFunction: null }, searchQuery: { classPropertyName: "searchQuery", publicName: "searchQuery", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchQuery: "searchQueryChange", itemSelected: "itemSelected", closed: "closed" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, isSignal: true }, { propertyName: "resultsRef", first: true, predicate: ["resultsRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div class="sh-spotlight-container">
+      <div class="sh-spotlight-search-bar">
+        <sh-icon class="sh-spotlight-search-icon">magnifying-glass</sh-icon>
+        <input
+          #inputRef
+          type="text"
+          class="sh-spotlight-input"
+          [placeholder]="mergedPlaceholder()"
+          [value]="searchQuery()"
+          (input)="onSearchInput($event)"
+          (keydown)="onKeyDown($event)" />
+        @if (searchQuery()) {
+          <button class="sh-spotlight-clear-btn" (click)="clearSearch()">
+            <sh-icon>x-bold</sh-icon>
+          </button>
+        }
+      </div>
+
+      <div #resultsRef class="sh-spotlight-results">
+        @if (groupedFilteredItems().length > 0) {
+          @for (group of groupedFilteredItems(); track group.category) {
+            <div class="sh-spotlight-category">
+              <div class="sh-spotlight-category-title">{{ group.category }}</div>
+              <sh-list class="type-b">
+                @for (itemWithIdx of group.items; track itemWithIdx.item.id) {
+                  <button
+                    action
+                    type="button"
+                    [class.active]="itemWithIdx.flatIndex === activeOptionIndex()"
+                    (mouseenter)="activeOptionIndex.set(itemWithIdx.flatIndex)"
+                    (click)="selectItem(itemWithIdx.item)">
+                    @if (itemWithIdx.item.icon) {
+                      <sh-icon>{{ itemWithIdx.item.icon }}</sh-icon>
+                    }
+                    <div class="text-group">
+                      <span class="label">{{ itemWithIdx.item.label }}</span>
+                      @if (itemWithIdx.item.description) {
+                        <span class="description">{{ itemWithIdx.item.description }}</span>
+                      }
+                    </div>
+                    @if (itemWithIdx.item.shortcut) {
+                      <span class="shortcut">
+                        @for (key of parseShortcutKeys(itemWithIdx.item.shortcut); track key) {
+                          <sh-kbd
+                            [meta]="key === 'meta' || key === 'cmd' || key === 'command'"
+                            [shift]="key === 'shift'"
+                            [alt]="key === 'alt' || key === 'option'"
+                            [ctrl]="key === 'ctrl' || key === 'control'"
+                            [enter]="key === 'enter' || key === 'return'"
+                            [escape]="key === 'escape' || key === 'esc'"
+                            [backspace]="key === 'backspace'"
+                          >
+                            @if (!['meta', 'cmd', 'command', 'shift', 'alt', 'option', 'ctrl', 'control', 'enter', 'return', 'escape', 'esc', 'backspace'].includes(key)) {
+                              {{ key }}
+                            }
+                          </sh-kbd>
+                        }
+                      </span>
+                    }
+                  </button>
+                }
+              </sh-list>
+            </div>
+          }
+        } @else {
+          <div class="sh-spotlight-no-results">
+            <sh-icon class="sh-spotlight-no-results-icon">warning-octagon</sh-icon>
+            <span class="sh-spotlight-no-results-text">No results found for "{{ searchQuery() }}"</span>
+          </div>
+        }
+      </div>
+
+      <div class="sh-spotlight-footer">
+        <span class="sh-spotlight-footer-tip">
+          <sh-kbd>↓</sh-kbd> <sh-kbd>↑</sh-kbd>
+          to navigate
+        </span>
+        <span class="sh-spotlight-footer-tip">
+          <sh-kbd enter></sh-kbd>
+          to select
+        </span>
+        <span class="sh-spotlight-footer-tip">
+          <sh-kbd escape></sh-kbd>
+          to close
+        </span>
+      </div>
+    </div>
+  `, isInline: true, styles: ["sh-spotlight{display:block;width:100%}sh-spotlight .sh-spotlight-container{display:flex;flex-direction:column;width:100%;overflow:hidden}sh-spotlight .sh-spotlight-search-bar{display:flex;align-items:center;padding:1rem;border-bottom:1px solid rgb(from var(--base-4) r g b/30%);gap:.75rem}sh-spotlight .sh-spotlight-search-icon{font-size:1.25rem;color:var(--base-8)}sh-spotlight .sh-spotlight-input{flex:1;background:transparent;border:none;outline:none;font:var(--paragraph-20);color:var(--base-12)}sh-spotlight .sh-spotlight-input::placeholder{color:var(--base-7)}sh-spotlight .sh-spotlight-clear-btn{background:transparent;border:none;padding:.25rem;cursor:pointer;color:var(--base-7);display:flex;align-items:center;justify-content:center;border-radius:var(--shape-1)}sh-spotlight .sh-spotlight-clear-btn:hover{background:var(--base-3);color:var(--base-10)}sh-spotlight .sh-spotlight-clear-btn sh-icon{font-size:.875rem}sh-spotlight .sh-spotlight-results{max-height:21.875rem;padding:.5rem;display:flex;flex-direction:column;gap:.5rem;outline:none;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:auto}sh-spotlight .sh-spotlight-category-title{font:var(--paragraph-40B);color:var(--base-7);padding:.5rem .75rem .25rem;text-transform:uppercase;letter-spacing:.0625rem}sh-spotlight .sh-spotlight-no-results{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2.5rem 1.25rem;color:var(--base-7);gap:.75rem}sh-spotlight .sh-spotlight-no-results-icon{font-size:2rem;color:var(--base-6)}sh-spotlight .sh-spotlight-no-results-text{font:var(--paragraph-30)}sh-spotlight .sh-spotlight-footer{display:flex;align-items:center;padding:.75rem 1rem;background:rgb(from var(--base-1) r g b/90%);border-top:1px solid rgb(from var(--base-4) r g b/30%);gap:1rem;font-size:.6875rem;color:var(--base-7)}sh-spotlight .sh-spotlight-footer .sh-spotlight-footer-tip{display:flex;align-items:center;gap:.25rem}\n"], dependencies: [{ kind: "component", type: ShipIcon, selector: "sh-icon", inputs: ["color", "size"] }, { kind: "component", type: ShipList, selector: "sh-list" }, { kind: "component", type: ShipKbd, selector: "sh-kbd, [sh-kbd]", inputs: ["meta", "shift", "alt", "ctrl", "enter", "escape", "backspace"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipSpotlight, decorators: [{
+            type: Component,
+            args: [{ selector: 'sh-spotlight', encapsulation: ViewEncapsulation.None, imports: [ShipIcon, ShipList, ShipKbd], template: `
+    <div class="sh-spotlight-container">
+      <div class="sh-spotlight-search-bar">
+        <sh-icon class="sh-spotlight-search-icon">magnifying-glass</sh-icon>
+        <input
+          #inputRef
+          type="text"
+          class="sh-spotlight-input"
+          [placeholder]="mergedPlaceholder()"
+          [value]="searchQuery()"
+          (input)="onSearchInput($event)"
+          (keydown)="onKeyDown($event)" />
+        @if (searchQuery()) {
+          <button class="sh-spotlight-clear-btn" (click)="clearSearch()">
+            <sh-icon>x-bold</sh-icon>
+          </button>
+        }
+      </div>
+
+      <div #resultsRef class="sh-spotlight-results">
+        @if (groupedFilteredItems().length > 0) {
+          @for (group of groupedFilteredItems(); track group.category) {
+            <div class="sh-spotlight-category">
+              <div class="sh-spotlight-category-title">{{ group.category }}</div>
+              <sh-list class="type-b">
+                @for (itemWithIdx of group.items; track itemWithIdx.item.id) {
+                  <button
+                    action
+                    type="button"
+                    [class.active]="itemWithIdx.flatIndex === activeOptionIndex()"
+                    (mouseenter)="activeOptionIndex.set(itemWithIdx.flatIndex)"
+                    (click)="selectItem(itemWithIdx.item)">
+                    @if (itemWithIdx.item.icon) {
+                      <sh-icon>{{ itemWithIdx.item.icon }}</sh-icon>
+                    }
+                    <div class="text-group">
+                      <span class="label">{{ itemWithIdx.item.label }}</span>
+                      @if (itemWithIdx.item.description) {
+                        <span class="description">{{ itemWithIdx.item.description }}</span>
+                      }
+                    </div>
+                    @if (itemWithIdx.item.shortcut) {
+                      <span class="shortcut">
+                        @for (key of parseShortcutKeys(itemWithIdx.item.shortcut); track key) {
+                          <sh-kbd
+                            [meta]="key === 'meta' || key === 'cmd' || key === 'command'"
+                            [shift]="key === 'shift'"
+                            [alt]="key === 'alt' || key === 'option'"
+                            [ctrl]="key === 'ctrl' || key === 'control'"
+                            [enter]="key === 'enter' || key === 'return'"
+                            [escape]="key === 'escape' || key === 'esc'"
+                            [backspace]="key === 'backspace'"
+                          >
+                            @if (!['meta', 'cmd', 'command', 'shift', 'alt', 'option', 'ctrl', 'control', 'enter', 'return', 'escape', 'esc', 'backspace'].includes(key)) {
+                              {{ key }}
+                            }
+                          </sh-kbd>
+                        }
+                      </span>
+                    }
+                  </button>
+                }
+              </sh-list>
+            </div>
+          }
+        } @else {
+          <div class="sh-spotlight-no-results">
+            <sh-icon class="sh-spotlight-no-results-icon">warning-octagon</sh-icon>
+            <span class="sh-spotlight-no-results-text">No results found for "{{ searchQuery() }}"</span>
+          </div>
+        }
+      </div>
+
+      <div class="sh-spotlight-footer">
+        <span class="sh-spotlight-footer-tip">
+          <sh-kbd>↓</sh-kbd> <sh-kbd>↑</sh-kbd>
+          to navigate
+        </span>
+        <span class="sh-spotlight-footer-tip">
+          <sh-kbd enter></sh-kbd>
+          to select
+        </span>
+        <span class="sh-spotlight-footer-tip">
+          <sh-kbd escape></sh-kbd>
+          to close
+        </span>
+      </div>
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["sh-spotlight{display:block;width:100%}sh-spotlight .sh-spotlight-container{display:flex;flex-direction:column;width:100%;overflow:hidden}sh-spotlight .sh-spotlight-search-bar{display:flex;align-items:center;padding:1rem;border-bottom:1px solid rgb(from var(--base-4) r g b/30%);gap:.75rem}sh-spotlight .sh-spotlight-search-icon{font-size:1.25rem;color:var(--base-8)}sh-spotlight .sh-spotlight-input{flex:1;background:transparent;border:none;outline:none;font:var(--paragraph-20);color:var(--base-12)}sh-spotlight .sh-spotlight-input::placeholder{color:var(--base-7)}sh-spotlight .sh-spotlight-clear-btn{background:transparent;border:none;padding:.25rem;cursor:pointer;color:var(--base-7);display:flex;align-items:center;justify-content:center;border-radius:var(--shape-1)}sh-spotlight .sh-spotlight-clear-btn:hover{background:var(--base-3);color:var(--base-10)}sh-spotlight .sh-spotlight-clear-btn sh-icon{font-size:.875rem}sh-spotlight .sh-spotlight-results{max-height:21.875rem;padding:.5rem;display:flex;flex-direction:column;gap:.5rem;outline:none;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:auto}sh-spotlight .sh-spotlight-category-title{font:var(--paragraph-40B);color:var(--base-7);padding:.5rem .75rem .25rem;text-transform:uppercase;letter-spacing:.0625rem}sh-spotlight .sh-spotlight-no-results{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2.5rem 1.25rem;color:var(--base-7);gap:.75rem}sh-spotlight .sh-spotlight-no-results-icon{font-size:2rem;color:var(--base-6)}sh-spotlight .sh-spotlight-no-results-text{font:var(--paragraph-30)}sh-spotlight .sh-spotlight-footer{display:flex;align-items:center;padding:.75rem 1rem;background:rgb(from var(--base-1) r g b/90%);border-top:1px solid rgb(from var(--base-4) r g b/30%);gap:1rem;font-size:.6875rem;color:var(--base-7)}sh-spotlight .sh-spotlight-footer .sh-spotlight-footer-tip{display:flex;align-items:center;gap:.25rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['inputRef', { isSignal: true }] }], resultsRef: [{ type: i0.ViewChild, args: ['resultsRef', { isSignal: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], customFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "customFilter", required: false }] }], searchQuery: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchQuery", required: false }] }, { type: i0.Output, args: ["searchQueryChange"] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+
+class ShipSpotlightService {
+    #document;
+    #dialogService;
+    #config;
+    #nextId;
+    #registries;
+    #globalItemSelected;
+    #isShortcutsEnabled;
+    #aggregatedItems;
+    constructor() {
+        this.#document = inject(DOCUMENT);
+        this.#dialogService = inject(ShipDialogService);
+        this.#config = inject(SHIP_SPOTLIGHT_CONFIG, { optional: true });
+        this.#nextId = 0;
+        this.#registries = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#registries" }] : /* istanbul ignore next */ []));
+        this.#globalItemSelected = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#globalItemSelected" }] : /* istanbul ignore next */ []));
+        this.globalItemSelected = this.#globalItemSelected.asReadonly();
+        this.#isShortcutsEnabled = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#isShortcutsEnabled" }] : /* istanbul ignore next */ []));
+        this.isShortcutsEnabled = this.#isShortcutsEnabled.asReadonly();
+        this.#aggregatedItems = computed(() => {
+            const registries = this.#registries();
+            const defaults = this.#config?.defaultItems ?? [];
+            let aggregated = [...defaults];
+            for (const entry of registries) {
+                if (entry.overwrite) {
+                    aggregated = [...entry.items];
+                }
+                else {
+                    aggregated.push(...entry.items);
+                }
+            }
+            return aggregated;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#aggregatedItems" }] : /* istanbul ignore next */ []));
+        this.hasOverwriteItems = computed(() => this.#registries().some((r) => r.overwrite), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasOverwriteItems" }] : /* istanbul ignore next */ []));
+        this.#contextualRegistryId = null;
+        this.#globalShortcutListener = null;
+        this.#globalShortcutOptions = null;
+        if (this.#config?.enableShortcuts !== false) {
+            this.enableGlobalShortcuts();
+        }
+    }
+    registerItems(items, overwrite = false) {
+        const id = this.#nextId++;
+        this.#registries.update((regs) => [...regs, { id, items, overwrite }]);
+        const cleanup = () => {
+            this.#registries.update((regs) => regs.filter((r) => r.id !== id));
+        };
+        try {
+            const destroyRef = inject(DestroyRef);
+            destroyRef.onDestroy(cleanup);
+        }
+        catch {
+            // Ignore if not called in injection context
+        }
+        return cleanup;
+    }
+    #contextualRegistryId;
+    setContextualItems(items, overwrite = false) {
+        if (this.#contextualRegistryId !== null) {
+            const oldId = this.#contextualRegistryId;
+            this.#registries.update((regs) => regs.filter((r) => r.id !== oldId));
+        }
+        const id = this.#nextId++;
+        this.#contextualRegistryId = id;
+        this.#registries.update((regs) => [...regs, { id, items, overwrite }]);
+    }
+    clearContextualItems() {
+        if (this.#contextualRegistryId !== null) {
+            const oldId = this.#contextualRegistryId;
+            this.#registries.update((regs) => regs.filter((r) => r.id !== oldId));
+            this.#contextualRegistryId = null;
+        }
+    }
+    #globalShortcutListener;
+    #globalShortcutOptions;
+    enableGlobalShortcuts(options) {
+        if (this.#globalShortcutListener) {
+            this.disableGlobalShortcuts();
+        }
+        if (options) {
+            this.#globalShortcutOptions = options;
+        }
+        this.#isShortcutsEnabled.set(true);
+        this.#globalShortcutListener = (event) => {
+            if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k') {
+                event.preventDefault();
+                const instance = this.open(this.#globalShortcutOptions || undefined);
+                const sub = instance.itemSelected.subscribe((item) => {
+                    this.#globalItemSelected.set(item);
+                });
+                instance.closed.subscribe(() => sub.unsubscribe());
+            }
+        };
+        this.#document.addEventListener('keydown', this.#globalShortcutListener);
+    }
+    disableGlobalShortcuts() {
+        if (this.#globalShortcutListener) {
+            this.#document.removeEventListener('keydown', this.#globalShortcutListener);
+            this.#globalShortcutListener = null;
+        }
+        this.#isShortcutsEnabled.set(false);
+    }
+    open(options) {
+        const finalOptions = {
+            ...options,
+            items: options?.items ?? this.#aggregatedItems(),
+        };
+        const dialogRef = this.#dialogService.open(ShipSpotlight, {
+            data: finalOptions,
+            class: 'spotlight-dialog',
+            closeOnOutsideClick: true,
+            closeOnEsc: true,
+            width: '600px',
+            maxWidth: '90vw',
+        });
+        return {
+            close: () => dialogRef.close(),
+            itemSelected: dialogRef.component.itemSelected,
+            closed: dialogRef.closed,
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipSpotlightService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipSpotlightService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipSpotlightService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SHIP_SPOTLIGHT_CONFIG, ShipSpotlight, ShipSpotlightService, provideShipSpotlight };
+//# sourceMappingURL=ship-ui-core-ship-spotlight.mjs.map