/** * Copyright Aquera Inc 2023 * * This source code is licensed under the BSD-3-Clause license found in the * LICENSE file in the root directory of this source tree. */ import NileElement from '../internal/nile-element'; import '../nile-tag/nile-tag'; import type { CSSResultGroup } from 'lit'; /** A removable search scope shown in the "Searching for" row. */ export interface CommandMenuScope { label: string; value: string; } /** * A keyboard-driven command palette for fast, page-wide search and action execution. * * @tag nile-command-menu * * @summary A modal command menu (command palette) with built-in search, grouping and keyboard navigation. * @status stable * @since 2.0 * * @dependency nile-glyph * @dependency nile-tag * * @slot - The command content: `nile-command-menu-group` and/or `nile-command-menu-item` elements. * @slot empty - Custom content shown when no items match the current query. * @slot footer - Optional footer content. When empty, a built-in keyboard-hint row is shown (unless `nofooterhints`). * * @event nile-show - Emitted when the menu opens. * @event nile-after-show - Emitted after the menu opens and the animation completes. * @event nile-hide - Emitted when the menu starts to close. * @event nile-after-hide - Emitted after the menu closes and the animation completes. * @event nile-request-close - Emitted when the user attempts to close the menu (overlay click / Escape). Cancelable. * @event nile-search - Emitted when the search value changes. `detail: { value }`. * @event nile-select - Emitted when an item is selected. `detail: { value, item }`. * @event nile-scope-remove - Emitted when a scope tag is removed. `detail: { scope, scopes }`. * * @csspart base - The component's outer wrapper. * @csspart overlay - The overlay behind the panel. * @csspart panel - The command panel. * @csspart header - The search header. * @csspart input - The search input. * @csspart scopes - The "Searching for" scopes row. * @csspart scope-tag - Each scope tag in the scopes row. * @csspart list - The scrollable results list. * @csspart empty - The empty state shown when nothing matches. * @csspart footer - The footer. * @csspart hints - The built-in keyboard-hint row inside the footer. * * @cssproperty --width - The maximum width of the panel. * @cssproperty --max-height - The maximum height of the panel. */ export declare class NileCommandMenu extends NileElement { static styles: CSSResultGroup; private readonly hasSlotController; private modal; private originalTrigger; command: HTMLElement; panel: HTMLElement; overlay: HTMLElement; input: HTMLInputElement; /** Indicates whether the menu is open. Toggle this attribute, or use `show()` / `hide()`. */ open: boolean; /** Placeholder text shown in the search input. */ placeholder: string; /** Accessible label for the dialog and the search input. */ label: string; /** Message shown when no items match the current query. Ignored when the `empty` slot is used. */ noResultsMessage: string; /** The current search value. */ value: string; /** * When set, the menu does not filter items itself; instead it emits `nile-search` so the host can * manage results. Useful for async/server-side search. */ customSearch: boolean; /** Keeps the menu open after an item is selected instead of closing it. */ keepOpenOnSelect: boolean; /** Prevents the menu from closing when the overlay is clicked. */ preventOverlayClose: boolean; /** Hides the built-in keyboard-hint footer (navigate / select / close). The `footer` slot always overrides it. */ noFooterHints: boolean; /** * Active search scopes shown as removable tags in the "Searching for" row. Items are filtered so that * only those with no `scope` or whose `scope` matches an active scope are shown. Set via the `scopes` * attribute (comma-separated labels or a JSON array) or the property (array of `{ label, value }`). */ scopes: CommandMenuScope[]; /** Label shown before the scope tags. */ scopesLabel: string; /** True when the current query matches no items. */ private hasResults; connectedCallback(): void; firstUpdated(): void; disconnectedCallback(): void; /** Gets all command items in the menu (across groups), in document order. */ private getAllItems; /** Gets the items that are currently visible (matching the query) and not disabled. */ private getVisibleItems; private getActiveItem; private setActiveItem; /** Applies the current query to the items, hiding non-matching items and empty groups. */ private filterItems; /** Hides groups that have no visible items. */ private updateGroupVisibility; /** Ensures exactly one visible item is active, defaulting to the first. */ private ensureActiveItem; private handleInput; handleScopesChange(): void; private handleScopeRemove; private handleSlotChange; private handlePanelKeyDown; private handleListClick; private selectItem; private requestClose; private addOpenListeners; private removeOpenListeners; private handleDocumentKeyDown; handleOpenChange(): Promise; /** Renders the "Searching for" scopes row when scopes are active. */ private renderScopes; /** Renders the built-in keyboard-hint footer (used as the `footer` slot's fallback content). */ private renderHints; /** Shows the command menu. */ show(): Promise; /** Hides the command menu. */ hide(): Promise; render(): import("lit-html").TemplateResult<1>; } export default NileCommandMenu; declare global { interface HTMLElementTagNameMap { 'nile-command-menu': NileCommandMenu; } }