ngx-mat-searchable-select 1.0.0 → 2.0.0

package/projects/demo/tsconfig.spec.json

@@ -1,15 +0,0 @@
-/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
-/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/spec",
-    "types": [
-      "vitest/globals"
-    ]
-  },
-  "include": [
-    "src/**/*.d.ts",
-    "src/**/*.spec.ts"
-  ]
-}

package/projects/ngx-mat-searchable-select/README.md

@@ -1,262 +0,0 @@
-# ngx-mat-searchable-select
-
-A reusable Angular Material select component with **infinite scroll**, **debounced search**, **"no items found" feedback**, and **static/mock data support** — built with Angular 21 standalone components and signals.
-
-## Features
-
-- Infinite scroll pagination for large server-side datasets
-- 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
-- Static items input — no server required for demos and tests
-- Built-in `MockSearchableSelectDataSource` for development and unit tests
-- Font icon and SVG icon support (no icon registration required for font icons)
-- Fully standalone, signal-based, zoneless-ready
-
-## Requirements
-
-- Angular `^21.1.0`
-- Angular Material `^21.1.0`
-- RxJS `~7.8.0`
-
-## Installation
-
-```bash
-npm install ngx-mat-searchable-select
-```
-
-## Quick Start
-
-### Option A — Static items (no backend needed)
-
-```typescript
-import { Component, inject } from '@angular/core';
-import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
-import {
-  NgxMatSearchableSelectComponent,
-  SearchableSelectConfig,
-} from 'ngx-mat-searchable-select';
-
-@Component({
-  selector: 'app-example',
-  standalone: true,
-  imports: [ReactiveFormsModule, NgxMatSearchableSelectComponent],
-  template: `
-    <ngx-mat-searchable-select
-      [parentForm]="form"
-      [config]="config"
-      [staticItems]="cities"
-      (selectionChange)="onSelect($event)"
-    />
-  `,
-})
-export class ExampleComponent {
-  form = inject(FormBuilder).group({
-    city: [null, Validators.required],
-  });
-
-  cities = [
-    { id: 1, name: 'Paris' },
-    { id: 2, name: 'London' },
-    { id: 3, name: 'Berlin' },
-  ];
-
-  config: SearchableSelectConfig = {
-    option: {
-      label: 'City',
-      formControlName: 'city',
-      displayName: 'name',
-      isRequired: true,
-      fontIcon: 'location_city',
-    },
-    mode: 'create',
-    searchable: true,
-  };
-
-  onSelect(event: any) {
-    console.log('Selected:', event.value);
-  }
-}
-```
-
-### Option B — Server-driven with pagination
-
-```typescript
-import { Injectable, inject } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { Observable } from 'rxjs';
-import {
-  SearchableSelectDataSource,
-  PagedRequest,
-  PagedResponse,
-} from 'ngx-mat-searchable-select';
-
-@Injectable({ providedIn: 'root' })
-export class CityService implements SearchableSelectDataSource {
-  private http = inject(HttpClient);
-
-  getAll(request: PagedRequest): Observable<PagedResponse<Record<string, unknown>>> {
-    return this.http.get<PagedResponse<Record<string, unknown>>>('/api/cities', {
-      params: {
-        skip: request.skip,
-        take: request.take,
-        search: request.searchString,
-      },
-    });
-  }
-}
-```
-
-Then in your component:
-
-```typescript
-config: SearchableSelectConfig = {
-  dataSource: inject(CityService),
-  option: {
-    label: 'City',
-    formControlName: 'city',
-    displayName: 'name',
-    isRequired: true,
-    fontIcon: 'location_city',
-  },
-  mode: 'create',
-  searchable: true,
-};
-```
-
-### 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.
-
-```typescript
-config: SearchableSelectConfig = {
-  dataSource: inject(CityService),
-  option: {
-    label: 'City',
-    formControlName: 'city',
-    displayName: 'name',
-    isRequired: true,
-    fontIcon: 'location_city',
-    currentId: 42,          // the pre-selected item's id
-    currentLabel: 'Madrid', // its display label
-  },
-  mode: 'edit',
-};
-```
-
-## API
-
-### Inputs
-
-| Input | Type | Required | Description |
-|---|---|---|---|
-| `parentForm` | `FormGroup` | Yes | The parent reactive form that contains the control |
-| `config` | `SearchableSelectConfig` | Yes | Component configuration object |
-| `staticItems` | `Record<string, unknown>[]` | No | Static item array — bypasses `dataSource` entirely |
-
-### Outputs
-
-| Output | Type | Description |
-|---|---|---|
-| `selectionChange` | `MatSelectChange` | Emits when the user picks an option |
-| `valueChange` | `unknown` | Emits the raw value on every change |
-
-### SearchableSelectConfig
-
-```typescript
-interface SearchableSelectConfig {
-  dataSource?: SearchableSelectDataSource; // required when staticItems is not provided
-  option: SearchableSelectOption;
-  mode: 'create' | 'edit';
-  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)
-}
-```
-
-### SearchableSelectOption
-
-```typescript
-interface SearchableSelectOption {
-  isRequired: boolean;       // mark the field as required
-  displayName: string;       // property key used to display each item (e.g. 'name')
-  formControlName: string;   // form control name in the parent FormGroup
-  label: string;             // dropdown label text
-  svgIcon?: string;          // Material SVG icon name (requires MatIconRegistry)
-  fontIcon?: string;         // Material font icon name (no registration needed)
-  currentId?: number;        // pre-selected item id (edit mode)
-  currentLabel?: string;     // pre-selected item label (edit mode)
-}
-```
-
-> **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
-
-```typescript
-interface SearchableSelectDataSource {
-  getAll(request: PagedRequest): Observable<PagedResponse<Record<string, unknown>>>;
-}
-
-interface PagedRequest {
-  skip: number;
-  take: number;
-  searchString: string;
-  sort?: string;
-  id?: number;
-}
-
-interface PagedResponse<T> {
-  data: T[];
-  totalCount: number;
-}
-```
-
-## MockSearchableSelectDataSource
-
-For use in demos, StackBlitz, and unit tests:
-
-```typescript
-import { MockSearchableSelectDataSource } from 'ngx-mat-searchable-select';
-
-const dataSource = new MockSearchableSelectDataSource([
-  { id: 1, name: 'Paris' },
-  { id: 2, name: 'London' },
-]);
-
-config: SearchableSelectConfig = {
-  dataSource,
-  option: { ... },
-  mode: 'create',
-};
-```
-
-`MockSearchableSelectDataSource` supports:
-- Pagination via `skip` / `take`
-- Full-text search across all string-coercible fields
-
-## Migration from v1
-
-| v1 | v2 |
-|---|---|
-| `mat-list-shared` (npm) | `ngx-mat-searchable-select` |
-| `<lib-mat-list-shared>` | `<ngx-mat-searchable-select>` |
-| `MatListSharedComponent` | `NgxMatSearchableSelectComponent` |
-| `MatListSharedModule` | removed — import component directly |
-| `CustomMatList` class | `SearchableSelectConfig` interface |
-| `IMatListService` | `SearchableSelectDataSource` |
-| `IMatListOption` | `SearchableSelectOption` |
-| `IPagedMatListRequestDto` | `PagedRequest` |
-| `[reservedForm]` | `[parentForm]` |
-| `[matList]` | `[config]` |
-| `option.text` | `option.label` |
-| `option.svgIcon` (required) | `option.svgIcon` or `option.fontIcon` (both optional) |
-| `option.optionId` | `option.currentId` |
-| `option.optionLibelle` | `option.currentLabel` |
-| `searchAble` | `searchable` |
-| `isMultiSelect` | `multiple` |
-| `typeAction` | `mode` |
-| `filtre` | `filter` |
-| `service` | `dataSource` |

package/projects/ngx-mat-searchable-select/package.json

@@ -1,12 +0,0 @@
-{
-  "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/tsconfig.json

@@ -1,39 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "compileOnSave": false,
-  "compilerOptions": {
-    "baseUrl": "./",
-    "outDir": "./dist/out-tsc",
-    "forceConsistentCasingInFileNames": true,
-    "strict": true,
-    "noImplicitOverride": true,
-    "noPropertyAccessFromIndexSignature": true,
-    "noImplicitReturns": true,
-    "paths": {
-      "ngx-mat-searchable-select": [
-        "projects/ngx-mat-searchable-select/src/public-api"
-      ]
-    },
-    "noFallthroughCasesInSwitch": true,
-    "sourceMap": true,
-    "declaration": false,
-    "downlevelIteration": true,
-    "experimentalDecorators": true,
-    "moduleResolution": "bundler",
-    "importHelpers": true,
-    "target": "ES2022",
-    "module": "es2020",
-    "useDefineForClassFields": false
-  },
-  "angularCompilerOptions": {
-    "enableI18nLegacyMessageIdFormat": false,
-    "strictInjectionParameters": true,
-    "strictInputAccessModifiers": true,
-    "strictTemplates": true
-  },
-  "references": [
-    {
-      "path": "./projects/demo/tsconfig.app.json"
-    }
-  ]
-}