@fluid-topics/ftds-combobox 2.0.37

package/build/ftds-base-combobox.styles.js

@@ -0,0 +1,111 @@
+import { css } from "lit";
+import { combobox, floatingMenu, } from "@fluid-topics/design-system-variables";
+import { foundation } from "@fluid-topics/ft-wc-utils";
+import { FtdsBaseInputCssVariables } from "@fluid-topics/ft-base-input";
+// language=css
+export const baseComboboxStyles = css `
+    :host {
+        display: block;
+        position: relative;
+        width: 100%;
+    }
+
+    input {
+        background-color: transparent;
+        outline: none;
+        border: none;
+        width: 100%;
+        cursor: text;
+        text-overflow: ellipsis;
+    }
+
+    .listbox {
+        position: absolute;
+        left: 0;
+        right: 0;
+        margin: ${combobox.menuVerticalGap} 0 0;
+        padding: 0;
+        list-style: none;
+        z-index: 100;
+        box-shadow: ${floatingMenu.shadow};
+        max-height: 240px;
+        overflow-y: auto;
+        overflow-x: hidden;
+        background-color: ${floatingMenu.backgroundColor};
+    }
+
+    .listbox.ftds--size-large {
+        top: ${FtdsBaseInputCssVariables.largeFieldHeight};
+    }
+
+    .listbox.ftds--size-medium {
+        top: ${FtdsBaseInputCssVariables.mediumFieldHeight};
+    }
+
+    .listbox[hidden] {
+        display: none;
+    }
+
+    .listbox-option {
+        display: flex;
+        align-items: center;
+        padding: ${floatingMenu.verticalPadding} ${floatingMenu.horizontalPadding};
+        min-height: ${floatingMenu.height};
+        box-sizing: border-box;
+        cursor: pointer;
+        gap: ${floatingMenu.gap};
+    }
+
+    .listbox-option--label {
+        word-break: break-word;
+    }
+
+    .listbox-option[aria-disabled="true"] {
+        opacity: ${floatingMenu.disabledComponentOpacity};
+    }
+
+    .listbox-option--new-value {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0;
+    }
+
+    .listbox-option--new-value .listbox-option--label {
+        display: flex;
+        align-items: center;
+    }
+
+    .listbox-option--new-value:not(:first-child) {
+        border-top: ${combobox.menuNewValueBorderWidth} solid ${combobox.menuNewValueBorderColor};
+    }
+
+    .listbox-option--new-value.listbox-option--new-value--error {
+        background-color: ${combobox.menuNewValueErrorBackgroundColor};
+    }
+
+    .listbox-option--new-value.listbox-option--new-value--error:hover {
+        background-color: color-mix(in srgb, ${combobox.menuNewValueErrorStateLayerColor} calc(${combobox.menuNewValueErrorHoverStateLayerOpacity} * 100%), transparent);
+    }
+
+    .listbox-option--new-value.listbox-option--new-value--error[data-active="true"] {
+        background-color: color-mix(in srgb, ${combobox.menuNewValueErrorStateLayerColor} calc(${combobox.menuNewValueErrorActiveStateLayerOpacity} * 100%), transparent);
+    }
+
+    .listbox-option--new-value--error:not(:first-child) {
+        border-color: ${combobox.menuNewValueErrorBorderColor};
+    }
+
+    .listbox-option--helper {
+        margin-bottom: ${foundation.spacing1};
+        color: ${combobox.menuNewValueLabelColor};
+    }
+
+    .listbox-option--message--no-option,
+    .listbox-option--message--max {
+        display: flex;
+        flex-direction: column;
+        color: ${combobox.menuMessageLabelColor};
+        padding: ${combobox.menuMessagePaddingTop} ${combobox.menuMessageHorizontalPadding} ${combobox.menuMessagePaddingBottom};
+    }
+`;

package/build/ftds-combobox-multi-value.d.ts

@@ -0,0 +1,30 @@
+import { TemplateResult } from "lit";
+import { ElementDefinitionsMap } from "@fluid-topics/ft-wc-utils";
+import { ActionableListboxItem, ListboxItem, SuggestionListboxItem } from "./ftds-base-combobox.properties";
+import { ComboboxValue, FtdsComboboxMultiValueProperties } from "./ftds-combobox-multi-value.properties";
+import { FtdsBaseCombobox } from "./ftds-base-combobox";
+export declare class FtdsComboboxMultiValue extends FtdsBaseCombobox<ComboboxValue[]> implements FtdsComboboxMultiValueProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    static styles: import("lit").CSSResult[];
+    canSelectAll: boolean;
+    maxNumberOfChips: number;
+    constructor();
+    handleBlurStrategy(): void;
+    computeListboxItems(): Promise<void>;
+    commitSelection(suggestion: ActionableListboxItem): void;
+    commitTypedText(): void;
+    resetCombobox(): void;
+    private resetInputValue;
+    isSuggestionSelected(value: string): boolean;
+    private notifySelectionChange;
+    private toggleSelectAll;
+    renderListboxItem(listboxItem: ListboxItem, index: number): TemplateResult | typeof import("lit-html").nothing;
+    private renderSelectAll;
+    private isValueSelected;
+    private areAllSuggestionsChecked;
+    private areAllSuggestionsUnchecked;
+    render(): TemplateResult;
+    renderSuggestionItem(suggestion: SuggestionListboxItem, isSelected: boolean): TemplateResult;
+    protected renderChips(): TemplateResult;
+    private removeChipValueFromSelection;
+}

package/build/ftds-combobox-multi-value.js

@@ -0,0 +1,218 @@
+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, } from "lit";
+import { property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { numberProperty, processValidationRules, screenReaderStyles, } from "@fluid-topics/ft-wc-utils";
+import { FtdsIcon } from "@fluid-topics/ft-icon";
+import { ListboxItemType, } from "./ftds-base-combobox.properties";
+import { FtdsComboboxMultiValueChangeEvent, } from "./ftds-combobox-multi-value.properties";
+import { comboboxMultiValueStyles } from "./ftds-combobox-multi-value.styles";
+import { FtdsTypographyVariants } from "@fluid-topics/ft-typography";
+import { FtdsChipGroup, } from "@fluid-topics/ft-chip-group";
+import { comboboxMultiValueContext, defaultComboboxMultiValueMessages, } from "./FtdsComboboxMultiValueMessages";
+import { FtdsBaseCombobox } from "./ftds-base-combobox";
+import { baseComboboxStyles } from "./ftds-base-combobox.styles";
+export class FtdsComboboxMultiValue extends FtdsBaseCombobox {
+    constructor() {
+        var _a;
+        super();
+        this.canSelectAll = false;
+        this.maxNumberOfChips = 10;
+        this.value = (_a = this.value) !== null && _a !== void 0 ? _a : [];
+        this.addI18nContext(comboboxMultiValueContext, defaultComboboxMultiValueMessages);
+    }
+    handleBlurStrategy() {
+        this.resetCombobox();
+    }
+    async computeListboxItems() {
+        await super.computeListboxItems();
+        const showSelectAll = this.canSelectAll && this.filteredSuggestionsWithLimit.length > 0;
+        if (showSelectAll) {
+            this.listboxItems = [
+                { type: ListboxItemType.all },
+                ...this.listboxItems,
+            ];
+        }
+    }
+    commitSelection(suggestion) {
+        if (suggestion.type === ListboxItemType.all) {
+            this.toggleSelectAll();
+            return;
+        }
+        if (suggestion.type === ListboxItemType.newValue && processValidationRules(suggestion.value, this.newValueValidationRules).length > 0) {
+            return;
+        }
+        const shouldBeAdded = !this.value.some((selectedValue) => selectedValue.value === suggestion.value);
+        if (shouldBeAdded) {
+            this.value = [
+                ...this.value,
+                { value: suggestion.value, label: suggestion.label },
+            ];
+        }
+        else {
+            this.value = this.value.filter((valueInSelection) => valueInSelection.value !== suggestion.value);
+        }
+        this.closeMenu();
+        this.resetInputValue();
+        this.notifySelectionChange([suggestion.label], shouldBeAdded);
+    }
+    commitTypedText() {
+        // We never commit input on blur for multi-value
+        this.resetInputValue();
+    }
+    resetCombobox() {
+        this.resetInputValue();
+    }
+    resetInputValue() {
+        if (this.input) {
+            this.input.value = "";
+        }
+        this.inputValue = "";
+    }
+    isSuggestionSelected(value) {
+        return this.value.some((selectedSuggestion) => selectedSuggestion.value === value);
+    }
+    notifySelectionChange(suggestionsLabels, isAdded) {
+        this.dispatchEvent(new FtdsComboboxMultiValueChangeEvent(this.value));
+        this.ariaDescribedBy = comboboxMultiValueContext.messages.numberOfSelectedValuesAriaLabel(this.value.length);
+        const concatenatedSuggestions = suggestionsLabels.join();
+        const message = isAdded
+            ? comboboxMultiValueContext.messages.valueAdded(concatenatedSuggestions)
+            : comboboxMultiValueContext.messages.valueRemoved(concatenatedSuggestions);
+        // Delay so VoiceOver finishes announcing the menu collapse before reading this message
+        setTimeout(() => {
+            this.ariaLiveMessage = message;
+        }, 800);
+    }
+    toggleSelectAll() {
+        const currentSuggestions = this.listboxItems
+            .filter((item) => item.type === ListboxItemType.suggestion)
+            .map((item) => ({
+            value: item.value,
+            label: item.label,
+        }));
+        const areAllSuggestionsChecked = this.areAllSuggestionsChecked();
+        let diff;
+        if (areAllSuggestionsChecked) {
+            diff = this.value.filter((selectedValue) => currentSuggestions.some((s) => selectedValue.value === s.value));
+            this.value = this.value.filter((selectedValue) => !currentSuggestions.some((s) => selectedValue.value === s.value));
+        }
+        else {
+            diff = currentSuggestions.filter((s) => !this.value.some((selectedValue) => selectedValue.value === s.value));
+            this.value = this.value.concat(diff);
+        }
+        this.closeMenu();
+        this.resetInputValue();
+        this.notifySelectionChange(diff.map((value) => value.label), !areAllSuggestionsChecked);
+    }
+    renderListboxItem(listboxItem, index) {
+        if (listboxItem.type === ListboxItemType.all) {
+            return this.renderSelectAll(index);
+        }
+        return super.renderListboxItem(listboxItem, index);
+    }
+    renderSelectAll(index) {
+        const areAllSuggestionsUnchecked = this.areAllSuggestionsUnchecked();
+        const areAllSuggestionsChecked = this.areAllSuggestionsChecked();
+        const shouldBeIntermediate = !areAllSuggestionsUnchecked && !areAllSuggestionsChecked;
+        let icon = "square";
+        if (shouldBeIntermediate) {
+            icon = "square-minus";
+        }
+        if (areAllSuggestionsChecked) {
+            icon = "square-check";
+        }
+        const checkboxClasses = {
+            "listbox-option--checkbox": true,
+            "checked": areAllSuggestionsChecked,
+            "intermediate": shouldBeIntermediate,
+            "unchecked": areAllSuggestionsUnchecked,
+        };
+        const isActive = this.activeIndex === index;
+        return html `
+                <li class="listbox-option--select-all listbox-option"
+                    id="${this.suggestionId(index)}"
+                    role="option"
+                    aria-selected="${areAllSuggestionsChecked}"
+                    data-active="${isActive}"
+                    @mousedown=${(e) => e.preventDefault()}
+                    @click=${() => this.toggleSelectAll()}
+                >
+                    <ftds-icon class="${classMap(checkboxClasses)}" icon="${icon}"></ftds-icon>
+                    <ftds-typography variant="${FtdsTypographyVariants.body2medium}" class="listbox-option--label">
+                        ${comboboxMultiValueContext.messages.selectAll()}
+                    </ftds-typography>
+                </li>
+            `;
+    }
+    isValueSelected(value) {
+        return this.value.some((v) => v.value === value);
+    }
+    areAllSuggestionsChecked() {
+        if (this.filteredSuggestionsWithLimit.length === 0) {
+            return false;
+        }
+        return this.filteredSuggestionsWithLimit.every((suggestion) => this.isValueSelected(suggestion.value));
+    }
+    areAllSuggestionsUnchecked() {
+        return this.filteredSuggestionsWithLimit.every((suggestion) => !this.isValueSelected(suggestion.value));
+    }
+    render() {
+        return html `
+            ${this.renderField()}
+            ${this.renderListboxContainer(true)}
+            ${this.renderChips()}
+        `;
+    }
+    renderSuggestionItem(suggestion, isSelected) {
+        return html `
+            <ftds-icon class="listbox-option--checkbox" icon="${isSelected ? "square-check" : "square"}"></ftds-icon>
+            <ftds-typography variant="${FtdsTypographyVariants.body2medium}" class="listbox-option--label">
+                ${suggestion.label}
+            </ftds-typography>
+        `;
+    }
+    renderChips() {
+        const chipsList = this.value.map((value) => ({
+            value: value.value,
+            label: value.label,
+            family: value.status,
+            removeLabel: comboboxMultiValueContext.messages.removeValueLabel(value.label),
+        }));
+        return html `
+            <ftds-chip-group
+                .chips=${chipsList}
+                @remove-chip=${(e) => this.removeChipValueFromSelection(e.detail.value)}
+                ?removable=${!this.disabled}
+                .maxNumberOfChips=${this.maxNumberOfChips}
+            ></ftds-chip-group>
+        `;
+    }
+    removeChipValueFromSelection(value) {
+        var _a, _b;
+        const removed = this.value.find((sv) => sv.value === value);
+        this.value = this.value.filter((selectedValue) => selectedValue.value !== value);
+        this.notifySelectionChange([(_a = removed === null || removed === void 0 ? void 0 : removed.label) !== null && _a !== void 0 ? _a : value], false);
+        // When the last chip is removed we focus the input
+        if (this.value.length === 0) {
+            (_b = this.input) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+    }
+}
+FtdsComboboxMultiValue.elementDefinitions = {
+    ...FtdsBaseCombobox.baseComboboxElementDefinitions,
+    "ftds-icon": FtdsIcon,
+    "ftds-chip-group": FtdsChipGroup,
+};
+FtdsComboboxMultiValue.styles = [baseComboboxStyles, comboboxMultiValueStyles, screenReaderStyles];
+__decorate([
+    property({ type: Boolean })
+], FtdsComboboxMultiValue.prototype, "canSelectAll", void 0);
+__decorate([
+    numberProperty()
+], FtdsComboboxMultiValue.prototype, "maxNumberOfChips", void 0);

package/build/ftds-combobox-multi-value.properties.d.ts

@@ -0,0 +1,14 @@
+import { DesignSystemFamily } from "@fluid-topics/design-system-variables";
+import { ComboboxSuggestion, FtdsBaseComboboxProperties } from "./ftds-base-combobox.properties";
+export interface FtdsComboboxMultiValueProperties extends FtdsBaseComboboxProperties {
+    canSelectAll: boolean;
+    maxNumberOfChips: number;
+}
+export interface ComboboxValue extends ComboboxSuggestion {
+    status?: DesignSystemFamily;
+}
+export declare class FtdsComboboxMultiValueChangeEvent extends CustomEvent<{
+    values: ComboboxValue[];
+}> {
+    constructor(values: ComboboxValue[]);
+}

package/build/ftds-combobox-multi-value.properties.js

@@ -0,0 +1,5 @@
+export class FtdsComboboxMultiValueChangeEvent extends CustomEvent {
+    constructor(values) {
+        super("change", { detail: { values } });
+    }
+}

package/build/ftds-combobox-multi-value.styles.d.ts

@@ -0,0 +1 @@
+export declare const comboboxMultiValueStyles: import("lit").CSSResult;

package/build/ftds-combobox-multi-value.styles.js

@@ -0,0 +1,58 @@
+import { css } from "lit";
+import { combobox, floatingMenu, } from "@fluid-topics/design-system-variables";
+// language=css
+export const comboboxMultiValueStyles = css `
+    :host {
+        display: block;
+        position: relative;
+        width: 100%;
+    }
+
+    .listbox-option--label {
+        display: flex;
+        gap: ${floatingMenu.gap};
+        align-items: center;
+    }
+
+    .listbox-option {
+        background-color: color-mix(in srgb, ${floatingMenu.multiselectUncheckedStateLayerColor} calc(${floatingMenu.multiselectUncheckedDefaultStateLayerOpacity} * 100%), transparent);
+        color: ${floatingMenu.multiselectUncheckedColor};
+
+        .listbox-option--checkbox {
+            color: ${floatingMenu.multiselectUncheckedIconColor}
+        }
+    }
+
+    .listbox-option:hover {
+        background-color: color-mix(in srgb, ${floatingMenu.multiselectUncheckedStateLayerColor} calc(${floatingMenu.multiselectUncheckedHoverStateLayerOpacity} * 100%), transparent);
+    }
+
+    .listbox-option[data-active="true"] {
+        background-color: color-mix(in srgb, ${floatingMenu.multiselectUncheckedStateLayerColor} calc(${floatingMenu.multiselectUncheckedFocusStateLayerOpacity} * 100%), transparent);
+    }
+
+    .listbox-option[aria-selected="true"] {
+        background-color: color-mix(in srgb, ${floatingMenu.multiselectCheckedStateLayerColor} calc(${floatingMenu.multiselectCheckedDefaultStateLayerOpacity} * 100%), transparent);
+        color: ${floatingMenu.multiselectCheckedColor};
+
+        .listbox-option--checkbox {
+            color: ${floatingMenu.multiselectCheckedIconColor}
+        }
+    }
+
+    .listbox-option[aria-selected="true"]:hover {
+        background-color: color-mix(in srgb, ${floatingMenu.multiselectCheckedStateLayerColor} calc(${floatingMenu.multiselectCheckedHoverStateLayerOpacity} * 100%), transparent);
+    }
+
+    .listbox-option[aria-selected="true"][data-active="true"] {
+        background-color: color-mix(in srgb, ${floatingMenu.multiselectCheckedStateLayerColor} calc(${floatingMenu.multiselectCheckedFocusStateLayerOpacity} * 100%), transparent);
+    }
+
+    .listbox-option--select-all[aria-selected="false"] .listbox-option--checkbox.intermediate {
+        color: ${floatingMenu.multiselectCheckedIconColor}
+    }
+
+    ::part(chip) {
+        border-color: ${combobox.valuesChipBorderColor}
+    }
+`;

package/build/ftds-combobox.d.ts

@@ -0,0 +1,21 @@
+import { PropertyValues, TemplateResult } from "lit";
+import { ElementDefinitionsMap } from "@fluid-topics/ft-wc-utils";
+import { ActionableListboxItem, SuggestionListboxItem } from "./ftds-base-combobox.properties";
+import { FtdsComboboxProperties } from "./ftds-combobox.properties";
+import { FtdsBaseCombobox } from "./ftds-base-combobox";
+export declare class FtdsCombobox extends FtdsBaseCombobox<string> implements FtdsComboboxProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    static styles: import("lit").CSSResult[];
+    private previousCommittedLabel;
+    constructor();
+    handleBlurStrategy(): void;
+    commitSelection(suggestion: ActionableListboxItem): void;
+    commitTypedText(typedText: string): void;
+    private commit;
+    resetCombobox(): void;
+    protected updated(changedProperties: PropertyValues): void;
+    isSuggestionSelected(value: string): boolean;
+    onType(e: Event): Promise<void>;
+    render(): TemplateResult;
+    renderSuggestionItem(suggestion: SuggestionListboxItem): TemplateResult;
+}

package/build/ftds-combobox.js

@@ -0,0 +1,96 @@
+import { html, } from "lit";
+import { processValidationRules, screenReaderStyles, } from "@fluid-topics/ft-wc-utils";
+import { isSelectableListboxItem, ListboxItemType, } from "./ftds-base-combobox.properties";
+import { FtdsComboboxChangeEvent, } from "./ftds-combobox.properties";
+import { comboboxStyles } from "./ftds-combobox.styles";
+import { FtdsTypographyVariants } from "@fluid-topics/ft-typography";
+import { FtdsBaseCombobox } from "./ftds-base-combobox";
+import { baseComboboxStyles } from "./ftds-base-combobox.styles";
+export class FtdsCombobox extends FtdsBaseCombobox {
+    constructor() {
+        var _a;
+        super();
+        this.previousCommittedLabel = "";
+        this.value = (_a = this.value) !== null && _a !== void 0 ? _a : "";
+    }
+    handleBlurStrategy() {
+        if (this.inputValue === "") {
+            return;
+        }
+        const matchedSuggestion = this.filteredSuggestions.find((s) => s.label.toLowerCase() === this.inputValue.toLowerCase());
+        if (matchedSuggestion) {
+            this.commitSelection(matchedSuggestion);
+        }
+        else if (this.canOfferNewValue) {
+            this.commitTypedText(this.inputValue);
+        }
+        else {
+            this.resetCombobox();
+        }
+    }
+    commitSelection(suggestion) {
+        if (!isSelectableListboxItem(suggestion)) {
+            return;
+        }
+        if (suggestion.type === ListboxItemType.newValue && processValidationRules(suggestion.value, this.newValueValidationRules).length > 0) {
+            return;
+        }
+        this.commit(suggestion.value, suggestion.label);
+        this.closeMenu();
+    }
+    commitTypedText(typedText) {
+        if (processValidationRules(typedText, this.newValueValidationRules).length > 0) {
+            return;
+        }
+        this.commit(typedText, typedText);
+    }
+    commit(value, label) {
+        this.value = value;
+        this.inputValue = label;
+        this.previousCommittedLabel = label;
+        this.dispatchEvent(new FtdsComboboxChangeEvent(value));
+    }
+    resetCombobox() {
+        this.inputValue = this.previousCommittedLabel;
+    }
+    updated(changedProperties) {
+        var _a;
+        super.updated(changedProperties);
+        if (changedProperties.has("value")) {
+            const previous = (_a = (changedProperties.get("value"))) !== null && _a !== void 0 ? _a : "";
+            const hasValueChanged = this.value !== previous && !this.isOpen && this.inputValue === previous;
+            if (hasValueChanged) {
+                this.inputValue = this.value;
+            }
+        }
+    }
+    isSuggestionSelected(value) {
+        return value === this.value;
+    }
+    async onType(e) {
+        await super.onType(e);
+        if (this.inputValue === "" && this.value !== "") {
+            this.previousCommittedLabel = "";
+            this.value = "";
+            this.dispatchEvent(new FtdsComboboxChangeEvent(""));
+        }
+    }
+    render() {
+        return html `
+            ${this.renderField()}
+            ${this.renderListboxContainer(false)}
+        `;
+    }
+    renderSuggestionItem(suggestion) {
+        return html `
+            <ftds-typography
+                variant="${this.isSuggestionSelected(suggestion.value) ? FtdsTypographyVariants.body2semibold : FtdsTypographyVariants.body2medium}"
+                class="listbox-option--label"
+            >
+                ${suggestion.label}
+            </ftds-typography>
+        `;
+    }
+}
+FtdsCombobox.elementDefinitions = FtdsBaseCombobox.baseComboboxElementDefinitions;
+FtdsCombobox.styles = [baseComboboxStyles, comboboxStyles, screenReaderStyles];