@fluid-topics/ft-search-input 1.0.40 → 1.0.42

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"

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

@@ -738,7 +738,8 @@ class No extends Ti{constructor(t){if(super(t),this.et=it,t.type!==Ii)throw Erro
         ${Ot(_o.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;
     }
 
@@ -749,6 +750,11 @@ class No extends Ti{constructor(t){if(super(t),this.et=it,t.type!==Ii)throw Erro
     .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 ${Go.colorOutline};
+    }
 `,Yo=w`
 `,tr=Ri.get({name:"ft-app-info",reducers:{setBaseUrl:(t,e)=>{t.baseUrl=e.payload},setApiIntegrationIdentifier:(t,e)=>{t.apiIntegrationIdentifier=e.payload},setUiLocale:(t,e)=>{t.uiLocale=e.payload},setAvailableUiLocales:(t,e)=>{t.availableUiLocales=e.payload},setEditorMode:(t,e)=>{t.editorMode=e.payload},setNoCustom:(t,e)=>{t.noCustom=e.payload},setNoCustomComponent:(t,e)=>{t.noCustomComponent=e.payload},setSession:(t,e)=>{t.session=e.payload}},initialState:{uiLocale:document.documentElement.lang||"en-US",availableUiLocales:[],editorMode:!1,noCustom:!1,noCustomComponent:!1}});class er{static build(t){const{baseUrl:e,apiIntegrationIdentifier:i}=tr.getState(),n=null!=t?t:i;if(e&&n&&window.fluidtopics)return new window.fluidtopics.FluidTopicsApi(e,n,!0)}static get(t){var e;return null!=t?er.build(t):null!==(e=er.API)&&void 0!==e?e:er.API=er.build()}static await(t){return new Promise((e=>{let i=er.get(t);if(i)e(i);else{const n=tr.subscribe((()=>{i=er.get(t),i&&(n(),e(i))}))}}))}}var ir;const nr=Symbol("clearAfterUnitTest");class or{constructor(t){this.messageContextProvider=t,this.defaultMessages={},this.cache=new n,this.listeners={},this.currentUiLocale="",this[ir]=()=>{this.defaultMessages={},this.cache=new n,this.listeners={}},this.currentUiLocale=tr.getState().uiLocale,tr.subscribe((()=>this.clearWhenUiLocaleChanges()))}clearWhenUiLocaleChanges(){const{uiLocale:t}=tr.getState();this.currentUiLocale!==t&&(this.currentUiLocale=t,this.cache.clearAll(),this.notifyAll())}addContext(t){const e=t.name.toLowerCase();this.cache.setFinal(e,t),this.notify(e)}getAllContexts(){return this.cache.resolvedValues()}async prepareContext(t,e){var i;if(t=t.toLowerCase(),Object.keys(e).length>0){const n={...null!==(i=this.defaultMessages[t])&&void 0!==i?i:{},...e};h(this.defaultMessages[t],n)||(this.defaultMessages[t]=n,await this.notify(t))}await this.fetchContext(t)}resolveMessage(t,e,...i){var n,o,r;t=t.toLowerCase(),this.fetchContext(t);const s=null!==(o=null===(n=this.cache.getNow(t))||void 0===n?void 0:n.messages)&&void 0!==o?o:{};return new Ft(null!==(r=this.defaultMessages[t])&&void 0!==r?r:{},s).resolve(e,...i)}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,e){var i;return t=t.toLowerCase(),this.listeners[t]=null!==(i=this.listeners[t])&&void 0!==i?i:new Set,this.listeners[t].add(e),()=>{var i;return null===(i=this.listeners[t])||void 0===i?void 0:i.delete(e)}}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=>{return(e=0,new Promise((t=>setTimeout(t,e)))).then((()=>t())).catch((()=>null));var e})))}}ir=nr,null==window.FluidTopicsI18nService&&(window.FluidTopicsI18nService=new or((async(t,e)=>(await er.await()).getFluidTopicsMessageContext(t,e)))),null==window.FluidTopicsCustomI18nService&&(window.FluidTopicsCustomI18nService=new or((async(t,e)=>(await er.await()).getCustomMessageContext(t,e))));const rr=window.FluidTopicsI18nService,sr=window.FluidTopicsCustomI18nService;var ar=function(t,e,i,n){for(var o,r=arguments.length,s=r<3?e:null===n?n=Object.getOwnPropertyDescriptor(e,i):n,a=t.length-1;a>=0;a--)(o=t[a])&&(s=(r<3?o(s):r>3?o(e,i,s):o(e,i))||s);return r>3&&s&&Object.defineProperty(e,i,s),s};class lr extends Mt{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=()=>er.get(),this.cache=new n,this.cleanSessionDebouncer=new o}render(){return tt`
             <slot></slot>
@@ -839,6 +845,17 @@ class No extends Ti{constructor(t){if(super(t),this.et=it,t.type!==Ii)throw Erro
                     ></ft-search-input-suggestion>
                 </div>
                 <div class="ft-search-input--actions" part="actions">
+                    ${this.liveQuery?tt`
+                        <ft-button id="clear-button"
+                                   class="ft-search-input--clear-query"
+                                   part="clear-query"
+                                   icon="close"
+                                   round dense
+                                   label="${Or.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluid-topics/ft-search-input",
-  "version": "1.0.40",
+  "version": "1.0.42",
   "description": "Search bar input for integrated search component",
   "keywords": [
     "Lit"
@@ -19,17 +19,17 @@
     "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
   },
   "dependencies": {
-    "@fluid-topics/ft-button": "1.0.40",
-    "@fluid-topics/ft-i18n": "1.0.40",
-    "@fluid-topics/ft-icon": "1.0.40",
-    "@fluid-topics/ft-ripple": "1.0.40",
-    "@fluid-topics/ft-search-context": "1.0.40",
-    "@fluid-topics/ft-typography": "1.0.40",
-    "@fluid-topics/ft-wc-utils": "1.0.40",
+    "@fluid-topics/ft-button": "1.0.42",
+    "@fluid-topics/ft-i18n": "1.0.42",
+    "@fluid-topics/ft-icon": "1.0.42",
+    "@fluid-topics/ft-ripple": "1.0.42",
+    "@fluid-topics/ft-search-context": "1.0.42",
+    "@fluid-topics/ft-typography": "1.0.42",
+    "@fluid-topics/ft-wc-utils": "1.0.42",
     "lit": "2.7.2"
   },
   "devDependencies": {
     "@fluid-topics/public-api": "1.0.39"
   },
-  "gitHead": "c5404dc936e3a9bcf88c4d4e394ddb9b4166e0d4"
+  "gitHead": "8d5d152b4d5499b0501061b4f8ee5eb427ac6aa7"
 }