@fluid-topics/ft-filterable-table 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.
|
@@ -939,11 +939,11 @@ Also for action icons.`,r.colorGray200),contentGlobalSubtle:t.extend("--ft-conte
|
|
|
939
939
|
${this.prefix}
|
|
940
940
|
</ft-typography>
|
|
941
941
|
`:ot.nothing}
|
|
942
|
-
<input type
|
|
943
|
-
name
|
|
944
|
-
maxlength
|
|
942
|
+
<input type="${this.resolveInputType()}"
|
|
943
|
+
name="${Bt(this.name)}"
|
|
944
|
+
maxlength="${Bt(this.maxLength||void 0)}"
|
|
945
945
|
aria-label="${this.label}"
|
|
946
|
-
autocomplete
|
|
946
|
+
autocomplete="${Bt(this.autocomplete)}"
|
|
947
947
|
class="ft-typography--body1 ft-text-field--input"
|
|
948
948
|
part="input"
|
|
949
949
|
?disabled=${this.disabled}
|
|
@@ -971,7 +971,7 @@ Also for action icons.`,r.colorGray200),contentGlobalSubtle:t.extend("--ft-conte
|
|
|
971
971
|
</div>
|
|
972
972
|
`}resolveInputType(){var e;return this.isPasswordField()?this.hidePassword?"password":"text":(e=this.type)!==null&&e!==void 0?e:"text"}renderSuggestions(){return this.suggestionsProvider?ot.html`
|
|
973
973
|
${(0,Ga.repeat)(this.providedSuggestions,e=>ot.html`
|
|
974
|
-
<ft-text-field-suggestion value
|
|
974
|
+
<ft-text-field-suggestion value="${e.value}" @click=${a=>this.onSuggestionClick(a,e.clickHandler)}>
|
|
975
975
|
${e.icon?ot.html`
|
|
976
976
|
<ft-icon .value=${e.icon}></ft-icon>
|
|
977
977
|
`:ot.nothing}
|
|
@@ -989,7 +989,7 @@ Also for action icons.`,r.colorGray200),contentGlobalSubtle:t.extend("--ft-conte
|
|
|
989
989
|
.variant=${this.iconVariant}
|
|
990
990
|
.value=${this.icon}
|
|
991
991
|
@click=${()=>{var e;return(e=this.input)===null||e===void 0?void 0:e.focus()}}></ft-icon>
|
|
992
|
-
`:ot.nothing}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(){this.suggestionsProvider?this.providedSuggestions=await this.suggestionsProvider(this.value):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("value")&&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 a,i,n;!((a=this.input)===null||a===void 0)&&a.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(e,a=!1){this.value!==e&&(this.setInternalValue(e),this.dispatchEvent(new CustomEvent("live-change",{detail:e}))),a&&this.dispatchedValue!==e&&(this.dispatchedValue=e,this.dispatchEvent(new CustomEvent("change",{detail:e})))}handleInput(e){var a;let i=((a=this.input)===null||a===void 0?void 0:a.value)||"";this.setValue(i,e.key=="Escape"||e.key=="Enter")}handleClick(){this.hideSuggestions=!1}handleKeyboardNavigation(e){var a;if(e.key==="ArrowDown"||e.key==="ArrowUp"){e.preventDefault(),e.stopPropagation(),this.hideSuggestions=!1;let i=this.visibleSuggestions.findIndex(c=>c.matches(":focus-within")),n;e.key==="ArrowDown"?n=i<this.visibleSuggestions.length-1?i+1:0:n=i>0?i-1:this.visibleSuggestions.length-1,(a=this.visibleSuggestions[n])===null||a===void 0||a.focus()}(e.key=="Escape"||e.key=="Enter")&&(this.hideSuggestions=!0)}onSuggestionSelected(e){var a;this.setValue(e.detail,!0),(a=this.input)===null||a===void 0||a.focus(),setTimeout(()=>this.hideSuggestions=!0,0)}onFocus(){this.focused=!0,this.hideSuggestions=!1}onMainPanelBlur(){var e,a;!((e=this.mainPanel)===null||e===void 0)&&e.matches(":focus-within")||(this.focused=!1,this.setValue(((a=this.input)===null||a===void 0?void 0:a.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"];(0,Xt.computeOffsetAutoPosition)(this.mainPanel,this.suggestionsContainer,"bottom",e,"fixed","--
|
|
992
|
+
`:ot.nothing}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(){this.suggestionsProvider?this.providedSuggestions=await this.suggestionsProvider(this.value):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("value")&&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 a,i,n;!((a=this.input)===null||a===void 0)&&a.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(e,a=!1){this.value!==e&&(this.setInternalValue(e),this.dispatchEvent(new CustomEvent("live-change",{detail:e}))),a&&this.dispatchedValue!==e&&(this.dispatchedValue=e,this.dispatchEvent(new CustomEvent("change",{detail:e})))}handleInput(e){var a;let i=((a=this.input)===null||a===void 0?void 0:a.value)||"";this.setValue(i,e.key=="Escape"||e.key=="Enter")}handleClick(){this.hideSuggestions=!1}handleKeyboardNavigation(e){var a;if(e.key==="ArrowDown"||e.key==="ArrowUp"){e.preventDefault(),e.stopPropagation(),this.hideSuggestions=!1;let i=this.visibleSuggestions.findIndex(c=>c.matches(":focus-within")),n;e.key==="ArrowDown"?n=i<this.visibleSuggestions.length-1?i+1:0:n=i>0?i-1:this.visibleSuggestions.length-1,(a=this.visibleSuggestions[n])===null||a===void 0||a.focus()}(e.key=="Escape"||e.key=="Enter")&&(this.hideSuggestions=!0)}onSuggestionSelected(e){var a;this.setValue(e.detail,!0),(a=this.input)===null||a===void 0||a.focus(),setTimeout(()=>this.hideSuggestions=!0,0)}onFocus(){this.focused=!0,this.hideSuggestions=!1}onMainPanelBlur(){var e,a;!((e=this.mainPanel)===null||e===void 0)&&e.matches(":focus-within")||(this.focused=!1,this.setValue(((a=this.input)===null||a===void 0?void 0:a.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"];(0,Xt.computeOffsetAutoPosition)(this.mainPanel,this.suggestionsContainer,"bottom",e,"fixed","--text-field-internal-suggest-size",0).then(({x:a,y:i})=>{this.suggestionsContainer.style.left=`${a}px`,this.suggestionsContainer.style.top=`${i}px`})}suggestionsShouldBeDisplayed(){return!this.hideSuggestions&&(this.visibleSuggestions.length||this.providedSuggestions.length)}};L.elementDefinitions={"ft-input-label":mt,"ft-ripple":z,"ft-typography":lt,"ft-icon":et,"ft-text-field-suggestion":vt};L.styles=[oo,Xt.noTextInputDefaultClearButton,Wa];I([(0,P.property)()],L.prototype,"label",void 0);I([(0,P.property)({noAccessor:!0})],L.prototype,"value",null);I([(0,P.state)()],L.prototype,"dispatchedValue",void 0);I([(0,P.property)()],L.prototype,"helper",void 0);I([(0,P.property)()],L.prototype,"suggestionsHelper",void 0);I([(0,P.property)({type:Boolean})],L.prototype,"outlined",void 0);I([(0,P.property)({type:Boolean})],L.prototype,"disabled",void 0);I([(0,P.property)({type:Boolean})],L.prototype,"error",void 0);I([(0,P.property)({type:Boolean})],L.prototype,"fixedMenuPosition",void 0);I([(0,P.property)()],L.prototype,"prefix",void 0);I([(0,P.property)()],L.prototype,"icon",void 0);I([(0,P.property)()],L.prototype,"name",void 0);I([(0,P.property)()],L.prototype,"type",void 0);I([(0,P.property)()],L.prototype,"passwordHiddenIcon",void 0);I([(0,P.property)()],L.prototype,"passwordRevealedIcon",void 0);I([(0,P.property)()],L.prototype,"iconVariant",void 0);I([(0,P.property)({type:Boolean})],L.prototype,"filterSuggestions",void 0);I([(0,P.property)({type:Number})],L.prototype,"maxLength",void 0);I([(0,P.property)({type:Boolean})],L.prototype,"password",void 0);I([(0,P.property)({type:String})],L.prototype,"autocomplete",void 0);I([(0,P.property)({attribute:!1})],L.prototype,"suggestionsProvider",void 0);I([(0,P.state)()],L.prototype,"focused",void 0);I([(0,P.state)()],L.prototype,"hidePassword",void 0);I([(0,P.state)()],L.prototype,"hideSuggestions",void 0);I([(0,P.state)()],L.prototype,"visibleSuggestions",void 0);I([(0,P.state)()],L.prototype,"providedSuggestions",void 0);I([(0,P.query)(".ft-text-field--main-panel")],L.prototype,"mainPanel",void 0);I([(0,P.query)(".ft-text-field--input")],L.prototype,"input",void 0);I([(0,P.query)(".ft-text-field-suggestion--new-value")],L.prototype,"newValueSuggestion",void 0);I([(0,P.query)(".ft-text-field--suggestions")],L.prototype,"suggestionsContainer",void 0);I([(0,P.queryAll)("ft-text-field-suggestion")],L.prototype,"providedSuggestionsInDom",void 0);I([(0,P.queryAssignedElements)({selector:"ft-text-field-suggestion"})],L.prototype,"slottedSuggestions",void 0);(0,Do.customElement)("ft-text-field")(L);(0,Do.customElement)("ft-text-field-suggestion")(vt);var Jo=g(A());var Ve=g(ut()),Ni=g(A());var Ka=g(_()),N=g(A());var Fa=g(_()),Ge=g(A()),U={color:Ge.FtCssVariableFactory.extend("--ft-loader-color","",Ge.designSystemVariables.colorPrimary),size:Ge.FtCssVariableFactory.create("--ft-loader-size","","SIZE","80px")},Ma=Fa.css`
|
|
993
993
|
:host {
|
|
994
994
|
line-height: 0;
|
|
995
995
|
}
|