@fluid-topics/ft-search-bar 0.2.3 → 0.2.4

package/build/ft-search-bar.js

@@ -180,7 +180,7 @@ export class FtSearchBar extends FtLitElement {
             ${this.displayFacets ? this.renderMobileFacets() : this.renderSuggestions()}
             ${this.mobileMenuOpen || this.displayFacets ? html `
                         <ft-button class="ft-search-bar--launch-search"
-                                   part="search-bar-actions"
+                                   part="launch-search-in-panel"
                                    icon="search"
                                    @click=${this.launchSearch}>
                             ${this.labelResolver.resolve("searchButton")}
@@ -191,27 +191,33 @@ export class FtSearchBar extends FtLitElement {
     renderMobileSearchBarButtons() {
         if (this.query || this.mobileMenuOpen) {
             return html `
-                <ft-button class="ft-search-bar--clear-query"
-                           part="search-bar-actions"
-                           icon="close"
-                           round
-                           label="${this.labelResolver.resolve("clearInputButton")}"
-                           @click=${() => {
+                <div class="ft-search-bar--actions"
+                     part="search-bar-actions">
+                    <ft-button class="ft-search-bar--clear-query"
+                               part="clear-query"
+                               icon="close"
+                               round
+                               label="${this.labelResolver.resolve("clearInputButton")}"
+                               @click=${() => {
                 this.setQuery("");
                 this.mobileMenuOpen = false;
                 this.displayFacets = false;
             }}
-                ></ft-button>
+                    ></ft-button>
+                </div>
             `;
         }
         return html `
-            <ft-button class="ft-search-bar--launch-search"
-                       part="search-bar-actions"
-                       icon="search"
-                       round
-                       label="${this.labelResolver.resolve("searchButton")}"
-                       @click=${() => { var _a; return (_a = this.input) === null || _a === void 0 ? void 0 : _a.focus(); }}
-            ></ft-button>
+            <div class="ft-search-bar--actions"
+                 part="search-bar-actions">
+                <ft-button class="ft-search-bar--launch-search"
+                           part="launch-search-in-bar"
+                           icon="search"
+                           round
+                           label="${this.labelResolver.resolve("searchButton")}"
+                           @click=${() => { var _a; return (_a = this.input) === null || _a === void 0 ? void 0 : _a.focus(); }}
+                ></ft-button>
+            </div>
         `;
     }
     renderMobileFacets() {
@@ -295,7 +301,7 @@ export class FtSearchBar extends FtLitElement {
                     ${this.renderDesktopFacets()}
                     <div class="ft-search-bar--facets-actions">
                         <ft-button class="ft-search-bar--launch-search"
-                                   part="search-bar-actions"
+                                   part="launch-search-in-panel"
                                    icon="search"
                                    @click=${this.launchSearch}>
                             ${this.labelResolver.resolve("searchButton")}
@@ -341,23 +347,26 @@ export class FtSearchBar extends FtLitElement {
     }
     renderDesktopSearchBarButtons() {
         return html `
-            ${this.query ? html `
-                <ft-button class="ft-search-bar--clear-query"
-                           part="search-bar-actions"
-                           icon="close"
+            <div class="ft-search-bar--actions"
+                 part="search-bar-actions">
+                ${this.query ? html `
+                    <ft-button class="ft-search-bar--clear-query"
+                               part="clear-query"
+                               icon="close"
+                               round dense
+                               label="${this.labelResolver.resolve("clearInputButton")}"
+                               @click=${() => this.setQuery("")}
+                    ></ft-button>
+                    <div class="ft-search-bar--separator"></div>
+                ` : null}
+                <ft-button class="ft-search-bar--launch-search"
+                           part="launch-search-in-bar"
+                           icon="search"
                            round dense
-                           label="${this.labelResolver.resolve("clearInputButton")}"
-                           @click=${() => this.setQuery("")}
+                           label="${this.labelResolver.resolve("searchButton")}"
+                           @click=${this.launchSearch}
                 ></ft-button>
-                <div class="ft-search-bar--separator"></div>
-            ` : null}
-            <ft-button class="ft-search-bar--launch-search"
-                       part="search-bar-actions"
-                       icon="search"
-                       round dense
-                       label="${this.labelResolver.resolve("searchButton")}"
-                       @click=${this.launchSearch}
-            ></ft-button>
+            </div>
         `;
     }
     renderFacetsActions() {