@fluid-topics/ft-text-field 2.2.12 → 2.2.14

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

@@ -15,6 +15,10 @@ export const suggestionStyles = css `
         outline: none;
     }
 
+    .ft-text-field-suggestion--remove {
+        margin: 0 4px;
+    }
+
     .ft-text-field-suggestion,
     .ft-text-field-suggestion--suggestion,
     .ft-text-field-suggestion--label {

package/build/ft-text-field.js

@@ -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("providedSuggestions")) {
+        if (props.has("providedSuggestions") && this.suggestionsProvider) {
             this.visibleSuggestions = [...this.providedSuggestionsInDom];
         }
         if (props.has("autocomplete")) {

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

@@ -565,6 +565,10 @@
         outline: none;
     }
 
+    .ft-text-field-suggestion--remove {
+        margin: 0 4px;
+    }
+
     .ft-text-field-suggestion,
     .ft-text-field-suggestion--suggestion,
     .ft-text-field-suggestion--label {
@@ -1015,7 +1019,7 @@
                      .variant=${this.iconVariant}
                      .value=${this.icon}
                      @click=${()=>{var t;return(t=this.input)===null||t===void 0?void 0:t.focus()}}></ft-icon>
-        `:q.nothing}update(t){super.update(t),(t.has("value")||t.has("filterSuggestions")||t.has("suggestionsProvider"))&&this.updateSuggestions(),t.has("value")&&t.get("value")!=null&&(this.hideSuggestions=!1),t.has("dispatchedValue")&&t.get("dispatchedValue")!=null&&(this.hideSuggestions=!0)}async updateSuggestions(){var t;if(this.suggestionsProvider){(t=this.cancelableSuggest)===null||t===void 0||t.cancel();let r=this.suggestionsProvider(this.value);r instanceof Promise?(this.cancelableSuggest=(0,le.cancelable)(r),this.providedSuggestions=await this.cancelableSuggest):(this.cancelableSuggest=void 0,this.providedSuggestions=r)}else this.filterSuggestionsIfNeeded()}filterSuggestionsIfNeeded(){this.filterSuggestions?(this.slottedSuggestions.forEach(t=>t.hidden=!t.getValue().toLowerCase().includes(this.value.toLowerCase())),this.visibleSuggestions=this.slottedSuggestions.filter(t=>!t.hidden)):this.visibleSuggestions=this.slottedSuggestions,this.newValueSuggestion&&(this.visibleSuggestions=[...this.visibleSuggestions,this.newValueSuggestion]),this.hideSuggestions=this.visibleSuggestions.length<=0}contentAvailableCallback(t){super.contentAvailableCallback(t),t.has("focused")&&!this.hideSuggestions&&this.visibleSuggestions.length>0&&this.setSuggestionPosition(),t.has("providedSuggestions")&&(this.visibleSuggestions=[...this.providedSuggestionsInDom]),t.has("autocomplete")&&this.setupWatchAutofill(),this.suggestionsShouldBeDisplayed()&&this.setSuggestionPosition()}setupWatchAutofill(){var t;this.clearWatchAutofill(),((t=this.autocomplete)!==null&&t!==void 0?t:"off")!=="off"&&(this.watchAutofillInterval=setInterval(()=>{var r,i,n;!((r=this.input)===null||r===void 0)&&r.matches(":autofill")&&this.dispatchedValue!==((i=this.input)===null||i===void 0?void 0:i.value)&&this.setValue((n=this.input)===null||n===void 0?void 0:n.value,!0)},200))}clearWatchAutofill(){this.watchAutofillInterval&&clearInterval(this.watchAutofillInterval)}connectedCallback(){super.connectedCallback(),this.setupWatchAutofill()}disconnectedCallback(){super.disconnectedCallback(),this.clearWatchAutofill()}setValue(t,r=!1){var i,n;this.value!==t&&(this.inputValid=!0,this.setInternalValue(t),this.dispatchEvent(new Pi(t))),r&&this.dispatchedValue!==t&&(this.inputValid=(n=(i=this.input)===null||i===void 0?void 0:i.checkValidity())!==null&&n!==void 0?n:!0,this.inputValid?(this.dispatchedValue=t,this.dispatchEvent(new Ni(t))):this.dispatchEvent(new Di(this.input.validationMessage)))}handleInput(t){var r;let i=((r=this.input)===null||r===void 0?void 0:r.value)||"";this.setValue(i,t.key=="Escape"||t.key=="Enter")}catchComposingEvents(t){}handleClick(){this.hideSuggestions=!1}handleKeyboardNavigation(t){var r,i;if(t.key==="ArrowDown"||t.key==="ArrowUp"){t.preventDefault(),t.stopPropagation(),this.hideSuggestions=!1;let n=this.visibleSuggestions.findIndex(o=>o.matches(":focus-within")),s;t.key==="ArrowDown"?s=n<this.visibleSuggestions.length-1?n+1:0:s=n>0?n-1:this.visibleSuggestions.length-1,(r=this.visibleSuggestions[s])===null||r===void 0||r.focus(void 0,(i=this.visibleSuggestions[n])===null||i===void 0?void 0:i.isRemoveButtonFocused())}(t.key=="Escape"||t.key=="Enter")&&(this.hideSuggestions=!0)}onSuggestionSelected(t){var r;this.setValue(t.detail,!0),(r=this.input)===null||r===void 0||r.focus(),setTimeout(()=>this.hideSuggestions=!0,0)}onSuggestionRemoved(){setTimeout(()=>this.updateSuggestions())}onFocus(){this.focused=!0,this.hideSuggestions=!1}onMainPanelBlur(){var t,r;!((t=this.mainPanel)===null||t===void 0)&&t.matches(":focus-within")||(this.focused=!1,this.setValue(((r=this.input)===null||r===void 0?void 0:r.value)||"",!0))}togglePasswordVisibility(){this.hidePassword=!this.hidePassword}isPasswordField(){return this.password||this.type==="password"}setSuggestionPosition(){this.suggestionsContainer.style.width=this.mainPanel.getBoundingClientRect().width+"px";let t=["bottom","top"];(0,le.computeOffsetAutoPosition)(this.mainPanel,this.suggestionsContainer,"bottom",t,"fixed","--text-field-internal-suggest-size",0).then(({x:r,y:i})=>{this.suggestionsContainer.style.left=`${r}px`,this.suggestionsContainer.style.top=`${i}px`})}suggestionsShouldBeDisplayed(){return!this.hideSuggestions&&(this.visibleSuggestions.length||this.providedSuggestions.length)}};_.elementDefinitions={"ft-input-label":Ce,"ft-ripple":$,"ft-typography":ie,"ft-icon":ee,"ft-text-field-suggestion":ae};_.styles=[Lr,le.noTextInputDefaultClearButton,eo];N([(0,L.property)()],_.prototype,"label",void 0);N([(0,L.property)({noAccessor:!0})],_.prototype,"value",null);N([(0,L.state)()],_.prototype,"dispatchedValue",void 0);N([(0,L.property)()],_.prototype,"helper",void 0);N([(0,L.property)()],_.prototype,"suggestionsHelper",void 0);N([(0,L.property)({type:Boolean})],_.prototype,"outlined",void 0);N([(0,L.property)({type:Boolean})],_.prototype,"disabled",void 0);N([(0,L.property)({type:Boolean})],_.prototype,"error",void 0);N([(0,L.property)({type:Boolean})],_.prototype,"fixedMenuPosition",void 0);N([(0,L.property)()],_.prototype,"prefix",void 0);N([(0,L.property)()],_.prototype,"icon",void 0);N([(0,L.property)()],_.prototype,"name",void 0);N([(0,L.property)()],_.prototype,"type",void 0);N([(0,L.property)()],_.prototype,"passwordHiddenIcon",void 0);N([(0,L.property)()],_.prototype,"passwordRevealedIcon",void 0);N([(0,L.property)()],_.prototype,"iconVariant",void 0);N([(0,L.property)({type:Boolean})],_.prototype,"filterSuggestions",void 0);N([(0,le.numberProperty)()],_.prototype,"maxLength",void 0);N([(0,L.property)({type:Boolean})],_.prototype,"password",void 0);N([(0,L.property)({type:String})],_.prototype,"autocomplete",void 0);N([(0,L.property)({attribute:!1})],_.prototype,"suggestionsProvider",void 0);N([(0,L.property)({type:Boolean})],_.prototype,"hideCurrentValueSuggestion",void 0);N([(0,L.state)()],_.prototype,"focused",void 0);N([(0,L.state)()],_.prototype,"inputValid",void 0);N([(0,L.state)()],_.prototype,"hidePassword",void 0);N([(0,L.state)()],_.prototype,"hideSuggestions",void 0);N([(0,L.state)()],_.prototype,"visibleSuggestions",void 0);N([(0,L.state)()],_.prototype,"providedSuggestions",void 0);N([(0,L.query)(".ft-text-field--main-panel")],_.prototype,"mainPanel",void 0);N([(0,L.query)(".ft-text-field--input")],_.prototype,"input",void 0);N([(0,L.query)(".ft-text-field-suggestion--new-value")],_.prototype,"newValueSuggestion",void 0);N([(0,L.query)(".ft-text-field--suggestions")],_.prototype,"suggestionsContainer",void 0);N([(0,L.queryAll)("ft-text-field-suggestion")],_.prototype,"providedSuggestionsInDom",void 0);N([(0,L.queryAssignedElements)({selector:"ft-text-field-suggestion"})],_.prototype,"slottedSuggestions",void 0);N([(0,le.ignoreComposingEvents)()],_.prototype,"handleInput",null);N([(0,le.ignoreComposingEvents)()],_.prototype,"catchComposingEvents",null);var cc={"ft-text-field":_,"ft-text-field-suggestion":ae};(0,uc.customElements)(cc);})();
+        `:q.nothing}update(t){super.update(t),(t.has("value")||t.has("filterSuggestions")||t.has("suggestionsProvider"))&&this.updateSuggestions(),t.has("value")&&t.get("value")!=null&&(this.hideSuggestions=!1),t.has("dispatchedValue")&&t.get("dispatchedValue")!=null&&(this.hideSuggestions=!0)}async updateSuggestions(){var t;if(this.suggestionsProvider){(t=this.cancelableSuggest)===null||t===void 0||t.cancel();let r=this.suggestionsProvider(this.value);r instanceof Promise?(this.cancelableSuggest=(0,le.cancelable)(r),this.providedSuggestions=await this.cancelableSuggest):(this.cancelableSuggest=void 0,this.providedSuggestions=r)}else this.filterSuggestionsIfNeeded()}filterSuggestionsIfNeeded(){this.filterSuggestions?(this.slottedSuggestions.forEach(t=>t.hidden=!t.getValue().toLowerCase().includes(this.value.toLowerCase())),this.visibleSuggestions=this.slottedSuggestions.filter(t=>!t.hidden)):this.visibleSuggestions=this.slottedSuggestions,this.newValueSuggestion&&(this.visibleSuggestions=[...this.visibleSuggestions,this.newValueSuggestion]),this.hideSuggestions=this.visibleSuggestions.length<=0}contentAvailableCallback(t){super.contentAvailableCallback(t),t.has("focused")&&!this.hideSuggestions&&this.visibleSuggestions.length>0&&this.setSuggestionPosition(),t.has("providedSuggestions")&&this.suggestionsProvider&&(this.visibleSuggestions=[...this.providedSuggestionsInDom]),t.has("autocomplete")&&this.setupWatchAutofill(),this.suggestionsShouldBeDisplayed()&&this.setSuggestionPosition()}setupWatchAutofill(){var t;this.clearWatchAutofill(),((t=this.autocomplete)!==null&&t!==void 0?t:"off")!=="off"&&(this.watchAutofillInterval=setInterval(()=>{var r,i,n;!((r=this.input)===null||r===void 0)&&r.matches(":autofill")&&this.dispatchedValue!==((i=this.input)===null||i===void 0?void 0:i.value)&&this.setValue((n=this.input)===null||n===void 0?void 0:n.value,!0)},200))}clearWatchAutofill(){this.watchAutofillInterval&&clearInterval(this.watchAutofillInterval)}connectedCallback(){super.connectedCallback(),this.setupWatchAutofill()}disconnectedCallback(){super.disconnectedCallback(),this.clearWatchAutofill()}setValue(t,r=!1){var i,n;this.value!==t&&(this.inputValid=!0,this.setInternalValue(t),this.dispatchEvent(new Pi(t))),r&&this.dispatchedValue!==t&&(this.inputValid=(n=(i=this.input)===null||i===void 0?void 0:i.checkValidity())!==null&&n!==void 0?n:!0,this.inputValid?(this.dispatchedValue=t,this.dispatchEvent(new Ni(t))):this.dispatchEvent(new Di(this.input.validationMessage)))}handleInput(t){var r;let i=((r=this.input)===null||r===void 0?void 0:r.value)||"";this.setValue(i,t.key=="Escape"||t.key=="Enter")}catchComposingEvents(t){}handleClick(){this.hideSuggestions=!1}handleKeyboardNavigation(t){var r,i;if(t.key==="ArrowDown"||t.key==="ArrowUp"){t.preventDefault(),t.stopPropagation(),this.hideSuggestions=!1;let n=this.visibleSuggestions.findIndex(o=>o.matches(":focus-within")),s;t.key==="ArrowDown"?s=n<this.visibleSuggestions.length-1?n+1:0:s=n>0?n-1:this.visibleSuggestions.length-1,(r=this.visibleSuggestions[s])===null||r===void 0||r.focus(void 0,(i=this.visibleSuggestions[n])===null||i===void 0?void 0:i.isRemoveButtonFocused())}(t.key=="Escape"||t.key=="Enter")&&(this.hideSuggestions=!0)}onSuggestionSelected(t){var r;this.setValue(t.detail,!0),(r=this.input)===null||r===void 0||r.focus(),setTimeout(()=>this.hideSuggestions=!0,0)}onSuggestionRemoved(){setTimeout(()=>this.updateSuggestions())}onFocus(){this.focused=!0,this.hideSuggestions=!1}onMainPanelBlur(){var t,r;!((t=this.mainPanel)===null||t===void 0)&&t.matches(":focus-within")||(this.focused=!1,this.setValue(((r=this.input)===null||r===void 0?void 0:r.value)||"",!0))}togglePasswordVisibility(){this.hidePassword=!this.hidePassword}isPasswordField(){return this.password||this.type==="password"}setSuggestionPosition(){this.suggestionsContainer.style.width=this.mainPanel.getBoundingClientRect().width+"px";let t=["bottom","top"];(0,le.computeOffsetAutoPosition)(this.mainPanel,this.suggestionsContainer,"bottom",t,"fixed","--text-field-internal-suggest-size",0).then(({x:r,y:i})=>{this.suggestionsContainer.style.left=`${r}px`,this.suggestionsContainer.style.top=`${i}px`})}suggestionsShouldBeDisplayed(){return!this.hideSuggestions&&(this.visibleSuggestions.length||this.providedSuggestions.length)}};_.elementDefinitions={"ft-input-label":Ce,"ft-ripple":$,"ft-typography":ie,"ft-icon":ee,"ft-text-field-suggestion":ae};_.styles=[Lr,le.noTextInputDefaultClearButton,eo];N([(0,L.property)()],_.prototype,"label",void 0);N([(0,L.property)({noAccessor:!0})],_.prototype,"value",null);N([(0,L.state)()],_.prototype,"dispatchedValue",void 0);N([(0,L.property)()],_.prototype,"helper",void 0);N([(0,L.property)()],_.prototype,"suggestionsHelper",void 0);N([(0,L.property)({type:Boolean})],_.prototype,"outlined",void 0);N([(0,L.property)({type:Boolean})],_.prototype,"disabled",void 0);N([(0,L.property)({type:Boolean})],_.prototype,"error",void 0);N([(0,L.property)({type:Boolean})],_.prototype,"fixedMenuPosition",void 0);N([(0,L.property)()],_.prototype,"prefix",void 0);N([(0,L.property)()],_.prototype,"icon",void 0);N([(0,L.property)()],_.prototype,"name",void 0);N([(0,L.property)()],_.prototype,"type",void 0);N([(0,L.property)()],_.prototype,"passwordHiddenIcon",void 0);N([(0,L.property)()],_.prototype,"passwordRevealedIcon",void 0);N([(0,L.property)()],_.prototype,"iconVariant",void 0);N([(0,L.property)({type:Boolean})],_.prototype,"filterSuggestions",void 0);N([(0,le.numberProperty)()],_.prototype,"maxLength",void 0);N([(0,L.property)({type:Boolean})],_.prototype,"password",void 0);N([(0,L.property)({type:String})],_.prototype,"autocomplete",void 0);N([(0,L.property)({attribute:!1})],_.prototype,"suggestionsProvider",void 0);N([(0,L.property)({type:Boolean})],_.prototype,"hideCurrentValueSuggestion",void 0);N([(0,L.state)()],_.prototype,"focused",void 0);N([(0,L.state)()],_.prototype,"inputValid",void 0);N([(0,L.state)()],_.prototype,"hidePassword",void 0);N([(0,L.state)()],_.prototype,"hideSuggestions",void 0);N([(0,L.state)()],_.prototype,"visibleSuggestions",void 0);N([(0,L.state)()],_.prototype,"providedSuggestions",void 0);N([(0,L.query)(".ft-text-field--main-panel")],_.prototype,"mainPanel",void 0);N([(0,L.query)(".ft-text-field--input")],_.prototype,"input",void 0);N([(0,L.query)(".ft-text-field-suggestion--new-value")],_.prototype,"newValueSuggestion",void 0);N([(0,L.query)(".ft-text-field--suggestions")],_.prototype,"suggestionsContainer",void 0);N([(0,L.queryAll)("ft-text-field-suggestion")],_.prototype,"providedSuggestionsInDom",void 0);N([(0,L.queryAssignedElements)({selector:"ft-text-field-suggestion"})],_.prototype,"slottedSuggestions",void 0);N([(0,le.ignoreComposingEvents)()],_.prototype,"handleInput",null);N([(0,le.ignoreComposingEvents)()],_.prototype,"catchComposingEvents",null);var cc={"ft-text-field":_,"ft-text-field-suggestion":ae};(0,uc.customElements)(cc);})();
 /*! Bundled license information:
 
 lit-html/lit-html.js:

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

@@ -646,6 +646,10 @@ Also for action icons.`,c.colorGray200),contentGlobalSubtle:o.extend("--ftds-con
         outline: none;
     }
 
+    .ft-text-field-suggestion--remove {
+        margin: 0 4px;
+    }
+
     .ft-text-field-suggestion,
     .ft-text-field-suggestion--suggestion,
     .ft-text-field-suggestion--label {
@@ -1096,7 +1100,7 @@ Also for action icons.`,c.colorGray200),contentGlobalSubtle:o.extend("--ftds-con
                      .variant=${this.iconVariant}
                      .value=${this.icon}
                      @click=${()=>{var e;return(e=this.input)===null||e===void 0?void 0:e.focus()}}></ft-icon>
-        `:N}update(e){super.update(e),(e.has("value")||e.has("filterSuggestions")||e.has("suggestionsProvider"))&&this.updateSuggestions(),e.has("value")&&e.get("value")!=null&&(this.hideSuggestions=!1),e.has("dispatchedValue")&&e.get("dispatchedValue")!=null&&(this.hideSuggestions=!0)}async updateSuggestions(){var e;if(this.suggestionsProvider){(e=this.cancelableSuggest)===null||e===void 0||e.cancel();let r=this.suggestionsProvider(this.value);r instanceof Promise?(this.cancelableSuggest=Pr(r),this.providedSuggestions=await this.cancelableSuggest):(this.cancelableSuggest=void 0,this.providedSuggestions=r)}else this.filterSuggestionsIfNeeded()}filterSuggestionsIfNeeded(){this.filterSuggestions?(this.slottedSuggestions.forEach(e=>e.hidden=!e.getValue().toLowerCase().includes(this.value.toLowerCase())),this.visibleSuggestions=this.slottedSuggestions.filter(e=>!e.hidden)):this.visibleSuggestions=this.slottedSuggestions,this.newValueSuggestion&&(this.visibleSuggestions=[...this.visibleSuggestions,this.newValueSuggestion]),this.hideSuggestions=this.visibleSuggestions.length<=0}contentAvailableCallback(e){super.contentAvailableCallback(e),e.has("focused")&&!this.hideSuggestions&&this.visibleSuggestions.length>0&&this.setSuggestionPosition(),e.has("providedSuggestions")&&(this.visibleSuggestions=[...this.providedSuggestionsInDom]),e.has("autocomplete")&&this.setupWatchAutofill(),this.suggestionsShouldBeDisplayed()&&this.setSuggestionPosition()}setupWatchAutofill(){var e;this.clearWatchAutofill(),((e=this.autocomplete)!==null&&e!==void 0?e:"off")!=="off"&&(this.watchAutofillInterval=setInterval(()=>{var r,n,i;!((r=this.input)===null||r===void 0)&&r.matches(":autofill")&&this.dispatchedValue!==((n=this.input)===null||n===void 0?void 0:n.value)&&this.setValue((i=this.input)===null||i===void 0?void 0:i.value,!0)},200))}clearWatchAutofill(){this.watchAutofillInterval&&clearInterval(this.watchAutofillInterval)}connectedCallback(){super.connectedCallback(),this.setupWatchAutofill()}disconnectedCallback(){super.disconnectedCallback(),this.clearWatchAutofill()}setValue(e,r=!1){var n,i;this.value!==e&&(this.inputValid=!0,this.setInternalValue(e),this.dispatchEvent(new bn(e))),r&&this.dispatchedValue!==e&&(this.inputValid=(i=(n=this.input)===null||n===void 0?void 0:n.checkValidity())!==null&&i!==void 0?i:!0,this.inputValid?(this.dispatchedValue=e,this.dispatchEvent(new xn(e))):this.dispatchEvent(new vn(this.input.validationMessage)))}handleInput(e){var r;let n=((r=this.input)===null||r===void 0?void 0:r.value)||"";this.setValue(n,e.key=="Escape"||e.key=="Enter")}catchComposingEvents(e){}handleClick(){this.hideSuggestions=!1}handleKeyboardNavigation(e){var r,n;if(e.key==="ArrowDown"||e.key==="ArrowUp"){e.preventDefault(),e.stopPropagation(),this.hideSuggestions=!1;let i=this.visibleSuggestions.findIndex(s=>s.matches(":focus-within")),a;e.key==="ArrowDown"?a=i<this.visibleSuggestions.length-1?i+1:0:a=i>0?i-1:this.visibleSuggestions.length-1,(r=this.visibleSuggestions[a])===null||r===void 0||r.focus(void 0,(n=this.visibleSuggestions[i])===null||n===void 0?void 0:n.isRemoveButtonFocused())}(e.key=="Escape"||e.key=="Enter")&&(this.hideSuggestions=!0)}onSuggestionSelected(e){var r;this.setValue(e.detail,!0),(r=this.input)===null||r===void 0||r.focus(),setTimeout(()=>this.hideSuggestions=!0,0)}onSuggestionRemoved(){setTimeout(()=>this.updateSuggestions())}onFocus(){this.focused=!0,this.hideSuggestions=!1}onMainPanelBlur(){var e,r;!((e=this.mainPanel)===null||e===void 0)&&e.matches(":focus-within")||(this.focused=!1,this.setValue(((r=this.input)===null||r===void 0?void 0:r.value)||"",!0))}togglePasswordVisibility(){this.hidePassword=!this.hidePassword}isPasswordField(){return this.password||this.type==="password"}setSuggestionPosition(){this.suggestionsContainer.style.width=this.mainPanel.getBoundingClientRect().width+"px";let e=["bottom","top"];Ei(this.mainPanel,this.suggestionsContainer,"bottom",e,"fixed","--text-field-internal-suggest-size",0).then(({x:r,y:n})=>{this.suggestionsContainer.style.left=`${r}px`,this.suggestionsContainer.style.top=`${n}px`})}suggestionsShouldBeDisplayed(){return!this.hideSuggestions&&(this.visibleSuggestions.length||this.providedSuggestions.length)}};D.elementDefinitions={"ft-input-label":Fe,"ft-ripple":q,"ft-typography":pe,"ft-icon":le,"ft-text-field-suggestion":me};D.styles=[nn,Di,Ld];V([g()],D.prototype,"label",void 0);V([g({noAccessor:!0})],D.prototype,"value",null);V([W()],D.prototype,"dispatchedValue",void 0);V([g()],D.prototype,"helper",void 0);V([g()],D.prototype,"suggestionsHelper",void 0);V([g({type:Boolean})],D.prototype,"outlined",void 0);V([g({type:Boolean})],D.prototype,"disabled",void 0);V([g({type:Boolean})],D.prototype,"error",void 0);V([g({type:Boolean})],D.prototype,"fixedMenuPosition",void 0);V([g()],D.prototype,"prefix",void 0);V([g()],D.prototype,"icon",void 0);V([g()],D.prototype,"name",void 0);V([g()],D.prototype,"type",void 0);V([g()],D.prototype,"passwordHiddenIcon",void 0);V([g()],D.prototype,"passwordRevealedIcon",void 0);V([g()],D.prototype,"iconVariant",void 0);V([g({type:Boolean})],D.prototype,"filterSuggestions",void 0);V([tr()],D.prototype,"maxLength",void 0);V([g({type:Boolean})],D.prototype,"password",void 0);V([g({type:String})],D.prototype,"autocomplete",void 0);V([g({attribute:!1})],D.prototype,"suggestionsProvider",void 0);V([g({type:Boolean})],D.prototype,"hideCurrentValueSuggestion",void 0);V([W()],D.prototype,"focused",void 0);V([W()],D.prototype,"inputValid",void 0);V([W()],D.prototype,"hidePassword",void 0);V([W()],D.prototype,"hideSuggestions",void 0);V([W()],D.prototype,"visibleSuggestions",void 0);V([W()],D.prototype,"providedSuggestions",void 0);V([Q(".ft-text-field--main-panel")],D.prototype,"mainPanel",void 0);V([Q(".ft-text-field--input")],D.prototype,"input",void 0);V([Q(".ft-text-field-suggestion--new-value")],D.prototype,"newValueSuggestion",void 0);V([Q(".ft-text-field--suggestions")],D.prototype,"suggestionsContainer",void 0);V([Dn("ft-text-field-suggestion")],D.prototype,"providedSuggestionsInDom",void 0);V([Mn({selector:"ft-text-field-suggestion"})],D.prototype,"slottedSuggestions",void 0);V([wo()],D.prototype,"handleInput",null);V([wo()],D.prototype,"catchComposingEvents",null);var tu={"ft-text-field":D,"ft-text-field-suggestion":me};ee(tu);})();
+        `:N}update(e){super.update(e),(e.has("value")||e.has("filterSuggestions")||e.has("suggestionsProvider"))&&this.updateSuggestions(),e.has("value")&&e.get("value")!=null&&(this.hideSuggestions=!1),e.has("dispatchedValue")&&e.get("dispatchedValue")!=null&&(this.hideSuggestions=!0)}async updateSuggestions(){var e;if(this.suggestionsProvider){(e=this.cancelableSuggest)===null||e===void 0||e.cancel();let r=this.suggestionsProvider(this.value);r instanceof Promise?(this.cancelableSuggest=Pr(r),this.providedSuggestions=await this.cancelableSuggest):(this.cancelableSuggest=void 0,this.providedSuggestions=r)}else this.filterSuggestionsIfNeeded()}filterSuggestionsIfNeeded(){this.filterSuggestions?(this.slottedSuggestions.forEach(e=>e.hidden=!e.getValue().toLowerCase().includes(this.value.toLowerCase())),this.visibleSuggestions=this.slottedSuggestions.filter(e=>!e.hidden)):this.visibleSuggestions=this.slottedSuggestions,this.newValueSuggestion&&(this.visibleSuggestions=[...this.visibleSuggestions,this.newValueSuggestion]),this.hideSuggestions=this.visibleSuggestions.length<=0}contentAvailableCallback(e){super.contentAvailableCallback(e),e.has("focused")&&!this.hideSuggestions&&this.visibleSuggestions.length>0&&this.setSuggestionPosition(),e.has("providedSuggestions")&&this.suggestionsProvider&&(this.visibleSuggestions=[...this.providedSuggestionsInDom]),e.has("autocomplete")&&this.setupWatchAutofill(),this.suggestionsShouldBeDisplayed()&&this.setSuggestionPosition()}setupWatchAutofill(){var e;this.clearWatchAutofill(),((e=this.autocomplete)!==null&&e!==void 0?e:"off")!=="off"&&(this.watchAutofillInterval=setInterval(()=>{var r,n,i;!((r=this.input)===null||r===void 0)&&r.matches(":autofill")&&this.dispatchedValue!==((n=this.input)===null||n===void 0?void 0:n.value)&&this.setValue((i=this.input)===null||i===void 0?void 0:i.value,!0)},200))}clearWatchAutofill(){this.watchAutofillInterval&&clearInterval(this.watchAutofillInterval)}connectedCallback(){super.connectedCallback(),this.setupWatchAutofill()}disconnectedCallback(){super.disconnectedCallback(),this.clearWatchAutofill()}setValue(e,r=!1){var n,i;this.value!==e&&(this.inputValid=!0,this.setInternalValue(e),this.dispatchEvent(new bn(e))),r&&this.dispatchedValue!==e&&(this.inputValid=(i=(n=this.input)===null||n===void 0?void 0:n.checkValidity())!==null&&i!==void 0?i:!0,this.inputValid?(this.dispatchedValue=e,this.dispatchEvent(new xn(e))):this.dispatchEvent(new vn(this.input.validationMessage)))}handleInput(e){var r;let n=((r=this.input)===null||r===void 0?void 0:r.value)||"";this.setValue(n,e.key=="Escape"||e.key=="Enter")}catchComposingEvents(e){}handleClick(){this.hideSuggestions=!1}handleKeyboardNavigation(e){var r,n;if(e.key==="ArrowDown"||e.key==="ArrowUp"){e.preventDefault(),e.stopPropagation(),this.hideSuggestions=!1;let i=this.visibleSuggestions.findIndex(s=>s.matches(":focus-within")),a;e.key==="ArrowDown"?a=i<this.visibleSuggestions.length-1?i+1:0:a=i>0?i-1:this.visibleSuggestions.length-1,(r=this.visibleSuggestions[a])===null||r===void 0||r.focus(void 0,(n=this.visibleSuggestions[i])===null||n===void 0?void 0:n.isRemoveButtonFocused())}(e.key=="Escape"||e.key=="Enter")&&(this.hideSuggestions=!0)}onSuggestionSelected(e){var r;this.setValue(e.detail,!0),(r=this.input)===null||r===void 0||r.focus(),setTimeout(()=>this.hideSuggestions=!0,0)}onSuggestionRemoved(){setTimeout(()=>this.updateSuggestions())}onFocus(){this.focused=!0,this.hideSuggestions=!1}onMainPanelBlur(){var e,r;!((e=this.mainPanel)===null||e===void 0)&&e.matches(":focus-within")||(this.focused=!1,this.setValue(((r=this.input)===null||r===void 0?void 0:r.value)||"",!0))}togglePasswordVisibility(){this.hidePassword=!this.hidePassword}isPasswordField(){return this.password||this.type==="password"}setSuggestionPosition(){this.suggestionsContainer.style.width=this.mainPanel.getBoundingClientRect().width+"px";let e=["bottom","top"];Ei(this.mainPanel,this.suggestionsContainer,"bottom",e,"fixed","--text-field-internal-suggest-size",0).then(({x:r,y:n})=>{this.suggestionsContainer.style.left=`${r}px`,this.suggestionsContainer.style.top=`${n}px`})}suggestionsShouldBeDisplayed(){return!this.hideSuggestions&&(this.visibleSuggestions.length||this.providedSuggestions.length)}};D.elementDefinitions={"ft-input-label":Fe,"ft-ripple":q,"ft-typography":pe,"ft-icon":le,"ft-text-field-suggestion":me};D.styles=[nn,Di,Ld];V([g()],D.prototype,"label",void 0);V([g({noAccessor:!0})],D.prototype,"value",null);V([W()],D.prototype,"dispatchedValue",void 0);V([g()],D.prototype,"helper",void 0);V([g()],D.prototype,"suggestionsHelper",void 0);V([g({type:Boolean})],D.prototype,"outlined",void 0);V([g({type:Boolean})],D.prototype,"disabled",void 0);V([g({type:Boolean})],D.prototype,"error",void 0);V([g({type:Boolean})],D.prototype,"fixedMenuPosition",void 0);V([g()],D.prototype,"prefix",void 0);V([g()],D.prototype,"icon",void 0);V([g()],D.prototype,"name",void 0);V([g()],D.prototype,"type",void 0);V([g()],D.prototype,"passwordHiddenIcon",void 0);V([g()],D.prototype,"passwordRevealedIcon",void 0);V([g()],D.prototype,"iconVariant",void 0);V([g({type:Boolean})],D.prototype,"filterSuggestions",void 0);V([tr()],D.prototype,"maxLength",void 0);V([g({type:Boolean})],D.prototype,"password",void 0);V([g({type:String})],D.prototype,"autocomplete",void 0);V([g({attribute:!1})],D.prototype,"suggestionsProvider",void 0);V([g({type:Boolean})],D.prototype,"hideCurrentValueSuggestion",void 0);V([W()],D.prototype,"focused",void 0);V([W()],D.prototype,"inputValid",void 0);V([W()],D.prototype,"hidePassword",void 0);V([W()],D.prototype,"hideSuggestions",void 0);V([W()],D.prototype,"visibleSuggestions",void 0);V([W()],D.prototype,"providedSuggestions",void 0);V([Q(".ft-text-field--main-panel")],D.prototype,"mainPanel",void 0);V([Q(".ft-text-field--input")],D.prototype,"input",void 0);V([Q(".ft-text-field-suggestion--new-value")],D.prototype,"newValueSuggestion",void 0);V([Q(".ft-text-field--suggestions")],D.prototype,"suggestionsContainer",void 0);V([Dn("ft-text-field-suggestion")],D.prototype,"providedSuggestionsInDom",void 0);V([Mn({selector:"ft-text-field-suggestion"})],D.prototype,"slottedSuggestions",void 0);V([wo()],D.prototype,"handleInput",null);V([wo()],D.prototype,"catchComposingEvents",null);var tu={"ft-text-field":D,"ft-text-field-suggestion":me};ee(tu);})();
 /*! Bundled license information:
 
 @webcomponents/scoped-custom-element-registry/src/scoped-custom-element-registry.js:

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fluid-topics/ft-text-field",
-    "version": "2.2.12",
+    "version": "2.2.14",
     "description": "A fluidtopics text field",
     "keywords": [
         "Lit"
@@ -19,12 +19,12 @@
         "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
     },
     "dependencies": {
-        "@fluid-topics/ft-icon": "2.2.12",
-        "@fluid-topics/ft-input-label": "2.2.12",
-        "@fluid-topics/ft-ripple": "2.2.12",
-        "@fluid-topics/ft-typography": "2.2.12",
-        "@fluid-topics/ft-wc-utils": "2.2.12",
+        "@fluid-topics/ft-icon": "2.2.14",
+        "@fluid-topics/ft-input-label": "2.2.14",
+        "@fluid-topics/ft-ripple": "2.2.14",
+        "@fluid-topics/ft-typography": "2.2.14",
+        "@fluid-topics/ft-wc-utils": "2.2.14",
         "lit": "3.3.3"
     },
-    "gitHead": "3f8686496b8ce4f3b095e6184e387a89c353c3b8"
+    "gitHead": "854d6984b9b23dbce23a195e12814084a8317fa5"
 }