@fluid-topics/ft-text-field 1.3.25 → 1.3.27
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/ft-text-field.js +13 -13
- package/build/ft-text-field.light.js +6 -6
- package/build/ft-text-field.min.js +187 -174
- package/package.json +7 -7
package/build/ft-text-field.js
CHANGED
|
@@ -78,9 +78,9 @@ class FtTextField extends toFtFormComponent(FtLitElement) {
|
|
|
78
78
|
"ft-text-field--hide-suggestions": !this.suggestionsShouldBeDisplayed(),
|
|
79
79
|
"ft-text-field--raised-label": this.focused || this.value != "",
|
|
80
80
|
"ft-text-field--with-icon": !!this.icon,
|
|
81
|
-
"ft-text-field--with-password": this.isPasswordField()
|
|
81
|
+
"ft-text-field--with-password": this.isPasswordField(),
|
|
82
82
|
};
|
|
83
|
-
const suggestionsAreProvidedAndQueryNotInPossiblesValues = this.suggestionsProvider && this.value && this.value != "" && !this.providedSuggestions.map(p => p.label).includes(this.value);
|
|
83
|
+
const suggestionsAreProvidedAndQueryNotInPossiblesValues = this.suggestionsProvider && this.value && this.value != "" && !this.providedSuggestions.map((p) => p.label).includes(this.value);
|
|
84
84
|
const suggestionsFromSlotAndQueryNotEmpty = !this.suggestionsProvider && this.filterSuggestions && this.value && this.value != "";
|
|
85
85
|
const shouldDisplayQueryAsNewSuggestion = suggestionsFromSlotAndQueryNotEmpty || suggestionsAreProvidedAndQueryNotInPossiblesValues;
|
|
86
86
|
return html `
|
|
@@ -102,11 +102,11 @@ class FtTextField extends toFtFormComponent(FtLitElement) {
|
|
|
102
102
|
${this.prefix}
|
|
103
103
|
</ft-typography>
|
|
104
104
|
` : nothing}
|
|
105
|
-
<input type
|
|
106
|
-
name
|
|
107
|
-
maxlength
|
|
105
|
+
<input type="${this.resolveInputType()}"
|
|
106
|
+
name="${ifDefined(this.name)}"
|
|
107
|
+
maxlength="${ifDefined(this.maxLength || undefined)}"
|
|
108
108
|
aria-label="${this.label}"
|
|
109
|
-
autocomplete
|
|
109
|
+
autocomplete="${ifDefined(this.autocomplete)}"
|
|
110
110
|
class="ft-typography--body1 ft-text-field--input"
|
|
111
111
|
part="input"
|
|
112
112
|
?disabled=${this.disabled}
|
|
@@ -146,8 +146,8 @@ class FtTextField extends toFtFormComponent(FtLitElement) {
|
|
|
146
146
|
renderSuggestions() {
|
|
147
147
|
if (this.suggestionsProvider) {
|
|
148
148
|
return html `
|
|
149
|
-
${repeat(this.providedSuggestions, suggestion => html `
|
|
150
|
-
<ft-text-field-suggestion value
|
|
149
|
+
${repeat(this.providedSuggestions, (suggestion) => html `
|
|
150
|
+
<ft-text-field-suggestion value="${suggestion.value}" @click=${(e) => this.onSuggestionClick(e, suggestion.clickHandler)}>
|
|
151
151
|
${suggestion.icon ? html `
|
|
152
152
|
<ft-icon .value=${suggestion.icon}></ft-icon>
|
|
153
153
|
`
|
|
@@ -211,8 +211,8 @@ class FtTextField extends toFtFormComponent(FtLitElement) {
|
|
|
211
211
|
}
|
|
212
212
|
filterSuggestionsIfNeeded() {
|
|
213
213
|
if (this.filterSuggestions) {
|
|
214
|
-
this.slottedSuggestions.forEach(s => s.hidden = !s.getValue().toLowerCase().includes(this.value.toLowerCase()));
|
|
215
|
-
this.visibleSuggestions = this.slottedSuggestions.filter(s => !s.hidden);
|
|
214
|
+
this.slottedSuggestions.forEach((s) => s.hidden = !s.getValue().toLowerCase().includes(this.value.toLowerCase()));
|
|
215
|
+
this.visibleSuggestions = this.slottedSuggestions.filter((s) => !s.hidden);
|
|
216
216
|
}
|
|
217
217
|
else {
|
|
218
218
|
this.visibleSuggestions = this.slottedSuggestions;
|
|
@@ -326,7 +326,7 @@ class FtTextField extends toFtFormComponent(FtLitElement) {
|
|
|
326
326
|
setSuggestionPosition() {
|
|
327
327
|
this.suggestionsContainer.style.width = this.mainPanel.getBoundingClientRect().width + "px";
|
|
328
328
|
const fallbackPlacements = ["bottom", "top"];
|
|
329
|
-
computeOffsetAutoPosition(this.mainPanel, this.suggestionsContainer, "bottom", fallbackPlacements, "fixed", "--
|
|
329
|
+
computeOffsetAutoPosition(this.mainPanel, this.suggestionsContainer, "bottom", fallbackPlacements, "fixed", "--text-field-internal-suggest-size", 0)
|
|
330
330
|
.then(({ x, y }) => {
|
|
331
331
|
this.suggestionsContainer.style.left = `${x}px`;
|
|
332
332
|
this.suggestionsContainer.style.top = `${y}px`;
|
|
@@ -341,13 +341,13 @@ FtTextField.elementDefinitions = {
|
|
|
341
341
|
"ft-ripple": FtRipple,
|
|
342
342
|
"ft-typography": FtTypography,
|
|
343
343
|
"ft-icon": FtIcon,
|
|
344
|
-
"ft-text-field-suggestion": FtTextFieldSuggestion
|
|
344
|
+
"ft-text-field-suggestion": FtTextFieldSuggestion,
|
|
345
345
|
};
|
|
346
346
|
// language=CSS
|
|
347
347
|
FtTextField.styles = [
|
|
348
348
|
FtTypographyBody1,
|
|
349
349
|
noTextInputDefaultClearButton,
|
|
350
|
-
styles
|
|
350
|
+
styles,
|
|
351
351
|
];
|
|
352
352
|
__decorate([
|
|
353
353
|
property()
|
|
@@ -733,11 +733,11 @@ Also for action icons.`,t.colorGray200),contentGlobalSubtle:e.extend("--ft-conte
|
|
|
733
733
|
${this.prefix}
|
|
734
734
|
</ft-typography>
|
|
735
735
|
`:B.nothing}
|
|
736
|
-
<input type
|
|
737
|
-
name
|
|
738
|
-
maxlength
|
|
736
|
+
<input type="${this.resolveInputType()}"
|
|
737
|
+
name="${_e(this.name)}"
|
|
738
|
+
maxlength="${_e(this.maxLength||void 0)}"
|
|
739
739
|
aria-label="${this.label}"
|
|
740
|
-
autocomplete
|
|
740
|
+
autocomplete="${_e(this.autocomplete)}"
|
|
741
741
|
class="ft-typography--body1 ft-text-field--input"
|
|
742
742
|
part="input"
|
|
743
743
|
?disabled=${this.disabled}
|
|
@@ -765,7 +765,7 @@ Also for action icons.`,t.colorGray200),contentGlobalSubtle:e.extend("--ft-conte
|
|
|
765
765
|
</div>
|
|
766
766
|
`}resolveInputType(){var r;return this.isPasswordField()?this.hidePassword?"password":"text":(r=this.type)!==null&&r!==void 0?r:"text"}renderSuggestions(){return this.suggestionsProvider?B.html`
|
|
767
767
|
${(0,Xo.repeat)(this.providedSuggestions,r=>B.html`
|
|
768
|
-
<ft-text-field-suggestion value
|
|
768
|
+
<ft-text-field-suggestion value="${r.value}" @click=${i=>this.onSuggestionClick(i,r.clickHandler)}>
|
|
769
769
|
${r.icon?B.html`
|
|
770
770
|
<ft-icon .value=${r.icon}></ft-icon>
|
|
771
771
|
`:B.nothing}
|
|
@@ -783,7 +783,7 @@ Also for action icons.`,t.colorGray200),contentGlobalSubtle:e.extend("--ft-conte
|
|
|
783
783
|
.variant=${this.iconVariant}
|
|
784
784
|
.value=${this.icon}
|
|
785
785
|
@click=${()=>{var r;return(r=this.input)===null||r===void 0?void 0:r.focus()}}></ft-icon>
|
|
786
|
-
`:B.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 i,n,l;!((i=this.input)===null||i===void 0)&&i.matches(":autofill")&&this.dispatchedValue!==((n=this.input)===null||n===void 0?void 0:n.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,i=!1){this.value!==r&&(this.setInternalValue(r),this.dispatchEvent(new CustomEvent("live-change",{detail:r}))),i&&this.dispatchedValue!==r&&(this.dispatchedValue=r,this.dispatchEvent(new CustomEvent("change",{detail:r})))}handleInput(r){var i;let n=((i=this.input)===null||i===void 0?void 0:i.value)||"";this.setValue(n,r.key=="Escape"||r.key=="Enter")}handleClick(){this.hideSuggestions=!1}handleKeyboardNavigation(r){var i;if(r.key==="ArrowDown"||r.key==="ArrowUp"){r.preventDefault(),r.stopPropagation(),this.hideSuggestions=!1;let n=this.visibleSuggestions.findIndex(c=>c.matches(":focus-within")),l;r.key==="ArrowDown"?l=n<this.visibleSuggestions.length-1?n+1:0:l=n>0?n-1:this.visibleSuggestions.length-1,(i=this.visibleSuggestions[l])===null||i===void 0||i.focus()}(r.key=="Escape"||r.key=="Enter")&&(this.hideSuggestions=!0)}onSuggestionSelected(r){var i;this.setValue(r.detail,!0),(i=this.input)===null||i===void 0||i.focus(),setTimeout(()=>this.hideSuggestions=!0,0)}onFocus(){this.focused=!0,this.hideSuggestions=!1}onMainPanelBlur(){var r,i;!((r=this.mainPanel)===null||r===void 0)&&r.matches(":focus-within")||(this.focused=!1,this.setValue(((i=this.input)===null||i===void 0?void 0:i.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,oe.computeOffsetAutoPosition)(this.mainPanel,this.suggestionsContainer,"bottom",r,"fixed","--
|
|
786
|
+
`:B.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 i,n,l;!((i=this.input)===null||i===void 0)&&i.matches(":autofill")&&this.dispatchedValue!==((n=this.input)===null||n===void 0?void 0:n.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,i=!1){this.value!==r&&(this.setInternalValue(r),this.dispatchEvent(new CustomEvent("live-change",{detail:r}))),i&&this.dispatchedValue!==r&&(this.dispatchedValue=r,this.dispatchEvent(new CustomEvent("change",{detail:r})))}handleInput(r){var i;let n=((i=this.input)===null||i===void 0?void 0:i.value)||"";this.setValue(n,r.key=="Escape"||r.key=="Enter")}handleClick(){this.hideSuggestions=!1}handleKeyboardNavigation(r){var i;if(r.key==="ArrowDown"||r.key==="ArrowUp"){r.preventDefault(),r.stopPropagation(),this.hideSuggestions=!1;let n=this.visibleSuggestions.findIndex(c=>c.matches(":focus-within")),l;r.key==="ArrowDown"?l=n<this.visibleSuggestions.length-1?n+1:0:l=n>0?n-1:this.visibleSuggestions.length-1,(i=this.visibleSuggestions[l])===null||i===void 0||i.focus()}(r.key=="Escape"||r.key=="Enter")&&(this.hideSuggestions=!0)}onSuggestionSelected(r){var i;this.setValue(r.detail,!0),(i=this.input)===null||i===void 0||i.focus(),setTimeout(()=>this.hideSuggestions=!0,0)}onFocus(){this.focused=!0,this.hideSuggestions=!1}onMainPanelBlur(){var r,i;!((r=this.mainPanel)===null||r===void 0)&&r.matches(":focus-within")||(this.focused=!1,this.setValue(((i=this.input)===null||i===void 0?void 0:i.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,oe.computeOffsetAutoPosition)(this.mainPanel,this.suggestionsContainer,"bottom",r,"fixed","--text-field-internal-suggest-size",0).then(({x:i,y:n})=>{this.suggestionsContainer.style.left=`${i}px`,this.suggestionsContainer.style.top=`${n}px`})}suggestionsShouldBeDisplayed(){return!this.hideSuggestions&&(this.visibleSuggestions.length||this.providedSuggestions.length)}};x.elementDefinitions={"ft-input-label":U,"ft-ripple":E,"ft-typography":T,"ft-icon":k,"ft-text-field-suggestion":H};x.styles=[Te,oe.noTextInputDefaultClearButton,Ko];C([(0,S.property)()],x.prototype,"label",void 0);C([(0,S.property)({noAccessor:!0})],x.prototype,"value",null);C([(0,S.state)()],x.prototype,"dispatchedValue",void 0);C([(0,S.property)()],x.prototype,"helper",void 0);C([(0,S.property)()],x.prototype,"suggestionsHelper",void 0);C([(0,S.property)({type:Boolean})],x.prototype,"outlined",void 0);C([(0,S.property)({type:Boolean})],x.prototype,"disabled",void 0);C([(0,S.property)({type:Boolean})],x.prototype,"error",void 0);C([(0,S.property)({type:Boolean})],x.prototype,"fixedMenuPosition",void 0);C([(0,S.property)()],x.prototype,"prefix",void 0);C([(0,S.property)()],x.prototype,"icon",void 0);C([(0,S.property)()],x.prototype,"name",void 0);C([(0,S.property)()],x.prototype,"type",void 0);C([(0,S.property)()],x.prototype,"passwordHiddenIcon",void 0);C([(0,S.property)()],x.prototype,"passwordRevealedIcon",void 0);C([(0,S.property)()],x.prototype,"iconVariant",void 0);C([(0,S.property)({type:Boolean})],x.prototype,"filterSuggestions",void 0);C([(0,S.property)({type:Number})],x.prototype,"maxLength",void 0);C([(0,S.property)({type:Boolean})],x.prototype,"password",void 0);C([(0,S.property)({type:String})],x.prototype,"autocomplete",void 0);C([(0,S.property)({attribute:!1})],x.prototype,"suggestionsProvider",void 0);C([(0,S.state)()],x.prototype,"focused",void 0);C([(0,S.state)()],x.prototype,"hidePassword",void 0);C([(0,S.state)()],x.prototype,"hideSuggestions",void 0);C([(0,S.state)()],x.prototype,"visibleSuggestions",void 0);C([(0,S.state)()],x.prototype,"providedSuggestions",void 0);C([(0,S.query)(".ft-text-field--main-panel")],x.prototype,"mainPanel",void 0);C([(0,S.query)(".ft-text-field--input")],x.prototype,"input",void 0);C([(0,S.query)(".ft-text-field-suggestion--new-value")],x.prototype,"newValueSuggestion",void 0);C([(0,S.query)(".ft-text-field--suggestions")],x.prototype,"suggestionsContainer",void 0);C([(0,S.queryAll)("ft-text-field-suggestion")],x.prototype,"providedSuggestionsInDom",void 0);C([(0,S.queryAssignedElements)({selector:"ft-text-field-suggestion"})],x.prototype,"slottedSuggestions",void 0);function Ed(o,r=20){return i=>o.map(n=>typeof n=="string"?{value:n,label:n}:n).filter(n=>n.label.toLowerCase().includes(i.toLowerCase())).sort((n,l)=>pr(n.label,l.label,i)).slice(0,r)}function pr(o,r,i){let n=o.toLowerCase(),l=r.toLowerCase(),c=i.toLowerCase();return n.startsWith(c)&&!l.includes(c)?-1:l.startsWith(c)&&!n.startsWith(c)?1:n.localeCompare(l)}(0,lt.customElement)("ft-text-field")(x);(0,lt.customElement)("ft-text-field-suggestion")(H);})();
|
|
787
787
|
/*! Bundled license information:
|
|
788
788
|
|
|
789
789
|
lit-html/lit-html.js:
|