@fluid-topics/ft-combobox 1.3.34 → 1.3.36

package/build/ComboboxMessages.d.ts

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

package/build/ComboboxMessages.js

@@ -3,4 +3,9 @@ export const comboboxContext = I18nMessageContext.build("ftCombobox");
 export const defaultComboboxMessages = {
     "ariaLiveOptions": "{0} options",
     "ariaLiveOptions[\\=1]": "1 option",
+    "valueAdded": "{0} added",
+    "valueRemoved": "{0} removed",
+    "maxValuesReached": "Maximum {0} values allowed",
+    "maxValuesReached[\\=1]": "Maximum 1 value allowed",
+    "removeValueLabel": "Remove {0}",
 };

package/build/ComboboxSuggestionProvider.d.ts

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

package/build/ComboboxSuggestionProvider.js

@@ -1,14 +1,11 @@
-export function basicSuggestionsProvider(values) {
+export function basicSuggestionsProvider(values, maxSuggest = 20) {
     return (query) => {
         const q = (query || "").toLowerCase();
-        const list = values
+        return 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;
+            .sort((a, b) => alphabeticalSortWithPriorToStartWithQuery(a.label, b.label, q))
+            .slice(0, maxSuggest);
     };
 }
 function alphabeticalSortWithPriorToStartWithQuery(a, b, query) {

package/build/ft-combobox.d.ts

@@ -23,6 +23,11 @@ export declare class FtCombobox extends FtCombobox_base implements FtComboboxPro
     get value(): string;
     canOfferNewValue: boolean;
     set value(value: string);
+    multiValued: boolean;
+    maxValues?: number;
+    maxLength?: number;
+    labels: string[];
+    private labelsToValues;
     private filter;
     private isOpen;
     private comboboxHasVisualFocus;
@@ -30,6 +35,7 @@ export declare class FtCombobox extends FtCombobox_base implements FtComboboxPro
     private providedSuggestions;
     private visibleSuggestions;
     private activeIndex;
+    private ariaLiveMessage;
     private input;
     private listbox;
     constructor();
@@ -58,6 +64,10 @@ export declare class FtCombobox extends FtCombobox_base implements FtComboboxPro
     private removeVisualFocusAll;
     private setValue;
     private dispatchChangeEvent;
+    private addToSelection;
+    private clearInput;
+    private removeFromSelection;
+    private dispatchMultiValueChangeEvent;
     private isPrintableCharacter;
     private commitSelectionFromEnter;
     private moveFocusToNextSuggestion;

package/build/ft-combobox.js

@@ -16,6 +16,7 @@ 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 { FtChip } from "@fluid-topics/ft-chip";
 import { withI18n } from "@fluid-topics/ft-i18n";
 import { comboboxContext, defaultComboboxMessages } from "./ComboboxMessages";
 class FtCombobox extends withI18n(FtLitElement) {
@@ -37,6 +38,9 @@ class FtCombobox extends withI18n(FtLitElement) {
         this.suggestionsProvider = () => [];
         this._value = "";
         this.canOfferNewValue = true;
+        this.multiValued = false;
+        this.labels = [];
+        this.labelsToValues = new Map();
         this.filter = "";
         this.isOpen = false;
         this.comboboxHasVisualFocus = false;
@@ -44,16 +48,18 @@ class FtCombobox extends withI18n(FtLitElement) {
         this.providedSuggestions = [];
         this.visibleSuggestions = [];
         this.activeIndex = -1;
+        this.ariaLiveMessage = "";
         this.onComboboxInput = () => {
             const newValue = this.input.value;
-            const hadValue = this._value !== "";
+            const hadValue = this._value !== "" || (this.multiValued && this.labels.length > 0);
             this.filter = newValue;
             this.activeIndex = -1;
-            // Dispatch change event when clearing the field after having a value
-            if (hadValue && newValue === "") {
+            // Single-value mode
+            if (!this.multiValued && hadValue && newValue === "") {
                 this._value = "";
                 this.dispatchChangeEvent();
             }
+            this.ariaLiveMessage = "";
             this.updateSuggestions();
             const total = this.getTotalSuggestionsCount();
             if (total > 0) {
@@ -183,7 +189,9 @@ class FtCombobox extends withI18n(FtLitElement) {
             else {
                 this.setValue(suggestion.label);
             }
-            this.closeListbox(true);
+            if (!this.multiValued) {
+                this.closeListbox(true);
+            }
         };
         this.addI18nContext(comboboxContext, defaultComboboxMessages);
     }
@@ -241,6 +249,7 @@ class FtCombobox extends withI18n(FtLitElement) {
                             aria-activedescendant="${this.getActiveDescendantId()}"
                             aria-label="${ifDefined(this.label)}"
                             name="${ifDefined(this.name)}"
+                            maxlength="${ifDefined(this.maxLength)}"
                             ?disabled=${this.disabled}
                             .value=${this.value}
                             @input=${this.onComboboxInput}
@@ -252,13 +261,14 @@ class FtCombobox extends withI18n(FtLitElement) {
                         ${(this.renderIcon())}
                     </div>
                     <div class="sr-only" aria-live="polite" aria-atomic="true">
-                        ${this.renderLiveText()}
+                        ${this.ariaLiveMessage || this.renderLiveText()}
                     </div>
                     ${when(this.visibleSuggestions.length > 0, () => html `
                         <ul
                             id="combobox-listbox"
                             class="${classMap(listboxClasses)}"
                             role="listbox"
+                            aria-multiselectable="${ifDefined(this.multiValued)}"
                             aria-label="${this.label || "Options"}"
                             data-visible="${this.isOpen}"
                         >
@@ -271,6 +281,20 @@ class FtCombobox extends withI18n(FtLitElement) {
                         ${this.helper}
                     </ft-typography>
                 ` : nothing}
+                ${when(this.multiValued && this.labels.length > 0, () => html `
+                    <div class="ft-combobox--chips-container" role="group" aria-label="Selected values">
+                        ${repeat(this.labels, (value) => value, (value) => html `
+                                <ft-chip removable
+                                         dense
+                                         hideIconTooltip
+                                         label="${value}"
+                                         iconLabel="${comboboxContext.messages.removeValueLabel(value)}"
+                                         @icon-click=${() => this.removeFromSelection(value)}>
+                                    ${value}
+                                </ft-chip>
+                            `)}
+                    </div>
+                `)}
             </div>
         `;
     }
@@ -287,36 +311,36 @@ class FtCombobox extends withI18n(FtLitElement) {
         ` : nothing;
     }
     renderSuggestion(suggestion, index) {
+        const isNewValue = suggestion.kind === "new" && !!this.suggestionsHelper;
+        const isSelected = this.multiValued && this.labels.includes(suggestion.label);
+        const isActive = index === this.activeIndex;
+        const classes = {
+            "ft-combobox-suggestion": true,
+            "ft-combobox-suggestion--with-helper": isNewValue,
+        };
         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}"
+                aria-selected="${this.multiValued ? isSelected : isActive}"
+                data-active="${isActive}"
+                data-selected="${isSelected}"
                 @pointerdown=${(e) => e.preventDefault()}
                 @click=${() => this.onSuggestionClick(suggestion)}
             >
-                ${(() => {
-            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>
-                    `;
-        })()}
+                <div class="${classMap(classes)}" tabindex="-1">
+                    <ft-ripple ?primary=${isSelected} ?activated=${isSelected}></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>
         `;
     }
@@ -328,8 +352,10 @@ class FtCombobox extends withI18n(FtLitElement) {
     shouldOfferNew() {
         var _a;
         const currentValue = ((_a = this.input) === null || _a === void 0 ? void 0 : _a.value) || this.value || "";
+        const isSelected = this.multiValued && this.labels.includes(currentValue);
         return currentValue !== ""
             && !this.providedSuggestions.some((o) => o.label === currentValue)
+            && !isSelected
             && this.canOfferNewValue;
     }
     getTotalSuggestionsCount() {
@@ -380,7 +406,7 @@ class FtCombobox extends withI18n(FtLitElement) {
         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.filter((suggestion) => suggestion.label.toLowerCase().includes(this.filter.toLowerCase()))
                 : this.providedSuggestions).map((o, i) => ({ id: `regular-${i}`, label: o.label, kind: "regular" }));
             this.visibleSuggestions = [
                 ...filteredSuggestion,
@@ -447,16 +473,74 @@ class FtCombobox extends withI18n(FtLitElement) {
         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();
+        if (this.multiValued) {
+            this.addToSelection(value);
+        }
+        else {
+            this.filter = value;
+            this._value = value;
+            this.input.value = value;
+            this.input.setSelectionRange(value.length, value.length);
+            this.updateSuggestions();
+            this.dispatchChangeEvent();
+        }
     }
     dispatchChangeEvent() {
+        var _a, _b;
+        const resolvedSuggestion = (_b = (_a = this.providedSuggestions.find((o) => this._value === o.label)) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : this._value;
+        this.dispatchEvent(new CustomEvent("change", {
+            detail: resolvedSuggestion,
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    addToSelection(label) {
+        var _a, _b;
+        const isBlank = label.trim().length === 0;
+        if (isBlank) {
+            this.clearInput();
+            this.closeListbox(true);
+            return;
+        }
+        const isSelected = this.labels.includes(label);
+        if (isSelected) {
+            this.removeFromSelection(label);
+            this.closeListbox(true);
+            return;
+        }
+        const maxValuesReached = this.maxValues && this.labels.length >= this.maxValues;
+        if (maxValuesReached) {
+            this.ariaLiveMessage = comboboxContext.messages.maxValuesReached((_a = this.maxValues) !== null && _a !== void 0 ? _a : 0);
+            this.closeListbox(true);
+            return;
+        }
+        this.labels = [...this.labels, label];
+        const suggestion = this.providedSuggestions.find((o) => o.label === label);
+        this.labelsToValues.set(label, (_b = suggestion === null || suggestion === void 0 ? void 0 : suggestion.value) !== null && _b !== void 0 ? _b : label);
+        this.ariaLiveMessage = comboboxContext.messages.valueAdded(label);
+        this.dispatchMultiValueChangeEvent();
+        this.clearInput();
+        this.closeListbox(true);
+    }
+    clearInput() {
+        this.filter = "";
+        this.input.value = "";
+        this.input.setSelectionRange(0, 0);
+        this.updateSuggestions();
+        this.input.focus();
+    }
+    removeFromSelection(label) {
+        this.labels = this.labels.filter((v) => v !== label);
+        this.labelsToValues.delete(label);
+        this.updateSuggestions();
+        this.ariaLiveMessage = comboboxContext.messages.valueRemoved(label);
+        this.dispatchMultiValueChangeEvent();
+        this.input.focus();
+    }
+    dispatchMultiValueChangeEvent() {
+        const resolvedSuggestions = this.labels.map((l) => { var _a; return (_a = this.labelsToValues.get(l)) !== null && _a !== void 0 ? _a : l; });
         this.dispatchEvent(new CustomEvent("change", {
-            detail: this._value,
+            detail: resolvedSuggestions,
             bubbles: true,
             composed: true,
         }));
@@ -477,8 +561,14 @@ class FtCombobox extends withI18n(FtLitElement) {
                 this.setValue(this.input.value);
             }
         }
-        this.setVisualFocusCombobox();
-        this.closeListbox(true);
+        if (!this.multiValued) {
+            this.setVisualFocusCombobox();
+            this.closeListbox(true);
+        }
+        else {
+            // In multi-valued mode, keep input focused but reset active index
+            this.activeIndex = -1;
+        }
     }
     moveFocusToNextSuggestion(event) {
         const totalCount = this.getTotalSuggestionsCount();
@@ -569,6 +659,7 @@ FtCombobox.elementDefinitions = {
     "ft-ripple": FtRipple,
     "ft-typography": FtTypography,
     "ft-icon": FtIcon,
+    "ft-chip": FtChip,
 };
 __decorate([
     property()
@@ -615,6 +706,21 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], FtCombobox.prototype, "canOfferNewValue", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtCombobox.prototype, "multiValued", void 0);
+__decorate([
+    numberProperty()
+], FtCombobox.prototype, "maxValues", void 0);
+__decorate([
+    numberProperty()
+], FtCombobox.prototype, "maxLength", void 0);
+__decorate([
+    state()
+], FtCombobox.prototype, "labels", void 0);
+__decorate([
+    state()
+], FtCombobox.prototype, "labelsToValues", void 0);
 __decorate([
     state()
 ], FtCombobox.prototype, "filter", void 0);
@@ -636,6 +742,9 @@ __decorate([
 __decorate([
     state()
 ], FtCombobox.prototype, "activeIndex", void 0);
+__decorate([
+    state()
+], FtCombobox.prototype, "ariaLiveMessage", void 0);
 __decorate([
     query(".ft-combobox--input")
 ], FtCombobox.prototype, "input", void 0);