@fluid-topics/ft-combobox 2.2.0 → 2.2.2

package/build/ft-combobox.js

@@ -49,7 +49,7 @@ export class FtCombobox extends withI18n(FtLitElement) {
         this.visibleSuggestions = [];
         this.activeIndex = -1;
         this.ariaLiveMessage = "";
-        this.onComboboxInput = () => {
+        this.onComboboxInput = async () => {
             const newValue = this.input.value;
             const hadValue = this._value !== "" || (this.multiValued && this.labels.length > 0);
             this.filter = newValue;
@@ -60,7 +60,7 @@ export class FtCombobox extends withI18n(FtLitElement) {
                 this.dispatchChangeEvent();
             }
             this.ariaLiveMessage = "";
-            this.updateSuggestions();
+            await this.updateSuggestions();
             const total = this.getTotalSuggestionsCount();
             if (total > 0) {
                 this.openListbox();

package/build/ft-combobox.light.js

@@ -1359,7 +1359,7 @@
                 <div class="ft-chip--icon-container ft-no-text-select" part="icon-container">
                     <ft-icon .variant=${this.iconVariant} .value=${this.internalIcon} part="icon"></ft-icon>
                 </div>
-            `}onKeyUp(e){this.interactionsOnChip&&["Enter"," "].includes(e.key)&&e.target.click()}onIconKeyUp(e){this.interactionsOnIcon&&["Enter"," "].includes(e.key)&&(e.stopPropagation(),this.dispatchEvent(new Qi))}onIconClick(e){this.interactionsOnIcon&&(e.stopPropagation(),this.dispatchEvent(new Qi))}getLabel(){return this.label||this.getTextContent()}getTextContent(){return(0,or.unslotText)(this.slottedContent).trim()}hasTextContent(){return this.getTextContent().length>0}onSlotchange(){this.requestUpdate()}get internalIcon(){return this.icon||(this.removable?"close":void 0)}};Y.elementDefinitions={"ft-ripple":H,"ft-typography":ie,"ft-icon":J,"ft-button":$};Y.styles=Ic;ge([(0,de.property)({type:Boolean})],Y.prototype,"highlighted",void 0);ge([(0,de.property)({type:Boolean})],Y.prototype,"removable",void 0);ge([(0,de.property)({type:Boolean})],Y.prototype,"disabled",void 0);ge([(0,de.property)({type:Boolean})],Y.prototype,"clickable",void 0);ge([(0,de.property)({type:Boolean})],Y.prototype,"iconClickable",void 0);ge([(0,de.property)({type:Boolean})],Y.prototype,"dense",void 0);ge([(0,de.property)({type:Boolean})],Y.prototype,"multiLine",void 0);ge([(0,de.property)()],Y.prototype,"label",void 0);ge([(0,de.property)()],Y.prototype,"iconLabel",void 0);ge([(0,de.property)({type:Boolean})],Y.prototype,"hideIconTooltip",void 0);ge([(0,de.property)()],Y.prototype,"icon",void 0);ge([(0,de.property)()],Y.prototype,"iconVariant",void 0);ge([(0,de.property)({type:Boolean})],Y.prototype,"trailingIcon",void 0);ge([(0,de.property)()],Y.prototype,"typographyVariant",void 0);ge([(0,de.query)("ft-typography slot")],Y.prototype,"slottedContent",void 0);var Uc=f(S());var $c={"ft-chip":Y};(0,Uc.customElements)($c);var kt=Gi.build("ftCombobox"),Vc={ariaLiveOptions:"{0} options","ariaLiveOptions[\\=1]":"1 option",valueAdded:"{0} added",valueRemoved:"{0} removed",maxValuesReached:"Maximum {0} values allowed","maxValuesReached[\\=1]":"Maximum 1 value allowed",removeValueLabel:"Remove {0}"};var U=function(t,e,r,i){var n=arguments.length,o=n<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,r):i,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")o=Reflect.decorate(t,e,r,i);else for(var a=t.length-1;a>=0;a--)(s=t[a])&&(o=(n<3?s(o):n>3?s(e,r,o):s(e,r))||o);return n>3&&o&&Object.defineProperty(e,r,o),o},D=class extends Ki(Re.FtLitElement){get value(){return this._value||""}set value(e){let r=this._value;this._value=e||"",this.filter=this._value,this.requestUpdate("value",r)}constructor(){super(),this.error=!1,this.filterSuggestions=!1,this.disabled=!1,this.outlined=!1,this.suggestionsProvider=()=>[],this._value="",this.canOfferNewValue=!0,this.multiValued=!1,this.labels=[],this.labelsToValues=new Map,this.filter="",this.isOpen=!1,this.comboboxHasVisualFocus=!1,this.listboxHasVisualFocus=!1,this.providedSuggestions=[],this.visibleSuggestions=[],this.activeIndex=-1,this.ariaLiveMessage="",this.onComboboxInput=()=>{let e=this.input.value,r=this._value!==""||this.multiValued&&this.labels.length>0;this.filter=e,this.activeIndex=-1,!this.multiValued&&r&&e===""&&(this._value="",this.dispatchChangeEvent()),this.ariaLiveMessage="",this.updateSuggestions(),this.getTotalSuggestionsCount()>0?this.openListbox():this.closeListbox(!0)},this.onComboboxClick=()=>{this.isOpen?this.closeListbox(!0):this.openListbox()},this.onComboboxFocus=()=>{this.filter=this.input.value,this.updateSuggestions(),this.setVisualFocusCombobox(),this.activeIndex=-1},this.onComboboxBlur=()=>{this.removeVisualFocusAll()},this.backgroundListenerInstalled=!1,this.onBackgroundPointerUp=e=>{e.composedPath().includes(this)||(this.removeVisualFocusAll(),setTimeout(()=>this.closeListbox(!0),300))},this.onSuggestionClick=e=>{var r;e.kind==="new"?this.setValue(((r=this.input)===null||r===void 0?void 0:r.value)||this.value):this.setValue(e.label),this.multiValued||this.closeListbox(!0)},this.addI18nContext(kt,Vc)}willUpdate(e){e.has("suggestionsProviderDebouncerTimeout")&&(this._suggestionsProviderDebouncer=this.suggestionsProviderDebouncerTimeout&&this.suggestionsProviderDebouncerTimeout>0?new Re.Debouncer(this.suggestionsProviderDebouncerTimeout):void 0),(e.has("suggestionsProvider")||e.has("filter"))&&this.updateSuggestions()}render(){let e={"ft-combobox":!0,"ft-combobox--filled":!this.outlined,"ft-combobox--outlined":this.outlined,"ft-combobox--disabled":this.disabled,"ft-combobox--with-label":!!this.label,"ft-combobox--with-icon":!!this.icon,"ft-combobox--in-error":this.error,"ft-combobox--raised-label":this.comboboxHasVisualFocus||!!this.filter},r={"ft-combobox--listbox":!0,focus:this.listboxHasVisualFocus};return ye.html`
+            `}onKeyUp(e){this.interactionsOnChip&&["Enter"," "].includes(e.key)&&e.target.click()}onIconKeyUp(e){this.interactionsOnIcon&&["Enter"," "].includes(e.key)&&(e.stopPropagation(),this.dispatchEvent(new Qi))}onIconClick(e){this.interactionsOnIcon&&(e.stopPropagation(),this.dispatchEvent(new Qi))}getLabel(){return this.label||this.getTextContent()}getTextContent(){return(0,or.unslotText)(this.slottedContent).trim()}hasTextContent(){return this.getTextContent().length>0}onSlotchange(){this.requestUpdate()}get internalIcon(){return this.icon||(this.removable?"close":void 0)}};Y.elementDefinitions={"ft-ripple":H,"ft-typography":ie,"ft-icon":J,"ft-button":$};Y.styles=Ic;ge([(0,de.property)({type:Boolean})],Y.prototype,"highlighted",void 0);ge([(0,de.property)({type:Boolean})],Y.prototype,"removable",void 0);ge([(0,de.property)({type:Boolean})],Y.prototype,"disabled",void 0);ge([(0,de.property)({type:Boolean})],Y.prototype,"clickable",void 0);ge([(0,de.property)({type:Boolean})],Y.prototype,"iconClickable",void 0);ge([(0,de.property)({type:Boolean})],Y.prototype,"dense",void 0);ge([(0,de.property)({type:Boolean})],Y.prototype,"multiLine",void 0);ge([(0,de.property)()],Y.prototype,"label",void 0);ge([(0,de.property)()],Y.prototype,"iconLabel",void 0);ge([(0,de.property)({type:Boolean})],Y.prototype,"hideIconTooltip",void 0);ge([(0,de.property)()],Y.prototype,"icon",void 0);ge([(0,de.property)()],Y.prototype,"iconVariant",void 0);ge([(0,de.property)({type:Boolean})],Y.prototype,"trailingIcon",void 0);ge([(0,de.property)()],Y.prototype,"typographyVariant",void 0);ge([(0,de.query)("ft-typography slot")],Y.prototype,"slottedContent",void 0);var Uc=f(S());var $c={"ft-chip":Y};(0,Uc.customElements)($c);var kt=Gi.build("ftCombobox"),Vc={ariaLiveOptions:"{0} options","ariaLiveOptions[\\=1]":"1 option",valueAdded:"{0} added",valueRemoved:"{0} removed",maxValuesReached:"Maximum {0} values allowed","maxValuesReached[\\=1]":"Maximum 1 value allowed",removeValueLabel:"Remove {0}"};var U=function(t,e,r,i){var n=arguments.length,o=n<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,r):i,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")o=Reflect.decorate(t,e,r,i);else for(var a=t.length-1;a>=0;a--)(s=t[a])&&(o=(n<3?s(o):n>3?s(e,r,o):s(e,r))||o);return n>3&&o&&Object.defineProperty(e,r,o),o},D=class extends Ki(Re.FtLitElement){get value(){return this._value||""}set value(e){let r=this._value;this._value=e||"",this.filter=this._value,this.requestUpdate("value",r)}constructor(){super(),this.error=!1,this.filterSuggestions=!1,this.disabled=!1,this.outlined=!1,this.suggestionsProvider=()=>[],this._value="",this.canOfferNewValue=!0,this.multiValued=!1,this.labels=[],this.labelsToValues=new Map,this.filter="",this.isOpen=!1,this.comboboxHasVisualFocus=!1,this.listboxHasVisualFocus=!1,this.providedSuggestions=[],this.visibleSuggestions=[],this.activeIndex=-1,this.ariaLiveMessage="",this.onComboboxInput=async()=>{let e=this.input.value,r=this._value!==""||this.multiValued&&this.labels.length>0;this.filter=e,this.activeIndex=-1,!this.multiValued&&r&&e===""&&(this._value="",this.dispatchChangeEvent()),this.ariaLiveMessage="",await this.updateSuggestions(),this.getTotalSuggestionsCount()>0?this.openListbox():this.closeListbox(!0)},this.onComboboxClick=()=>{this.isOpen?this.closeListbox(!0):this.openListbox()},this.onComboboxFocus=()=>{this.filter=this.input.value,this.updateSuggestions(),this.setVisualFocusCombobox(),this.activeIndex=-1},this.onComboboxBlur=()=>{this.removeVisualFocusAll()},this.backgroundListenerInstalled=!1,this.onBackgroundPointerUp=e=>{e.composedPath().includes(this)||(this.removeVisualFocusAll(),setTimeout(()=>this.closeListbox(!0),300))},this.onSuggestionClick=e=>{var r;e.kind==="new"?this.setValue(((r=this.input)===null||r===void 0?void 0:r.value)||this.value):this.setValue(e.label),this.multiValued||this.closeListbox(!0)},this.addI18nContext(kt,Vc)}willUpdate(e){e.has("suggestionsProviderDebouncerTimeout")&&(this._suggestionsProviderDebouncer=this.suggestionsProviderDebouncerTimeout&&this.suggestionsProviderDebouncerTimeout>0?new Re.Debouncer(this.suggestionsProviderDebouncerTimeout):void 0),(e.has("suggestionsProvider")||e.has("filter"))&&this.updateSuggestions()}render(){let e={"ft-combobox":!0,"ft-combobox--filled":!this.outlined,"ft-combobox--outlined":this.outlined,"ft-combobox--disabled":this.disabled,"ft-combobox--with-label":!!this.label,"ft-combobox--with-icon":!!this.icon,"ft-combobox--in-error":this.error,"ft-combobox--raised-label":this.comboboxHasVisualFocus||!!this.filter},r={"ft-combobox--listbox":!0,focus:this.listboxHasVisualFocus};return ye.html`
             <div class="${(0,en.classMap)(e)}">
                 <div class="ft-combobox--main-panel"
                      @focusout=${this.onComboboxBlur}>