@fluid-topics/ft-search-input 1.0.41 → 1.0.43

package/build/SearchInputMessages.d.ts

@@ -2,5 +2,6 @@ import { I18nMessageContext, I18nMessages } from "@fluid-topics/ft-i18n";
 export interface SearchInputMessages extends I18nMessages {
     placeholder(): string;
     searchButton(): string;
+    clearButton(): string;
 }
 export declare const searchInputContext: I18nMessageContext<SearchInputMessages>;

package/build/ft-search-input.css.js

@@ -81,7 +81,8 @@ export const styles = css `
         ${setVariable(FtButtonCssVariables.backgroundColor, "transparent")};
     }
 
-    .ft-search-input .ft-search-input--launch-search {
+    .ft-search-input .ft-search-input--launch-search,
+    .ft-search-input .ft-search-input--clear-query {
         margin: 0 4px;
     }
 
@@ -92,4 +93,9 @@ export const styles = css `
     .ft-search-input.ft-search-input--with-suggestions:focus-within:not(.ft-search-input--with-suggestions-closed) ft-search-input-suggestion {
         display: block;
     }
+
+    .ft-search-input--separator {
+        height: 20px;
+        border-right: 1px solid ${FtSearchInputCssVariables.colorOutline};
+    }
 `;

package/build/ft-search-input.js

@@ -46,6 +46,17 @@ class FtSearchInput extends withI18n(FtSearchComponent) {
                     ></ft-search-input-suggestion>
                 </div>
                 <div class="ft-search-input--actions" part="actions">
+                    ${this.liveQuery ? html `
+                        <ft-button id="clear-button"
+                                   class="ft-search-input--clear-query"
+                                   part="clear-query"
+                                   icon="close"
+                                   round dense
+                                   label="${searchInputContext.messages.clearButton()}"
+                                   @click=${() => this.liveQuery = ""}
+                        ></ft-button>
+                        <div class="ft-search-input--separator"></div>
+                    ` : null}
                     <ft-button class="ft-search-input--launch-search"
                                part="launch-search-in-input"
                                icon="search"

package/build/ft-search-input.light.js

@@ -616,7 +616,8 @@ const it=Symbol.for(""),et=t=>{if((null==t?void 0:t.r)===it)return null==t?void
         ${i.setVariable(Li.backgroundColor,"transparent")};
     }
 
-    .ft-search-input .ft-search-input--launch-search {
+    .ft-search-input .ft-search-input--launch-search,
+    .ft-search-input .ft-search-input--clear-query {
         margin: 0 4px;
     }
 
@@ -627,6 +628,11 @@ const it=Symbol.for(""),et=t=>{if((null==t?void 0:t.r)===it)return null==t?void
     .ft-search-input.ft-search-input--with-suggestions:focus-within:not(.ft-search-input--with-suggestions-closed) ft-search-input-suggestion {
         display: block;
     }
+
+    .ft-search-input--separator {
+        height: 20px;
+        border-right: 1px solid ${Xi.colorOutline};
+    }
 `,Ji=e.css`
 `,te=i.FtReduxStore.get({name:"ft-app-info",reducers:{setBaseUrl:(t,i)=>{t.baseUrl=i.payload},setApiIntegrationIdentifier:(t,i)=>{t.apiIntegrationIdentifier=i.payload},setUiLocale:(t,i)=>{t.uiLocale=i.payload},setAvailableUiLocales:(t,i)=>{t.availableUiLocales=i.payload},setEditorMode:(t,i)=>{t.editorMode=i.payload},setNoCustom:(t,i)=>{t.noCustom=i.payload},setNoCustomComponent:(t,i)=>{t.noCustomComponent=i.payload},setSession:(t,i)=>{t.session=i.payload}},initialState:{uiLocale:document.documentElement.lang||"en-US",availableUiLocales:[],editorMode:!1,noCustom:!1,noCustomComponent:!1}});class ie{static build(t){const{baseUrl:i,apiIntegrationIdentifier:e}=te.getState(),o=null!=t?t:e;if(i&&o&&window.fluidtopics)return new window.fluidtopics.FluidTopicsApi(i,o,!0)}static get(t){var i;return null!=t?ie.build(t):null!==(i=ie.API)&&void 0!==i?i:ie.API=ie.build()}static await(t){return new Promise((i=>{let e=ie.get(t);if(e)i(e);else{const o=te.subscribe((()=>{e=ie.get(t),e&&(o(),i(e))}))}}))}}var ee;const oe=Symbol("clearAfterUnitTest");class se{constructor(t){this.messageContextProvider=t,this.defaultMessages={},this.cache=new i.CacheRegistry,this.listeners={},this.currentUiLocale="",this[ee]=()=>{this.defaultMessages={},this.cache=new i.CacheRegistry,this.listeners={}},this.currentUiLocale=te.getState().uiLocale,te.subscribe((()=>this.clearWhenUiLocaleChanges()))}clearWhenUiLocaleChanges(){const{uiLocale:t}=te.getState();this.currentUiLocale!==t&&(this.currentUiLocale=t,this.cache.clearAll(),this.notifyAll())}addContext(t){const i=t.name.toLowerCase();this.cache.setFinal(i,t),this.notify(i)}getAllContexts(){return this.cache.resolvedValues()}async prepareContext(t,e){var o;if(t=t.toLowerCase(),Object.keys(e).length>0){const s={...null!==(o=this.defaultMessages[t])&&void 0!==o?o:{},...e};i.deepEqual(this.defaultMessages[t],s)||(this.defaultMessages[t]=s,await this.notify(t))}await this.fetchContext(t)}resolveMessage(t,e,...o){var s,n,r;t=t.toLowerCase(),this.fetchContext(t);const a=null!==(n=null===(s=this.cache.getNow(t))||void 0===s?void 0:s.messages)&&void 0!==n?n:{};return new i.ParametrizedLabelResolver(null!==(r=this.defaultMessages[t])&&void 0!==r?r:{},a).resolve(e,...o)}async fetchContext(t){if(!this.cache.has(t))try{await this.cache.get(t,(()=>this.messageContextProvider(this.currentUiLocale,t))),await this.notify(t)}catch(t){console.error(t)}}subscribe(t,i){var e;return t=t.toLowerCase(),this.listeners[t]=null!==(e=this.listeners[t])&&void 0!==e?e:new Set,this.listeners[t].add(i),()=>{var e;return null===(e=this.listeners[t])||void 0===e?void 0:e.delete(i)}}async notifyAll(){await Promise.all(Object.keys(this.listeners).map((t=>this.notify(t))))}async notify(t){null!=this.listeners[t]&&await Promise.all([...this.listeners[t].values()].map((t=>i.delay(0).then((()=>t())).catch((()=>null)))))}}ee=oe,null==window.FluidTopicsI18nService&&(window.FluidTopicsI18nService=new se((async(t,i)=>(await ie.await()).getFluidTopicsMessageContext(t,i)))),null==window.FluidTopicsCustomI18nService&&(window.FluidTopicsCustomI18nService=new se((async(t,i)=>(await ie.await()).getCustomMessageContext(t,i))));const ne=window.FluidTopicsI18nService,re=window.FluidTopicsCustomI18nService;var ae=function(t,i,e,o){for(var s,n=arguments.length,r=n<3?i:null===o?o=Object.getOwnPropertyDescriptor(i,e):o,a=t.length-1;a>=0;a--)(s=t[a])&&(r=(n<3?s(r):n>3?s(i,e,r):s(i,e))||r);return n>3&&r&&Object.defineProperty(i,e,r),r};class le extends i.FtLitElement{constructor(){super(...arguments),this.apiIntegrationIdentifier="ft-integration",this.uiLocale="en-US",this.availableUiLocales=[],this.editorMode=!1,this.noCustom=!1,this.noCustomComponent=!1,this.withManualResources=!1,this.messageContexts=[],this.apiProvider=()=>ie.get(),this.cache=new i.CacheRegistry,this.cleanSessionDebouncer=new i.Debouncer}render(){return e.html`
             <slot></slot>
@@ -712,6 +718,17 @@ const it=Symbol.for(""),et=t=>{if((null==t?void 0:t.r)===it)return null==t?void
                     ></ft-search-input-suggestion>
                 </div>
                 <div class="ft-search-input--actions" part="actions">
+                    ${this.liveQuery?e.html`
+                        <ft-button id="clear-button"
+                                   class="ft-search-input--clear-query"
+                                   part="clear-query"
+                                   icon="close"
+                                   round dense
+                                   label="${ke.messages.clearButton()}"
+                                   @click=${()=>this.liveQuery=""}
+                        ></ft-button>
+                        <div class="ft-search-input--separator"></div>
+                    `:null}
                     <ft-button class="ft-search-input--launch-search"
                                part="launch-search-in-input"
                                icon="search"