@flxgde/gigamenu 0.0.1 → 0.0.3

package/fesm2022/flxgde-gigamenu.mjs

@@ -0,0 +1,645 @@
+import * as i0 from '@angular/core';
+import { signal, computed, Injectable, inject, TemplateRef, Directive, PLATFORM_ID, Inject, viewChild, contentChild, effect, HostListener, Component } from '@angular/core';
+import * as i1 from '@angular/router';
+import { isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
+
+const DEFAULT_CONFIG = {
+    placeholder: 'Search pages and commands...',
+    maxResults: 10,
+    autoDiscoverRoutes: true,
+    argSeparator: ' ',
+};
+/**
+ * Helper function to define a command with type safety.
+ */
+function defineCommand(command) {
+    return command;
+}
+
+class GigamenuService {
+    router;
+    _items = signal(new Map(), ...(ngDevMode ? [{ debugName: "_items" }] : []));
+    _isOpen = signal(false, ...(ngDevMode ? [{ debugName: "_isOpen" }] : []));
+    _config = signal(DEFAULT_CONFIG, ...(ngDevMode ? [{ debugName: "_config" }] : []));
+    items = computed(() => Array.from(this._items().values()), ...(ngDevMode ? [{ debugName: "items" }] : []));
+    isOpen = this._isOpen.asReadonly();
+    config = this._config.asReadonly();
+    constructor(router) {
+        this.router = router;
+    }
+    configure(config) {
+        this._config.update((current) => ({ ...current, ...config }));
+    }
+    open() {
+        this._isOpen.set(true);
+    }
+    close() {
+        this._isOpen.set(false);
+    }
+    toggle() {
+        this._isOpen.update((v) => !v);
+    }
+    registerItem(item) {
+        this._items.update((items) => {
+            const newItems = new Map(items);
+            newItems.set(item.id, item);
+            return newItems;
+        });
+    }
+    unregisterItem(id) {
+        this._items.update((items) => {
+            const newItems = new Map(items);
+            newItems.delete(id);
+            return newItems;
+        });
+    }
+    registerCommand(command) {
+        this.registerItem({
+            ...command,
+            category: 'command',
+        });
+    }
+    registerPage(page) {
+        this.registerItem({
+            ...page,
+            category: 'page',
+            action: () => this.router.navigate([page.path]),
+        });
+    }
+    discoverRoutes(routesOrOptions, maybeOptions) {
+        let routes;
+        let options;
+        if (Array.isArray(routesOrOptions)) {
+            routes = routesOrOptions;
+            options = maybeOptions;
+        }
+        else {
+            routes = this.router.config;
+            options = routesOrOptions;
+        }
+        this.extractPagesFromRoutes(routes, '', options?.filter);
+    }
+    extractPagesFromRoutes(routes, parentPath, filter) {
+        for (const route of routes) {
+            if (route.redirectTo !== undefined)
+                continue;
+            const fullPath = parentPath
+                ? `${parentPath}/${route.path ?? ''}`
+                : route.path ?? '';
+            if (route.path !== undefined && route.path !== '**') {
+                const routeInfo = {
+                    path: route.path,
+                    fullPath: `/${fullPath}`,
+                    data: route.data,
+                    title: typeof route.title === 'string' ? route.title : undefined,
+                };
+                // Apply filter if provided
+                if (filter && !filter(routeInfo)) {
+                    // Still process children even if this route is filtered
+                    if (route.children) {
+                        this.extractPagesFromRoutes(route.children, fullPath, filter);
+                    }
+                    continue;
+                }
+                const label = routeInfo.title || this.pathToLabel(route.path || 'Home');
+                this.registerPage({
+                    id: `page:${fullPath || '/'}`,
+                    label,
+                    path: `/${fullPath}`,
+                    description: `Navigate to ${label}`,
+                });
+            }
+            if (route.children) {
+                this.extractPagesFromRoutes(route.children, fullPath, filter);
+            }
+        }
+    }
+    pathToLabel(path) {
+        return path
+            .split('/')
+            .pop()
+            .replace(/[-_]/g, ' ')
+            .replace(/\b\w/g, (c) => c.toUpperCase());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: GigamenuService, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: GigamenuService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: GigamenuService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i1.Router }] });
+
+/**
+ * Template directive for customizing menu item rendering.
+ *
+ * @example
+ * ```html
+ * <gm-gigamenu>
+ *   <ng-template gmItem let-item let-selected="selected" let-index="index">
+ *     <div [class.active]="selected">
+ *       {{ item.label }}
+ *     </div>
+ *   </ng-template>
+ * </gm-gigamenu>
+ * ```
+ */
+class GigamenuItemTemplate {
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: GigamenuItemTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: GigamenuItemTemplate, isStandalone: true, selector: "[gmItem]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: GigamenuItemTemplate, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[gmItem]',
+                    standalone: true,
+                }]
+        }] });
+/**
+ * Template directive for customizing empty state rendering.
+ *
+ * @example
+ * ```html
+ * <gm-gigamenu>
+ *   <ng-template gmEmpty let-query>
+ *     <div>No results for "{{ query }}"</div>
+ *   </ng-template>
+ * </gm-gigamenu>
+ * ```
+ */
+class GigamenuEmptyTemplate {
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: GigamenuEmptyTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: GigamenuEmptyTemplate, isStandalone: true, selector: "[gmEmpty]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: GigamenuEmptyTemplate, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[gmEmpty]',
+                    standalone: true,
+                }]
+        }] });
+/**
+ * Template directive for customizing header/search input rendering.
+ *
+ * @example
+ * ```html
+ * <gm-gigamenu>
+ *   <ng-template gmHeader let-query let-onQueryChange="onQueryChange" let-onKeydown="onKeydown">
+ *     <input [value]="query" (input)="onQueryChange($event.target.value)" (keydown)="onKeydown($event)" />
+ *   </ng-template>
+ * </gm-gigamenu>
+ * ```
+ */
+class GigamenuHeaderTemplate {
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: GigamenuHeaderTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: GigamenuHeaderTemplate, isStandalone: true, selector: "[gmHeader]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: GigamenuHeaderTemplate, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[gmHeader]',
+                    standalone: true,
+                }]
+        }] });
+/**
+ * Template directive for customizing footer rendering.
+ *
+ * @example
+ * ```html
+ * <gm-gigamenu>
+ *   <ng-template gmFooter let-count let-total="total">
+ *     <div>Showing {{ count }} of {{ total }} items</div>
+ *   </ng-template>
+ * </gm-gigamenu>
+ * ```
+ */
+class GigamenuFooterTemplate {
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: GigamenuFooterTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: GigamenuFooterTemplate, isStandalone: true, selector: "[gmFooter]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: GigamenuFooterTemplate, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[gmFooter]',
+                    standalone: true,
+                }]
+        }] });
+class GigamenuPanelTemplate {
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: GigamenuPanelTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: GigamenuPanelTemplate, isStandalone: true, selector: "[gmPanel]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: GigamenuPanelTemplate, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[gmPanel]',
+                    standalone: true,
+                }]
+        }] });
+
+const STORAGE_KEY = 'gigamenu_frecency';
+const GLOBAL_KEY = '__global__';
+const MAX_ENTRIES_PER_TERM = 10;
+const MAX_TERMS = 100;
+const DECAY_FACTOR = 0.9;
+class FrecencyService {
+    data = {};
+    isBrowser;
+    constructor(platformId) {
+        this.isBrowser = isPlatformBrowser(platformId);
+        this.load();
+    }
+    /**
+     * Record that an item was selected for a given search term.
+     */
+    recordSelection(searchTerm, itemId) {
+        // Always record to global for overall frecency
+        this.recordToKey(GLOBAL_KEY, itemId);
+        // Also record to specific search term if provided
+        const normalizedTerm = this.normalizeTerm(searchTerm);
+        if (normalizedTerm) {
+            this.recordToKey(normalizedTerm, itemId);
+        }
+        this.pruneAndSave();
+    }
+    recordToKey(key, itemId) {
+        if (!this.data[key]) {
+            this.data[key] = [];
+        }
+        const entries = this.data[key];
+        const existing = entries.find((e) => e.itemId === itemId);
+        if (existing) {
+            existing.count++;
+            existing.lastUsed = Date.now();
+        }
+        else {
+            entries.push({
+                itemId,
+                count: 1,
+                lastUsed: Date.now(),
+            });
+        }
+        // Keep only top entries
+        this.data[key] = entries
+            .sort((a, b) => this.calculateScore(b) - this.calculateScore(a))
+            .slice(0, MAX_ENTRIES_PER_TERM);
+    }
+    /**
+     * Get frecency scores for items matching a search term.
+     * Returns a map of itemId -> score (higher is better).
+     */
+    getScores(searchTerm) {
+        const scores = new Map();
+        const normalizedTerm = this.normalizeTerm(searchTerm);
+        // If no search term, return global scores
+        if (!normalizedTerm) {
+            const globalEntries = this.data[GLOBAL_KEY];
+            if (globalEntries) {
+                for (const entry of globalEntries) {
+                    scores.set(entry.itemId, this.calculateScore(entry));
+                }
+            }
+            return scores;
+        }
+        // Exact match for search term
+        const exactEntries = this.data[normalizedTerm];
+        if (exactEntries) {
+            for (const entry of exactEntries) {
+                const score = this.calculateScore(entry);
+                scores.set(entry.itemId, score);
+            }
+        }
+        // Prefix matches (for partial typing)
+        for (const [term, entries] of Object.entries(this.data)) {
+            if (term !== GLOBAL_KEY && term !== normalizedTerm && term.startsWith(normalizedTerm)) {
+                for (const entry of entries) {
+                    const currentScore = scores.get(entry.itemId) ?? 0;
+                    // Prefix matches get reduced weight
+                    const prefixScore = this.calculateScore(entry) * 0.5;
+                    scores.set(entry.itemId, Math.max(currentScore, prefixScore));
+                }
+            }
+        }
+        return scores;
+    }
+    /**
+     * Get the most likely item for a search term (for auto-selection).
+     * Returns itemId if there's a strong match, null otherwise.
+     */
+    getTopMatch(searchTerm) {
+        const normalizedTerm = this.normalizeTerm(searchTerm);
+        if (!normalizedTerm)
+            return null;
+        const entries = this.data[normalizedTerm];
+        if (!entries || entries.length === 0)
+            return null;
+        const topEntry = entries[0];
+        const score = this.calculateScore(topEntry);
+        // Only auto-select if strong confidence (used multiple times recently)
+        if (topEntry.count >= 2 && score > 5) {
+            return topEntry.itemId;
+        }
+        return null;
+    }
+    calculateScore(entry) {
+        const ageInHours = (Date.now() - entry.lastUsed) / (60 * 60 * 24);
+        const recencyScore = Math.pow(DECAY_FACTOR, ageInHours);
+        return entry.count * recencyScore;
+    }
+    normalizeTerm(term) {
+        return term.toLowerCase().trim();
+    }
+    load() {
+        if (!this.isBrowser)
+            return;
+        try {
+            const stored = localStorage.getItem(STORAGE_KEY);
+            if (stored) {
+                this.data = JSON.parse(stored);
+            }
+        }
+        catch {
+            this.data = {};
+        }
+    }
+    pruneAndSave() {
+        if (!this.isBrowser)
+            return;
+        // Prune old terms if we have too many
+        const terms = Object.keys(this.data);
+        if (terms.length > MAX_TERMS) {
+            const termScores = terms.map((term) => ({
+                term,
+                maxScore: Math.max(...this.data[term].map((e) => this.calculateScore(e))),
+            }));
+            termScores.sort((a, b) => b.maxScore - a.maxScore);
+            const keepTerms = new Set(termScores.slice(0, MAX_TERMS).map((t) => t.term));
+            for (const term of terms) {
+                if (!keepTerms.has(term)) {
+                    delete this.data[term];
+                }
+            }
+        }
+        try {
+            localStorage.setItem(STORAGE_KEY, JSON.stringify(this.data));
+        }
+        catch {
+            // Storage full or unavailable
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FrecencyService, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FrecencyService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FrecencyService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }] });
+
+class GigamenuComponent {
+    service;
+    frecency;
+    searchInput = viewChild('searchInput', ...(ngDevMode ? [{ debugName: "searchInput" }] : []));
+    listContainer = viewChild('listContainer', ...(ngDevMode ? [{ debugName: "listContainer" }] : []));
+    isBrowser;
+    // Template queries
+    itemTemplate = contentChild(GigamenuItemTemplate, ...(ngDevMode ? [{ debugName: "itemTemplate" }] : []));
+    emptyTemplate = contentChild(GigamenuEmptyTemplate, ...(ngDevMode ? [{ debugName: "emptyTemplate" }] : []));
+    headerTemplate = contentChild(GigamenuHeaderTemplate, ...(ngDevMode ? [{ debugName: "headerTemplate" }] : []));
+    footerTemplate = contentChild(GigamenuFooterTemplate, ...(ngDevMode ? [{ debugName: "footerTemplate" }] : []));
+    panelTemplate = contentChild(GigamenuPanelTemplate, ...(ngDevMode ? [{ debugName: "panelTemplate" }] : []));
+    query = signal('', ...(ngDevMode ? [{ debugName: "query" }] : []));
+    selectedIndex = signal(0, ...(ngDevMode ? [{ debugName: "selectedIndex" }] : []));
+    /** Parsed search term (before first separator) */
+    searchTerm = computed(() => {
+        const q = this.query();
+        const separator = this.service.config().argSeparator ?? ' ';
+        const sepIndex = q.indexOf(separator);
+        if (sepIndex === -1)
+            return q;
+        return q.substring(0, sepIndex);
+    }, ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
+    /** Parsed arguments (after first separator) */
+    args = computed(() => {
+        const q = this.query();
+        const separator = this.service.config().argSeparator ?? ' ';
+        const sepIndex = q.indexOf(separator);
+        if (sepIndex === -1)
+            return '';
+        return q.substring(sepIndex + separator.length);
+    }, ...(ngDevMode ? [{ debugName: "args" }] : []));
+    filteredItems = computed(() => {
+        const searchTerm = this.searchTerm().toLowerCase().trim();
+        const items = this.service.items();
+        const maxResults = this.service.config().maxResults ?? 10;
+        if (!searchTerm) {
+            // No query: sort by frecency scores from empty searches
+            const scores = this.frecency.getScores('');
+            return this.sortByFrecency(items, scores).slice(0, maxResults);
+        }
+        // Filter matching items using only search term (not args)
+        const matched = items.filter((item) => this.matchesQuery(item, searchTerm));
+        // Sort by frecency for this search term
+        const scores = this.frecency.getScores(searchTerm);
+        return this.sortByFrecency(matched, scores).slice(0, maxResults);
+    }, ...(ngDevMode ? [{ debugName: "filteredItems" }] : []));
+    constructor(service, frecency, platformId) {
+        this.service = service;
+        this.frecency = frecency;
+        this.isBrowser = isPlatformBrowser(platformId);
+        effect(() => {
+            if (this.service.isOpen() && this.isBrowser) {
+                setTimeout(() => this.searchInput()?.nativeElement.focus(), 0);
+            }
+        });
+        effect(() => {
+            const items = this.filteredItems();
+            const searchTerm = this.searchTerm();
+            // Check for auto-select based on frecency
+            if (searchTerm && items.length > 0) {
+                const topMatch = this.frecency.getTopMatch(searchTerm);
+                if (topMatch) {
+                    const idx = items.findIndex((item) => item.id === topMatch);
+                    if (idx !== -1) {
+                        this.selectedIndex.set(idx);
+                        return;
+                    }
+                }
+            }
+            this.selectedIndex.set(0);
+        });
+    }
+    onGlobalKeydown(event) {
+        if (!this.isBrowser)
+            return;
+        if ((event.metaKey || event.ctrlKey) && event.key === 'k') {
+            event.preventDefault();
+            this.service.toggle();
+            return;
+        }
+        if (event.key === '/' && !this.isInputFocused()) {
+            event.preventDefault();
+            this.service.open();
+            return;
+        }
+        if (event.key === 'Escape' && this.service.isOpen()) {
+            event.preventDefault();
+            this.close();
+        }
+    }
+    onInputKeydown(event) {
+        const items = this.filteredItems();
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this.selectedIndex.update((i) => Math.min(i + 1, items.length - 1));
+                this.scrollSelectedIntoView();
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.selectedIndex.update((i) => Math.max(i - 1, 0));
+                this.scrollSelectedIntoView();
+                break;
+            case 'Enter':
+                event.preventDefault();
+                const selected = items[this.selectedIndex()];
+                if (selected) {
+                    this.executeItem(selected);
+                }
+                break;
+            case 'Escape':
+                event.preventDefault();
+                this.close();
+                break;
+        }
+    }
+    scrollSelectedIntoView() {
+        const container = this.listContainer()?.nativeElement;
+        if (!container)
+            return;
+        const selectedButton = container.querySelector(`[data-index="${this.selectedIndex()}"]`);
+        if (selectedButton) {
+            selectedButton.scrollIntoView({ block: 'nearest' });
+        }
+    }
+    onQueryChange(event) {
+        const value = event.target.value;
+        this.query.set(value);
+    }
+    onBackdropClick(event) {
+        if (event.target === event.currentTarget) {
+            this.close();
+        }
+    }
+    executeItem(item) {
+        // Record the selection for frecency learning (use search term, not full query)
+        const searchTerm = this.searchTerm();
+        this.frecency.recordSelection(searchTerm, item.id);
+        // Get args before closing (which resets query)
+        const args = this.args() || undefined;
+        this.close();
+        item.action(args);
+    }
+    // Template context getters
+    getItemContext(item, index) {
+        return {
+            $implicit: item,
+            index,
+            selected: this.selectedIndex() === index,
+        };
+    }
+    getEmptyContext() {
+        return {
+            $implicit: this.query(),
+        };
+    }
+    getHeaderContext() {
+        return {
+            $implicit: this.query(),
+            searchTerm: this.searchTerm(),
+            args: this.args(),
+            onQueryChange: (value) => this.query.set(value),
+            onKeydown: (event) => this.onInputKeydown(event),
+            placeholder: this.service.config().placeholder ?? '',
+        };
+    }
+    getFooterContext() {
+        return {
+            $implicit: this.filteredItems().length,
+            total: this.service.items().length,
+        };
+    }
+    getPanelContext() {
+        return {
+            $implicit: this.filteredItems(),
+            query: this.query(),
+            searchTerm: this.searchTerm(),
+            args: this.args(),
+            selectedIndex: this.selectedIndex(),
+            executeItem: (item) => this.executeItem(item),
+            setSelectedIndex: (index) => this.selectedIndex.set(index),
+            setQuery: (query) => this.query.set(query),
+            close: () => this.close(),
+            placeholder: this.service.config().placeholder ?? '',
+        };
+    }
+    close() {
+        this.service.close();
+        this.query.set('');
+        this.selectedIndex.set(0);
+    }
+    sortByFrecency(items, scores) {
+        if (scores.size === 0)
+            return items;
+        return [...items].sort((a, b) => {
+            const scoreA = scores.get(a.id) ?? 0;
+            const scoreB = scores.get(b.id) ?? 0;
+            return scoreB - scoreA;
+        });
+    }
+    matchesQuery(item, query) {
+        const searchableText = [
+            item.label,
+            item.description,
+            ...(item.keywords ?? []),
+        ]
+            .filter(Boolean)
+            .join(' ')
+            .toLowerCase();
+        const words = query.split(/\s+/);
+        return words.every((word) => searchableText.includes(word));
+    }
+    isInputFocused() {
+        const activeElement = document.activeElement;
+        if (!activeElement)
+            return false;
+        const tagName = activeElement.tagName.toLowerCase();
+        return (tagName === 'input' ||
+            tagName === 'textarea' ||
+            activeElement.isContentEditable);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: GigamenuComponent, deps: [{ token: GigamenuService }, { token: FrecencyService }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: GigamenuComponent, isStandalone: true, selector: "gm-gigamenu", host: { listeners: { "document:keydown": "onGlobalKeydown($event)" } }, queries: [{ propertyName: "itemTemplate", first: true, predicate: GigamenuItemTemplate, descendants: true, isSignal: true }, { propertyName: "emptyTemplate", first: true, predicate: GigamenuEmptyTemplate, descendants: true, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: GigamenuHeaderTemplate, descendants: true, isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: GigamenuFooterTemplate, descendants: true, isSignal: true }, { propertyName: "panelTemplate", first: true, predicate: GigamenuPanelTemplate, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "listContainer", first: true, predicate: ["listContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (service.isOpen()) {\n<div\n  class=\"fixed inset-0 z-50 flex items-start justify-center pt-[15vh]\"\n  (click)=\"onBackdropClick($event)\"\n>\n  <div class=\"fixed inset-0 bg-black/50 backdrop-blur-sm\"></div>\n\n  <!-- Custom panel template -->\n  @if (panelTemplate(); as pt) {\n    <ng-container\n      [ngTemplateOutlet]=\"pt.template\"\n      [ngTemplateOutletContext]=\"getPanelContext()\"\n    ></ng-container>\n  } @else {\n  <!-- Default panel -->\n  <div\n    class=\"relative z-10 w-full max-w-xl overflow-hidden rounded-xl border border-neutral-200 bg-white shadow-2xl dark:border-neutral-700 dark:bg-neutral-900\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-label=\"Command menu\"\n  >\n    <!-- Header -->\n    @if (headerTemplate(); as ht) {\n      <ng-container\n        [ngTemplateOutlet]=\"ht.template\"\n        [ngTemplateOutletContext]=\"getHeaderContext()\"\n      ></ng-container>\n    } @else {\n    <div class=\"flex items-center border-b border-neutral-200 px-4 dark:border-neutral-700\">\n      <svg\n        class=\"h-5 w-5 text-neutral-400\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        viewBox=\"0 0 24 24\"\n      >\n        <path\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          stroke-width=\"2\"\n          d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\"\n        />\n      </svg>\n      <div class=\"relative flex-1\">\n        <!-- Styled overlay for syntax highlighting -->\n        <div\n          class=\"pointer-events-none absolute inset-0 flex items-center px-3 py-4 text-base\"\n          aria-hidden=\"true\"\n        >\n          <span class=\"text-neutral-900 dark:text-neutral-100\">{{ searchTerm() }}</span>@if (args()) {<span class=\"text-neutral-900 dark:text-neutral-100\">{{ service.config().argSeparator }}</span><span class=\"text-purple-600 dark:text-purple-400\">{{ args() }}</span>}\n        </div>\n        <!-- Transparent input on top -->\n        <input\n          #searchInput\n          type=\"text\"\n          [placeholder]=\"service.config().placeholder\"\n          [value]=\"query()\"\n          (input)=\"onQueryChange($event)\"\n          (keydown)=\"onInputKeydown($event)\"\n          class=\"relative z-10 w-full bg-transparent px-3 py-4 text-base text-transparent caret-neutral-900 placeholder-neutral-400 outline-none dark:caret-neutral-100\"\n        />\n      </div>\n      <kbd\n        class=\"rounded border border-neutral-200 bg-neutral-100 px-1.5 py-0.5 text-xs text-neutral-500 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-400\"\n      >\n        ESC\n      </kbd>\n    </div>\n    }\n\n    <!-- Items list -->\n    <div #listContainer class=\"max-h-80 overflow-y-auto p-2\">\n      @if (filteredItems().length === 0) {\n        <!-- Empty state -->\n        @if (emptyTemplate(); as et) {\n          <ng-container\n            [ngTemplateOutlet]=\"et.template\"\n            [ngTemplateOutletContext]=\"getEmptyContext()\"\n          ></ng-container>\n        } @else {\n        <div class=\"px-3 py-8 text-center text-neutral-500\">\n          No results found\n        </div>\n        }\n      } @else {\n        @for (item of filteredItems(); track item.id; let i = $index) {\n          <!-- Custom item template -->\n          @if (itemTemplate(); as it) {\n            <ng-container\n              [ngTemplateOutlet]=\"it.template\"\n              [ngTemplateOutletContext]=\"getItemContext(item, i)\"\n            ></ng-container>\n          } @else {\n          <!-- Default item -->\n          <button\n            type=\"button\"\n            (click)=\"executeItem(item)\"\n            (mouseenter)=\"selectedIndex.set(i)\"\n            [attr.data-index]=\"i\"\n            [class]=\"\n            'flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left transition-colors ' +\n            (selectedIndex() === i\n            ? 'bg-neutral-100 dark:bg-neutral-800'\n            : 'hover:bg-neutral-50 dark:hover:bg-neutral-800/50')\n            \"\n          >\n            @if (item.iconClass) {\n            <i [class]=\"item.iconClass + ' text-lg text-neutral-600 dark:text-neutral-300'\"></i>\n            } @else if (item.icon) {\n            <span class=\"text-lg\">{{ item.icon }}</span>\n            } @else {\n            <span\n              class=\"flex h-6 w-6 items-center justify-center rounded bg-neutral-200 text-xs font-medium text-neutral-600 dark:bg-neutral-700 dark:text-neutral-300\"\n            >\n              {{ item.category === 'page' ? 'P' : 'C' }}\n            </span>\n            }\n            <div class=\"flex-1 min-w-0\">\n              <div class=\"truncate font-medium text-neutral-900 dark:text-neutral-100\">\n                {{ item.label }}\n              </div>\n              @if (item.description) {\n              <div class=\"truncate text-sm text-neutral-500 dark:text-neutral-400\">\n                {{ item.description }}\n              </div>\n              }\n            </div>\n            <span\n              class=\"rounded-full px-2 py-0.5 text-xs\"\n              [class]=\"\n              item.category === 'page'\n              ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400'\n              : 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400'\n              \"\n            >\n              {{ item.category }}\n            </span>\n          </button>\n          }\n        }\n      }\n    </div>\n\n    <!-- Footer -->\n    @if (footerTemplate(); as ft) {\n      <ng-container\n        [ngTemplateOutlet]=\"ft.template\"\n        [ngTemplateOutletContext]=\"getFooterContext()\"\n      ></ng-container>\n    } @else {\n    <div\n      class=\"flex items-center justify-between border-t border-neutral-200 px-4 py-2 text-xs text-neutral-500 dark:border-neutral-700\"\n    >\n      <div class=\"flex items-center gap-3\">\n        <span class=\"flex items-center gap-1\">\n          <kbd class=\"rounded border border-neutral-300 bg-neutral-100 px-1 dark:border-neutral-600 dark:bg-neutral-800\">\u2191</kbd>\n          <kbd class=\"rounded border border-neutral-300 bg-neutral-100 px-1 dark:border-neutral-600 dark:bg-neutral-800\">\u2193</kbd>\n          navigate\n        </span>\n        <span class=\"flex items-center gap-1\">\n          <kbd class=\"rounded border border-neutral-300 bg-neutral-100 px-1 dark:border-neutral-600 dark:bg-neutral-800\">\u21B5</kbd>\n          select\n        </span>\n      </div>\n      <span>gigamenu</span>\n    </div>\n    }\n  </div>\n  }\n</div>\n}\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: GigamenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gm-gigamenu', standalone: true, imports: [NgTemplateOutlet], template: "@if (service.isOpen()) {\n<div\n  class=\"fixed inset-0 z-50 flex items-start justify-center pt-[15vh]\"\n  (click)=\"onBackdropClick($event)\"\n>\n  <div class=\"fixed inset-0 bg-black/50 backdrop-blur-sm\"></div>\n\n  <!-- Custom panel template -->\n  @if (panelTemplate(); as pt) {\n    <ng-container\n      [ngTemplateOutlet]=\"pt.template\"\n      [ngTemplateOutletContext]=\"getPanelContext()\"\n    ></ng-container>\n  } @else {\n  <!-- Default panel -->\n  <div\n    class=\"relative z-10 w-full max-w-xl overflow-hidden rounded-xl border border-neutral-200 bg-white shadow-2xl dark:border-neutral-700 dark:bg-neutral-900\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-label=\"Command menu\"\n  >\n    <!-- Header -->\n    @if (headerTemplate(); as ht) {\n      <ng-container\n        [ngTemplateOutlet]=\"ht.template\"\n        [ngTemplateOutletContext]=\"getHeaderContext()\"\n      ></ng-container>\n    } @else {\n    <div class=\"flex items-center border-b border-neutral-200 px-4 dark:border-neutral-700\">\n      <svg\n        class=\"h-5 w-5 text-neutral-400\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        viewBox=\"0 0 24 24\"\n      >\n        <path\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          stroke-width=\"2\"\n          d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\"\n        />\n      </svg>\n      <div class=\"relative flex-1\">\n        <!-- Styled overlay for syntax highlighting -->\n        <div\n          class=\"pointer-events-none absolute inset-0 flex items-center px-3 py-4 text-base\"\n          aria-hidden=\"true\"\n        >\n          <span class=\"text-neutral-900 dark:text-neutral-100\">{{ searchTerm() }}</span>@if (args()) {<span class=\"text-neutral-900 dark:text-neutral-100\">{{ service.config().argSeparator }}</span><span class=\"text-purple-600 dark:text-purple-400\">{{ args() }}</span>}\n        </div>\n        <!-- Transparent input on top -->\n        <input\n          #searchInput\n          type=\"text\"\n          [placeholder]=\"service.config().placeholder\"\n          [value]=\"query()\"\n          (input)=\"onQueryChange($event)\"\n          (keydown)=\"onInputKeydown($event)\"\n          class=\"relative z-10 w-full bg-transparent px-3 py-4 text-base text-transparent caret-neutral-900 placeholder-neutral-400 outline-none dark:caret-neutral-100\"\n        />\n      </div>\n      <kbd\n        class=\"rounded border border-neutral-200 bg-neutral-100 px-1.5 py-0.5 text-xs text-neutral-500 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-400\"\n      >\n        ESC\n      </kbd>\n    </div>\n    }\n\n    <!-- Items list -->\n    <div #listContainer class=\"max-h-80 overflow-y-auto p-2\">\n      @if (filteredItems().length === 0) {\n        <!-- Empty state -->\n        @if (emptyTemplate(); as et) {\n          <ng-container\n            [ngTemplateOutlet]=\"et.template\"\n            [ngTemplateOutletContext]=\"getEmptyContext()\"\n          ></ng-container>\n        } @else {\n        <div class=\"px-3 py-8 text-center text-neutral-500\">\n          No results found\n        </div>\n        }\n      } @else {\n        @for (item of filteredItems(); track item.id; let i = $index) {\n          <!-- Custom item template -->\n          @if (itemTemplate(); as it) {\n            <ng-container\n              [ngTemplateOutlet]=\"it.template\"\n              [ngTemplateOutletContext]=\"getItemContext(item, i)\"\n            ></ng-container>\n          } @else {\n          <!-- Default item -->\n          <button\n            type=\"button\"\n            (click)=\"executeItem(item)\"\n            (mouseenter)=\"selectedIndex.set(i)\"\n            [attr.data-index]=\"i\"\n            [class]=\"\n            'flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left transition-colors ' +\n            (selectedIndex() === i\n            ? 'bg-neutral-100 dark:bg-neutral-800'\n            : 'hover:bg-neutral-50 dark:hover:bg-neutral-800/50')\n            \"\n          >\n            @if (item.iconClass) {\n            <i [class]=\"item.iconClass + ' text-lg text-neutral-600 dark:text-neutral-300'\"></i>\n            } @else if (item.icon) {\n            <span class=\"text-lg\">{{ item.icon }}</span>\n            } @else {\n            <span\n              class=\"flex h-6 w-6 items-center justify-center rounded bg-neutral-200 text-xs font-medium text-neutral-600 dark:bg-neutral-700 dark:text-neutral-300\"\n            >\n              {{ item.category === 'page' ? 'P' : 'C' }}\n            </span>\n            }\n            <div class=\"flex-1 min-w-0\">\n              <div class=\"truncate font-medium text-neutral-900 dark:text-neutral-100\">\n                {{ item.label }}\n              </div>\n              @if (item.description) {\n              <div class=\"truncate text-sm text-neutral-500 dark:text-neutral-400\">\n                {{ item.description }}\n              </div>\n              }\n            </div>\n            <span\n              class=\"rounded-full px-2 py-0.5 text-xs\"\n              [class]=\"\n              item.category === 'page'\n              ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400'\n              : 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400'\n              \"\n            >\n              {{ item.category }}\n            </span>\n          </button>\n          }\n        }\n      }\n    </div>\n\n    <!-- Footer -->\n    @if (footerTemplate(); as ft) {\n      <ng-container\n        [ngTemplateOutlet]=\"ft.template\"\n        [ngTemplateOutletContext]=\"getFooterContext()\"\n      ></ng-container>\n    } @else {\n    <div\n      class=\"flex items-center justify-between border-t border-neutral-200 px-4 py-2 text-xs text-neutral-500 dark:border-neutral-700\"\n    >\n      <div class=\"flex items-center gap-3\">\n        <span class=\"flex items-center gap-1\">\n          <kbd class=\"rounded border border-neutral-300 bg-neutral-100 px-1 dark:border-neutral-600 dark:bg-neutral-800\">\u2191</kbd>\n          <kbd class=\"rounded border border-neutral-300 bg-neutral-100 px-1 dark:border-neutral-600 dark:bg-neutral-800\">\u2193</kbd>\n          navigate\n        </span>\n        <span class=\"flex items-center gap-1\">\n          <kbd class=\"rounded border border-neutral-300 bg-neutral-100 px-1 dark:border-neutral-600 dark:bg-neutral-800\">\u21B5</kbd>\n          select\n        </span>\n      </div>\n      <span>gigamenu</span>\n    </div>\n    }\n  </div>\n  }\n</div>\n}\n", styles: [":host{display:contents}\n"] }]
+        }], ctorParameters: () => [{ type: GigamenuService }, { type: FrecencyService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }], propDecorators: { searchInput: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }], listContainer: [{ type: i0.ViewChild, args: ['listContainer', { isSignal: true }] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GigamenuItemTemplate), { isSignal: true }] }], emptyTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GigamenuEmptyTemplate), { isSignal: true }] }], headerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GigamenuHeaderTemplate), { isSignal: true }] }], footerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GigamenuFooterTemplate), { isSignal: true }] }], panelTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GigamenuPanelTemplate), { isSignal: true }] }], onGlobalKeydown: [{
+                type: HostListener,
+                args: ['document:keydown', ['$event']]
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DEFAULT_CONFIG, FrecencyService, GigamenuComponent, GigamenuEmptyTemplate, GigamenuFooterTemplate, GigamenuHeaderTemplate, GigamenuItemTemplate, GigamenuPanelTemplate, GigamenuService, defineCommand };
+//# sourceMappingURL=flxgde-gigamenu.mjs.map