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;
}
}