@fluid-topics/ft-combobox 2.2.35 → 2.2.36

package/build/ComboboxMessages.d.ts

@@ -5,6 +5,8 @@ export interface FtComboboxMessages extends I18nMessages {
     valueRemoved(value: string): string;
     maxValuesReached(max: number): string;
     removeValueLabel(value: string): string;
+    clear(): string;
+    cleared(): string;
 }
 export declare const comboboxContext: I18nMessageContext<FtComboboxMessages>;
 export declare const defaultComboboxMessages: DefaultI18nMessages<FtComboboxMessages>;

package/build/ComboboxMessages.js

@@ -8,4 +8,6 @@ export const defaultComboboxMessages = {
     "maxValuesReached": "Maximum {0} values allowed",
     "maxValuesReached[\\=1]": "Maximum 1 value allowed",
     "removeValueLabel": "Remove {0}",
+    "clear": "Clear",
+    "cleared": "Input cleared",
 };

package/build/ft-combobox.d.ts

@@ -29,6 +29,7 @@ export declare class FtCombobox extends FtCombobox_base implements FtComboboxPro
     canOfferNewValue: boolean;
     set value(value: string);
     multiValued: boolean;
+    clearable: boolean;
     maxValues?: number;
     maxLength?: number;
     labels: string[];
@@ -47,6 +48,9 @@ export declare class FtCombobox extends FtCombobox_base implements FtComboboxPro
     private _suggestionsProviderDebouncer?;
     protected willUpdate(props: PropertyValues): void;
     protected render(): TemplateResult<1>;
+    private get canClear();
+    private renderClearButton;
+    private onClearClick;
     private renderIcon;
     private renderSuggestion;
     private get activeSuggestion();

package/build/ft-combobox.js

@@ -15,7 +15,7 @@ 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 { FtIcon, FtIcons, FtIconVariants, } from "@fluid-topics/ft-icon";
 import { FtChip } from "@fluid-topics/ft-chip";
 import { withI18n } from "@fluid-topics/ft-i18n";
 import { comboboxContext, defaultComboboxMessages, } from "./ComboboxMessages";
@@ -39,6 +39,7 @@ export class FtCombobox extends withI18n(FtLitElement) {
         this._value = "";
         this.canOfferNewValue = true;
         this.multiValued = false;
+        this.clearable = false;
         this.labels = [];
         this.labelsToValues = new Map();
         this.filter = "";
@@ -49,6 +50,13 @@ export class FtCombobox extends withI18n(FtLitElement) {
         this.visibleSuggestions = [];
         this.activeIndex = -1;
         this.ariaLiveMessage = "";
+        this.onClearClick = () => {
+            var _a;
+            this.setValue("");
+            this.closeListbox(true);
+            this.ariaLiveMessage = comboboxContext.messages.cleared();
+            (_a = this.input) === null || _a === void 0 ? void 0 : _a.focus();
+        };
         this.onComboboxInput = async () => {
             const newValue = this.input.value;
             const hadValue = this._value !== "" || (this.multiValued && this.labels.length > 0);
@@ -175,6 +183,7 @@ export class FtCombobox extends withI18n(FtLitElement) {
                             @click=${this.onComboboxClick}
                             @focus=${this.onComboboxFocus}
                         />
+                        ${this.canClear ? this.renderClearButton() : nothing}
                         ${(this.renderIcon())}
                     </div>
                     <div class="sr-only" aria-live="polite" aria-atomic="true">
@@ -215,6 +224,25 @@ export class FtCombobox extends withI18n(FtLitElement) {
             </div>
         `;
     }
+    get canClear() {
+        return this.clearable && !this.multiValued && !this.disabled && !!(this.filter || this.value);
+    }
+    renderClearButton() {
+        return html `
+            <button type="button"
+                    class="ft-combobox--clear-button"
+                    part="clear-button"
+                    aria-label="${comboboxContext.messages.clear()}"
+                    aria-controls="combobox-input"
+                    @pointerdown=${(e) => e.preventDefault() /* To keep focus inside the input */}
+                    @click=${this.onClearClick}>
+                <ft-icon
+                    .variant=${FtIconVariants.fluid_topics}
+                    .value=${FtIcons.X_MARK}>
+                </ft-icon>
+            </button>
+        `;
+    }
     renderIcon() {
         return this.icon ? html `
             <ft-icon class="ft-combobox--icon"
@@ -721,6 +749,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], FtCombobox.prototype, "multiValued", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtCombobox.prototype, "clearable", void 0);
 __decorate([
     numberProperty()
 ], FtCombobox.prototype, "maxValues", void 0);