ngx-mat-searchable-select 1.0.0 → 2.0.0

package/README.md

@@ -5,7 +5,7 @@ A reusable Angular Material select component with **infinite scroll**, **debounc
 ## Features
 
 - Infinite scroll pagination for large server-side datasets
-- Debounced search with a sticky search bar and clear button
+- Debounced search with a sticky search bar, search icon, and clear button
 - "No items found" message when search returns no results
 - Single and multiple selection
 - Edit mode — keeps the pre-selected item visible even when not in the loaded page
@@ -20,21 +20,6 @@ A reusable Angular Material select component with **infinite scroll**, **debounc
 - Angular Material `^21.1.0`
 - RxJS `~7.8.0`
 
-## Try it
-See it in action at 
-
-* [https://stackblitz.com/~/github.com/khalilElmouedene/ngx-mat-searchable-select]
-
-  see example code, builds in browser, latest version, latest material version
-* [https://github.com/khalilElmouedene/ngx-mat-searchable-select]
-
-  pre-built, latest version, works on mobile
-
-
-## Contributions
-Contributions are welcome, please open an issue and preferably file a pull request.
-
-
 ## Installation
 
 ```bash
@@ -45,8 +30,6 @@ npm install ngx-mat-searchable-select
 
 ### Option A — Static items (no backend needed)
 
-The simplest way to use the component. Pass an array directly via `[staticItems]` — no `dataSource` needed.
-
 ```typescript
 import { Component, inject } from '@angular/core';
 import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
@@ -85,60 +68,7 @@ export class ExampleComponent {
       formControlName: 'city',
       displayName: 'name',
       isRequired: true,
-      fontIcon: 'location_city',   // Material font icon (no registration needed)
-    },
-    mode: 'create',
-    searchable: true,
-  };
-
-  onSelect(event: any) {
-    console.log('Selected:', event.value);
-  }
-}
-```
-
-### Option B — Mock data source with pagination
-
-Use `MockSearchableSelectDataSource` for demos and tests. It simulates server-side pagination and full-text search over a static array.
-
-```typescript
-import { Component, inject } from '@angular/core';
-import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
-import {
-  NgxMatSearchableSelectComponent,
-  SearchableSelectConfig,
-  MockSearchableSelectDataSource,
-} from 'ngx-mat-searchable-select';
-
-@Component({
-  selector: 'app-example',
-  standalone: true,
-  imports: [ReactiveFormsModule, NgxMatSearchableSelectComponent],
-  template: `
-    <ngx-mat-searchable-select
-      [parentForm]="form"
-      [config]="config"
-      (selectionChange)="onSelect($event)"
-    />
-  `,
-})
-export class ExampleComponent {
-  form = inject(FormBuilder).group({ language: [null] });
-
-  config: SearchableSelectConfig = {
-    dataSource: new MockSearchableSelectDataSource([
-      { id: 1, name: 'TypeScript' },
-      { id: 2, name: 'JavaScript' },
-      { id: 3, name: 'Python' },
-      { id: 4, name: 'Rust' },
-      { id: 5, name: 'Go' },
-    ]),
-    option: {
-      label: 'Language',
-      formControlName: 'language',
-      displayName: 'name',
-      isRequired: false,
-      fontIcon: 'code',
+      fontIcon: 'location_city',
     },
     mode: 'create',
     searchable: true,
@@ -150,9 +80,7 @@ export class ExampleComponent {
 }
 ```
 
-### Option C — Server-driven with real pagination
-
-Implement `SearchableSelectDataSource` in your service to connect to a real API.
+### Option B — Server-driven with pagination
 
 ```typescript
 import { Injectable, inject } from '@angular/core';
@@ -180,7 +108,7 @@ export class CityService implements SearchableSelectDataSource {
 }
 ```
 
-Then use it in your component:
+Then in your component:
 
 ```typescript
 config: SearchableSelectConfig = {
@@ -197,9 +125,10 @@ config: SearchableSelectConfig = {
 };
 ```
 
-### Option D — Edit mode (pre-selected value)
+### Option C — Edit mode (pre-selected value)
 
-When `mode: 'edit'` and the pre-selected item may not be on the first loaded page, the component automatically shows it as an extra option at the top.
+When `mode: 'edit'` and the pre-selected item may not be on the first loaded page,
+the component automatically shows it as an extra option at the top.
 
 ```typescript
 config: SearchableSelectConfig = {
@@ -217,25 +146,7 @@ config: SearchableSelectConfig = {
 };
 ```
 
-### Option E — Multiple selection
-
-```typescript
-config: SearchableSelectConfig = {
-  dataSource: new MockSearchableSelectDataSource(cities),
-  option: {
-    label: 'Favorite cities',
-    formControlName: 'cities',
-    displayName: 'name',
-    isRequired: false,
-    fontIcon: 'location_city',
-  },
-  mode: 'create',
-  searchable: true,
-  multiple: true,
-};
-```
-
-## API Reference
+## API
 
 ### Inputs
 
@@ -259,7 +170,7 @@ interface SearchableSelectConfig {
   dataSource?: SearchableSelectDataSource; // required when staticItems is not provided
   option: SearchableSelectOption;
   mode: 'create' | 'edit';
-  filter?: { id?: number };               // extra server-side filter
+  filter?: { id?: number };               // extra server-side filter (e.g. parent entity id)
   searchable?: boolean;                    // show search box (default: true)
   multiple?: boolean;                      // allow multi-select (default: false)
 }
@@ -280,7 +191,7 @@ interface SearchableSelectOption {
 }
 ```
 
-> **Icon usage:** Use `fontIcon` for quick setup with [Material Icons](https://fonts.google.com/icons) (just add the font link). Use `svgIcon` when you have custom SVG icons registered via `MatIconRegistry`. Both are optional — if neither is set, no prefix icon is shown.
+> **Icon usage:** Use `fontIcon` for quick setup with [Material Icons](https://fonts.google.com/icons) (just include the font link in your `index.html`). Use `svgIcon` when you have custom SVG icons registered via `MatIconRegistry`. Both are optional — if neither is set, no prefix icon is shown.
 
 ### SearchableSelectDataSource
 
@@ -305,7 +216,7 @@ interface PagedResponse<T> {
 
 ## MockSearchableSelectDataSource
 
-A ready-made in-memory data source for demos, StackBlitz, and unit tests:
+For use in demos, StackBlitz, and unit tests:
 
 ```typescript
 import { MockSearchableSelectDataSource } from 'ngx-mat-searchable-select';
@@ -314,32 +225,17 @@ const dataSource = new MockSearchableSelectDataSource([
   { id: 1, name: 'Paris' },
   { id: 2, name: 'London' },
 ]);
+
+config: SearchableSelectConfig = {
+  dataSource,
+  option: { ... },
+  mode: 'create',
+};
 ```
 
-It supports:
+`MockSearchableSelectDataSource` supports:
 - Pagination via `skip` / `take`
 - Full-text search across all string-coercible fields
-- Returns `Observable<PagedResponse>` just like a real server
-
-## Running the Demo
-
-The repo includes a full demo application under `projects/demo/`.
-
-```bash
-# Install dependencies
-npm install
-
-# Serve the demo locally
-ng serve demo
-```
-
-Then open [http://localhost:4200](http://localhost:4200). The demo showcases:
-
-1. **Static Items** — pass an array, no backend needed
-2. **Mock DataSource** — simulated pagination and search
-3. **Edit Mode** — pre-selected value shown at the top
-4. **Multiple Select** — pick several items at once
-5. **No Search** — dropdown without the search box
 
 ## Migration from v1
 
@@ -348,7 +244,7 @@ Then open [http://localhost:4200](http://localhost:4200). The demo showcases:
 | `mat-list-shared` (npm) | `ngx-mat-searchable-select` |
 | `<lib-mat-list-shared>` | `<ngx-mat-searchable-select>` |
 | `MatListSharedComponent` | `NgxMatSearchableSelectComponent` |
-| `MatListSharedModule` | removed — import the component directly |
+| `MatListSharedModule` | removed — import component directly |
 | `CustomMatList` class | `SearchableSelectConfig` interface |
 | `IMatListService` | `SearchableSelectDataSource` |
 | `IMatListOption` | `SearchableSelectOption` |
@@ -364,7 +260,3 @@ Then open [http://localhost:4200](http://localhost:4200). The demo showcases:
 | `typeAction` | `mode` |
 | `filtre` | `filter` |
 | `service` | `dataSource` |
-
-## License
-
-MIT

package/package.json

@@ -1,44 +1,12 @@
-{
-  "name": "ngx-mat-searchable-select",
-  "version": "1.0.0",
-  "scripts": {
-    "ng": "ng",
-    "start": "ng serve",
-    "build": "ng build",
-    "watch": "ng build --watch --configuration development",
-    "test": "ng test"
-  },
-  "license": "MIT",
-  "private": false,
-  "dependencies": {
-    "@angular/animations": "~21.1.3",
-    "@angular/cdk": "^21.1.3",
-    "@angular/common": "~21.1.3",
-    "@angular/compiler": "~21.1.3",
-    "@angular/core": "~21.1.3",
-    "@angular/forms": "~21.1.3",
-    "@angular/material": "^21.1.3",
-    "@angular/platform-browser": "~21.1.3",
-    "@angular/platform-browser-dynamic": "~21.1.3",
-    "@angular/router": "~21.1.3",
-    "rxjs": "~7.8.0",
-    "tslib": "^2.3.0",
-    "zone.js": "~0.15.1"
-  },
-  "devDependencies": {
-    "@angular-devkit/build-angular": "^21.1.3",
-    "@angular/build": "^21.1.3",
-    "@angular/cli": "~21.1.3",
-    "@angular/compiler-cli": "~21.1.3",
-    "@types/jasmine": "~3.10.0",
-    "@types/node": "^12.11.1",
-    "jasmine-core": "~4.0.0",
-    "karma": "~6.4.0",
-    "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage": "~2.1.0",
-    "karma-jasmine": "~4.0.0",
-    "karma-jasmine-html-reporter": "~1.7.0",
-    "ng-packagr": "^21.1.0",
-    "typescript": "~5.9.3"
-  }
-}
+{
+  "name": "ngx-mat-searchable-select",
+  "version": "2.0.0",
+  "license": "MIT",
+  "peerDependencies": {
+    "@angular/common": "^21.1.3",
+    "@angular/core": "^21.1.3",
+    "@angular/forms": "^21.1.3",
+    "@angular/material": "^21.1.3",
+    "rxjs": "~7.8.0"
+  }
+}

package/{projects/ngx-mat-searchable-select/src → src}/lib/mat-list-shared.component.html

@@ -1,75 +1,75 @@
-<mat-form-field style="width: 100%" [formGroup]="parentForm()">
-  <mat-label>{{ config().option.label }}</mat-label>
-
-  <mat-select
-    matSelectInfiniteScroll
-    (infiniteScroll)="fetchNextPage()"
-    [required]="config().option.isRequired"
-    [complete]="isScrollComplete()"
-    [formControlName]="config().option.formControlName"
-    (selectionChange)="onSelectionChange($event)"
-    (valueChange)="onValueChange($event)"
-    (closed)="onPanelClosed()"
-    [multiple]="config().multiple ?? false"
-  >
-    @if (config().searchable !== false) {
-      <div style="padding: 8px 16px 0; position: sticky; top: 0;  z-index: 1;" [formGroup]="searchForm">
-        <mat-form-field style="width: 100%">
-          <mat-icon matPrefix style="margin-right: 8px; color: rgba(0,0,0,.54)">search</mat-icon>
-          <input
-            matInput
-            formControlName="searchTerm"
-            (input)="onSearchInput()"
-            placeholder="Type to search..."
-            autocomplete="off"
-            style="padding: 4px 0;"
-          />
-          @if (searchForm.get('searchTerm')?.value) {
-            <button
-              mat-icon-button
-              matSuffix
-              aria-label="Clear"
-              (click)="resetSearch()"
-            >
-              <mat-icon>close</mat-icon>
-            </button>
-          }
-        </mat-form-field>
-      </div>
-    }
-
-    @if (showEditOption()) {
-      <mat-option [value]="config().option.currentId">
-        {{ config().option.currentLabel }}
-      </mat-option>
-    }
-
-    @for (item of items(); track item['id']) {
-      <mat-option [value]="item['id']">
-        {{ getDisplayLabel(item) }}
-      </mat-option>
-    }
-
-    @if (isLoading()) {
-      <mat-option disabled>Loading...</mat-option>
-    }
-
-    @if (noItemsFound()) {
-      <mat-option disabled>
-        <span style="color: rgba(0,0,0,.54); font-style: italic;">No items found</span>
-      </mat-option>
-    }
-  </mat-select>
-
-  @if (config().option.svgIcon) {
-    <mat-icon class="icon-size-5 text-primary" matPrefix [svgIcon]="config().option.svgIcon!"></mat-icon>
-  } @else if (config().option.fontIcon) {
-    <mat-icon class="icon-size-5 text-primary" matPrefix>{{ config().option.fontIcon }}</mat-icon>
-  }
-
-  @if (parentForm().get(config().option.formControlName)?.hasError('required')) {
-    <mat-error>
-      {{ config().option.label }} is required
-    </mat-error>
-  }
-</mat-form-field>
+<mat-form-field style="width: 100%" [formGroup]="parentForm()">
+  <mat-label>{{ config().option.label }}</mat-label>
+
+  <mat-select
+    matSelectInfiniteScroll
+    (infiniteScroll)="fetchNextPage()"
+    [required]="config().option.isRequired"
+    [complete]="isScrollComplete()"
+    [formControlName]="config().option.formControlName"
+    (selectionChange)="onSelectionChange($event)"
+    (valueChange)="onValueChange($event)"
+    (closed)="onPanelClosed()"
+    [multiple]="config().multiple ?? false"
+  >
+    @if (config().searchable !== false) {
+      <div style="padding: 8px 16px 0; position: sticky; top: 0;  z-index: 1;" [formGroup]="searchForm">
+        <mat-form-field style="width: 100%">
+          <mat-icon matPrefix style="margin-right: 8px; color: rgba(0,0,0,.54)">search</mat-icon>
+          <input
+            matInput
+            formControlName="searchTerm"
+            (input)="onSearchInput()"
+            placeholder="Type to search..."
+            autocomplete="off"
+            style="padding: 4px 0;"
+          />
+          @if (searchForm.get('searchTerm')?.value) {
+            <button
+              mat-icon-button
+              matSuffix
+              aria-label="Clear"
+              (click)="resetSearch()"
+            >
+              <mat-icon>close</mat-icon>
+            </button>
+          }
+        </mat-form-field>
+      </div>
+    }
+
+    @if (showEditOption()) {
+      <mat-option [value]="config().option.currentId">
+        {{ config().option.currentLabel }}
+      </mat-option>
+    }
+
+    @for (item of items(); track item['id']) {
+      <mat-option [value]="item['id']">
+        {{ getDisplayLabel(item) }}
+      </mat-option>
+    }
+
+    @if (isLoading()) {
+      <mat-option disabled>Loading...</mat-option>
+    }
+
+    @if (noItemsFound()) {
+      <mat-option disabled>
+        <span style="color: rgba(0,0,0,.54); font-style: italic;">No items found</span>
+      </mat-option>
+    }
+  </mat-select>
+
+  @if (config().option.svgIcon) {
+    <mat-icon class="icon-size-5 text-primary" matPrefix [svgIcon]="config().option.svgIcon!"></mat-icon>
+  } @else if (config().option.fontIcon) {
+    <mat-icon class="icon-size-5 text-primary" matPrefix>{{ config().option.fontIcon }}</mat-icon>
+  }
+
+  @if (parentForm().get(config().option.formControlName)?.hasError('required')) {
+    <mat-error>
+      {{ config().option.label }} is required
+    </mat-error>
+  }
+</mat-form-field>

package/{projects/ngx-mat-searchable-select/src → src}/lib/mat-list-shared.mock.ts

@@ -1,43 +1,43 @@
-import { Observable, of } from 'rxjs';
-import { SearchableSelectDataSource, PagedRequest, PagedResponse } from './mat-list-shared.model';
-
-/**
- * A ready-made data source backed by a static in-memory array.
- *
- * Use this when you want to demo or test the component without a real API:
- *
- * ```ts
- * const dataSource = new MockSearchableSelectDataSource([
- *   { id: 1, name: 'Paris' },
- *   { id: 2, name: 'London' },
- * ]);
- *
- * this.config = {
- *   dataSource,
- *   option: { ... },
- *   mode: 'create',
- * };
- * ```
- *
- * Search is applied across all string-coercible fields of each item.
- * Pagination uses the `skip` / `take` values from the request.
- */
-export class MockSearchableSelectDataSource implements SearchableSelectDataSource {
-  constructor(private readonly items: Record<string, unknown>[]) {}
-
-  getAll(request: PagedRequest): Observable<PagedResponse<Record<string, unknown>>> {
-    const term = request.searchString?.toLowerCase() ?? '';
-
-    const filtered = term
-      ? this.items.filter(item =>
-          Object.values(item).some(value =>
-            String(value ?? '').toLowerCase().includes(term)
-          )
-        )
-      : this.items;
-
-    const page = filtered.slice(request.skip, request.skip + request.take);
-
-    return of({ data: page, totalCount: filtered.length });
-  }
-}
+import { Observable, of } from 'rxjs';
+import { SearchableSelectDataSource, PagedRequest, PagedResponse } from './mat-list-shared.model';
+
+/**
+ * A ready-made data source backed by a static in-memory array.
+ *
+ * Use this when you want to demo or test the component without a real API:
+ *
+ * ```ts
+ * const dataSource = new MockSearchableSelectDataSource([
+ *   { id: 1, name: 'Paris' },
+ *   { id: 2, name: 'London' },
+ * ]);
+ *
+ * this.config = {
+ *   dataSource,
+ *   option: { ... },
+ *   mode: 'create',
+ * };
+ * ```
+ *
+ * Search is applied across all string-coercible fields of each item.
+ * Pagination uses the `skip` / `take` values from the request.
+ */
+export class MockSearchableSelectDataSource implements SearchableSelectDataSource {
+  constructor(private readonly items: Record<string, unknown>[]) {}
+
+  getAll(request: PagedRequest): Observable<PagedResponse<Record<string, unknown>>> {
+    const term = request.searchString?.toLowerCase() ?? '';
+
+    const filtered = term
+      ? this.items.filter(item =>
+          Object.values(item).some(value =>
+            String(value ?? '').toLowerCase().includes(term)
+          )
+        )
+      : this.items;
+
+    const page = filtered.slice(request.skip, request.skip + request.take);
+
+    return of({ data: page, totalCount: filtered.length });
+  }
+}

package/{projects/ngx-mat-searchable-select/src → src}/lib/mat-select-infinite-scroll.directive.ts

@@ -1,52 +1,52 @@
-import { Directive, EventEmitter, Input, OnDestroy, Output, Self } from '@angular/core';
-import { MatSelect } from '@angular/material/select';
-import { Subscription } from 'rxjs';
-
-@Directive({
-  selector: 'mat-select[matSelectInfiniteScroll]',
-  standalone: true,
-})
-export class MatSelectInfiniteScrollDirective implements OnDestroy {
-  @Input() complete = false;
-  @Input() threshold = 0.8;
-  @Output() infiniteScroll = new EventEmitter<void>();
-
-  private subscription = new Subscription();
-  private boundOnScroll = this.onScroll.bind(this);
-
-  constructor(@Self() private matSelect: MatSelect) {
-    this.subscription.add(
-      this.matSelect.openedChange.subscribe((isOpen: boolean) => {
-        if (isOpen) {
-          setTimeout(() => this.attachScrollListener());
-        } else {
-          this.detachScrollListener();
-        }
-      })
-    );
-  }
-
-  private attachScrollListener(): void {
-    const panel = this.matSelect.panel?.nativeElement as HTMLElement | undefined;
-    panel?.addEventListener('scroll', this.boundOnScroll);
-  }
-
-  private detachScrollListener(): void {
-    const panel = this.matSelect.panel?.nativeElement as HTMLElement | undefined;
-    panel?.removeEventListener('scroll', this.boundOnScroll);
-  }
-
-  private onScroll(event: Event): void {
-    if (this.complete) return;
-    const el = event.target as HTMLElement;
-    const scrollRatio = (el.scrollTop + el.clientHeight) / el.scrollHeight;
-    if (scrollRatio >= this.threshold) {
-      this.infiniteScroll.emit();
-    }
-  }
-
-  ngOnDestroy(): void {
-    this.detachScrollListener();
-    this.subscription.unsubscribe();
-  }
-}
+import { Directive, EventEmitter, Input, OnDestroy, Output, Self } from '@angular/core';
+import { MatSelect } from '@angular/material/select';
+import { Subscription } from 'rxjs';
+
+@Directive({
+  selector: 'mat-select[matSelectInfiniteScroll]',
+  standalone: true,
+})
+export class MatSelectInfiniteScrollDirective implements OnDestroy {
+  @Input() complete = false;
+  @Input() threshold = 0.8;
+  @Output() infiniteScroll = new EventEmitter<void>();
+
+  private subscription = new Subscription();
+  private boundOnScroll = this.onScroll.bind(this);
+
+  constructor(@Self() private matSelect: MatSelect) {
+    this.subscription.add(
+      this.matSelect.openedChange.subscribe((isOpen: boolean) => {
+        if (isOpen) {
+          setTimeout(() => this.attachScrollListener());
+        } else {
+          this.detachScrollListener();
+        }
+      })
+    );
+  }
+
+  private attachScrollListener(): void {
+    const panel = this.matSelect.panel?.nativeElement as HTMLElement | undefined;
+    panel?.addEventListener('scroll', this.boundOnScroll);
+  }
+
+  private detachScrollListener(): void {
+    const panel = this.matSelect.panel?.nativeElement as HTMLElement | undefined;
+    panel?.removeEventListener('scroll', this.boundOnScroll);
+  }
+
+  private onScroll(event: Event): void {
+    if (this.complete) return;
+    const el = event.target as HTMLElement;
+    const scrollRatio = (el.scrollTop + el.clientHeight) / el.scrollHeight;
+    if (scrollRatio >= this.threshold) {
+      this.infiniteScroll.emit();
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.detachScrollListener();
+    this.subscription.unsubscribe();
+  }
+}

package/.editorconfig

@@ -1,16 +0,0 @@
-# Editor configuration, see https://editorconfig.org
-root = true
-
-[*]
-charset = utf-8
-indent_style = space
-indent_size = 2
-insert_final_newline = true
-trim_trailing_whitespace = true
-
-[*.ts]
-quote_type = single
-
-[*.md]
-max_line_length = off
-trim_trailing_whitespace = false

package/.vscode/extensions.json

@@ -1,4 +0,0 @@
-{
-  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
-  "recommendations": ["angular.ng-template"]
-}