import { HTMLTemplateResult, PropertyValueMap } from "lit"; import { FRoot } from "../../mixins/components/f-root/f-root"; import { FDiv } from "../f-div/f-div"; import { FSuggest } from "../f-suggest/f-suggest"; export type FSearchState = "primary" | "default" | "success" | "warning" | "danger"; export type FSearchCustomEvent = { value: Type; scope: string; }; export type FSearchSuffixWhen = (value: string) => boolean; export type FSearchSuggestionsCategory = Record; export type FSearchOptionTemplate = { value: Type; template: (value?: string) => HTMLTemplateResult; toString: () => string; }; export type FSearchResultWhen = (suggestion: string | FSearchOptionTemplate, value?: string) => boolean; export type FSearchSuggestions = string[] | FSearchSuggestionsCategory | FSearchOptionTemplate[]; export type FSearchScope = string[] | "none"; export declare class FSearch extends FRoot { /** * css loaded from scss file */ static styles: import("lit").CSSResult[]; /** * @attribute Variants are various visual representations of an input field. */ variant?: "curved" | "round" | "block"; /** * @attribute Categories are various visual representations of an input field. */ category?: "fill" | "outline" | "transparent"; /** * @attribute results to show on value */ result?: FSearchSuggestions; /** * @attribute disable showing result */ disableResult: boolean; /** * @attribute States are used to communicate purpose and connotations. */ state?: FSearchState; /** * @attribute f-input can have 2 sizes. By default size is inherited by the parent f-field. */ size?: "medium" | "small"; /** * @attribute Defines the value of a f-search. */ value?: string; /** * @attribute sets the value of scope in use */ selectedScope?: string; /** * for vue2 camelcase support */ set ["selected-scope"](val: string); /** * @attribute Defines the placeholder text */ placeholder?: string; /** * @attribute Shows scope list if not none */ scope?: FSearchScope; /** * @attribute Shows disabled state of input element */ disabled?: boolean; /** * @attribute Displays a close icon-button on the right side of the input that allows the user to clear the input value */ clear?: boolean; /** * @attribute Note: Provides an icon button to trigger the search query. Note: Search icon on left is not shown if search-button is true. */ ["search-button"]?: boolean; /** * @attribute Loader icon . */ loading?: boolean; /** * to customize result */ resultWhen: FSearchResultWhen; set ["result-when"](val: FSearchResultWhen); /** * @attribute max height for options */ resultMaxHeight?: string; labelSlot: HTMLElement; descriptionSlot: HTMLElement; helpSlot: HTMLElement; headerSection: FDiv; helperTextSection: FDiv; suggestElement: FSuggest; /** * @attribute assigned elements inside slot label */ _labelNodes: NodeListOf; /** * @attribute assigned elements inside slot description */ _descriptionNodes: NodeListOf; /** * @attribute assigned elements inside slot help */ _helpNodes: NodeListOf; /** * has label slot */ get hasLabel(): boolean; /** * has description slot */ get hasDescription(): boolean; /** * has help slot */ get hasHelperText(): boolean; /** * emit input custom event */ handleInput(e: CustomEvent<{ value: unknown; }>): void; /** * emit input custom event for scope */ handleScopeSelection(e: CustomEvent<{ value: string; }>): void; /** * emit search custom event */ handleSearchClick(e: CustomEvent): void; /** * clear input value on clear icon clicked */ clearInputValue(): void; /** * * @param value string for value * @param scope string for scope value */ dispatchInputEvent(value: any, scope?: string): void; /** * set styling class */ get applyStyling(): "f-search-border" | "f-search-border-button" | "f-search-suggest-button" | "f-search-suggest"; /** * conditional help section display for false spacing issue */ displayHelpSection(): void; /** * conditional header section display for false spacing issue */ displayHeaderSection(): void; render(): import("lit-html").TemplateResult<1>; protected updated(changedProperties: PropertyValueMap | Map): void; } /** * Required for typescript */ declare global { interface HTMLElementTagNameMap { "f-search": FSearch; } }