@fluid-topics/ft-combobox 1.3.26

package/build/ft-combobox.js

@@ -0,0 +1,634 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, nothing } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import { repeat } from "lit/directives/repeat.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { Debouncer, FtLitElement, numberProperty, screenReaderStyles } from "@fluid-topics/ft-wc-utils";
+import { styles } from "./ft-combobox.styles";
+import { FtInputLabel } from "@fluid-topics/ft-input-label";
+import { FtRipple } from "@fluid-topics/ft-ripple";
+import { FtTypography, FtTypographyBody1, FtTypographyVariants } from "@fluid-topics/ft-typography";
+import { FtIcon } from "@fluid-topics/ft-icon";
+import { withI18n } from "@fluid-topics/ft-i18n";
+import { comboboxContext, defaultComboboxMessages } from "./ComboboxMessages";
+class FtCombobox extends withI18n(FtLitElement) {
+    get value() {
+        return this._value || "";
+    }
+    set value(value) {
+        const oldValue = this._value;
+        this._value = value || "";
+        this.filter = this._value;
+        this.requestUpdate("value", oldValue);
+    }
+    constructor() {
+        super();
+        this.error = false;
+        this.filterSuggestions = false;
+        this.disabled = false;
+        this.outlined = false;
+        this.suggestionsProvider = () => [];
+        this._value = "";
+        this.filter = "";
+        this.isOpen = false;
+        this.comboboxHasVisualFocus = false;
+        this.listboxHasVisualFocus = false;
+        this.providedSuggestions = [];
+        this.visibleSuggestions = [];
+        this.activeIndex = -1;
+        this.onComboboxInput = () => {
+            this.filter = this.input.value;
+            this.activeIndex = -1;
+            this.updateSuggestions();
+            const total = this.getTotalSuggestionsCount();
+            if (total > 0) {
+                this.openListbox();
+            }
+            else {
+                this.closeListbox(true);
+            }
+        };
+        this.onComboboxKeyDown = (event) => {
+            if (event.ctrlKey || event.shiftKey) {
+                return;
+            }
+            let handled = false;
+            switch (event.key) {
+                case "Enter":
+                    this.commitSelectionFromEnter();
+                    handled = true;
+                    break;
+                case "ArrowDown":
+                case "Down": {
+                    this.moveFocusToNextSuggestion(event);
+                    handled = true;
+                    break;
+                }
+                case "ArrowUp":
+                case "Up": {
+                    this.moveFocusToPreviousSuggestion(event);
+                    handled = true;
+                    break;
+                }
+                case "Escape":
+                case "Esc":
+                    this.handleEscapeKey();
+                    handled = true;
+                    break;
+                case "Tab":
+                    this.handleTabKey();
+                    break;
+                case "Home":
+                    this.moveCaretToHome();
+                    handled = true;
+                    break;
+                case "End": {
+                    this.moveCaretToEnd();
+                    handled = true;
+                    break;
+                }
+            }
+            if (handled) {
+                event.stopPropagation();
+                event.preventDefault();
+            }
+        };
+        this.onComboboxKeyUp = (event) => {
+            if (event.key === "Escape" || event.key === "Esc") {
+                return;
+            }
+            let handled = false;
+            switch (event.key) {
+                case "Backspace":
+                    this.setVisualFocusCombobox();
+                    handled = true;
+                    break;
+                // Do nothing on Arrow navigation keyup to preserve listbox visual focus
+                case "ArrowDown":
+                case "Down":
+                case "ArrowUp":
+                case "Up":
+                    handled = true;
+                    break;
+                case "ArrowLeft":
+                case "Enter":
+                case "Left":
+                case "ArrowRight":
+                case "Right":
+                case "Home":
+                case "End":
+                    this.setVisualFocusCombobox();
+                    handled = true;
+                    break;
+                default:
+                    // For printable keys, the @input handler will update the list.
+                    // We only maintain visual focus here for printable characters (not arrows, etc.).
+                    if (this.isPrintableCharacter(event.key) && this.input.value.length) {
+                        this.setVisualFocusCombobox();
+                    }
+                    break;
+            }
+            if (handled) {
+                event.stopPropagation();
+                event.preventDefault();
+            }
+        };
+        this.onComboboxClick = () => {
+            if (this.isOpen) {
+                this.closeListbox(true);
+            }
+            else {
+                this.openListbox();
+            }
+        };
+        this.onComboboxFocus = () => {
+            this.filter = this.input.value;
+            this.updateSuggestions();
+            this.setVisualFocusCombobox();
+            this.activeIndex = -1;
+        };
+        this.onComboboxBlur = () => {
+            this.removeVisualFocusAll();
+        };
+        this.onBackgroundPointerUp = (event) => {
+            const target = event.target;
+            if (!this.contains(target)) {
+                this.comboboxHasVisualFocus = false;
+                this.removeVisualFocusAll();
+                setTimeout(() => this.closeListbox(true), 300); // Inspired from the WCAG examples
+            }
+        };
+        this.onListboxPointerout = () => {
+            setTimeout(() => this.closeListbox(false), 300); // Inspired from the WCAG examples
+        };
+        this.onSuggestionClick = (suggestion) => {
+            var _a;
+            if (suggestion.kind === "new") {
+                this.setValue(((_a = this.input) === null || _a === void 0 ? void 0 : _a.value) || this.value);
+            }
+            else {
+                this.setValue(suggestion.label);
+            }
+            this.closeListbox(true);
+        };
+        this.onSuggestionPointerout = () => {
+            setTimeout(() => this.closeListbox(false), 300); // Inspired from the WCAG examples
+        };
+        this.addI18nContext(comboboxContext, defaultComboboxMessages);
+    }
+    willUpdate(props) {
+        if (props.has("suggestionsProviderDebouncerTimeout")) {
+            this._suggestionsProviderDebouncer = this.suggestionsProviderDebouncerTimeout && this.suggestionsProviderDebouncerTimeout > 0
+                ? new Debouncer(this.suggestionsProviderDebouncerTimeout)
+                : undefined;
+        }
+        if (props.has("suggestionsProvider") || props.has("filter")) {
+            this.updateSuggestions();
+        }
+    }
+    render() {
+        const classes = {
+            "ft-combobox": true,
+            "ft-combobox--filled": !this.outlined,
+            "ft-combobox--outlined": this.outlined,
+            "ft-combobox--disabled": this.disabled,
+            "ft-combobox--with-label": !!this.label,
+            "ft-combobox--with-icon": !!this.icon,
+            "ft-combobox--in-error": this.error,
+            // Use live filter (updated on input) instead of value (committed later)
+            "ft-combobox--raised-label": this.comboboxHasVisualFocus || !!this.filter,
+        };
+        const listboxClasses = {
+            "ft-combobox--listbox": true,
+            "focus": this.listboxHasVisualFocus,
+        };
+        return html `
+            <div class="${classMap(classes)}">
+                <div class="ft-combobox--main-panel"
+                     @focusout=${this.onComboboxBlur}>
+                    <ft-input-label
+                        text="${this.label}"
+                        ?outlined=${this.outlined}
+                        ?raised=${this.comboboxHasVisualFocus || !!this.filter}
+                        ?disabled=${this.disabled}
+                        ?error=${this.error}>
+                    </ft-input-label>
+                    <div class="ft-combobox--input-panel">
+                        ${this.outlined ? nothing : html `
+                            <ft-ripple ?disabled=${this.disabled} activated></ft-ripple>
+                        `}
+                        <input
+                            id="combobox-input"
+                            class="ft-typography--body1 ft-combobox--input"
+                            part="input"
+                            type="text"
+                            role="combobox"
+                            aria-autocomplete="list"
+                            autocomplete="false"
+                            aria-expanded="${this.isOpen}"
+                            aria-controls="combobox-listbox"
+                            aria-activedescendant="${this.getActiveDescendantId()}"
+                            aria-label="${ifDefined(this.label)}"
+                            name="${ifDefined(this.name)}"
+                            ?disabled=${this.disabled}
+                            .value=${this.value}
+                            @input=${this.onComboboxInput}
+                            @keydown=${this.onComboboxKeyDown}
+                            @keyup=${this.onComboboxKeyUp}
+                            @click=${this.onComboboxClick}
+                            @focus=${this.onComboboxFocus}
+                        />
+                        ${(this.renderIcon())}
+                    </div>
+                    <div class="sr-only" aria-live="polite" aria-atomic="true">
+                        ${this.renderLiveText()}
+                    </div>
+                    <ul
+                        id="combobox-listbox"
+                        class="${classMap(listboxClasses)}"
+                        role="listbox"
+                        aria-label="${this.label || "Options"}"
+                        data-visible="${this.isOpen}"
+                        @pointerout=${this.onListboxPointerout}
+                    >
+                        ${repeat(this.visibleSuggestions, (option) => option.id, (option, index) => this.renderSuggestion(option, index))}
+                    </ul>
+                </div>
+                ${this.helper ? html `
+                    <ft-typography class="ft-combobox--helper-text" variant="caption">
+                        ${this.helper}
+                    </ft-typography>
+                ` : nothing}
+            </div>
+        `;
+    }
+    renderIcon() {
+        return this.icon ? html `
+            <ft-icon class="ft-combobox--icon"
+                     .variant=${this.iconVariant}
+                     .value=${this.icon}
+                     @click=${() => {
+            var _a, _b;
+            (_a = this.input) === null || _a === void 0 ? void 0 : _a.click();
+            (_b = this.input) === null || _b === void 0 ? void 0 : _b.focus();
+        }}></ft-icon>
+        ` : nothing;
+    }
+    renderSuggestion(suggestion, index) {
+        return html `
+            <li
+                id="${suggestion.kind === "new" ? "suggestion-new-value" : `option-${index}`}"
+                class="ft-combobox--option ${suggestion.kind === "new" ? "ft-combobox--option-new-value" : ""}"
+                role="option"
+                aria-selected="${index === this.activeIndex}"
+                @click=${() => this.onSuggestionClick(suggestion)}
+                @pointerout=${this.onSuggestionPointerout}
+            >
+                ${(() => {
+            const isNewValue = suggestion.kind === "new" && !!this.suggestionsHelper;
+            const classes = {
+                "ft-combobox-suggestion": true,
+                "ft-combobox-suggestion--with-helper": isNewValue,
+            };
+            return html `
+                        <div class="${classMap(classes)}" tabindex="-1">
+                            <ft-ripple></ft-ripple>
+                            ${isNewValue ? html `
+                                <ft-typography aria-label="${this.suggestionsHelper}," class="ft-combobox-suggestion--helper-text"
+                                               variant="${FtTypographyVariants.caption}">
+                                    ${this.suggestionsHelper}
+                                </ft-typography>
+                            ` : nothing}
+                            <ft-typography part="label" variant="${FtTypographyVariants.body1}" class="ft-combobox-suggestion--label">
+                                ${suggestion.label}
+                            </ft-typography>
+                        </div>
+                    `;
+        })()}
+            </li>
+        `;
+    }
+    get activeSuggestion() {
+        return this.activeIndex >= 0 && this.activeIndex < this.visibleSuggestions.length
+            ? this.visibleSuggestions[this.activeIndex]
+            : null;
+    }
+    shouldOfferNew() {
+        var _a;
+        const currentValue = ((_a = this.input) === null || _a === void 0 ? void 0 : _a.value) || this.value || "";
+        return currentValue !== "" && !this.providedSuggestions.some((o) => o.label === currentValue);
+    }
+    getTotalSuggestionsCount() {
+        return this.visibleSuggestions.length;
+    }
+    isNewValueSuggestionSelected() {
+        var _a;
+        return this.activeIndex >= 0
+            && this.activeIndex < this.visibleSuggestions.length
+            && ((_a = this.visibleSuggestions[this.activeIndex]) === null || _a === void 0 ? void 0 : _a.kind) === "new";
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        document.body.addEventListener("pointerup", this.onBackgroundPointerUp);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.body.removeEventListener("pointerup", this.onBackgroundPointerUp);
+    }
+    renderLiveText() {
+        const total = this.getTotalSuggestionsCount();
+        if (this.isOpen && total > 0) {
+            // Keep message short; SR will announce politely without disrupting typing
+            return comboboxContext.messages.ariaLiveOptions(total);
+        }
+        return "";
+    }
+    getActiveDescendantId() {
+        if (this.activeIndex < 0) {
+            return "";
+        }
+        if (this.isNewValueSuggestionSelected()) {
+            return "option-new-value";
+        }
+        return `option-${this.activeIndex}`;
+    }
+    async updateSuggestions() {
+        var _a;
+        if (this._suggestionsProviderDebouncer) {
+            await ((_a = this._suggestionsProviderDebouncer) === null || _a === void 0 ? void 0 : _a.run(() => this.updateSuggestionsWithoutDebounce()));
+        }
+        else {
+            await this.updateSuggestionsWithoutDebounce();
+        }
+    }
+    async updateSuggestionsWithoutDebounce() {
+        var _a;
+        if (this.suggestionsProvider) {
+            this.providedSuggestions = await this.suggestionsProvider(this.filter);
+            const filteredSuggestion = (this.filterSuggestions
+                ? this.providedSuggestions.filter((suggestion) => suggestion.label.toLowerCase().includes(this.filter))
+                : this.providedSuggestions).map((o, i) => ({ id: `regular-${i}`, label: o.label, kind: "regular" }));
+            this.visibleSuggestions = [
+                ...filteredSuggestion,
+                ...(this.shouldOfferNew() ? [{ id: "new", label: ((_a = this.input) === null || _a === void 0 ? void 0 : _a.value) || this.value, kind: "new" }] : []),
+            ];
+        }
+    }
+    setActiveSuggestion(index, updateInput = false) {
+        var _a, _b;
+        const totalCount = this.getTotalSuggestionsCount();
+        if (index < 0 || index >= totalCount) {
+            return;
+        }
+        this.activeIndex = index;
+        const opt = this.visibleSuggestions[index];
+        if (!opt) {
+            return;
+        }
+        if (updateInput) {
+            const target = opt.kind === "new" ? (((_a = this.input) === null || _a === void 0 ? void 0 : _a.value) || this.value) : opt.label;
+            const start = this.filter.length;
+            (_b = this.input) === null || _b === void 0 ? void 0 : _b.setSelectionRange(start, target.length);
+        }
+        this.scrollSuggestionIntoView(index);
+    }
+    scrollSuggestionIntoView(index) {
+        requestAnimationFrame(() => {
+            var _a, _b;
+            let optionElement;
+            if (this.isNewValueSuggestionSelected()) {
+                optionElement = (_a = this.listbox) === null || _a === void 0 ? void 0 : _a.querySelector(`#option-new-value`);
+            }
+            else {
+                optionElement = (_b = this.listbox) === null || _b === void 0 ? void 0 : _b.querySelector(`#option-${index}`);
+            }
+            if (optionElement && this.listbox) {
+                if (this.listbox.scrollTop + this.listbox.offsetHeight < optionElement.offsetTop + optionElement.offsetHeight) {
+                    this.listbox.scrollTop = optionElement.offsetTop + optionElement.offsetHeight - this.listbox.offsetHeight;
+                }
+                else if (this.listbox.scrollTop > optionElement.offsetTop + 2) {
+                    this.listbox.scrollTop = optionElement.offsetTop;
+                }
+            }
+        });
+    }
+    openListbox() {
+        this.isOpen = true;
+    }
+    closeListbox(force = false) {
+        if (force || (!this.comboboxHasVisualFocus && !this.listboxHasVisualFocus)) {
+            this.isOpen = false;
+        }
+    }
+    setVisualFocusCombobox() {
+        this.comboboxHasVisualFocus = true;
+        this.listboxHasVisualFocus = false;
+    }
+    setVisualFocusListbox() {
+        this.comboboxHasVisualFocus = false;
+        this.listboxHasVisualFocus = true;
+    }
+    removeVisualFocusAll() {
+        this.comboboxHasVisualFocus = false;
+        this.listboxHasVisualFocus = false;
+    }
+    setValue(value) {
+        this.filter = value;
+        this._value = value;
+        this.input.value = value;
+        this.input.setSelectionRange(value.length, value.length);
+        this.updateSuggestions();
+        this.dispatchChangeEvent();
+    }
+    dispatchChangeEvent() {
+        this.dispatchEvent(new CustomEvent("change", {
+            detail: { value: this._value },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    isPrintableCharacter(str) {
+        return str.length === 1 && str.match(/\S| /) !== null;
+    }
+    commitSelectionFromEnter() {
+        var _a, _b;
+        if (this.isOpen) {
+            if (this.isNewValueSuggestionSelected()) {
+                this.setValue(((_a = this.input) === null || _a === void 0 ? void 0 : _a.value) || this.value);
+            }
+            else if (this.activeSuggestion) {
+                this.setValue(this.activeSuggestion.label);
+            }
+            else if ((((_b = this.input) === null || _b === void 0 ? void 0 : _b.value) || "").length > 0) {
+                this.setValue(this.input.value);
+            }
+        }
+        this.setVisualFocusCombobox();
+        this.closeListbox(true);
+    }
+    moveFocusToNextSuggestion(event) {
+        const totalCount = this.getTotalSuggestionsCount();
+        if (totalCount <= 0) {
+            return;
+        }
+        this.openListbox();
+        if (event.altKey) {
+            return;
+        }
+        if (this.listboxHasVisualFocus) {
+            const nextIndex = this.activeIndex < totalCount - 1
+                ? this.activeIndex + 1
+                : 0;
+            this.setActiveSuggestion(nextIndex);
+        }
+        else {
+            this.setActiveSuggestion(0, true);
+            this.setVisualFocusListbox();
+        }
+    }
+    moveFocusToPreviousSuggestion(event) {
+        const totalCount = this.getTotalSuggestionsCount();
+        if (totalCount <= 0) {
+            return;
+        }
+        if (this.listboxHasVisualFocus) {
+            const prevIndex = this.activeIndex > 0
+                ? this.activeIndex - 1
+                : totalCount - 1;
+            this.setActiveSuggestion(prevIndex);
+        }
+        else {
+            this.openListbox();
+            if (!event.altKey) {
+                this.setActiveSuggestion(totalCount - 1, true);
+                this.setVisualFocusListbox();
+            }
+        }
+    }
+    handleEscapeKey() {
+        if (this.isOpen) {
+            this.closeListbox(true);
+            this.filter = this.input.value;
+            this.updateSuggestions();
+            this.setVisualFocusCombobox();
+        }
+        else {
+            this.setValue("");
+        }
+        this.activeIndex = -1;
+    }
+    handleTabKey() {
+        var _a;
+        this.closeListbox(true);
+        if (this.listboxHasVisualFocus) {
+            if (this.isNewValueSuggestionSelected()) {
+                this.setValue(((_a = this.input) === null || _a === void 0 ? void 0 : _a.value) || this.value);
+            }
+            else if (this.activeSuggestion) {
+                this.setValue(this.activeSuggestion.label);
+            }
+        }
+    }
+    moveCaretToHome() {
+        this.input.setSelectionRange(0, 0);
+    }
+    moveCaretToEnd() {
+        const length = this.input.value.length;
+        this.input.setSelectionRange(length, length);
+    }
+    focus() {
+        var _a;
+        (_a = this.input) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    blur() {
+        var _a;
+        (_a = this.input) === null || _a === void 0 ? void 0 : _a.blur();
+    }
+}
+FtCombobox.styles = [
+    FtTypographyBody1,
+    screenReaderStyles,
+    styles,
+];
+FtCombobox.elementDefinitions = {
+    "ft-input-label": FtInputLabel,
+    "ft-ripple": FtRipple,
+    "ft-typography": FtTypography,
+    "ft-icon": FtIcon,
+};
+__decorate([
+    property()
+], FtCombobox.prototype, "label", void 0);
+__decorate([
+    property()
+], FtCombobox.prototype, "icon", void 0);
+__decorate([
+    property()
+], FtCombobox.prototype, "iconVariant", void 0);
+__decorate([
+    property()
+], FtCombobox.prototype, "name", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtCombobox.prototype, "error", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtCombobox.prototype, "filterSuggestions", void 0);
+__decorate([
+    property()
+], FtCombobox.prototype, "helper", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtCombobox.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtCombobox.prototype, "outlined", void 0);
+__decorate([
+    property()
+], FtCombobox.prototype, "placeholder", void 0);
+__decorate([
+    property()
+], FtCombobox.prototype, "suggestionsHelper", void 0);
+__decorate([
+    property({ attribute: false })
+], FtCombobox.prototype, "suggestionsProvider", void 0);
+__decorate([
+    numberProperty()
+], FtCombobox.prototype, "suggestionsProviderDebouncerTimeout", void 0);
+__decorate([
+    property({ noAccessor: true })
+], FtCombobox.prototype, "value", null);
+__decorate([
+    state()
+], FtCombobox.prototype, "filter", void 0);
+__decorate([
+    state()
+], FtCombobox.prototype, "isOpen", void 0);
+__decorate([
+    state()
+], FtCombobox.prototype, "comboboxHasVisualFocus", void 0);
+__decorate([
+    state()
+], FtCombobox.prototype, "listboxHasVisualFocus", void 0);
+__decorate([
+    state()
+], FtCombobox.prototype, "providedSuggestions", void 0);
+__decorate([
+    state()
+], FtCombobox.prototype, "visibleSuggestions", void 0);
+__decorate([
+    state()
+], FtCombobox.prototype, "activeIndex", void 0);
+__decorate([
+    query(".ft-combobox--input")
+], FtCombobox.prototype, "input", void 0);
+__decorate([
+    query(".ft-combobox--listbox")
+], FtCombobox.prototype, "listbox", void 0);
+export { FtCombobox };