@fluid-topics/ft-search-bar 1.0.14 → 1.0.16

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.d.ts

@@ -76,7 +76,7 @@ export declare class FtSearchBar extends FtLitElement implements FtSearchBarProp
     protected render(): import("lit-html").TemplateResult<1>;
     protected renderSearchBar(): import("lit-html").TemplateResult<1>;
     renderMobileFacets(): import("lit-html").TemplateResult<1>;
-    private contentLocalesAsFilterOptions;
+    private getContentLocaleRadioGroup;
     renderDesktopMenu(): import("lit-html").TemplateResult<1> | typeof nothing;
     renderFacetsActions(): import("lit-html").TemplateResult<1>;
     private renderDesktopClearFilters;

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 { FtRadio, FtRadioGroup, } 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");
 }
@@ -208,15 +209,9 @@ 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">
+                            ${this.getContentLocaleRadioGroup()}
+                        </div>
                     </ft-accordion-item>
                 ` : null}
                 ${repeat(this.facets, facet => facet.key, facet => {
@@ -253,12 +248,22 @@ class FtSearchBar extends FtLitElement {
             </ft-accordion>
         `;
     }
-    contentLocalesAsFilterOptions() {
-        return this.availableContentLocales.map(l => ({
-            value: l.lang,
-            label: l.label,
-            selected: l.lang == this.contentLocale
-        }));
+    getContentLocaleRadioGroup() {
+        var _a;
+        return html `
+            <ft-radio-group
+                    @change=${(e) => this.contentLocale = (e.detail === "all" ? undefined : e.detail)}>
+                ${repeat(((_a = this.availableContentLocales) !== null && _a !== void 0 ? _a : []), locale => locale.lang, locale => {
+            var _a;
+            return html `
+                                    <ft-radio value="${(_a = locale.lang) !== null && _a !== void 0 ? _a : "all"}"
+                                              ?checked=${locale.lang == this.contentLocale}>
+                                        ${locale.label}
+                                    </ft-radio>
+                                `;
+        })}
+            </ft-radio-group>
+        `;
     }
     renderDesktopMenu() {
         return this.hasFacets() ? html `
@@ -320,17 +325,14 @@ 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())}
-                            forceOneSelected
-                            @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>
+                        ${this.getContentLocaleRadioGroup()}
+                    </div>
                 ` : nothing}
                 ${repeat(this.facets, facet => facet.key, facet => {
             const filter = facetToFilter(facet);
@@ -378,7 +380,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;
             }
@@ -622,6 +624,8 @@ FtSearchBar.elementDefinitions = {
     "ft-snap-scroll": FtSnapScroll,
     "ft-tooltip": FtTooltip,
     "ft-typography": FtTypography,
+    "ft-radio-group": FtRadioGroup,
+    "ft-radio": FtRadio,
 };
 FtSearchBar.styles = [
     FtTypographyBody2,