@fluid-topics/ft-search-bar 1.1.58 → 1.1.60

package/build/ft-search-bar.js

@@ -258,8 +258,8 @@ class FtSearchBar extends FtLitElement {
     getContentLocaleRadioGroup() {
         var _a;
         return html `
-            <ft-radio-group
-                @change=${(e) => {
+            <ft-radio-group aria-labelledby="content_locale_radio_group_label"
+                            @change=${(e) => {
             this.contentLocale = (e.detail === "all" ? undefined : e.detail);
             this.clearFilters();
         }}>
@@ -337,7 +337,7 @@ class FtSearchBar extends FtLitElement {
                 ${this.hasLocaleSelector() ? html `
                     <div part="content-locale-selector">
                         <div part="content-locale-selector-header">
-                            <ft-typography variant="overline" part="content-locale-selector-label">
+                            <ft-typography variant="overline" id="content_locale_radio_group_label" part="content-locale-selector-label">
                                 ${this.labelResolver.resolve("contentLocaleSelector")}
                             </ft-typography>
                         </div>

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

@@ -2662,6 +2662,7 @@ const V=Symbol.for(""),q=t=>{if(t?.r===V)return t?._$litStatic$},Y=t=>({_$litSta
                                    type="text"
                                    placeholder="${this.searchBar.labelResolver.resolve("inputPlaceHolder")}"
                                    value="${this.searchBar.query}"
+                                   @input=${t=>this.onInput(t)}
                                    @keyup=${t=>this.onSearchBarKeyUp(t)}
                                    @focus=${()=>{this.searchBar.mobileMenuOpen=!0,this.searchBar.displayFacets=!1}}>
                         </div>
@@ -2671,13 +2672,13 @@ const V=Symbol.for(""),q=t=>{if(t?.r===V)return t?._$litStatic$},Y=t=>({_$litSta
                 ${this.searchBar.displayFacets?this.searchBar.renderFacetsActions():this.selectedFacetsManager.render()}
                 ${this.searchBar.displayFacets?this.searchBar.renderMobileFacets():this.suggestManager.render()}
                 ${this.searchBar.isMobileMenuOpen()||this.searchBar.displayFacets?o.html`
-                            <ft-button class="ft-search-bar--launch-search"
-                                       part="launch-search-in-panel"
-                                       icon="search"
-                                       @click=${this.searchBar.launchSearch}>
-                                ${this.searchBar.labelResolver.resolve("searchButton")}
-                            </ft-button>
-                        `:o.nothing}
+                        <ft-button class="ft-search-bar--launch-search"
+                                   part="launch-search-in-panel"
+                                   icon="search"
+                                   @click=${this.searchBar.launchSearch}>
+                            ${this.searchBar.labelResolver.resolve("searchButton")}
+                        </ft-button>
+                    `:o.nothing}
             </div>
         `}renderMobileSearchBarButtons(){const t=this.searchBar.query||this.searchBar.isMobileMenuOpen()&&!this.searchBar.forceMobileMenuOpen;return o.html`
             <div class="ft-search-bar--actions" part="search-bar-actions">
@@ -2701,7 +2702,7 @@ const V=Symbol.for(""),q=t=>{if(t?.r===V)return t?._$litStatic$},Y=t=>({_$litSta
                            @click=${()=>{var t;return this.searchBar.isMobileMenuOpen()?this.searchBar.launchSearch():null===(t=this.searchBar.input)||void 0===t?void 0:t.focus()}}
                 ></ft-button>
             </div>
-        `}onSearchBarKeyUp(t){const e=t.composedPath()[0];this.searchBar.query=e.value,"Enter"===t.key&&this.searchBar.launchSearch()}}Lr.styles=o.css`
+        `}onSearchBarKeyUp(t){"Enter"===t.key&&this.searchBar.launchSearch()}onInput(t){const e=t.composedPath()[0];this.searchBar.query=e.value}}Lr.styles=o.css`
 
     `;class Ur{constructor(t,e,o){this.searchBar=t,this.selectedFacetsManager=null!=e?e:new zr(t),this.suggestManager=null!=o?o:new Er(t)}render(){const t={"ft-search-bar--container":!0,"ft-search-bar--dense":this.searchBar.dense,"ft-search-bar--desktop":!0,"ft-search-bar--floating-panel-open":this.searchBar.displayFacets&&!this.searchBar.forceMenuOpen,"ft-search-bar--forced-open":this.searchBar.forceMenuOpen,"ft-search-bar--react-to-focus":this.searchBar.reactToFocus};return o.html`
             <div class="${a.classMap(t)}" part="container" tabindex="-1">
@@ -2715,6 +2716,7 @@ const V=Symbol.for(""),q=t=>{if(t?.r===V)return t?._$litStatic$},Y=t=>({_$litSta
                                    type="text"
                                    placeholder="${this.searchBar.labelResolver.resolve("inputPlaceHolder")}"
                                    value="${this.searchBar.query}"
+                                   @input=${t=>this.onInput(t)}
                                    @keydown=${t=>this.onSearchBarKeyDown(t)}
                                    @keyup=${t=>this.onSearchBarKeyUp(t)}>
                         </div>
@@ -2743,11 +2745,11 @@ const V=Symbol.for(""),q=t=>{if(t?.r===V)return t?._$litStatic$},Y=t=>({_$litSta
                            .exportpartsPrefixes=${["content-locale","select-ft-locale"]}
                            @change=${t=>this.searchBar.contentLocale=null==t.detail?void 0:t.detail}>
                     ${r.repeat(this.searchBar.availableContentLocales,(t=>t.lang),(t=>o.html`
-                                <ft-select-option .value=${t.lang}
-                                                  label="${t.label}"
-                                                  ?selected=${t.lang===this.searchBar.contentLocale}>
-                                </ft-select-option>
-                            `))}
+                            <ft-select-option .value=${t.lang}
+                                              label="${t.label}"
+                                              ?selected=${t.lang===this.searchBar.contentLocale}>
+                            </ft-select-option>
+                        `))}
                 </ft-select>
             `:o.nothing}renderDesktopSearchBarButtons(){return o.html`
             <div class="ft-search-bar--actions"
@@ -2770,7 +2772,7 @@ const V=Symbol.for(""),q=t=>{if(t?.r===V)return t?._$litStatic$},Y=t=>({_$litSta
                            @click=${()=>this.searchBar.launchSearch()}
                 ></ft-button>
             </div>
-        `}onSearchBarKeyDown(t){var e;switch(t.key){case"Escape":this.searchBar.mobileMenuOpen=!1,null===(e=this.searchBar.input)||void 0===e||e.blur();break;case"ArrowDown":t.stopPropagation(),t.preventDefault(),this.suggestManager.focusFirstSuggestion()}}onSearchBarKeyUp(t){const e=t.composedPath()[0];this.searchBar.query=e.value,"Enter"===t.key&&this.searchBar.launchSearch()}}Ur.styles=o.css`
+        `}onSearchBarKeyDown(t){var e;switch(t.key){case"Escape":this.searchBar.mobileMenuOpen=!1,null===(e=this.searchBar.input)||void 0===e||e.blur();break;case"ArrowDown":t.stopPropagation(),t.preventDefault(),this.suggestManager.focusFirstSuggestion()}}onSearchBarKeyUp(t){"Enter"===t.key&&this.searchBar.launchSearch()}onInput(t){const e=t.composedPath()[0];this.searchBar.query=e.value}}Ur.styles=o.css`
 
     `;const Rr=o.css`
 `,Wr=e.FtReduxStore.get({name:"ft-app-info",reducers:{},initialState:{baseUrl:void 0,apiIntegrationIdentifier:void 0,uiLocale:document.documentElement.lang||"en-US",availableUiLocales:[],metadataConfiguration:void 0,editorMode:!1,noCustom:!1,noCustomComponent:!1,session:void 0,openExternalDocumentInNewTab:!1}});class Zr{static get(t){const{baseUrl:e,apiIntegrationIdentifier:o}=Wr.getState(),i=null!=t?t:o;if(e&&i&&window.fluidtopics)return new window.fluidtopics.FluidTopicsApi(e,i,!0)}static await(t){return new Promise((e=>{let o=Zr.get(t);if(o)e(o);else{const i=Wr.subscribe((()=>{o=Zr.get(t),o&&(i(),e(o))}))}}))}}class Br{constructor(t=!0,o){var i;this.overrideApi=o;let r=this.constructor;r.commonCache=null!==(i=r.commonCache)&&void 0!==i?i:new e.CacheRegistry,this.cache=t?r.commonCache:new e.CacheRegistry}get api(){var t;return null!==(t=this.overrideApi)&&void 0!==t?t:Zr.get()}get awaitApi(){var t;return null!==(t=this.overrideApi)&&void 0!==t?t:Zr.await()}clearCache(){this.cache.clearAll()}}var Fr;const Dr=Symbol("clearAfterUnitTest");class Kr extends Br{constructor(t){super(),this.messageContextProvider=t,this.defaultMessages={},this.listeners={},this.currentUiLocale="",this[Fr]=()=>{this.defaultMessages={},this.cache=new e.CacheRegistry,this.listeners={}},this.currentUiLocale=Wr.getState().uiLocale,Wr.subscribe((()=>this.clearWhenUiLocaleChanges()))}clearWhenUiLocaleChanges(){const{uiLocale:t}=Wr.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,o){var i;if(t=t.toLowerCase(),Object.keys(o).length>0){const r={...null!==(i=this.defaultMessages[t])&&void 0!==i?i:{},...o};e.deepEqual(this.defaultMessages[t],r)||(this.defaultMessages[t]=r,await this.notify(t))}await this.fetchContext(t)}resolveMessage(t,o,...i){var r,a,n;t=t.toLowerCase(),this.fetchContext(t);const l=null!==(a=null===(r=this.cache.getNow(t))||void 0===r?void 0:r.messages)&&void 0!==a?a:{};return new e.ParametrizedLabelResolver(null!==(n=this.defaultMessages[t])&&void 0!==n?n:{},l).resolve(o,...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 o;return t=t.toLowerCase(),this.listeners[t]=null!==(o=this.listeners[t])&&void 0!==o?o:new Set,this.listeners[t].add(e),()=>{var o;return null===(o=this.listeners[t])||void 0===o?void 0:o.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=>e.delay(0).then((()=>t())).catch((()=>null)))))}}Fr=Dr,null==window.FluidTopicsI18nService&&(window.FluidTopicsI18nService=new class extends Kr{constructor(){super((async(t,e)=>(await this.awaitApi).getFluidTopicsMessageContext(t,e)))}}),null==window.FluidTopicsCustomI18nService&&(window.FluidTopicsCustomI18nService=new class extends Kr{constructor(){super((async(t,e)=>(await this.awaitApi).getCustomMessageContext(t,e)))}});const Ar=window.FluidTopicsI18nService;var Hr=function(t,e,o,i){for(var r,a=arguments.length,n=a<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i,l=t.length-1;l>=0;l--)(r=t[l])&&(n=(a<3?r(n):a>3?r(e,o,n):r(e,o))||n);return a>3&&n&&Object.defineProperty(e,o,n),n};class Mr extends e.FtLitElement{constructor(){super(...arguments),this.apiIntegrationIdentifier="ft-integration",this.uiLocale="en-US",this.editorMode=!1,this.noCustom=!1,this.openExternalDocumentInNewTab=!1,this.noCustomComponent=!1,this.withManualResources=!1,this.messageContexts=[],this.apiProvider=()=>Zr.get(),this.cache=new e.CacheRegistry,this.cleanSessionDebouncer=new e.Debouncer}render(){return o.html`
@@ -2828,8 +2830,8 @@ const V=Symbol.for(""),q=t=>{if(t?.r===V)return t?._$litStatic$},Y=t=>({_$litSta
                         `:o.nothing}))}
             </ft-accordion>
         `}getContentLocaleRadioGroup(){var t;return o.html`
-            <ft-radio-group
-                @change=${t=>{this.contentLocale="all"===t.detail?void 0:t.detail,this.clearFilters()}}>
+            <ft-radio-group aria-labelledby="content_locale_radio_group_label"
+                            @change=${t=>{this.contentLocale="all"===t.detail?void 0:t.detail,this.clearFilters()}}>
                 ${r.repeat(null!==(t=this.availableContentLocales)&&void 0!==t?t:[],(t=>t.lang),(t=>{var e;return o.html`
                             <ft-radio value="${null!==(e=t.lang)&&void 0!==e?e:"all"}"
                                       ?checked=${t.lang==this.contentLocale}>
@@ -2885,7 +2887,7 @@ const V=Symbol.for(""),q=t=>{if(t?.r===V)return t?._$litStatic$},Y=t=>({_$litSta
                 ${this.hasLocaleSelector()?o.html`
                     <div part="content-locale-selector">
                         <div part="content-locale-selector-header">
-                            <ft-typography variant="overline" part="content-locale-selector-label">
+                            <ft-typography variant="overline" id="content_locale_radio_group_label" part="content-locale-selector-label">
                                 ${this.labelResolver.resolve("contentLocaleSelector")}
                             </ft-typography>
                         </div>