@blinkk/editor/dist/src/mixin/autocomplete.d.ts

Structured content editor with live previews.

import { Base, Constructor } from '@blinkk/selective-edit/dist/src/mixins';
import { ListenersMixinComponent } from './listeners';
import { SelectiveEditor, TemplateResult } from '@blinkk/selective-edit';
export interface AutoCompleteUiComponent {
    items?: Array<AutoCompleteUiItemComponent>;
    labels?: AutoCompleteUiLabels;
    filter(value: string): void;
    handleFocus(evt: Event): void;
    handleIconClick(evt: Event): void;
    handleInputKeyDown(evt: KeyboardEvent): void;
    handleInputKeyUp(evt: KeyboardEvent): void;
    /**
     * Function for determining if the 'empty' message should be
     * shown based on the value.
     *
     * For fields that allow additional characters (ex: query string on yaml)
     * or arbitrary values it should hide the empty message since it can be
     * a valid value even though there are no matches found in the items list.
     */
    shouldShowEmpty?: (value: string) => boolean;
    templateIcons(editor: SelectiveEditor): TemplateResult;
    templateList(editor: SelectiveEditor, value: string): TemplateResult;
}
export interface AutoCompleteUiItemComponent {
    /**
     * Determines if the value provided matches for filtering.
     *
     * If returns `true` the item will show in the filtered list.
     *
     * @param value Value being used for filtering.
     */
    matchesFilter(value: string): boolean;
    templateItem(editor: SelectiveEditor, index: number, isSelected: boolean, handleClick: (evt: Event) => void): TemplateResult;
    value: string;
    label: string;
    uid: string;
}
export interface AutoCompleteUiLabels {
    resultsNone?: string;
    resultsSingle?: string;
    resultsMultiple?: string;
}
export declare function AutoCompleteMixin<TBase extends Constructor>(Base: TBase): {
    new (...args: any[]): {
        _autoCompleteUi?: (AutoCompleteUiComponent & ListenersMixinComponent) | undefined;
        readonly autoCompleteUi: AutoCompleteUiComponent & ListenersMixinComponent;
    };
} & TBase;
declare const AutoCompleteUi_base: {
    new (...args: any[]): {
        _listeners?: Record<string, ((...args: any) => void)[]> | undefined;
        addListener(eventName: string, callback: (...args: any) => void): void;
        readonly listeners: Record<string, ((...args: any) => void)[]>;
        triggerListener(eventName: string, ...args: any): void;
    };
} & typeof Base;
export declare class AutoCompleteUi extends AutoCompleteUi_base implements AutoCompleteUiComponent {
    container?: HTMLElement;
    currentFilter?: string;
    currentIndex?: number;
    filteredItems?: Array<AutoCompleteUiItemComponent>;
    private hasBoundDocument?;
    isVisible?: boolean;
    _items?: Array<AutoCompleteUiItemComponent>;
    labels?: AutoCompleteUiLabels;
    shouldShowEmpty?: (value: string) => boolean;
    filter(value: string): void;
    handleFocus(evt: Event): void;
    get items(): Array<AutoCompleteUiItemComponent> | undefined;
    set items(values: Array<AutoCompleteUiItemComponent> | undefined);
    handleIconClick(evt: Event): void;
    handleInputKeyDown(evt: KeyboardEvent): void;
    handleInputKeyUp(evt: KeyboardEvent): void;
    nextItem(): void;
    previousItem(): void;
    /**
     * Signal for the editor to re-render.
     */
    render(): void;
    /**
     * Make sure that the current index item is visible in the list.
     * If it is not, scroll to the item.
     */
    scrollToItem(): void;
    selectItem(item: AutoCompleteUiItemComponent): void;
    templateIcons(editor: SelectiveEditor): TemplateResult;
    templateList(editor: SelectiveEditor, value: string): TemplateResult;
    templateStatus(editor: SelectiveEditor, items: Array<AutoCompleteUiItemComponent>): TemplateResult;
}
declare const AutoCompleteUIItem_base: (new (...args: any[]) => {
    _uuid?: string | undefined;
    readonly uuid: string;
    readonly uid: string;
}) & typeof Base;
export declare class AutoCompleteUIItem extends AutoCompleteUIItem_base implements AutoCompleteUiItemComponent {
    value: string;
    label: string;
    constructor(value: string, label: string);
    /**
     * Used for filtering down the items in the items list.
     *
     * Uses case-insensitive matching for the value in the label or value.
     *
     * @param value Value input in the field.
     * @returns True if the value matches the value in some way.
     */
    matchesFilter(value: string): boolean;
    templateItem(editor: SelectiveEditor, index: number, isSelected: boolean, handleClick: (evt: Event) => void): TemplateResult;
}
export {};