@fluid-topics/ft-text-field 2.2.8 → 2.2.10

package/build/ft-text-field-suggestion.d.ts

@@ -3,18 +3,27 @@ import { FtTextFieldSuggestionProperties } from "./ft-text-field-suggestion.prop
 export declare class SuggestionSelectedEvent extends CustomEvent<string> {
     constructor(value: string);
 }
+export declare class SuggestionRemovedEvent extends CustomEvent<string> {
+    constructor(value: string);
+}
 export declare class FtTextFieldSuggestion extends FtLitElement implements FtTextFieldSuggestionProperties {
     static elementDefinitions: ElementDefinitionsMap;
     value?: string;
     helper?: string;
-    private container?;
+    removable: boolean;
+    removeButtonLabel?: string;
+    private suggestion?;
+    private removeButton?;
     private assignedNodes;
     static styles: import("lit").CSSResult;
     render(): import("lit-html").TemplateResult<1>;
-    focus(options?: FocusOptions): void;
-    click(): void;
-    private confirmSuggestion;
+    focus(options?: FocusOptions, targetRemoveButton?: boolean): void;
+    click(targetRemoveButton?: boolean): void;
+    isRemoveButtonFocused(): boolean;
+    private selectSuggestion;
+    private removeSuggestion;
     getValue(): string;
     getTextContent(): string;
-    private onKeyDown;
+    private suggestionKeyDown;
+    private removeButtonKeyDown;
 }

package/build/ft-text-field-suggestion.js

@@ -8,61 +8,126 @@ import { FtLitElement, } from "@fluid-topics/ft-wc-utils";
 import { html, nothing, } from "lit";
 import { property, query, queryAssignedNodes, } from "lit/decorators.js";
 import { FtRipple } from "@fluid-topics/ft-ripple";
-import { FtTypography } from "@fluid-topics/ft-typography";
+import { FtTypography, FtTypographyVariants, } from "@fluid-topics/ft-typography";
 import { suggestionStyles } from "./ft-text-field-suggestion.styles";
-import { FtIcon } from "@fluid-topics/ft-icon";
+import { FtIcon, FtIcons, } from "@fluid-topics/ft-icon";
 import { classMap } from "lit/directives/class-map.js";
+import { FtButton } from "@fluid-topics/ft-button";
 export class SuggestionSelectedEvent extends CustomEvent {
     constructor(value) {
         super("suggestion-selected", { detail: value, bubbles: true, composed: true });
     }
 }
+export class SuggestionRemovedEvent extends CustomEvent {
+    constructor(value) {
+        super("suggestion-removed", { detail: value, bubbles: true, composed: true });
+    }
+}
 export class FtTextFieldSuggestion extends FtLitElement {
+    constructor() {
+        super(...arguments);
+        this.removable = false;
+    }
     render() {
         const classes = {
             "ft-text-field-suggestion": true,
             "ft-text-field-suggestion--with-helper": !!this.helper,
         };
         return html `
-            <div class="${classMap(classes)}"
-                 tabindex="-1"
-                 @keydown=${this.onKeyDown}
-                 @click=${this.confirmSuggestion}>
-                <ft-ripple></ft-ripple>
-                ${this.helper ? html `
-                    <ft-typography class="ft-text-field-suggestion--helper-text" variant="caption">
-                        ${this.helper}
-                    </ft-typography>` : nothing}
-                <ft-typography part="label"
-                               variant="body1"
-                               class="ft-text-field-suggestion--label">
-                    <slot></slot>
-                </ft-typography>
+            <div class="${classMap(classes)}">
+                <div
+                    class="ft-text-field-suggestion--suggestion"
+                    tabindex="-1"
+                    @keydown=${this.suggestionKeyDown}
+                    @click=${this.selectSuggestion}
+                >
+                    <ft-ripple></ft-ripple>
+                    ${this.helper ? html `
+                        <ft-typography class="ft-text-field-suggestion--helper-text" variant="caption">
+                            ${this.helper}
+                        </ft-typography>` : nothing}
+                    <ft-typography part="label"
+                                   variant="${FtTypographyVariants.body1}"
+                                   class="ft-text-field-suggestion--label">
+                        <slot></slot>
+                    </ft-typography>
+                </div>
+                ${this.removable ? html `
+                    <ft-button icon="${FtIcons.CLOSE}"
+                               part="remove-button"
+                               class="ft-text-field-suggestion--remove"
+                               round
+                               label="${this.removeButtonLabel}"
+                               tooltipPosition="left"
+                               tabindex="-1"
+                               @keydown=${this.removeButtonKeyDown}
+                               @click=${this.removeSuggestion}>
+                    </ft-button>
+                ` : nothing}
             </div>
         `;
     }
-    focus(options) {
-        var _a;
-        (_a = this.container) === null || _a === void 0 ? void 0 : _a.focus(options);
+    focus(options, targetRemoveButton) {
+        var _a, _b;
+        if (targetRemoveButton && this.removable) {
+            (_a = this.removeButton) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        else {
+            (_b = this.suggestion) === null || _b === void 0 ? void 0 : _b.focus(options);
+        }
     }
-    click() {
+    click(targetRemoveButton) {
         var _a;
-        (_a = this.container) === null || _a === void 0 ? void 0 : _a.click();
+        (_a = (targetRemoveButton ? this.removeButton : this.suggestion)) === null || _a === void 0 ? void 0 : _a.click();
     }
-    confirmSuggestion() {
+    isRemoveButtonFocused() {
+        var _a, _b;
+        return (_b = (_a = this.removeButton) === null || _a === void 0 ? void 0 : _a.matches(":focus-within")) !== null && _b !== void 0 ? _b : false;
+    }
+    selectSuggestion() {
         this.dispatchEvent(new SuggestionSelectedEvent(this.getValue()));
     }
+    removeSuggestion() {
+        this.dispatchEvent(new SuggestionRemovedEvent(this.getValue()));
+    }
     getValue() {
         return this.value || this.getTextContent();
     }
     getTextContent() {
         return this.assignedNodes.map((n) => n.textContent).join("").trim();
     }
-    onKeyDown(event) {
-        if (["Enter", " "].includes(event.key)) {
-            event.preventDefault();
-            event.stopPropagation();
-            this.confirmSuggestion();
+    suggestionKeyDown(event) {
+        var _a;
+        switch (event.key) {
+            case "Enter":
+            case " ":
+                event.preventDefault();
+                event.stopPropagation();
+                this.selectSuggestion();
+                break;
+            case "ArrowRight":
+                if (this.removable) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    (_a = this.removeButton) === null || _a === void 0 ? void 0 : _a.focus();
+                }
+                break;
+        }
+    }
+    removeButtonKeyDown(event) {
+        var _a;
+        switch (event.key) {
+            case "Enter":
+            case " ":
+                event.preventDefault();
+                event.stopPropagation();
+                this.removeSuggestion();
+                break;
+            case "ArrowLeft":
+                event.preventDefault();
+                event.stopPropagation();
+                (_a = this.suggestion) === null || _a === void 0 ? void 0 : _a.focus();
+                break;
         }
     }
 }
@@ -70,6 +135,7 @@ FtTextFieldSuggestion.elementDefinitions = {
     "ft-ripple": FtRipple,
     "ft-typography": FtTypography,
     "ft-icon": FtIcon,
+    "ft-button": FtButton,
 };
 FtTextFieldSuggestion.styles = suggestionStyles;
 __decorate([
@@ -79,8 +145,17 @@ __decorate([
     property()
 ], FtTextFieldSuggestion.prototype, "helper", void 0);
 __decorate([
-    query(".ft-text-field-suggestion")
-], FtTextFieldSuggestion.prototype, "container", void 0);
+    property({ type: Boolean })
+], FtTextFieldSuggestion.prototype, "removable", void 0);
+__decorate([
+    property()
+], FtTextFieldSuggestion.prototype, "removeButtonLabel", void 0);
+__decorate([
+    query(".ft-text-field-suggestion--suggestion")
+], FtTextFieldSuggestion.prototype, "suggestion", void 0);
+__decorate([
+    query(".ft-text-field-suggestion--remove")
+], FtTextFieldSuggestion.prototype, "removeButton", void 0);
 __decorate([
     queryAssignedNodes()
 ], FtTextFieldSuggestion.prototype, "assignedNodes", void 0);

package/build/ft-text-field-suggestion.styles.js

@@ -2,28 +2,34 @@ import { css } from "lit";
 import { FtTextFieldCssVariables } from "./ft-text-field.styles";
 // language=CSS
 export const suggestionStyles = css `
-    .ft-text-field-suggestion {
+    .ft-text-field-suggestion--suggestion {
         position: relative;
         padding: 8px 16px;
         cursor: pointer;
         min-height: 44px;
         box-sizing: border-box;
+    }
+
+    .ft-text-field-suggestion--suggestion,
+    .ft-text-field-suggestion--remove {
         outline: none;
     }
 
     .ft-text-field-suggestion,
+    .ft-text-field-suggestion--suggestion,
     .ft-text-field-suggestion--label {
         display: flex;
         align-items: center;
-        gap: 8px;
     }
 
+    .ft-text-field-suggestion--suggestion,
     .ft-text-field-suggestion--label {
         flex-grow: 1;
         flex-shrink: 1;
+        gap: 8px;
     }
 
-    .ft-text-field-suggestion--with-helper {
+    .ft-text-field-suggestion--with-helper > .ft-text-field-suggestion--suggestion {
         display: flex;
         flex-direction: column;
         align-items: flex-start;

package/build/ft-text-field.d.ts

@@ -49,7 +49,6 @@ export declare class FtTextField extends FtTextField_base implements FtTextField
     protected render(): import("lit-html").TemplateResult<1>;
     private resolveInputType;
     private renderSuggestions;
-    private onSuggestionClick;
     private renderPasswordIcon;
     private renderIcon;
     protected update(props: PropertyValues): void;
@@ -68,6 +67,7 @@ export declare class FtTextField extends FtTextField_base implements FtTextField
     private handleClick;
     private handleKeyboardNavigation;
     private onSuggestionSelected;
+    private onSuggestionRemoved;
     private onFocus;
     private onMainPanelBlur;
     private togglePasswordVisibility;

package/build/ft-text-field.js

@@ -127,7 +127,9 @@ export class FtTextField extends toFtFormComponent(FtLitElement) {
                     </div>
                     <div class="ft-text-field--suggestions"
                          part="suggestions"
-                         @suggestion-selected=${this.onSuggestionSelected}>
+                         @suggestion-selected=${this.onSuggestionSelected}
+                         @suggestion-removed=${this.onSuggestionRemoved}
+                    >
                         ${this.renderSuggestions()}
                         ${!this.hideCurrentValueSuggestion && shouldDisplayQueryAsNewSuggestion
             ? html `
@@ -159,15 +161,19 @@ export class FtTextField extends toFtFormComponent(FtLitElement) {
     renderSuggestions() {
         if (this.suggestionsProvider) {
             return html `
-                ${repeat(this.providedSuggestions, (suggestion) => html `
-                        <ft-text-field-suggestion part="suggestion" value="${suggestion.value}" @click=${(e) => this.onSuggestionClick(e, suggestion.clickHandler)}>
-                            ${suggestion.icon ? html `
-                                                   <ft-icon .value=${suggestion.icon}></ft-icon>
-                                               `
-                : nothing}
+                ${repeat(this.providedSuggestions, (suggestion) => {
+                var _a;
+                return html `
+                        <ft-text-field-suggestion part="suggestion"
+                                                  value="${suggestion.value}"
+                                                  ?removable=${suggestion.removable} }
+                                                  removeButtonLabel="${(_a = suggestion.removeButtonLabel) !== null && _a !== void 0 ? _a : nothing}"
+                        >
+                            ${suggestion.icon ? html `<ft-icon .value=${suggestion.icon}></ft-icon>` : nothing}
                             ${suggestion.label}
                         </ft-text-field-suggestion>
-                    `)}
+                    `;
+            })}
             `;
         }
         else {
@@ -176,12 +182,6 @@ export class FtTextField extends toFtFormComponent(FtLitElement) {
             `;
         }
     }
-    onSuggestionClick(event, handler) {
-        if (handler) {
-            event.preventDefault();
-            handler(event);
-        }
-    }
     renderPasswordIcon() {
         return html `
             <ft-icon class="ft-text-field--icon"
@@ -251,7 +251,7 @@ export class FtTextField extends toFtFormComponent(FtLitElement) {
         if (props.has("focused") && !this.hideSuggestions && this.visibleSuggestions.length > 0) {
             this.setSuggestionPosition();
         }
-        if (props.has("value") && this.suggestionsProvider) {
+        if (props.has("providedSuggestions")) {
             this.visibleSuggestions = [...this.providedSuggestionsInDom];
         }
         if (props.has("autocomplete")) {
@@ -316,12 +316,12 @@ export class FtTextField extends toFtFormComponent(FtLitElement) {
         this.hideSuggestions = false;
     }
     handleKeyboardNavigation(event) {
-        var _a;
+        var _a, _b;
         if ((event.key === "ArrowDown" || event.key === "ArrowUp")) {
             event.preventDefault();
             event.stopPropagation();
             this.hideSuggestions = false;
-            const currentSuggestion = this.visibleSuggestions.findIndex((element) => element.matches((":focus-within")));
+            const currentSuggestion = this.visibleSuggestions.findIndex((element) => element.matches(":focus-within"));
             let target;
             if (event.key === "ArrowDown") {
                 target = currentSuggestion < this.visibleSuggestions.length - 1 ? currentSuggestion + 1 : 0;
@@ -329,7 +329,7 @@ export class FtTextField extends toFtFormComponent(FtLitElement) {
             else {
                 target = currentSuggestion > 0 ? currentSuggestion - 1 : this.visibleSuggestions.length - 1;
             }
-            (_a = this.visibleSuggestions[target]) === null || _a === void 0 ? void 0 : _a.focus();
+            (_a = this.visibleSuggestions[target]) === null || _a === void 0 ? void 0 : _a.focus(undefined, (_b = this.visibleSuggestions[currentSuggestion]) === null || _b === void 0 ? void 0 : _b.isRemoveButtonFocused());
         }
         if (event.key == "Escape" || event.key == "Enter") {
             this.hideSuggestions = true;
@@ -341,6 +341,10 @@ export class FtTextField extends toFtFormComponent(FtLitElement) {
         (_a = this.input) === null || _a === void 0 ? void 0 : _a.focus();
         setTimeout(() => this.hideSuggestions = true, 0);
     }
+    onSuggestionRemoved() {
+        // update suggestions after all handlers processed the event
+        setTimeout(() => this.updateSuggestions());
+    }
     onFocus() {
         this.focused = true;
         this.hideSuggestions = false;