@fluid-topics/ft-search-bar 1.0.13 → 1.0.15

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

@@ -6,6 +6,8 @@ import { FtSelectCssVariables } from "@fluid-topics/ft-select/build/ft-select.cs
 import { FtSkeletonCssVariables } from "@fluid-topics/ft-skeleton/build/ft-skeleton.css";
 import { FtTooltipCssVariables } from "@fluid-topics/ft-tooltip/build/ft-tooltip.css";
 import { FtSnapScrollCssVariables } from "@fluid-topics/ft-snap-scroll/build/ft-snap-scroll.css";
+import { FtFilterCssVariables } from "@fluid-topics/ft-filter/build/ft-filter.css";
+import { FtTypographyCssVariables } from "@fluid-topics/ft-typography/build/ft-typography.css";
 export const FtSearchBarCssVariables = {
     height: FtCssVariableFactory.create("--ft-search-bar-height", "SIZE", "38px"),
     borderRadius: FtCssVariableFactory.extend("--ft-search-bar-border-radius", designSystemVariables.borderRadiusS),
@@ -185,6 +187,42 @@ export const searchBarCss = css `
         border-radius: calc(${FtSearchBarCssVariables.borderRadius} - 1px) 0 0 calc(${FtSearchBarCssVariables.borderRadius} - 1px);
     }
 
+    [part="content-locale-selector"] {
+        flex-grow: 0;
+        display: flex;
+        flex-direction: column;
+        max-height: 100%;
+        max-width: 100%;
+        color: ${FtFilterCssVariables.colorOnSurface};
+    }
+
+    [part="content-locale-selector"] > ft-radio-group {
+        flex-grow: 1;
+        flex-shrink: 1;
+        overflow: auto;
+        display: flex;
+        flex-direction: column;
+    }
+    
+    [part="content-locale-selector-header"] {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 4px;
+        flex-shrink: 0;
+        padding: 0 10px;
+        margin-bottom: 8px;
+        ${setVariable(FtTypographyCssVariables.fontSize, "14px")};
+    }
+
+    [part="content-locale-selector-label"] {
+        display: block;
+        flex-shrink: 1;
+        flex-grow: 1;
+        word-break: break-word;
+        ${setVariable(FtTypographyCssVariables.lineHeight, "22px")};
+        ${setVariable(FtTypographyCssVariables.fontWeight, "bold")};
+    }
+
 `;
 //language=css
 export const facetsCss = css `

package/build/ft-search-bar.js

@@ -26,6 +26,7 @@ import { SuggestManager } from "./managers/SuggestManager";
 import { FacetsChipsManager } from "./managers/FacetsChipsManager";
 import { MobileSearchBarManager } from "./managers/MobileSearchBarManager";
 import { DesktopSearchBarManager } from "./managers/DesktopSearchBarManager";
+import { FtRadioGroup, FtRadio, } from "@fluid-topics/ft-radio";
 if (window.fluidtopics == null) {
     console.warn("Fluid Topics public API was not found. You can find it here: https://www.npmjs.com/package/@fluid-topics/public-api");
 }
@@ -194,6 +195,7 @@ class FtSearchBar extends FtLitElement {
                 `;
     }
     renderMobileFacets() {
+        var _a;
         const currentLocale = this.availableContentLocales.filter(l => l.lang === this.contentLocale).pop();
         return html `
             <ft-accordion class="ft-search-bar--filters-container">
@@ -208,15 +210,15 @@ class FtSearchBar extends FtLitElement {
                                 </ft-typography>
                             ` : nothing}
                         </div>
-                        <ft-filter
-                                id="ft:locale"
-                                part="filters filter-ft-locale"
-                                .exportpartsPrefixes=${["filter", "filter-ft-locale"]}
-                                class="ft-search-bar--content-locale"
-                                filterPlaceHolder="${this.labelResolver.resolve("filterInputPlaceHolder", this.labelResolver.resolve("contentLocaleSelector"))}"
-                                .options=${(this.contentLocalesAsFilterOptions())}
-                                @change=${(e) => this.contentLocale = e.detail[0]}
-                        ></ft-filter>
+                        <div part="content-locale-selector">
+                            <ft-radio-group @change=${(e) => this.contentLocale = e.detail}>
+                                ${repeat(((_a = this.availableContentLocales) !== null && _a !== void 0 ? _a : []), locale => locale.lang, locale => html `
+                                                <ft-radio .value=${locale.lang}
+                                                          ?checked=${locale.lang == this.contentLocale}
+                                                >${locale.label}
+                                                </ft-radio>`)}
+                            </ft-radio-group>
+                        </div>
                     </ft-accordion-item>
                 ` : null}
                 ${repeat(this.facets, facet => facet.key, facet => {
@@ -310,6 +312,7 @@ class FtSearchBar extends FtLitElement {
         ` : nothing;
     }
     renderDesktopFacets() {
+        var _a;
         if (!this.hasFacets()) {
             return nothing;
         }
@@ -320,16 +323,20 @@ class FtSearchBar extends FtLitElement {
                             exportpartsPrefix="filters-container"
                             data-filters-count="${this.facets.length + (this.hasLocaleSelector() ? 1 : 0)}">
                 ${this.hasLocaleSelector() ? html `
-                    <ft-filter
-                            id="ft:locale"
-                            class="ft-search-bar--content-locale"
-                            part="filters filter-ft-locale"
-                            .exportpartsPrefixes=${["filter", "filter-ft-locale"]}
-                            label="${this.labelResolver.resolve("contentLocaleSelector")}"
-                            filterPlaceHolder="${this.labelResolver.resolve("filterInputPlaceHolder", this.labelResolver.resolve("contentLocaleSelector"))}"
-                            .options=${(this.contentLocalesAsFilterOptions())}
-                            @change=${(e) => this.contentLocale = e.detail[0]}
-                    ></ft-filter>
+                    <div part="content-locale-selector">
+                        <div part="content-locale-selector-header">
+                            <ft-typography variant="overline" part="content-locale-selector-label">
+                                ${this.labelResolver.resolve("contentLocaleSelector")}
+                            </ft-typography>
+                        </div>
+                        <ft-radio-group @change=${(e) => this.contentLocale = e.detail}>
+                            ${repeat(((_a = this.availableContentLocales) !== null && _a !== void 0 ? _a : []), locale => locale.lang, locale => html `
+                                                <ft-radio .value=${locale.lang}
+                                                          ?checked=${locale.lang == this.contentLocale}
+                                                >${locale.label}
+                                                </ft-radio>`)}
+                        </ft-radio-group>
+                    </div>
                 ` : nothing}
                 ${repeat(this.facets, facet => facet.key, facet => {
             const filter = facetToFilter(facet);
@@ -377,7 +384,7 @@ class FtSearchBar extends FtLitElement {
         }
         super.update(props);
         if ((props.has("availableContentLocales") || props.has("contentLocale")) && this.availableContentLocales.length > 0) {
-            const isKnown = (locale) => this.availableContentLocales.some(l => l.lang === locale);
+            const isKnown = (locale) => this.availableContentLocales.some(l => l.lang == locale);
             if (!isKnown(this.contentLocale)) {
                 this.contentLocale = props.has("contentLocale") && isKnown(props.get("contentLocale")) ? props.get("contentLocale") : (_a = this.availableContentLocales[0]) === null || _a === void 0 ? void 0 : _a.lang;
             }
@@ -621,6 +628,8 @@ FtSearchBar.elementDefinitions = {
     "ft-snap-scroll": FtSnapScroll,
     "ft-tooltip": FtTooltip,
     "ft-typography": FtTypography,
+    "ft-radio-group": FtRadioGroup,
+    "ft-radio": FtRadio,
 };
 FtSearchBar.styles = [
     FtTypographyBody2,