Add connection lifecycle events to typeahead data sources

Introduced `onConnected` and `onDisconnected` observables to manage connection lifecycle events for `TypeaheadDataSource` and related classes. Updated constructors, methods, and dependencies to handle these events, ensuring better lifecycle management. Also reintroduced `ngDoCheck` to refine error state updates. Updated package versions to reflect changes.

Author: jean-merelis

projects/merelis/angular-material/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@merelis/angular-material",
-    "version": "1.0.2",
+    "version": "1.3.3",
     "license": "MIT",
     "author": "Jean Merelis",
     "repository": {

projects/merelis/angular-material/select/src/select-form-control.ts

@@ -165,21 +165,21 @@ export class MerSelectFormFieldControl<T> implements MatFormFieldControl<T>, OnI
         }
     }
 
-    // ngDoCheck() {
-    //     if (this.ngControl) {
-    //         // We need to re-evaluate this on every change detection cycle, because there are some
-    //         // error triggers that we can't subscribe to (e.g. parent form submissions). This means
-    //         // that whatever logic is in here has to be super lean or we risk destroying the performance.
-    //         this.updateErrorState();
-    //
-    //     }
-    //
-    //     // We need to dirty-check and set the placeholder attribute ourselves, because whether it's
-    //     // present or not depends on a query which is prone to "changed after checked" errors.
-    //     this._dirtyCheckPlaceholder();
-    // }
-    //
-    //
+    ngDoCheck() {
+        if (this.ngControl) {
+            // We need to re-evaluate this on every change detection cycle, because there are some
+            // error triggers that we can't subscribe to (e.g. parent form submissions). This means
+            // that whatever logic is in here has to be super lean or we risk destroying the performance.
+            this.updateErrorState();
+
+        }
+
+        // We need to dirty-check and set the placeholder attribute ourselves, because whether it's
+        // present or not depends on a query which is prone to "changed after checked" errors.
+        //  this._dirtyCheckPlaceholder();
+    }
+
+
     // private _previousPlaceholder?: string | null;
     // /** Does some manual dirty checking on the native input `placeholder` attribute. */
     // private _dirtyCheckPlaceholder() {
@@ -192,7 +192,7 @@ export class MerSelectFormFieldControl<T> implements MatFormFieldControl<T>, OnI
     //         //     : element.removeAttribute('placeholder');
     //     }
     // }
-    //
+
     // /** Gets the current placeholder of the form field. */
     // protected _getPlaceholder(): string | null {
     //     return this.placeholder || null;

projects/merelis/angular/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@merelis/angular",
-    "version": "1.3.2",
+    "version": "1.3.3",
     "license": "MIT",
     "author": "Jean Merelis",
     "repository": {

projects/merelis/angular/select/select/select.datasource.ts

@@ -1,5 +1,5 @@
 import { Comparable, DisplayWith, FilterPredicate } from "../types";
-import { BehaviorSubject, Observable } from "rxjs";
+import { BehaviorSubject, Observable, Subject } from "rxjs";
 
 export interface FilterCriteria<T> {
     searchText?: string;
@@ -37,6 +37,8 @@ export class MerSelectDataSource<T> implements SelectDataSource<T> {
     protected _filteredData = new BehaviorSubject<T[]>([]);
     protected _currentFilter = new BehaviorSubject<FilterCriteria<T>>({});
     protected _alwaysIncludesSelected = false;
+    protected _onConnected = new Subject<void>();
+    protected _onDisconnected = new Subject<void>();
 
     get data(): T[] {
         return this._data.value;
@@ -74,6 +76,14 @@ export class MerSelectDataSource<T> implements SelectDataSource<T> {
         this._applyFilters();
     }
 
+    get onConnected(): Observable<void> {
+        return this._onConnected.asObservable();
+    }
+
+    get onDisconnected(): Observable<void> {
+        return this._onDisconnected.asObservable();
+    }
+
     constructor(data?: T[], options?: {
         alwaysIncludesSelected?: boolean,
         compareWith?: Comparable<T>,
@@ -100,17 +110,20 @@ export class MerSelectDataSource<T> implements SelectDataSource<T> {
     }
 
     connect(): Observable<T[]> {
+        this._onConnected.next();
         return this._filteredData.asObservable();
     }
 
     disconnect(): void {
-        // No need to track viewers anymore
-    }
-
-    dispose(): void {
         this._data.complete();
         this._filteredData.complete();
         this._currentFilter.complete();
+        this._onConnected.complete();
+        this._onDisconnected.complete();
+        this._onConnected.complete();
+
+        this._onDisconnected.next();
+        this._onDisconnected.complete();
     }
 
     loading(): Observable<boolean> | undefined {

projects/merelis/angular/select/select/typeadhead.datasource.ts

@@ -14,6 +14,8 @@ export interface TypeaheadSearchService<T> {
     search(query: string): Observable<T[]>;
 }
 
+export type TypeaheadSearchFn<T> = (query: string) => Observable<T[]>;
+
 export interface TypeaheadDataSourceOptions<T> {
 
     /**
@@ -43,6 +45,9 @@ export class TypeaheadDataSource<T> implements SelectDataSource<T> {
     // Stream of current data
     private data = new BehaviorSubject<T[]>([]);
 
+    protected _onConnected = new Subject<void>();
+    protected _onDisconnected = new Subject<void>();
+
     // Stream of loading state
     private loading$ = new BehaviorSubject<boolean>(false);
 
@@ -54,12 +59,36 @@ export class TypeaheadDataSource<T> implements SelectDataSource<T> {
     private compareWith: (a: T, b: T) => boolean;
 
     /**
-     * Creates a new TypeaheadDataSource
-     * @param searchService Service that implements the search functionality
-     * @param options
+     * Returns an Observable that emits when the connection is established.
+     *
+     * @return {Observable<void>} An Observable that emits a void value when the connection occurs.
+     */
+    get onConnected(): Observable<void> {
+        return this._onConnected.asObservable();
+    }
+
+    /**
+     * Returns an observable that emits when the disconnection event occurs.
+     *
+     * @return {Observable<void>} An observable that emits a void value upon disconnection.
+     */
+    get onDisconnected(): Observable<void> {
+        return this._onDisconnected.asObservable();
+    }
+
+    /**
+     * Constructs an instance of the class with the provided search service and options.
+     * Initializes the typeahead search pipeline, including handling cancellation of previous search requests, managing the inclusion of selected items, and emitting search results.
+     *
+     * @param {TypeaheadSearchFn<T> | TypeaheadSearchService<T>} searchService - The service or function used to perform the typeahead search. If a function is provided, it should return an observable with the search results.
+     * @param {TypeaheadDataSourceOptions<T>} [options={}] - Optional configuration options for the typeahead data source. Includes settings such as whether to always include selected items or suppress loading events.
+     * - `alwaysIncludeSelected`: Whether to always include selected items in the search results.
+     * - `suppressLoadingEvents`: Whether to suppress loading indicators during search operations.
+     * - `compareWith`: A comparison function to determine equality between items.
+     *
      */
     constructor(
-        private searchService: TypeaheadSearchService<T>,
+        private searchService: TypeaheadSearchFn<T> | TypeaheadSearchService<T>,
         private options: TypeaheadDataSourceOptions<T> = {}
     ) {
         this.alwaysIncludeSelected = options.alwaysIncludeSelected ?? false;
@@ -75,7 +104,12 @@ export class TypeaheadDataSource<T> implements SelectDataSource<T> {
                   this.loading$.next(true);
                 }
 
-                return this.searchService.search(criteria.searchText || '').pipe(
+                const searchQuery = criteria.searchText || '';
+                const searchResult = typeof this.searchService === 'function'
+                    ? this.searchService(searchQuery)
+                    : this.searchService.search(searchQuery);
+
+                return searchResult.pipe(
                     // Process the results to include selected items if needed
                     map(results => {
                         // Only process if we have search text, selected items, and alwaysIncludeSelected is true
@@ -137,6 +171,7 @@ export class TypeaheadDataSource<T> implements SelectDataSource<T> {
      * Required by SelectDataSource interface - returns the data stream
      */
     connect(): Observable<T[]> {
+        this._onConnected.next();
         return this.data.asObservable();
     }
 
@@ -147,6 +182,10 @@ export class TypeaheadDataSource<T> implements SelectDataSource<T> {
         this.searchSubject.complete();
         this.loading$.complete();
         this.data.complete();
+        this._onConnected.complete();
+
+        this._onDisconnected.next();
+        this._onDisconnected.complete();
     }
 
     /**
@@ -160,7 +199,7 @@ export class TypeaheadDataSource<T> implements SelectDataSource<T> {
      * Main method used by MerSelect for filtering
      * @param criteria The filter criteria from the component
      */
-    async applyFilter(criteria: FilterCriteria<T>): Promise<void> {
+    applyFilter(criteria: FilterCriteria<T>): void {
         // Pass the entire criteria object to our subject
         this.searchSubject.next(criteria);
     }