@fluid-topics/ft-text-field 1.2.34 → 1.2.36

package/build/ft-text-field.js

@@ -9,7 +9,7 @@ import { property, query, queryAll, queryAssignedElements, state } from "lit/dec
 import { repeat } from "lit/directives/repeat.js";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
-import { computeFlipOffsetPosition, FtLitElement, noTextInputDefaultClearButton, toFtFormComponent } from "@fluid-topics/ft-wc-utils";
+import { computeOffsetAutoPosition, FtLitElement, noTextInputDefaultClearButton, toFtFormComponent } from "@fluid-topics/ft-wc-utils";
 import { FtTypography, FtTypographyBody1 } from "@fluid-topics/ft-typography";
 import { FtInputLabel } from "@fluid-topics/ft-input-label";
 import { FtRipple } from "@fluid-topics/ft-ripple";
@@ -316,7 +316,7 @@ class FtTextField extends toFtFormComponent(FtLitElement, "textbox") {
     setSuggestionPosition() {
         this.suggestionsContainer.style.width = this.mainPanel.getBoundingClientRect().width + "px";
         const fallbackPlacements = ["bottom", "top"];
-        computeFlipOffsetPosition(this.mainPanel, this.suggestionsContainer, "bottom", fallbackPlacements, "fixed", FtTextFieldCssVariables.suggestSize.name, 0)
+        computeOffsetAutoPosition(this.mainPanel, this.suggestionsContainer, "bottom", fallbackPlacements, "fixed", FtTextFieldCssVariables.suggestSize.name, 0)
             .then(({ x, y }) => {
             this.suggestionsContainer.style.left = `${x}px`;
             this.suggestionsContainer.style.top = `${y}px`;

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

@@ -699,7 +699,7 @@ Also for action icons.`,t.colorGray200),contentGlobalSubtle:e.extend("--ft-conte
                      .variant=${this.iconVariant}
                      .value=${this.icon}
                      @click=${()=>{var r;return(r=this.input)===null||r===void 0?void 0:r.focus()}}></ft-icon>
-        `:A.nothing}update(r){super.update(r),(r.has("value")||r.has("filterSuggestions")||r.has("suggestionsProvider"))&&this.updateSuggestions(),r.has("value")&&r.get("value")!=null&&(this.hideSuggestions=!1),r.has("dispatchedValue")&&r.get("dispatchedValue")!=null&&(this.hideSuggestions=!0)}async updateSuggestions(){this.suggestionsProvider?this.providedSuggestions=await this.suggestionsProvider(this.value):this.filterSuggestionsIfNeeded()}filterSuggestionsIfNeeded(){this.filterSuggestions?(this.slottedSuggestions.forEach(r=>r.hidden=!r.getValue().toLowerCase().includes(this.value.toLowerCase())),this.visibleSuggestions=this.slottedSuggestions.filter(r=>!r.hidden)):this.visibleSuggestions=this.slottedSuggestions,this.newValueSuggestion&&(this.visibleSuggestions=[...this.visibleSuggestions,this.newValueSuggestion]),this.hideSuggestions=this.visibleSuggestions.length<=0}contentAvailableCallback(r){super.contentAvailableCallback(r),r.has("focused")&&!this.hideSuggestions&&this.visibleSuggestions.length>0&&this.setSuggestionPosition(),r.has("value")&&this.suggestionsProvider&&(this.visibleSuggestions=[...this.providedSuggestionsInDom]),r.has("autocomplete")&&this.setupWatchAutofill(),this.suggestionsShouldBeDisplayed()&&this.setSuggestionPosition()}setupWatchAutofill(){var r;this.clearWatchAutofill(),((r=this.autocomplete)!==null&&r!==void 0?r:"off")!=="off"&&(this.watchAutofillInterval=setInterval(()=>{var n,i,l;!((n=this.input)===null||n===void 0)&&n.matches(":autofill")&&this.dispatchedValue!==((i=this.input)===null||i===void 0?void 0:i.value)&&this.setValue((l=this.input)===null||l===void 0?void 0:l.value,!0)},200))}clearWatchAutofill(){this.watchAutofillInterval&&clearInterval(this.watchAutofillInterval)}connectedCallback(){super.connectedCallback(),this.setupWatchAutofill()}disconnectedCallback(){super.disconnectedCallback(),this.clearWatchAutofill()}setValue(r,n=!1){this.value!==r&&(this.setInternalValue(r),this.dispatchEvent(new CustomEvent("live-change",{detail:r}))),n&&this.dispatchedValue!==r&&(this.dispatchedValue=r,this.dispatchEvent(new CustomEvent("change",{detail:r})))}handleInput(r){var n;let i=((n=this.input)===null||n===void 0?void 0:n.value)||"";this.setValue(i,r.key=="Escape"||r.key=="Enter")}handleClick(){this.hideSuggestions=!1}handleKeyboardNavigation(r){var n;if(r.key==="ArrowDown"||r.key==="ArrowUp"){r.preventDefault(),r.stopPropagation(),this.hideSuggestions=!1;let i=this.visibleSuggestions.findIndex(c=>c.matches(":focus-within")),l;r.key==="ArrowDown"?l=i<this.visibleSuggestions.length-1?i+1:0:l=i>0?i-1:this.visibleSuggestions.length-1,(n=this.visibleSuggestions[l])===null||n===void 0||n.focus()}(r.key=="Escape"||r.key=="Enter")&&(this.hideSuggestions=!0)}onSuggestionSelected(r){var n;this.setValue(r.detail,!0),(n=this.input)===null||n===void 0||n.focus(),setTimeout(()=>this.hideSuggestions=!0,0)}onFocus(){this.focused=!0,this.hideSuggestions=!1}onMainPanelBlur(){var r,n;!((r=this.mainPanel)===null||r===void 0)&&r.matches(":focus-within")||(this.focused=!1,this.setValue(((n=this.input)===null||n===void 0?void 0:n.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 r=["bottom","top"];(0,q.computeFlipOffsetPosition)(this.mainPanel,this.suggestionsContainer,"bottom",r,"fixed",h.suggestSize.name,0).then(({x:n,y:i})=>{this.suggestionsContainer.style.left=`${n}px`,this.suggestionsContainer.style.top=`${i}px`})}suggestionsShouldBeDisplayed(){return!this.hideSuggestions&&(this.visibleSuggestions.length||this.providedSuggestions.length)}};m.elementDefinitions={"ft-input-label":z,"ft-ripple":E,"ft-typography":T,"ft-icon":k,"ft-text-field-suggestion":_};m.styles=[ke,q.noTextInputDefaultClearButton,ko];C([(0,x.property)()],m.prototype,"label",void 0);C([(0,x.property)({noAccessor:!0})],m.prototype,"value",null);C([(0,x.state)()],m.prototype,"dispatchedValue",void 0);C([(0,x.property)()],m.prototype,"helper",void 0);C([(0,x.property)()],m.prototype,"suggestionsHelper",void 0);C([(0,x.property)({type:Boolean})],m.prototype,"outlined",void 0);C([(0,x.property)({type:Boolean})],m.prototype,"disabled",void 0);C([(0,x.property)({type:Boolean})],m.prototype,"error",void 0);C([(0,x.property)({type:Boolean})],m.prototype,"fixedMenuPosition",void 0);C([(0,x.property)()],m.prototype,"prefix",void 0);C([(0,x.property)()],m.prototype,"icon",void 0);C([(0,x.property)()],m.prototype,"name",void 0);C([(0,x.property)()],m.prototype,"type",void 0);C([(0,x.property)()],m.prototype,"passwordHiddenIcon",void 0);C([(0,x.property)()],m.prototype,"passwordRevealedIcon",void 0);C([(0,x.property)()],m.prototype,"iconVariant",void 0);C([(0,x.property)({type:Boolean})],m.prototype,"filterSuggestions",void 0);C([(0,x.property)({type:Number})],m.prototype,"maxLength",void 0);C([(0,x.property)({type:Boolean})],m.prototype,"password",void 0);C([(0,x.property)({type:String})],m.prototype,"autocomplete",void 0);C([(0,x.property)({attribute:!1})],m.prototype,"suggestionsProvider",void 0);C([(0,x.state)()],m.prototype,"focused",void 0);C([(0,x.state)()],m.prototype,"hidePassword",void 0);C([(0,x.state)()],m.prototype,"hideSuggestions",void 0);C([(0,x.state)()],m.prototype,"visibleSuggestions",void 0);C([(0,x.state)()],m.prototype,"providedSuggestions",void 0);C([(0,x.query)(".ft-text-field--main-panel")],m.prototype,"mainPanel",void 0);C([(0,x.query)(".ft-text-field--input")],m.prototype,"input",void 0);C([(0,x.query)(".ft-text-field-suggestion--new-value")],m.prototype,"newValueSuggestion",void 0);C([(0,x.query)(".ft-text-field--suggestions")],m.prototype,"suggestionsContainer",void 0);C([(0,x.queryAll)("ft-text-field-suggestion")],m.prototype,"providedSuggestionsInDom",void 0);C([(0,x.queryAssignedElements)({selector:"ft-text-field-suggestion"})],m.prototype,"slottedSuggestions",void 0);function Tc(o,r=20){return n=>o.map(i=>typeof i=="string"?{value:i,label:i}:i).filter(i=>i.label.toLowerCase().includes(n.toLowerCase())).sort((i,l)=>Jo(i.label,l.label,n)).slice(0,r)}function Jo(o,r,n){let i=o.toLowerCase(),l=r.toLowerCase(),c=n.toLowerCase();return i.startsWith(c)&&!l.includes(c)?-1:l.startsWith(c)&&!i.startsWith(c)?1:i.localeCompare(l)}(0,Je.customElement)("ft-text-field")(m);(0,Je.customElement)("ft-text-field-suggestion")(_);})();
+        `:A.nothing}update(r){super.update(r),(r.has("value")||r.has("filterSuggestions")||r.has("suggestionsProvider"))&&this.updateSuggestions(),r.has("value")&&r.get("value")!=null&&(this.hideSuggestions=!1),r.has("dispatchedValue")&&r.get("dispatchedValue")!=null&&(this.hideSuggestions=!0)}async updateSuggestions(){this.suggestionsProvider?this.providedSuggestions=await this.suggestionsProvider(this.value):this.filterSuggestionsIfNeeded()}filterSuggestionsIfNeeded(){this.filterSuggestions?(this.slottedSuggestions.forEach(r=>r.hidden=!r.getValue().toLowerCase().includes(this.value.toLowerCase())),this.visibleSuggestions=this.slottedSuggestions.filter(r=>!r.hidden)):this.visibleSuggestions=this.slottedSuggestions,this.newValueSuggestion&&(this.visibleSuggestions=[...this.visibleSuggestions,this.newValueSuggestion]),this.hideSuggestions=this.visibleSuggestions.length<=0}contentAvailableCallback(r){super.contentAvailableCallback(r),r.has("focused")&&!this.hideSuggestions&&this.visibleSuggestions.length>0&&this.setSuggestionPosition(),r.has("value")&&this.suggestionsProvider&&(this.visibleSuggestions=[...this.providedSuggestionsInDom]),r.has("autocomplete")&&this.setupWatchAutofill(),this.suggestionsShouldBeDisplayed()&&this.setSuggestionPosition()}setupWatchAutofill(){var r;this.clearWatchAutofill(),((r=this.autocomplete)!==null&&r!==void 0?r:"off")!=="off"&&(this.watchAutofillInterval=setInterval(()=>{var n,i,l;!((n=this.input)===null||n===void 0)&&n.matches(":autofill")&&this.dispatchedValue!==((i=this.input)===null||i===void 0?void 0:i.value)&&this.setValue((l=this.input)===null||l===void 0?void 0:l.value,!0)},200))}clearWatchAutofill(){this.watchAutofillInterval&&clearInterval(this.watchAutofillInterval)}connectedCallback(){super.connectedCallback(),this.setupWatchAutofill()}disconnectedCallback(){super.disconnectedCallback(),this.clearWatchAutofill()}setValue(r,n=!1){this.value!==r&&(this.setInternalValue(r),this.dispatchEvent(new CustomEvent("live-change",{detail:r}))),n&&this.dispatchedValue!==r&&(this.dispatchedValue=r,this.dispatchEvent(new CustomEvent("change",{detail:r})))}handleInput(r){var n;let i=((n=this.input)===null||n===void 0?void 0:n.value)||"";this.setValue(i,r.key=="Escape"||r.key=="Enter")}handleClick(){this.hideSuggestions=!1}handleKeyboardNavigation(r){var n;if(r.key==="ArrowDown"||r.key==="ArrowUp"){r.preventDefault(),r.stopPropagation(),this.hideSuggestions=!1;let i=this.visibleSuggestions.findIndex(c=>c.matches(":focus-within")),l;r.key==="ArrowDown"?l=i<this.visibleSuggestions.length-1?i+1:0:l=i>0?i-1:this.visibleSuggestions.length-1,(n=this.visibleSuggestions[l])===null||n===void 0||n.focus()}(r.key=="Escape"||r.key=="Enter")&&(this.hideSuggestions=!0)}onSuggestionSelected(r){var n;this.setValue(r.detail,!0),(n=this.input)===null||n===void 0||n.focus(),setTimeout(()=>this.hideSuggestions=!0,0)}onFocus(){this.focused=!0,this.hideSuggestions=!1}onMainPanelBlur(){var r,n;!((r=this.mainPanel)===null||r===void 0)&&r.matches(":focus-within")||(this.focused=!1,this.setValue(((n=this.input)===null||n===void 0?void 0:n.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 r=["bottom","top"];(0,q.computeOffsetAutoPosition)(this.mainPanel,this.suggestionsContainer,"bottom",r,"fixed",h.suggestSize.name,0).then(({x:n,y:i})=>{this.suggestionsContainer.style.left=`${n}px`,this.suggestionsContainer.style.top=`${i}px`})}suggestionsShouldBeDisplayed(){return!this.hideSuggestions&&(this.visibleSuggestions.length||this.providedSuggestions.length)}};m.elementDefinitions={"ft-input-label":z,"ft-ripple":E,"ft-typography":T,"ft-icon":k,"ft-text-field-suggestion":_};m.styles=[ke,q.noTextInputDefaultClearButton,ko];C([(0,x.property)()],m.prototype,"label",void 0);C([(0,x.property)({noAccessor:!0})],m.prototype,"value",null);C([(0,x.state)()],m.prototype,"dispatchedValue",void 0);C([(0,x.property)()],m.prototype,"helper",void 0);C([(0,x.property)()],m.prototype,"suggestionsHelper",void 0);C([(0,x.property)({type:Boolean})],m.prototype,"outlined",void 0);C([(0,x.property)({type:Boolean})],m.prototype,"disabled",void 0);C([(0,x.property)({type:Boolean})],m.prototype,"error",void 0);C([(0,x.property)({type:Boolean})],m.prototype,"fixedMenuPosition",void 0);C([(0,x.property)()],m.prototype,"prefix",void 0);C([(0,x.property)()],m.prototype,"icon",void 0);C([(0,x.property)()],m.prototype,"name",void 0);C([(0,x.property)()],m.prototype,"type",void 0);C([(0,x.property)()],m.prototype,"passwordHiddenIcon",void 0);C([(0,x.property)()],m.prototype,"passwordRevealedIcon",void 0);C([(0,x.property)()],m.prototype,"iconVariant",void 0);C([(0,x.property)({type:Boolean})],m.prototype,"filterSuggestions",void 0);C([(0,x.property)({type:Number})],m.prototype,"maxLength",void 0);C([(0,x.property)({type:Boolean})],m.prototype,"password",void 0);C([(0,x.property)({type:String})],m.prototype,"autocomplete",void 0);C([(0,x.property)({attribute:!1})],m.prototype,"suggestionsProvider",void 0);C([(0,x.state)()],m.prototype,"focused",void 0);C([(0,x.state)()],m.prototype,"hidePassword",void 0);C([(0,x.state)()],m.prototype,"hideSuggestions",void 0);C([(0,x.state)()],m.prototype,"visibleSuggestions",void 0);C([(0,x.state)()],m.prototype,"providedSuggestions",void 0);C([(0,x.query)(".ft-text-field--main-panel")],m.prototype,"mainPanel",void 0);C([(0,x.query)(".ft-text-field--input")],m.prototype,"input",void 0);C([(0,x.query)(".ft-text-field-suggestion--new-value")],m.prototype,"newValueSuggestion",void 0);C([(0,x.query)(".ft-text-field--suggestions")],m.prototype,"suggestionsContainer",void 0);C([(0,x.queryAll)("ft-text-field-suggestion")],m.prototype,"providedSuggestionsInDom",void 0);C([(0,x.queryAssignedElements)({selector:"ft-text-field-suggestion"})],m.prototype,"slottedSuggestions",void 0);function Tc(o,r=20){return n=>o.map(i=>typeof i=="string"?{value:i,label:i}:i).filter(i=>i.label.toLowerCase().includes(n.toLowerCase())).sort((i,l)=>Jo(i.label,l.label,n)).slice(0,r)}function Jo(o,r,n){let i=o.toLowerCase(),l=r.toLowerCase(),c=n.toLowerCase();return i.startsWith(c)&&!l.includes(c)?-1:l.startsWith(c)&&!i.startsWith(c)?1:i.localeCompare(l)}(0,Je.customElement)("ft-text-field")(m);(0,Je.customElement)("ft-text-field-suggestion")(_);})();
 /*! Bundled license information:
 
 lit-html/lit-html.js: