@fluid-topics/ft-text-field 1.2.49 → 1.2.51

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

@@ -43,9 +43,11 @@ export declare class FtTextField extends FtTextField_base implements FtTextField
     providedSuggestionsInDom: FtTextFieldSuggestion[];
     slottedSuggestions: FtTextFieldSuggestion[];
     focus(): void;
+    blur(): void;
     protected render(): import("lit-html").TemplateResult<1>;
     private resolveInputType;
     private renderSuggestions;
+    private onSuggestionClick;
     private renderPasswordIcon;
     private renderIcon;
     protected update(props: PropertyValues): void;

package/build/ft-text-field.js

@@ -60,6 +60,10 @@ class FtTextField extends toFtFormComponent(FtLitElement, "textbox") {
         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();
+    }
     render() {
         const classes = {
             "ft-text-field": true,
@@ -143,7 +147,7 @@ class FtTextField extends toFtFormComponent(FtLitElement, "textbox") {
         if (this.suggestionsProvider) {
             return html `
                 ${repeat(this.providedSuggestions, suggestion => html `
-                        <ft-text-field-suggestion value=${suggestion.value} @click=${suggestion.clickHandler}>
+                        <ft-text-field-suggestion value=${suggestion.value} @click=${(e) => this.onSuggestionClick(e, suggestion.clickHandler)}>
                             ${suggestion.icon ? html `
                                                    <ft-icon .value=${suggestion.icon}></ft-icon>
                                                `
@@ -158,6 +162,12 @@ class FtTextField extends toFtFormComponent(FtLitElement, "textbox") {
             `;
         }
     }
+    onSuggestionClick(event, handler) {
+        if (handler) {
+            event.preventDefault();
+            handler(event);
+        }
+    }
     renderPasswordIcon() {
         return html `
             <ft-icon class="ft-text-field--icon"

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

@@ -631,7 +631,7 @@ Also for action icons.`,t.colorGray200),contentGlobalSubtle:e.extend("--ft-conte
                     <slot></slot>
                 </ft-typography>
             </div>
-        `}focus(r){var i;(i=this.container)===null||i===void 0||i.focus(r)}click(){var r;(r=this.container)===null||r===void 0||r.click()}confirmSuggestion(){this.dispatchEvent(new Qe(this.getValue()))}getValue(){return this.value||this.textContent}get textContent(){return this.assignedNodes.map(r=>r.textContent).join("").trim()}onKeyDown(r){["Enter"," "].includes(r.key)&&(r.preventDefault(),r.stopPropagation(),this.confirmSuggestion())}};_.elementDefinitions={"ft-ripple":E,"ft-typography":T,"ft-icon":B};_.styles=$o;_e([(0,ae.property)()],_.prototype,"value",void 0);_e([(0,ae.property)()],_.prototype,"helper",void 0);_e([(0,ae.query)(".ft-text-field-suggestion")],_.prototype,"container",void 0);_e([(0,ae.queryAssignedNodes)()],_.prototype,"assignedNodes",void 0);var C=function(o,r,i,n){var l=arguments.length,c=l<3?r:n===null?n=Object.getOwnPropertyDescriptor(r,i):n,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")c=Reflect.decorate(o,r,i,n);else for(var f=o.length-1;f>=0;f--)(d=o[f])&&(c=(l<3?d(c):l>3?d(r,i,c):d(r,i))||c);return l>3&&c&&Object.defineProperty(r,i,c),c},m=class extends(0,Q.toFtFormComponent)(Q.FtLitElement,"textbox"){constructor(){super(...arguments),this._value="",this.dispatchedValue="",this.outlined=!1,this.disabled=!1,this.error=!1,this.fixedMenuPosition=!1,this.prefix=null,this.passwordHiddenIcon=re.EYE_SLASH,this.passwordRevealedIcon=re.EYE,this.filterSuggestions=!1,this.password=!1,this.focused=!1,this.hidePassword=!0,this.hideSuggestions=!1,this.visibleSuggestions=[],this.providedSuggestions=[]}get value(){return this._value||""}set value(r){this.setInternalValue(r||""),this.dispatchedValue=r||""}setInternalValue(r){let i=this._value;this._value=r||"",this.setFormValue(this._value),this.requestUpdate("value",i)}focus(){var r;(r=this.input)===null||r===void 0||r.focus()}render(){let r={"ft-text-field":!0,"ft-text-field--filled":!this.outlined,"ft-text-field--outlined":this.outlined,"ft-text-field--disabled":this.disabled,"ft-text-field--has-value":!!this.value,"ft-text-field--with-label":!!this.label,"ft-text-field--in-error":this.error,"ft-text-field--fixed":this.fixedMenuPosition,"ft-text-field--with-prefix":!!this.prefix,"ft-text-field--hide-suggestions":!this.suggestionsShouldBeDisplayed(),"ft-text-field--raised-label":this.focused||this.value!="","ft-text-field--with-icon":!!this.icon,"ft-text-field--with-password":this.isPasswordField()},i=this.suggestionsProvider&&this.value&&this.value!=""&&!this.providedSuggestions.map(c=>c.label).includes(this.value),l=!this.suggestionsProvider&&this.filterSuggestions&&this.value&&this.value!=""||i;return A.html`
+        `}focus(r){var i;(i=this.container)===null||i===void 0||i.focus(r)}click(){var r;(r=this.container)===null||r===void 0||r.click()}confirmSuggestion(){this.dispatchEvent(new Qe(this.getValue()))}getValue(){return this.value||this.textContent}get textContent(){return this.assignedNodes.map(r=>r.textContent).join("").trim()}onKeyDown(r){["Enter"," "].includes(r.key)&&(r.preventDefault(),r.stopPropagation(),this.confirmSuggestion())}};_.elementDefinitions={"ft-ripple":E,"ft-typography":T,"ft-icon":B};_.styles=$o;_e([(0,ae.property)()],_.prototype,"value",void 0);_e([(0,ae.property)()],_.prototype,"helper",void 0);_e([(0,ae.query)(".ft-text-field-suggestion")],_.prototype,"container",void 0);_e([(0,ae.queryAssignedNodes)()],_.prototype,"assignedNodes",void 0);var C=function(o,r,i,n){var l=arguments.length,c=l<3?r:n===null?n=Object.getOwnPropertyDescriptor(r,i):n,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")c=Reflect.decorate(o,r,i,n);else for(var f=o.length-1;f>=0;f--)(d=o[f])&&(c=(l<3?d(c):l>3?d(r,i,c):d(r,i))||c);return l>3&&c&&Object.defineProperty(r,i,c),c},m=class extends(0,Q.toFtFormComponent)(Q.FtLitElement,"textbox"){constructor(){super(...arguments),this._value="",this.dispatchedValue="",this.outlined=!1,this.disabled=!1,this.error=!1,this.fixedMenuPosition=!1,this.prefix=null,this.passwordHiddenIcon=re.EYE_SLASH,this.passwordRevealedIcon=re.EYE,this.filterSuggestions=!1,this.password=!1,this.focused=!1,this.hidePassword=!0,this.hideSuggestions=!1,this.visibleSuggestions=[],this.providedSuggestions=[]}get value(){return this._value||""}set value(r){this.setInternalValue(r||""),this.dispatchedValue=r||""}setInternalValue(r){let i=this._value;this._value=r||"",this.setFormValue(this._value),this.requestUpdate("value",i)}focus(){var r;(r=this.input)===null||r===void 0||r.focus()}blur(){var r;(r=this.input)===null||r===void 0||r.blur()}render(){let r={"ft-text-field":!0,"ft-text-field--filled":!this.outlined,"ft-text-field--outlined":this.outlined,"ft-text-field--disabled":this.disabled,"ft-text-field--has-value":!!this.value,"ft-text-field--with-label":!!this.label,"ft-text-field--in-error":this.error,"ft-text-field--fixed":this.fixedMenuPosition,"ft-text-field--with-prefix":!!this.prefix,"ft-text-field--hide-suggestions":!this.suggestionsShouldBeDisplayed(),"ft-text-field--raised-label":this.focused||this.value!="","ft-text-field--with-icon":!!this.icon,"ft-text-field--with-password":this.isPasswordField()},i=this.suggestionsProvider&&this.value&&this.value!=""&&!this.providedSuggestions.map(c=>c.label).includes(this.value),l=!this.suggestionsProvider&&this.filterSuggestions&&this.value&&this.value!=""||i;return A.html`
             <div class="${(0,Uo.classMap)(r)}">
                 <div class="ft-text-field--main-panel"
                      @keydown=${this.handleKeyboardNavigation}
@@ -682,7 +682,7 @@ Also for action icons.`,t.colorGray200),contentGlobalSubtle:e.extend("--ft-conte
             </div>
         `}resolveInputType(){var r;return this.isPasswordField()?this.hidePassword?"password":"text":(r=this.type)!==null&&r!==void 0?r:"text"}renderSuggestions(){return this.suggestionsProvider?A.html`
                 ${(0,To.repeat)(this.providedSuggestions,r=>A.html`
-                        <ft-text-field-suggestion value=${r.value} @click=${r.clickHandler}>
+                        <ft-text-field-suggestion value=${r.value} @click=${i=>this.onSuggestionClick(i,r.clickHandler)}>
                             ${r.icon?A.html`
                                                    <ft-icon .value=${r.icon}></ft-icon>
                                                `:A.nothing}
@@ -690,7 +690,7 @@ Also for action icons.`,t.colorGray200),contentGlobalSubtle:e.extend("--ft-conte
                         </ft-text-field-suggestion>`)}
             `:A.html`
                 <slot @slotchange=${()=>this.filterSuggestionsIfNeeded()}></slot>
-            `}renderPasswordIcon(){return A.html`
+            `}onSuggestionClick(r,i){i&&(r.preventDefault(),i(r))}renderPasswordIcon(){return A.html`
             <ft-icon class="ft-text-field--icon"
                      .variant=${this.iconVariant}
                      .value=${this.hidePassword?this.passwordHiddenIcon:this.passwordRevealedIcon}