feat: user can select a facet value eg category which is not yet displayed - fixes #125

frontend/public/off.html

@@ -252,8 +252,8 @@
                 <div class="row" style="padding-top: 1rem">
                   <div class="large-2 columns">
                     <searchalicious-facets search-name="off">
-                      <searchalicious-facet-terms name="brands_tags"></searchalicious-facet-terms>
-                      <searchalicious-facet-terms  name="categories_tags"></searchalicious-facet-terms>
+                      <searchalicious-facet-terms name="brands_tags" show-other="true"></searchalicious-facet-terms>
+                      <searchalicious-facet-terms  name="categories_tags" show-other="true"></searchalicious-facet-terms>
                       <searchalicious-facet-terms  name="nutrition_grades"></searchalicious-facet-terms>
                       <searchalicious-facet-terms  name="ecoscore_grade"></searchalicious-facet-terms>
                     </searchalicious-facets>

frontend/src/button-transparent.ts

@@ -0,0 +1,71 @@
+import {LitElement, html, css} from 'lit';
+import {customElement} from 'lit/decorators.js';
+
+import {BasicEvents} from './utils/enums';
+
+/**
+ * A custom element that represents a button without background for a search.
+ * It sends a custom event "click" when clicked.
+ * It exists to have already styled button for secondary actions.
+ * You can modify this variable to customize the button style :
+ * --button-transparent-padding
+ * --secondary-hover-color
+ * @extends {LitElement}
+ * @slot - This slot is for the button contents, default to "Search" string.
+ */
+@customElement('searchalicious-button-transparent')
+export class SearchaliciousButtonTransparent extends LitElement {
+  static override styles = css`
+    .button-transparent {
+      background-color: transparent;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      border: none;
+      border-radius: 3.5rem;
+      cursor: pointer;
+      padding: var(--button-transparent-padding, 0.25rem 0.5rem);
+    }
+    .button-transparent:hover {
+      background-color: var(--secondary-hover-color, #cfac9e);
+    }
+  `;
+
+  private _onClick() {
+    this._dispatchEvent();
+  }
+
+  private _onKeyUp(event: Event) {
+    const kbd_event = event as KeyboardEvent;
+    if (kbd_event.key === 'Enter') {
+      this._dispatchEvent();
+    }
+  }
+
+  private _dispatchEvent() {
+    this.dispatchEvent(
+      new CustomEvent(BasicEvents.CLICK, {bubbles: true, composed: true})
+    );
+  }
+
+  override render() {
+    return html`
+      <button
+        @click=${this._onClick}
+        @keyup=${this._onKeyUp}
+        part="button-transparent"
+        role="button"
+        class="button-transparent"
+        type="button"
+      >
+        <slot></slot>
+      </button>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'searchalicious-button-transparent': SearchaliciousButtonTransparent;
+  }
+}

frontend/src/icons/cross.ts

@@ -0,0 +1,51 @@
+import {LitElement, html, css} from 'lit';
+import {customElement} from 'lit/decorators.js';
+
+/**
+ * A custom element that represents a cross icon.
+ * You can modify this variable to customize the icon style :
+ * --icon-width by default 0.8rem
+ * --icon-stroke-color by default black
+ */
+@customElement('searchalicious-icon-cross')
+export class SearchaliciousIconCross extends LitElement {
+  static override styles = css`
+    svg {
+      width: var(--icon-width, 0.8rem);
+    }
+    svg line {
+      stroke: var(--icon-stroke-color, black);
+    }
+  `;
+  override render() {
+    return html`
+      <svg
+        part="icon-cross"
+        viewBox="0 0 100 100"
+        preserveAspectRatio="xMidYMid meet"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <line
+          x1="10"
+          y1="10"
+          x2="90"
+          y2="90"
+          style="stroke:black;stroke-width:10"
+        />
+        <line
+          x1="90"
+          y1="10"
+          x2="10"
+          y2="90"
+          style="stroke:black;stroke-width:10"
+        />
+      </svg>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'searchalicious-icon-cross': SearchaliciousIconCross;
+  }
+}

frontend/src/mixins/debounce.ts

@@ -0,0 +1,42 @@
+import {LitElement} from 'lit';
+import {Constructor} from './utils';
+
+/**
+ * Interface for the DebounceMixin.
+ * It defines the structure that DebounceMixin should adhere to.
+ */
+export interface DebounceMixinInterface {
+  timeout?: number;
+  debounce<F extends () => void>(func: F, wait?: number): void;
+}
+
+/**
+ * A mixin class for debouncing function calls.
+ * It extends the LitElement class and adds debouncing functionality.
+ * It is used to prevent a function from being called multiple times in a short period of time.
+ * It is usefull to avoid multiple calls to a function when the user is typing in an input field.
+ * @param {Constructor<LitElement>} superClass - The superclass to extend from.
+ * @returns {Constructor<DebounceMixinInterface> & T} - The extended class with debouncing functionality.
+ */
+export const DebounceMixin = <T extends Constructor<LitElement>>(
+  superClass: T
+): Constructor<DebounceMixinInterface> & T =>
+  class extends superClass {
+    timeout?: number = undefined;
+
+    /**
+     * Debounces a function call.
+     * It delays the execution of the function until after wait milliseconds have elapsed since the last time this function was invoked.
+     * @param {Function} func - The function to debounce.
+     * @param {number} wait - The number of milliseconds to delay.
+     */
+    debounce<F extends () => void>(func: F, wait = 300): void {
+      // eslint-disable-next-line @typescript-eslint/no-this-alias
+      const self = this;
+      clearTimeout(this.timeout);
+      this.timeout = setTimeout(() => {
+        this.timeout = undefined;
+        func.bind(self)();
+      }, wait);
+    }
+  } as Constructor<DebounceMixinInterface> & T;

frontend/src/mixins/search-action.ts

@@ -0,0 +1,43 @@
+import {LitElement} from 'lit';
+import {Constructor} from './utils';
+import {BaseSearchDetail, LaunchSearchEvent} from '../events';
+import {SearchaliciousEvents} from '../utils/enums';
+import {property} from 'lit/decorators.js';
+
+export interface SearchActionMixinInterface {
+  searchName: string;
+  _launchSearch(): Promise<void>;
+}
+
+/**
+ * A mixin class for search actions.
+ * It extends the LitElement class and adds search functionality.
+ * It is used to launch a search event.
+ * @param {Constructor<LitElement>} superClass - The superclass to extend from.
+ * @returns {Constructor<SearchActionMixinInterface> & T} - The extended class with search functionality.
+ */
+export const SearchActionMixin = <T extends Constructor<LitElement>>(
+  superClass: T
+): Constructor<SearchActionMixinInterface> & T => {
+  class SearchActionMixinClass extends superClass {
+    @property({attribute: 'search-name'})
+    searchName = 'searchalicious';
+
+    /**
+     * Launches a search event.
+     * It creates a new event with the search name and dispatches it.
+     */
+    _launchSearch() {
+      const detail: BaseSearchDetail = {searchName: this.searchName};
+      // fire the search event
+      const event = new CustomEvent(SearchaliciousEvents.LAUNCH_SEARCH, {
+        bubbles: true,
+        composed: true,
+        detail: detail,
+      }) as LaunchSearchEvent;
+      this.dispatchEvent(event);
+    }
+  }
+
+  return SearchActionMixinClass as Constructor<SearchActionMixinInterface> & T;
+};

frontend/src/search-ctl.ts → frontend/src/mixins/search-ctl.ts

@@ -3,19 +3,16 @@ import {property, state} from 'lit/decorators.js';
 import {
   EventRegistrationInterface,
   EventRegistrationMixin,
-} from './event-listener-setup';
-import {SearchaliciousEvents} from './enums';
+} from '../event-listener-setup';
+import {SearchaliciousEvents} from '../utils/enums';
 import {
   ChangePageEvent,
   LaunchSearchEvent,
   SearchResultEvent,
   SearchResultDetail,
-} from './events';
-import {SearchaliciousFacets} from './search-facets';
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type Constructor<T = {}> = new (...args: any[]) => T;
-
+} from '../events';
+import {SearchaliciousFacets} from '../search-facets';
+import {Constructor} from './utils';
 export interface SearchaliciousSearchInterface
   extends EventRegistrationInterface {
   query: string;
@@ -176,14 +173,18 @@ export const SearchaliciousSearchMixin = <T extends Constructor<LitElement>>(
         )
         .sort() // for perdictability in tests !
         .join('&');
+
       return `${baseUrl}/search?${queryStr}`;
     }
 
     // connect to our specific events
     override connectedCallback() {
       super.connectedCallback();
-      this.addEventHandler(SearchaliciousEvents.LAUNCH_SEARCH, (event: Event) =>
-        this._handleSearch(event)
+      this.addEventHandler(
+        SearchaliciousEvents.LAUNCH_SEARCH,
+        (event: Event) => {
+          this._handleSearch(event);
+        }
       );
       this.addEventHandler(SearchaliciousEvents.CHANGE_PAGE, (event) =>
         this._handleChangePage(event)

frontend/src/search-results-ctl.ts → frontend/src/mixins/search-results-ctl.ts

@@ -4,12 +4,10 @@ import {property, state} from 'lit/decorators.js';
 import {
   EventRegistrationInterface,
   EventRegistrationMixin,
-} from './event-listener-setup';
-import {SearchaliciousEvents} from './enums';
-import {SearchResultEvent} from './events';
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type Constructor<T = {}> = new (...args: any[]) => T;
+} from '../event-listener-setup';
+import {SearchaliciousEvents} from '../utils/enums';
+import {SearchResultEvent} from '../events';
+import {Constructor} from './utils';
 
 export interface SearchaliciousResultsCtlInterface
   extends EventRegistrationInterface {