@fluid-topics/ft-filterable-table 2.2.12 → 2.2.14

package/build/ft-filterable-table.light.js

@@ -796,6 +796,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 {
@@ -1246,7 +1250,7 @@
                      .variant=${this.iconVariant}
                      .value=${this.icon}
                      @click=${()=>{var e;return(e=this.input)===null||e===void 0?void 0:e.focus()}}></ft-icon>
-        `:te.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(){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=(0,ye.cancelable)(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,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(e,r=!1){var i,n;this.value!==e&&(this.inputValid=!0,this.setInternalValue(e),this.dispatchEvent(new en(e))),r&&this.dispatchedValue!==e&&(this.inputValid=(n=(i=this.input)===null||i===void 0?void 0:i.checkValidity())!==null&&n!==void 0?n:!0,this.inputValid?(this.dispatchedValue=e,this.dispatchEvent(new tn(e))):this.dispatchEvent(new rn(this.input.validationMessage)))}handleInput(e){var r;let i=((r=this.input)===null||r===void 0?void 0:r.value)||"";this.setValue(i,e.key=="Escape"||e.key=="Enter")}catchComposingEvents(e){}handleClick(){this.hideSuggestions=!1}handleKeyboardNavigation(e){var r,i;if(e.key==="ArrowDown"||e.key==="ArrowUp"){e.preventDefault(),e.stopPropagation(),this.hideSuggestions=!1;let n=this.visibleSuggestions.findIndex(o=>o.matches(":focus-within")),s;e.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())}(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"];(0,ye.computeOffsetAutoPosition)(this.mainPanel,this.suggestionsContainer,"bottom",e,"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":U,"ft-typography":ae,"ft-icon":ie,"ft-text-field-suggestion":ge};_.styles=[Jr,ye.noTextInputDefaultClearButton,No];M([(0,N.property)()],_.prototype,"label",void 0);M([(0,N.property)({noAccessor:!0})],_.prototype,"value",null);M([(0,N.state)()],_.prototype,"dispatchedValue",void 0);M([(0,N.property)()],_.prototype,"helper",void 0);M([(0,N.property)()],_.prototype,"suggestionsHelper",void 0);M([(0,N.property)({type:Boolean})],_.prototype,"outlined",void 0);M([(0,N.property)({type:Boolean})],_.prototype,"disabled",void 0);M([(0,N.property)({type:Boolean})],_.prototype,"error",void 0);M([(0,N.property)({type:Boolean})],_.prototype,"fixedMenuPosition",void 0);M([(0,N.property)()],_.prototype,"prefix",void 0);M([(0,N.property)()],_.prototype,"icon",void 0);M([(0,N.property)()],_.prototype,"name",void 0);M([(0,N.property)()],_.prototype,"type",void 0);M([(0,N.property)()],_.prototype,"passwordHiddenIcon",void 0);M([(0,N.property)()],_.prototype,"passwordRevealedIcon",void 0);M([(0,N.property)()],_.prototype,"iconVariant",void 0);M([(0,N.property)({type:Boolean})],_.prototype,"filterSuggestions",void 0);M([(0,ye.numberProperty)()],_.prototype,"maxLength",void 0);M([(0,N.property)({type:Boolean})],_.prototype,"password",void 0);M([(0,N.property)({type:String})],_.prototype,"autocomplete",void 0);M([(0,N.property)({attribute:!1})],_.prototype,"suggestionsProvider",void 0);M([(0,N.property)({type:Boolean})],_.prototype,"hideCurrentValueSuggestion",void 0);M([(0,N.state)()],_.prototype,"focused",void 0);M([(0,N.state)()],_.prototype,"inputValid",void 0);M([(0,N.state)()],_.prototype,"hidePassword",void 0);M([(0,N.state)()],_.prototype,"hideSuggestions",void 0);M([(0,N.state)()],_.prototype,"visibleSuggestions",void 0);M([(0,N.state)()],_.prototype,"providedSuggestions",void 0);M([(0,N.query)(".ft-text-field--main-panel")],_.prototype,"mainPanel",void 0);M([(0,N.query)(".ft-text-field--input")],_.prototype,"input",void 0);M([(0,N.query)(".ft-text-field-suggestion--new-value")],_.prototype,"newValueSuggestion",void 0);M([(0,N.query)(".ft-text-field--suggestions")],_.prototype,"suggestionsContainer",void 0);M([(0,N.queryAll)("ft-text-field-suggestion")],_.prototype,"providedSuggestionsInDom",void 0);M([(0,N.queryAssignedElements)({selector:"ft-text-field-suggestion"})],_.prototype,"slottedSuggestions",void 0);M([(0,ye.ignoreComposingEvents)()],_.prototype,"handleInput",null);M([(0,ye.ignoreComposingEvents)()],_.prototype,"catchComposingEvents",null);var Hc={"ft-text-field":_,"ft-text-field-suggestion":ge};(0,Vc.customElements)(Hc);var qc=f(Ze());var nn=class extends CustomEvent{constructor(e){super("row-click",{detail:e})}},sn=class extends CustomEvent{constructor(e){super("change",{detail:e})}};var zc=f(B()),re=f(S());var oe={headerBackground:re.FtCssVariableFactory.create("--ft-filterable-table-header-background","","COLOR","whitesmoke"),oddRowBackground:re.FtCssVariableFactory.create("--ft-filterable-table-odd-row-background","","COLOR","#FFFFFF"),evenRowBackground:re.FtCssVariableFactory.create("--ft-filterable-table-even-row-background","","COLOR","#fdfdfd"),rowHoverBackground:re.FtCssVariableFactory.create("--ft-filterable-table-row-hover-background","","COLOR","#fafafa"),stickyHeaderZIndex:re.FtCssVariableFactory.create("--ft-filterable-table-sticky-header-zindex","","NUMBER","10"),cellVerticalBorderWidth:re.FtCssVariableFactory.create("--ft-filterable-table-cell-vertical-border-width","","SIZE","1px"),columnTitleWhiteSpace:re.FtCssVariableFactory.create("--ft-filterable-table-column-title-white-space","","UNKNOWN","nowrap"),columnTitleMargin:re.FtCssVariableFactory.create("--ft-filterable-table-column-title-margin","","UNKNOWN","0 .5rem 0 0"),colorOnSurfaceHigh:re.FtCssVariableFactory.external(re.designSystemVariables.colorOnSurfaceHigh,"Design system"),titleFont:re.FtCssVariableFactory.external(re.designSystemVariables.titleFont,"Design system"),contentFont:re.FtCssVariableFactory.external(re.designSystemVariables.contentFont,"Design system")},jc=zc.css`
+        `:te.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(){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=(0,ye.cancelable)(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,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(e,r=!1){var i,n;this.value!==e&&(this.inputValid=!0,this.setInternalValue(e),this.dispatchEvent(new en(e))),r&&this.dispatchedValue!==e&&(this.inputValid=(n=(i=this.input)===null||i===void 0?void 0:i.checkValidity())!==null&&n!==void 0?n:!0,this.inputValid?(this.dispatchedValue=e,this.dispatchEvent(new tn(e))):this.dispatchEvent(new rn(this.input.validationMessage)))}handleInput(e){var r;let i=((r=this.input)===null||r===void 0?void 0:r.value)||"";this.setValue(i,e.key=="Escape"||e.key=="Enter")}catchComposingEvents(e){}handleClick(){this.hideSuggestions=!1}handleKeyboardNavigation(e){var r,i;if(e.key==="ArrowDown"||e.key==="ArrowUp"){e.preventDefault(),e.stopPropagation(),this.hideSuggestions=!1;let n=this.visibleSuggestions.findIndex(o=>o.matches(":focus-within")),s;e.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())}(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"];(0,ye.computeOffsetAutoPosition)(this.mainPanel,this.suggestionsContainer,"bottom",e,"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":U,"ft-typography":ae,"ft-icon":ie,"ft-text-field-suggestion":ge};_.styles=[Jr,ye.noTextInputDefaultClearButton,No];M([(0,N.property)()],_.prototype,"label",void 0);M([(0,N.property)({noAccessor:!0})],_.prototype,"value",null);M([(0,N.state)()],_.prototype,"dispatchedValue",void 0);M([(0,N.property)()],_.prototype,"helper",void 0);M([(0,N.property)()],_.prototype,"suggestionsHelper",void 0);M([(0,N.property)({type:Boolean})],_.prototype,"outlined",void 0);M([(0,N.property)({type:Boolean})],_.prototype,"disabled",void 0);M([(0,N.property)({type:Boolean})],_.prototype,"error",void 0);M([(0,N.property)({type:Boolean})],_.prototype,"fixedMenuPosition",void 0);M([(0,N.property)()],_.prototype,"prefix",void 0);M([(0,N.property)()],_.prototype,"icon",void 0);M([(0,N.property)()],_.prototype,"name",void 0);M([(0,N.property)()],_.prototype,"type",void 0);M([(0,N.property)()],_.prototype,"passwordHiddenIcon",void 0);M([(0,N.property)()],_.prototype,"passwordRevealedIcon",void 0);M([(0,N.property)()],_.prototype,"iconVariant",void 0);M([(0,N.property)({type:Boolean})],_.prototype,"filterSuggestions",void 0);M([(0,ye.numberProperty)()],_.prototype,"maxLength",void 0);M([(0,N.property)({type:Boolean})],_.prototype,"password",void 0);M([(0,N.property)({type:String})],_.prototype,"autocomplete",void 0);M([(0,N.property)({attribute:!1})],_.prototype,"suggestionsProvider",void 0);M([(0,N.property)({type:Boolean})],_.prototype,"hideCurrentValueSuggestion",void 0);M([(0,N.state)()],_.prototype,"focused",void 0);M([(0,N.state)()],_.prototype,"inputValid",void 0);M([(0,N.state)()],_.prototype,"hidePassword",void 0);M([(0,N.state)()],_.prototype,"hideSuggestions",void 0);M([(0,N.state)()],_.prototype,"visibleSuggestions",void 0);M([(0,N.state)()],_.prototype,"providedSuggestions",void 0);M([(0,N.query)(".ft-text-field--main-panel")],_.prototype,"mainPanel",void 0);M([(0,N.query)(".ft-text-field--input")],_.prototype,"input",void 0);M([(0,N.query)(".ft-text-field-suggestion--new-value")],_.prototype,"newValueSuggestion",void 0);M([(0,N.query)(".ft-text-field--suggestions")],_.prototype,"suggestionsContainer",void 0);M([(0,N.queryAll)("ft-text-field-suggestion")],_.prototype,"providedSuggestionsInDom",void 0);M([(0,N.queryAssignedElements)({selector:"ft-text-field-suggestion"})],_.prototype,"slottedSuggestions",void 0);M([(0,ye.ignoreComposingEvents)()],_.prototype,"handleInput",null);M([(0,ye.ignoreComposingEvents)()],_.prototype,"catchComposingEvents",null);var Hc={"ft-text-field":_,"ft-text-field-suggestion":ge};(0,Vc.customElements)(Hc);var qc=f(Ze());var nn=class extends CustomEvent{constructor(e){super("row-click",{detail:e})}},sn=class extends CustomEvent{constructor(e){super("change",{detail:e})}};var zc=f(B()),re=f(S());var oe={headerBackground:re.FtCssVariableFactory.create("--ft-filterable-table-header-background","","COLOR","whitesmoke"),oddRowBackground:re.FtCssVariableFactory.create("--ft-filterable-table-odd-row-background","","COLOR","#FFFFFF"),evenRowBackground:re.FtCssVariableFactory.create("--ft-filterable-table-even-row-background","","COLOR","#fdfdfd"),rowHoverBackground:re.FtCssVariableFactory.create("--ft-filterable-table-row-hover-background","","COLOR","#fafafa"),stickyHeaderZIndex:re.FtCssVariableFactory.create("--ft-filterable-table-sticky-header-zindex","","NUMBER","10"),cellVerticalBorderWidth:re.FtCssVariableFactory.create("--ft-filterable-table-cell-vertical-border-width","","SIZE","1px"),columnTitleWhiteSpace:re.FtCssVariableFactory.create("--ft-filterable-table-column-title-white-space","","UNKNOWN","nowrap"),columnTitleMargin:re.FtCssVariableFactory.create("--ft-filterable-table-column-title-margin","","UNKNOWN","0 .5rem 0 0"),colorOnSurfaceHigh:re.FtCssVariableFactory.external(re.designSystemVariables.colorOnSurfaceHigh,"Design system"),titleFont:re.FtCssVariableFactory.external(re.designSystemVariables.titleFont,"Design system"),contentFont:re.FtCssVariableFactory.external(re.designSystemVariables.contentFont,"Design system")},jc=zc.css`
     :host {
         display: block;
     }

package/build/ft-filterable-table.min.js

@@ -877,6 +877,10 @@ Also for action icons.`,l.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 {
@@ -1327,7 +1331,7 @@ Also for action icons.`,l.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>
-        `:D}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=zr(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 Ln(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 kn(e))):this.dispatchEvent(new Pn(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"];Qr(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)}};$.elementDefinitions={"ft-input-label":De,"ft-ripple":X,"ft-typography":ye,"ft-icon":ce,"ft-text-field-suggestion":Ce};$.styles=[yn,Zi,Gd];Z([g()],$.prototype,"label",void 0);Z([g({noAccessor:!0})],$.prototype,"value",null);Z([M()],$.prototype,"dispatchedValue",void 0);Z([g()],$.prototype,"helper",void 0);Z([g()],$.prototype,"suggestionsHelper",void 0);Z([g({type:Boolean})],$.prototype,"outlined",void 0);Z([g({type:Boolean})],$.prototype,"disabled",void 0);Z([g({type:Boolean})],$.prototype,"error",void 0);Z([g({type:Boolean})],$.prototype,"fixedMenuPosition",void 0);Z([g()],$.prototype,"prefix",void 0);Z([g()],$.prototype,"icon",void 0);Z([g()],$.prototype,"name",void 0);Z([g()],$.prototype,"type",void 0);Z([g()],$.prototype,"passwordHiddenIcon",void 0);Z([g()],$.prototype,"passwordRevealedIcon",void 0);Z([g()],$.prototype,"iconVariant",void 0);Z([g({type:Boolean})],$.prototype,"filterSuggestions",void 0);Z([lr()],$.prototype,"maxLength",void 0);Z([g({type:Boolean})],$.prototype,"password",void 0);Z([g({type:String})],$.prototype,"autocomplete",void 0);Z([g({attribute:!1})],$.prototype,"suggestionsProvider",void 0);Z([g({type:Boolean})],$.prototype,"hideCurrentValueSuggestion",void 0);Z([M()],$.prototype,"focused",void 0);Z([M()],$.prototype,"inputValid",void 0);Z([M()],$.prototype,"hidePassword",void 0);Z([M()],$.prototype,"hideSuggestions",void 0);Z([M()],$.prototype,"visibleSuggestions",void 0);Z([M()],$.prototype,"providedSuggestions",void 0);Z([Y(".ft-text-field--main-panel")],$.prototype,"mainPanel",void 0);Z([Y(".ft-text-field--input")],$.prototype,"input",void 0);Z([Y(".ft-text-field-suggestion--new-value")],$.prototype,"newValueSuggestion",void 0);Z([Y(".ft-text-field--suggestions")],$.prototype,"suggestionsContainer",void 0);Z([qn("ft-text-field-suggestion")],$.prototype,"providedSuggestionsInDom",void 0);Z([Yn({selector:"ft-text-field-suggestion"})],$.prototype,"slottedSuggestions",void 0);Z([Uo()],$.prototype,"handleInput",null);Z([Uo()],$.prototype,"catchComposingEvents",null);var gu={"ft-text-field":$,"ft-text-field-suggestion":Ce};J(gu);var In=class extends CustomEvent{constructor(e){super("row-click",{detail:e})}},Nn=class extends CustomEvent{constructor(e){super("change",{detail:e})}};var pe={headerBackground:o.create("--ft-filterable-table-header-background","","COLOR","whitesmoke"),oddRowBackground:o.create("--ft-filterable-table-odd-row-background","","COLOR","#FFFFFF"),evenRowBackground:o.create("--ft-filterable-table-even-row-background","","COLOR","#fdfdfd"),rowHoverBackground:o.create("--ft-filterable-table-row-hover-background","","COLOR","#fafafa"),stickyHeaderZIndex:o.create("--ft-filterable-table-sticky-header-zindex","","NUMBER","10"),cellVerticalBorderWidth:o.create("--ft-filterable-table-cell-vertical-border-width","","SIZE","1px"),columnTitleWhiteSpace:o.create("--ft-filterable-table-column-title-white-space","","UNKNOWN","nowrap"),columnTitleMargin:o.create("--ft-filterable-table-column-title-margin","","UNKNOWN","0 .5rem 0 0"),colorOnSurfaceHigh:o.external(A.colorOnSurfaceHigh,"Design system"),titleFont:o.external(A.titleFont,"Design system"),contentFont:o.external(A.contentFont,"Design system")},yu=P`
+        `:D}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=zr(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 Ln(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 kn(e))):this.dispatchEvent(new Pn(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"];Qr(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)}};$.elementDefinitions={"ft-input-label":De,"ft-ripple":X,"ft-typography":ye,"ft-icon":ce,"ft-text-field-suggestion":Ce};$.styles=[yn,Zi,Gd];Z([g()],$.prototype,"label",void 0);Z([g({noAccessor:!0})],$.prototype,"value",null);Z([M()],$.prototype,"dispatchedValue",void 0);Z([g()],$.prototype,"helper",void 0);Z([g()],$.prototype,"suggestionsHelper",void 0);Z([g({type:Boolean})],$.prototype,"outlined",void 0);Z([g({type:Boolean})],$.prototype,"disabled",void 0);Z([g({type:Boolean})],$.prototype,"error",void 0);Z([g({type:Boolean})],$.prototype,"fixedMenuPosition",void 0);Z([g()],$.prototype,"prefix",void 0);Z([g()],$.prototype,"icon",void 0);Z([g()],$.prototype,"name",void 0);Z([g()],$.prototype,"type",void 0);Z([g()],$.prototype,"passwordHiddenIcon",void 0);Z([g()],$.prototype,"passwordRevealedIcon",void 0);Z([g()],$.prototype,"iconVariant",void 0);Z([g({type:Boolean})],$.prototype,"filterSuggestions",void 0);Z([lr()],$.prototype,"maxLength",void 0);Z([g({type:Boolean})],$.prototype,"password",void 0);Z([g({type:String})],$.prototype,"autocomplete",void 0);Z([g({attribute:!1})],$.prototype,"suggestionsProvider",void 0);Z([g({type:Boolean})],$.prototype,"hideCurrentValueSuggestion",void 0);Z([M()],$.prototype,"focused",void 0);Z([M()],$.prototype,"inputValid",void 0);Z([M()],$.prototype,"hidePassword",void 0);Z([M()],$.prototype,"hideSuggestions",void 0);Z([M()],$.prototype,"visibleSuggestions",void 0);Z([M()],$.prototype,"providedSuggestions",void 0);Z([Y(".ft-text-field--main-panel")],$.prototype,"mainPanel",void 0);Z([Y(".ft-text-field--input")],$.prototype,"input",void 0);Z([Y(".ft-text-field-suggestion--new-value")],$.prototype,"newValueSuggestion",void 0);Z([Y(".ft-text-field--suggestions")],$.prototype,"suggestionsContainer",void 0);Z([qn("ft-text-field-suggestion")],$.prototype,"providedSuggestionsInDom",void 0);Z([Yn({selector:"ft-text-field-suggestion"})],$.prototype,"slottedSuggestions",void 0);Z([Uo()],$.prototype,"handleInput",null);Z([Uo()],$.prototype,"catchComposingEvents",null);var gu={"ft-text-field":$,"ft-text-field-suggestion":Ce};J(gu);var In=class extends CustomEvent{constructor(e){super("row-click",{detail:e})}},Nn=class extends CustomEvent{constructor(e){super("change",{detail:e})}};var pe={headerBackground:o.create("--ft-filterable-table-header-background","","COLOR","whitesmoke"),oddRowBackground:o.create("--ft-filterable-table-odd-row-background","","COLOR","#FFFFFF"),evenRowBackground:o.create("--ft-filterable-table-even-row-background","","COLOR","#fdfdfd"),rowHoverBackground:o.create("--ft-filterable-table-row-hover-background","","COLOR","#fafafa"),stickyHeaderZIndex:o.create("--ft-filterable-table-sticky-header-zindex","","NUMBER","10"),cellVerticalBorderWidth:o.create("--ft-filterable-table-cell-vertical-border-width","","SIZE","1px"),columnTitleWhiteSpace:o.create("--ft-filterable-table-column-title-white-space","","UNKNOWN","nowrap"),columnTitleMargin:o.create("--ft-filterable-table-column-title-margin","","UNKNOWN","0 .5rem 0 0"),colorOnSurfaceHigh:o.external(A.colorOnSurfaceHigh,"Design system"),titleFont:o.external(A.titleFont,"Design system"),contentFont:o.external(A.contentFont,"Design system")},yu=P`
     :host {
         display: block;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fluid-topics/ft-filterable-table",
-    "version": "2.2.12",
+    "version": "2.2.14",
     "description": "A dynamic table with filters",
     "keywords": [
         "Lit"
@@ -23,11 +23,11 @@
     },
     "dependencies": {
         "@fluid-topics/design-system-variables": "3.8.0",
-        "@fluid-topics/ft-button": "2.2.12",
-        "@fluid-topics/ft-select": "2.2.12",
-        "@fluid-topics/ft-text-field": "2.2.12",
-        "@fluid-topics/ft-wc-utils": "2.2.12",
+        "@fluid-topics/ft-button": "2.2.14",
+        "@fluid-topics/ft-select": "2.2.14",
+        "@fluid-topics/ft-text-field": "2.2.14",
+        "@fluid-topics/ft-wc-utils": "2.2.14",
         "lit": "3.3.3"
     },
-    "gitHead": "3f8686496b8ce4f3b095e6184e387a89c353c3b8"
+    "gitHead": "854d6984b9b23dbce23a195e12814084a8317fa5"
 }