@fluid-topics/ft-combobox 1.3.26

package/README.md

@@ -0,0 +1,19 @@
+A
+
+## Install
+
+```shell
+npm install @fluid-topics/ft-combobox
+yarn add @fluid-topics/ft-combobox
+```
+
+## Usage
+
+```typescript
+import { html } from "lit"
+import "@fluid-topics/ft-combobox"
+
+function render() {
+    return html` <ft-combobox foo="bar"></ft-combobox> `
+}
+```

package/build/ComboboxMessages.d.ts

@@ -0,0 +1,6 @@
+import { DefaultI18nMessages, I18nMessageContext, I18nMessages } from "@fluid-topics/ft-i18n";
+export interface FtComboboxMessages extends I18nMessages {
+    ariaLiveOptions(count: number): string;
+}
+export declare const comboboxContext: I18nMessageContext<FtComboboxMessages>;
+export declare const defaultComboboxMessages: DefaultI18nMessages<FtComboboxMessages>;

package/build/ComboboxMessages.js

@@ -0,0 +1,6 @@
+import { I18nMessageContext } from "@fluid-topics/ft-i18n";
+export const comboboxContext = I18nMessageContext.build("ftCombobox");
+export const defaultComboboxMessages = {
+    "ariaLiveOptions": "{0} options",
+    "ariaLiveOptions[\\=1]": "1 option",
+};

package/build/ComboboxSuggestionProvider.d.ts

@@ -0,0 +1,2 @@
+import { FtComboboxSuggestionDefinition } from "./models";
+export declare function basicSuggestionsProvider(values: Array<string | FtComboboxSuggestionDefinition>): (query: string) => FtComboboxSuggestionDefinition[];

package/build/ComboboxSuggestionProvider.js

@@ -0,0 +1,25 @@
+export function basicSuggestionsProvider(values) {
+    return (query) => {
+        const q = (query || "").toLowerCase();
+        const list = values
+            .map((value) => (typeof value === "string" ? { value, label: value } : value))
+            .filter((v) => v.label.toLowerCase().includes(q))
+            .sort((a, b) => alphabeticalSortWithPriorToStartWithQuery(a.label, b.label, q));
+        if (q.length === 0) {
+            return list;
+        }
+        return list;
+    };
+}
+function alphabeticalSortWithPriorToStartWithQuery(a, b, query) {
+    const lowerA = a.toLowerCase();
+    const lowerB = b.toLowerCase();
+    const lowerQuery = query.toLowerCase();
+    if (lowerA.startsWith(lowerQuery) && !lowerB.startsWith(lowerQuery)) {
+        return -1;
+    }
+    if (lowerB.startsWith(lowerQuery) && !lowerA.startsWith(lowerQuery)) {
+        return 1;
+    }
+    return lowerA.localeCompare(lowerB);
+}

package/build/ft-combobox.d.ts

@@ -0,0 +1,80 @@
+import { PropertyValues, TemplateResult } from "lit";
+import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { FtComboboxProperties } from "./ft-combobox.properties";
+import { FtComboboxSuggestionDefinition } from "./models";
+declare const FtCombobox_base: typeof FtLitElement & import("@fluid-topics/ft-wc-utils").Constructor<import("@fluid-topics/ft-i18n").FtLitElementWithI18nInterface>;
+export declare class FtCombobox extends FtCombobox_base implements FtComboboxProperties {
+    static styles: import("lit").CSSResult[];
+    static elementDefinitions: ElementDefinitionsMap;
+    label?: string;
+    icon?: string;
+    iconVariant?: string;
+    name?: string;
+    error: boolean;
+    filterSuggestions: boolean;
+    helper?: string;
+    disabled: boolean;
+    outlined: boolean;
+    placeholder?: string;
+    suggestionsHelper?: string;
+    suggestionsProvider: (query: string) => FtComboboxSuggestionDefinition[] | Promise<FtComboboxSuggestionDefinition[]>;
+    suggestionsProviderDebouncerTimeout?: number;
+    private _value;
+    get value(): string;
+    set value(value: string);
+    private filter;
+    private isOpen;
+    private comboboxHasVisualFocus;
+    private listboxHasVisualFocus;
+    private providedSuggestions;
+    private visibleSuggestions;
+    private activeIndex;
+    private input;
+    private listbox;
+    constructor();
+    private _suggestionsProviderDebouncer?;
+    protected willUpdate(props: PropertyValues): void;
+    protected render(): TemplateResult<1>;
+    private renderIcon;
+    private renderSuggestion;
+    private get activeSuggestion();
+    private shouldOfferNew;
+    private getTotalSuggestionsCount;
+    private isNewValueSuggestionSelected;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private renderLiveText;
+    private getActiveDescendantId;
+    private updateSuggestions;
+    private updateSuggestionsWithoutDebounce;
+    private onComboboxInput;
+    private setActiveSuggestion;
+    private scrollSuggestionIntoView;
+    private openListbox;
+    private closeListbox;
+    private setVisualFocusCombobox;
+    private setVisualFocusListbox;
+    private removeVisualFocusAll;
+    private setValue;
+    private dispatchChangeEvent;
+    private isPrintableCharacter;
+    private commitSelectionFromEnter;
+    private moveFocusToNextSuggestion;
+    private moveFocusToPreviousSuggestion;
+    private handleEscapeKey;
+    private handleTabKey;
+    private moveCaretToHome;
+    private moveCaretToEnd;
+    private onComboboxKeyDown;
+    private onComboboxKeyUp;
+    private onComboboxClick;
+    private onComboboxFocus;
+    private onComboboxBlur;
+    private onBackgroundPointerUp;
+    private onListboxPointerout;
+    private onSuggestionClick;
+    private onSuggestionPointerout;
+    focus(): void;
+    blur(): void;
+}
+export {};