@sourceloop/search-client 9.0.1 → 11.0.0

package/src/lib/search/search.component.ts

@@ -0,0 +1,457 @@
+// Copyright (c) 2023 Sourcefuse Technologies
+//
+// This software is released under the MIT License.
+// https://opensource.org/licenses/MIT
+import {
+  ChangeDetectorRef,
+  Component,
+  computed,
+  effect,
+  ElementRef,
+  Inject,
+  input,
+  OnDestroy,
+  OnInit,
+  Optional,
+  output,
+  PLATFORM_ID,
+  SimpleChanges,
+  TemplateRef,
+  ViewChild,
+} from '@angular/core';
+import {Configuration} from '../lib-configuration';
+import {Subject} from 'rxjs';
+import {debounceTime, tap} from 'rxjs/operators';
+import {
+  ControlValueAccessor,
+  FormsModule,
+  NG_VALUE_ACCESSOR,
+} from '@angular/forms';
+import {
+  CustomSearchEvent,
+  ISearchService,
+  ISearchQuery,
+  SEARCH_SERVICE_TOKEN,
+  DEBOUNCE_TIME,
+  DEFAULT_LIMIT,
+  DEFAULT_LIMIT_TYPE,
+  DEFAULT_OFFSET,
+  DEFAULT_SAVE_IN_RECENTS,
+  DEFAULT_ORDER,
+  IReturnType,
+  RecentSearchEvent,
+  TypeEvent,
+  ItemClickedEvent,
+  IModel,
+  ISearchServiceWithPromises,
+  isApiServiceWithPromise,
+} from '../types';
+import {CommonModule, isPlatformBrowser} from '@angular/common';
+import {PromiseApiAdapterService} from './promise-api-adapter.service';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatIconModule} from '@angular/material/icon';
+import {MatSelectModule} from '@angular/material/select';
+import {MatInputModule} from '@angular/material/input';
+const ALL_LABEL = 'All';
+@Component({
+  selector: 'sourceloop-search',
+  standalone: true,
+  templateUrl: './search.component.html',
+  styleUrls: ['./search.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: SearchComponent,
+      multi: true,
+    },
+  ],
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatIconModule,
+    MatSelectModule,
+    MatFormFieldModule,
+    MatInputModule,
+  ],
+})
+export class SearchComponent<T extends IReturnType>
+  implements OnInit, OnDestroy, ControlValueAccessor
+{
+  readonly cfg = computed(() => {
+    const cfg = this.config();
+    if (!cfg) {
+      throw new Error('SearchComponent: config input is required');
+    }
+    return cfg;
+  });
+  config = input<Configuration<T>>();
+  searchProvider = input<ISearchService<T> | ISearchServiceWithPromises<T>>();
+
+  titleTemplate = input<TemplateRef<any> | undefined>();
+  subtitleTemplate = input<TemplateRef<any> | undefined>();
+
+  customAllLabel = input<string>(ALL_LABEL);
+  showOnlySearchResultOverlay = input<boolean>(false);
+
+  customSearchEvent = input<CustomSearchEvent>({
+    searchValue: '',
+    modelName: ALL_LABEL,
+  });
+
+  clicked = output<ItemClickedEvent<T>>();
+  searched = output<RecentSearchEvent>();
+
+  searchBoxInput = '';
+  suggestionsDisplay = false;
+  categoryDisplay = false;
+  searching = false;
+  suggestions: T[] = [];
+  recentSearches: ISearchQuery[] = [];
+  category: string = ALL_LABEL;
+  searchRequest$ = new Subject<{input: string; event: Event}>();
+
+  private searchService!: ISearchService<T>;
+
+  onChange: (value: string | undefined) => void = () => {};
+  onTouched: () => void = () => {};
+  disabled = false;
+
+  @ViewChild('searchInput') public searchInputElement!: ElementRef;
+
+  constructor(
+    @Inject(SEARCH_SERVICE_TOKEN)
+    @Optional()
+    searchService: ISearchService<T>,
+    // tslint:disable-next-line:ban-types
+    @Inject(PLATFORM_ID)
+    private readonly platformId: Object,
+    private readonly cdr: ChangeDetectorRef,
+    private readonly promiseAdapter: PromiseApiAdapterService<T>,
+  ) {
+    if (searchService) {
+      this.searchService = searchService;
+    }
+
+    effect(() => {
+      const cfg = this.config();
+      if (!cfg) return;
+
+      if (cfg.models) {
+        cfg.models.unshift({
+          name: ALL_LABEL,
+          displayName: this.customAllLabel(),
+        });
+      } else {
+        cfg.models = [
+          {
+            name: ALL_LABEL,
+            displayName: this.customAllLabel(),
+          },
+        ];
+      }
+    });
+
+    effect(() => {
+      let provider = this.searchProvider();
+      if (!provider) return;
+
+      if (isApiServiceWithPromise(provider)) {
+        provider = this.promiseAdapter.adapt(provider);
+      }
+      this.searchService = provider;
+    });
+
+    effect(() => {
+      const event = this.customSearchEvent();
+      if (!event) return;
+
+      if (event.searchValue !== undefined) {
+        this.searchBoxInput = event.searchValue;
+        this.searchOnCustomEventValueChange(this.searchBoxInput);
+      }
+
+      if (event.modelName) {
+        this.setCategory(event.modelName);
+      }
+    });
+  }
+
+  ngOnInit(): void {
+    this.searchRequest$
+      .pipe(
+        tap(v => (this.suggestions = [])),
+        debounceTime(DEBOUNCE_TIME),
+      )
+      .subscribe((value: TypeEvent) => {
+        this.searched.emit({
+          event: value.event,
+          keyword: value.input,
+          category: this.category,
+        });
+        this.getSuggestions(value);
+        this.cdr.markForCheck();
+      });
+  }
+
+  // ControlValueAccessor Implementation
+  writeValue(value: string): void {
+    this.searchBoxInput = value;
+  }
+  // When the value in the UI is changed, this method will invoke a callback function
+  registerOnChange(fn: (value: string | undefined) => void): void {
+    this.onChange = fn;
+  }
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+  setDisabledState?(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+
+  getSuggestions(eventValue: TypeEvent) {
+    const cfg = this.config();
+    if (!cfg) return;
+    eventValue.input = eventValue.input.trim();
+    if (!eventValue.input.length) {
+      return;
+    }
+    const order = cfg.order ?? DEFAULT_ORDER;
+    const orderString = order.join(' ');
+    // let orderString = '';
+    // order.forEach(preference => (orderString = `${orderString}${preference} `));
+
+    let saveInRecents = cfg.saveInRecents ?? DEFAULT_SAVE_IN_RECENTS;
+    if (cfg.saveInRecents && cfg.saveInRecentsOnlyOnEnter) {
+      if (
+        !eventValue.event ||
+        (eventValue.event instanceof KeyboardEvent &&
+          eventValue.event.key === 'Enter')
+      ) {
+        saveInRecents = true; // save in recents only on enter or change in category
+      } else {
+        // do not save in recent search on typing
+        saveInRecents = false;
+      }
+    }
+    const requestParameters: ISearchQuery = {
+      match: eventValue.input,
+      sources: this._categoryToSourceName(this.category),
+      limit: cfg.limit ?? DEFAULT_LIMIT,
+      limitByType: cfg.limitByType ?? DEFAULT_LIMIT_TYPE,
+      order: orderString,
+      offset: cfg.offset ?? DEFAULT_OFFSET,
+    };
+
+    this.searching = true;
+    this.cdr.markForCheck();
+    this.searchService
+      .searchApiRequest(requestParameters, saveInRecents)
+      .subscribe(
+        (value: T[]) => {
+          this.suggestions = value;
+          this.searching = false;
+          this.cdr.markForCheck();
+        },
+        (_error: Error) => {
+          this.suggestions = [];
+          this.searching = false;
+          this.cdr.markForCheck();
+        },
+      );
+  }
+  getRecentSearches() {
+    const cfg = this.config();
+    if (!cfg || cfg.hideRecentSearch) return;
+    this.searchService.recentSearchApiRequest?.().subscribe(
+      (value: ISearchQuery[]) => {
+        this.recentSearches = value;
+        this.cdr.markForCheck();
+      },
+      (_error: Error) => {
+        this.recentSearches = [];
+        this.cdr.markForCheck();
+      },
+    );
+  }
+
+  hitSearchApi(event?: Event) {
+    // this will happen only in case user searches something and
+    // then erases it, we need to update recent search
+    const cfg = this.config();
+    if (!cfg) return;
+    if (!this.searchBoxInput) {
+      this.suggestions = [];
+      this.getRecentSearches();
+      return;
+    }
+
+    // no debounce time needed in case of searchOnlyOnEnter
+    if (cfg.searchOnlyOnEnter) {
+      if (!event || (event instanceof KeyboardEvent && event.key === 'Enter')) {
+        this.getSuggestions({input: this.searchBoxInput, event});
+      }
+      return;
+    }
+
+    // no debounce time needed in case of change in category
+    if (!event) {
+      this.getSuggestions({input: this.searchBoxInput, event});
+      return;
+    }
+
+    this.searchRequest$.next({
+      input: this.searchBoxInput,
+      event,
+    });
+  }
+
+  populateValue(suggestion: T, event: MouseEvent) {
+    const cfg = this.config();
+    if (!cfg) return;
+    this.searchBoxInput = String(suggestion[cfg.displayPropertyName]);
+    // converted to string to assign value to searchBoxInput
+    // this.searchBoxInput = value;
+    this.suggestionsDisplay = false;
+    // ngModelChange doesn't detect change in value
+    // when populated from outside, hence calling manually
+    this.onChange(this.searchBoxInput);
+    // need to do this to show more search options for selected
+    //suggestion - just in case user reopens search input
+    this.getSuggestions({input: this.searchBoxInput, event});
+    this.clicked.emit({item: suggestion, event});
+  }
+  populateValueRecentSearch(recentSearch: ISearchQuery, event: MouseEvent) {
+    event.stopPropagation();
+    event.preventDefault();
+    const value = recentSearch['match'];
+    this.searchBoxInput = value;
+    this.suggestionsDisplay = false;
+    this.onChange(this.searchBoxInput);
+    // need to do this to show more search options for selected
+    // suggestion - just in case user reopens search input
+    this.getSuggestions({input: this.searchBoxInput, event});
+    this.focusInput();
+    this.showSuggestions();
+  }
+
+  fetchModelImageUrlFromSuggestion(suggestion: T) {
+    const modelName = suggestion[
+      'source' as unknown as keyof T
+    ] as unknown as string;
+    let url: string | undefined;
+    this.config()?.models.forEach(model => {
+      if (model.name === modelName && model.imageUrl) {
+        url = model.imageUrl;
+      }
+    });
+    return url;
+  }
+
+  boldString(str: T[keyof T] | string, substr: string) {
+    const strRegExp = new RegExp(`(${substr})`, 'gi');
+    const stringToMakeBold: string = str as unknown as string;
+    return stringToMakeBold.replace(strRegExp, `<b>$1</b>`);
+  }
+
+  hideSuggestions() {
+    this.suggestionsDisplay = false;
+    this.onTouched();
+  }
+
+  showSuggestions() {
+    this.suggestionsDisplay = true;
+    this.getRecentSearches();
+  }
+
+  focusInput() {
+    if (
+      isPlatformBrowser(this.platformId) &&
+      !this.showOnlySearchResultOverlay()
+    ) {
+      this.searchInputElement.nativeElement.focus();
+    }
+  }
+
+  setCategory(category: string) {
+    this.category = category;
+    this.categoryDisplay = false;
+    if (this.searchBoxInput) {
+      this.hitSearchApi();
+      this.focusInput();
+      this.showSuggestions();
+    }
+  }
+
+  showCategory() {
+    this.categoryDisplay = !this.categoryDisplay;
+  }
+
+  hideCategory() {
+    this.categoryDisplay = false;
+  }
+
+  resetInput() {
+    this.searchBoxInput = '';
+    this.suggestions = [];
+    this.suggestionsDisplay = true;
+    this.focusInput();
+    // ngModelChange doesn't detect change in value
+    // when populated from outside, hence calling manually
+    this.onChange(this.searchBoxInput);
+    this.getRecentSearches();
+  }
+  ngOnDestroy() {
+    this.searchRequest$.unsubscribe();
+  }
+
+  _categoryToSourceName(category: string) {
+    if ([ALL_LABEL, this.customAllLabel()].includes(category)) {
+      return [];
+    } else {
+      return [category];
+    }
+  }
+  getModelFromModelName(name: string) {
+    return this.config()?.models.find(item => item.name === name) as IModel;
+  }
+  getModelsWithSuggestions() {
+    const modelsWithSuggestions: {model: IModel; items: T[]}[] = [];
+    const sources: string[] = [];
+    this.suggestions.forEach(suggestion => {
+      if (sources.indexOf(suggestion['source']) >= 0) {
+        modelsWithSuggestions.every(modelWithSuggestions => {
+          if (modelWithSuggestions.model.name === suggestion['source']) {
+            modelWithSuggestions.items.push(suggestion);
+            return false;
+          }
+          return true;
+        });
+      } else {
+        const model = this.getModelFromModelName(suggestion['source']);
+        modelsWithSuggestions.push({model, items: [suggestion]});
+        sources.push(suggestion['source']);
+      }
+    });
+    return modelsWithSuggestions;
+  }
+
+  searchOnCustomEventValueChange(value: string) {
+    if (value?.length) {
+      this.showSuggestions();
+      this.hitSearchApi();
+    } else {
+      this.hideSuggestions();
+    }
+  }
+
+  private _isCustomSearchEventChange(
+    changes: SimpleChanges,
+    propertyName: string,
+  ) {
+    return (
+      !changes.customSearchEvent?.previousValue ||
+      changes.customSearchEvent?.previousValue[propertyName] !==
+        changes.customSearchEvent?.currentValue[propertyName]
+    );
+  }
+}

package/src/lib/search-element.module.ts

@@ -0,0 +1,49 @@
+// Copyright (c) 2023 Sourcefuse Technologies
+//
+// This software is released under the MIT License.
+// https://opensource.org/licenses/MIT
+import {CommonModule} from '@angular/common';
+import {HttpClientModule} from '@angular/common/http';
+import {Injector, NgModule} from '@angular/core';
+import {FlexLayoutModule} from '@angular/flex-layout';
+import {FormsModule} from '@angular/forms';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatIconModule} from '@angular/material/icon';
+import {MatInputModule} from '@angular/material/input';
+import {MatSelectModule} from '@angular/material/select';
+import {MatButtonModule} from '@angular/material/button';
+import {createCustomElement} from '@angular/elements';
+import {SearchComponent} from './search/search.component';
+import {BrowserModule} from '@angular/platform-browser';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {Configuration} from './lib-configuration';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    BrowserAnimationsModule,
+    CommonModule,
+    FormsModule,
+    HttpClientModule,
+    MatSelectModule,
+    MatFormFieldModule,
+    MatIconModule,
+    MatInputModule,
+    MatButtonModule,
+    FlexLayoutModule,
+    SearchComponent,
+  ],
+})
+export class SearchElementModule {
+  constructor(private injector: Injector) {}
+  ngDoBootstrap() {
+    const webComponent = createCustomElement(SearchComponent, {
+      injector: this.injector,
+    });
+    customElements.define('sourceloop-search-element', webComponent);
+    // to export the Configuration class for vanilla JS projects
+    Object.assign(window, {
+      SearchConfiguration: Configuration,
+    });
+  }
+}

package/src/lib/types.ts

@@ -0,0 +1,85 @@
+// Copyright (c) 2023 Sourcefuse Technologies
+//
+// This software is released under the MIT License.
+// https://opensource.org/licenses/MIT
+import {InjectionToken} from '@angular/core';
+import {Observable} from 'rxjs';
+
+export interface ISearchQuery {
+  match: string;
+  limit: number | null;
+  order: string | null;
+  limitByType: boolean | null;
+  offset: number | null;
+  sources: string[] | null;
+}
+export interface IModel {
+  name: string;
+  displayName: string;
+  imageUrl?: string;
+  icon?: string;
+}
+export interface IReturnType {
+  rank: number;
+  source: string;
+}
+export interface IDefaultReturnType extends IReturnType {
+  name: string;
+  description: string;
+}
+
+export interface ISearchService<T extends IReturnType> {
+  searchApiRequest(
+    requestParameters: ISearchQuery,
+    saveInRecents: boolean,
+  ): Observable<T[]>;
+  recentSearchApiRequest?(): Observable<ISearchQuery[]>;
+}
+
+export interface ISearchServiceWithPromises<T extends IReturnType> {
+  searchApiRequestWithPromise(
+    requestParameters: ISearchQuery,
+    saveInRecents: boolean,
+  ): Promise<T[]>;
+  recentSearchApiRequestWithPromise?(): Promise<ISearchQuery[]>;
+}
+
+export function isApiServiceWithPromise(
+  service:
+    | ISearchService<IReturnType>
+    | ISearchServiceWithPromises<IReturnType>,
+): service is ISearchServiceWithPromises<IReturnType> {
+  return !!(service as ISearchServiceWithPromises<IReturnType>)
+    .searchApiRequestWithPromise;
+}
+
+// cant use T extends IReturnType here
+export const SEARCH_SERVICE_TOKEN: InjectionToken<ISearchService<IReturnType>> =
+  new InjectionToken<ISearchService<IReturnType>>('Search_Service_Token');
+
+export type RecentSearchEvent = {
+  event?: Event;
+  keyword: string;
+  category: string;
+};
+
+export type ItemClickedEvent<T> = {
+  event: MouseEvent;
+  item: T;
+};
+
+export type TypeEvent = {
+  event?: Event;
+  input: string;
+};
+// IRequestParameters default values
+export const DEFAULT_LIMIT = 20;
+export const DEFAULT_LIMIT_TYPE = false;
+export const DEFAULT_ORDER = [];
+export const DEBOUNCE_TIME = 1000;
+export const DEFAULT_OFFSET = 0;
+export const DEFAULT_SAVE_IN_RECENTS = true;
+export type CustomSearchEvent = {
+  searchValue: string;
+  modelName: string;
+};

package/src/main.ts

@@ -0,0 +1,9 @@
+import {enableProdMode} from '@angular/core';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+import {SearchElementModule} from './lib/search-element.module';
+
+enableProdMode();
+
+platformBrowserDynamic()
+  .bootstrapModule(SearchElementModule)
+  .catch(err => console.error(err));

package/src/polyfills.ts

@@ -0,0 +1,53 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes recent versions of Safari, Chrome (including
+ * Opera), Edge on the desktop, and iOS and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ *
+ *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ *  with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ *  (window as any).__Zone_enable_cross_context_check = true;
+ *
+ */
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js';  // Included with Angular CLI.
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */

package/src/public-api.ts

@@ -0,0 +1,10 @@
+// Copyright (c) 2023 Sourcefuse Technologies
+//
+// This software is released under the MIT License.
+// https://opensource.org/licenses/MIT
+/*
+ * Public API Surface of my-lib
+ */
+export * from './lib/search/search.component';
+export * from './lib/lib-configuration';
+export * from './lib/types';

package/src/styles.scss

@@ -0,0 +1,4 @@
+@import 'https://fonts.googleapis.com/icon?family=Material+Icons+Round';
+@import 'https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap';
+@import '../../../node_modules/@angular/material/prebuilt-themes/indigo-pink.css';
+@import '../src/assets/icomoon/style.css';

package/src/test.ts

@@ -0,0 +1,32 @@
+// Copyright (c) 2023 Sourcefuse Technologies
+//
+// This software is released under the MIT License.
+// https://opensource.org/licenses/MIT
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+import 'zone.js';
+import 'zone.js/testing';
+import {getTestBed} from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting,
+} from '@angular/platform-browser-dynamic/testing'; // NOSONAR
+
+declare const require: {
+  context(
+    path: string,
+    deep?: boolean,
+    filter?: RegExp,
+  ): {
+    keys(): string[];
+    <T>(id: string): T;
+  };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting(),
+  {
+    teardown: {destroyAfterEach: false},
+  },
+);