ngx-mat-searchable-select 1.0.0 → 2.0.0

package/.vscode/launch.json

@@ -1,20 +0,0 @@
-{
-  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-  "version": "0.2.0",
-  "configurations": [
-    {
-      "name": "ng serve",
-      "type": "pwa-chrome",
-      "request": "launch",
-      "preLaunchTask": "npm: start",
-      "url": "http://localhost:4200/"
-    },
-    {
-      "name": "ng test",
-      "type": "chrome",
-      "request": "launch",
-      "preLaunchTask": "npm: test",
-      "url": "http://localhost:9876/debug.html"
-    }
-  ]
-}

package/.vscode/tasks.json

@@ -1,42 +0,0 @@
-{
-  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
-  "version": "2.0.0",
-  "tasks": [
-    {
-      "type": "npm",
-      "script": "start",
-      "isBackground": true,
-      "problemMatcher": {
-        "owner": "typescript",
-        "pattern": "$tsc",
-        "background": {
-          "activeOnStart": true,
-          "beginsPattern": {
-            "regexp": "(.*?)"
-          },
-          "endsPattern": {
-            "regexp": "bundle generation complete"
-          }
-        }
-      }
-    },
-    {
-      "type": "npm",
-      "script": "test",
-      "isBackground": true,
-      "problemMatcher": {
-        "owner": "typescript",
-        "pattern": "$tsc",
-        "background": {
-          "activeOnStart": true,
-          "beginsPattern": {
-            "regexp": "(.*?)"
-          },
-          "endsPattern": {
-            "regexp": "bundle generation complete"
-          }
-        }
-      }
-    }
-  ]
-}

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2026 ngx-mat-searchable-select contributors
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/angular.json

@@ -1,151 +0,0 @@
-{
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "version": 1,
-  "newProjectRoot": "projects",
-  "projects": {
-    "ngx-mat-searchable-select": {
-      "projectType": "library",
-      "root": "projects/ngx-mat-searchable-select",
-      "sourceRoot": "projects/ngx-mat-searchable-select/src",
-      "prefix": "lib",
-      "architect": {
-        "build": {
-          "builder": "@angular-devkit/build-angular:ng-packagr",
-          "options": {
-            "project": "projects/ngx-mat-searchable-select/ng-package.json"
-          },
-          "configurations": {
-            "production": {
-              "tsConfig": "projects/ngx-mat-searchable-select/tsconfig.lib.prod.json"
-            },
-            "development": {
-              "tsConfig": "projects/ngx-mat-searchable-select/tsconfig.lib.json"
-            }
-          },
-          "defaultConfiguration": "production"
-        },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "main": "projects/ngx-mat-searchable-select/src/test.ts",
-            "tsConfig": "projects/ngx-mat-searchable-select/tsconfig.spec.json",
-            "karmaConfig": "projects/ngx-mat-searchable-select/karma.conf.js"
-          }
-        }
-      }
-    },
-    "demo": {
-      "projectType": "application",
-      "schematics": {
-        "@schematics/angular:component": {
-          "style": "scss",
-          "skipTests": true
-        },
-        "@schematics/angular:class": {
-          "skipTests": true
-        },
-        "@schematics/angular:directive": {
-          "skipTests": true
-        },
-        "@schematics/angular:guard": {
-          "skipTests": true
-        },
-        "@schematics/angular:interceptor": {
-          "skipTests": true
-        },
-        "@schematics/angular:pipe": {
-          "skipTests": true
-        },
-        "@schematics/angular:resolver": {
-          "skipTests": true
-        },
-        "@schematics/angular:service": {
-          "skipTests": true
-        }
-      },
-      "root": "projects/demo",
-      "sourceRoot": "projects/demo/src",
-      "prefix": "app",
-      "architect": {
-        "build": {
-          "builder": "@angular/build:application",
-          "options": {
-            "browser": "projects/demo/src/main.ts",
-            "tsConfig": "projects/demo/tsconfig.app.json",
-            "inlineStyleLanguage": "scss",
-            "assets": [
-              {
-                "glob": "**/*",
-                "input": "projects/demo/public"
-              }
-            ],
-            "styles": [
-              "projects/demo/src/styles.scss"
-            ]
-          },
-          "configurations": {
-            "production": {
-              "budgets": [
-                {
-                  "type": "initial",
-                  "maximumWarning": "500kB",
-                  "maximumError": "1MB"
-                },
-                {
-                  "type": "anyComponentStyle",
-                  "maximumWarning": "4kB",
-                  "maximumError": "8kB"
-                }
-              ],
-              "outputHashing": "all"
-            },
-            "development": {
-              "optimization": false,
-              "extractLicenses": false,
-              "sourceMap": true
-            }
-          },
-          "defaultConfiguration": "production"
-        },
-        "serve": {
-          "builder": "@angular/build:dev-server",
-          "configurations": {
-            "production": {
-              "buildTarget": "demo:build:production"
-            },
-            "development": {
-              "buildTarget": "demo:build:development"
-            }
-          },
-          "defaultConfiguration": "development"
-        }
-      }
-    }
-  },
-  "schematics": {
-    "@schematics/angular:component": {
-      "type": "component"
-    },
-    "@schematics/angular:directive": {
-      "type": "directive"
-    },
-    "@schematics/angular:service": {
-      "type": "service"
-    },
-    "@schematics/angular:guard": {
-      "typeSeparator": "."
-    },
-    "@schematics/angular:interceptor": {
-      "typeSeparator": "."
-    },
-    "@schematics/angular:module": {
-      "typeSeparator": "."
-    },
-    "@schematics/angular:pipe": {
-      "typeSeparator": "."
-    },
-    "@schematics/angular:resolver": {
-      "typeSeparator": "."
-    }
-  }
-}

package/projects/demo/src/app/app.config.ts

@@ -1,9 +0,0 @@
-import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
-import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
-
-export const appConfig: ApplicationConfig = {
-  providers: [
-    provideBrowserGlobalErrorListeners(),
-    provideAnimationsAsync(),
-  ],
-};

package/projects/demo/src/app/app.html

@@ -1,118 +0,0 @@
-<div class="demo-container">
-  <h1>ngx-mat-searchable-select</h1>
-  <p class="subtitle">Angular Material Select with infinite scroll, search, and static data support</p>
-
-  <div class="toolbar">
-    <button mat-stroked-button color="warn" (click)="resetAll()">Reset all forms</button>
-  </div>
-
-  <mat-tab-group animationDuration="200ms">
-    <!-- Tab 1: Static items -->
-    <mat-tab label="Static Items">
-      <mat-card class="demo-card">
-        <mat-card-header>
-          <mat-card-title>Static items (no backend)</mat-card-title>
-          <mat-card-subtitle>
-            Pass an array directly via <code>[staticItems]</code> — no dataSource needed.
-            Try searching for "Lon" or "Par".
-          </mat-card-subtitle>
-        </mat-card-header>
-        <mat-card-content>
-          <ngx-mat-searchable-select
-            [parentForm]="staticForm"
-            [config]="staticConfig"
-            [staticItems]="cities"
-            (selectionChange)="onCitySelect($event)"
-          />
-          @if (selectedCity) {
-            <p class="result">Selected city id: <strong>{{ selectedCity }}</strong></p>
-          }
-          <p class="form-value">Form value: {{ staticForm.value | json }}</p>
-        </mat-card-content>
-      </mat-card>
-    </mat-tab>
-
-    <!-- Tab 2: Mock data source -->
-    <mat-tab label="Mock DataSource">
-      <mat-card class="demo-card">
-        <mat-card-header>
-          <mat-card-title>MockSearchableSelectDataSource</mat-card-title>
-          <mat-card-subtitle>
-            Uses the built-in mock that simulates server pagination + search.
-            Initial page loads 5 items; scroll down to load more.
-          </mat-card-subtitle>
-        </mat-card-header>
-        <mat-card-content>
-          <ngx-mat-searchable-select
-            [parentForm]="mockForm"
-            [config]="mockConfig"
-            (selectionChange)="onLanguageSelect($event)"
-          />
-          @if (selectedLanguage) {
-            <p class="result">Selected language id: <strong>{{ selectedLanguage }}</strong></p>
-          }
-          <p class="form-value">Form value: {{ mockForm.value | json }}</p>
-        </mat-card-content>
-      </mat-card>
-    </mat-tab>
-
-    <!-- Tab 3: Edit mode -->
-    <mat-tab label="Edit Mode">
-      <mat-card class="demo-card">
-        <mat-card-header>
-          <mat-card-title>Edit mode with pre-selected value</mat-card-title>
-          <mat-card-subtitle>
-            Prague (id: 8) is pre-selected and shown even if not on the first loaded page.
-            Open the dropdown to see it.
-          </mat-card-subtitle>
-        </mat-card-header>
-        <mat-card-content>
-          <ngx-mat-searchable-select
-            [parentForm]="editForm"
-            [config]="editConfig"
-          />
-          <p class="form-value">Form value: {{ editForm.value | json }}</p>
-        </mat-card-content>
-      </mat-card>
-    </mat-tab>
-
-    <!-- Tab 4: Multiple selection -->
-    <mat-tab label="Multiple Select">
-      <mat-card class="demo-card">
-        <mat-card-header>
-          <mat-card-title>Multiple selection</mat-card-title>
-          <mat-card-subtitle>
-            Set <code>multiple: true</code> to allow selecting several items at once.
-          </mat-card-subtitle>
-        </mat-card-header>
-        <mat-card-content>
-          <ngx-mat-searchable-select
-            [parentForm]="multiForm"
-            [config]="multiConfig"
-          />
-          <p class="form-value">Form value: {{ multiForm.value | json }}</p>
-        </mat-card-content>
-      </mat-card>
-    </mat-tab>
-
-    <!-- Tab 5: Non-searchable -->
-    <mat-tab label="No Search">
-      <mat-card class="demo-card">
-        <mat-card-header>
-          <mat-card-title>Non-searchable select</mat-card-title>
-          <mat-card-subtitle>
-            Set <code>searchable: false</code> to hide the search box inside the dropdown.
-          </mat-card-subtitle>
-        </mat-card-header>
-        <mat-card-content>
-          <ngx-mat-searchable-select
-            [parentForm]="simpleForm"
-            [config]="simpleConfig"
-            [staticItems]="cities"
-          />
-          <p class="form-value">Form value: {{ simpleForm.value | json }}</p>
-        </mat-card-content>
-      </mat-card>
-    </mat-tab>
-  </mat-tab-group>
-</div>

package/projects/demo/src/app/app.scss

@@ -1,64 +0,0 @@
-:host {
-  display: block;
-  min-height: 100vh;
-  background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
-}
-
-.demo-container {
-  max-width: 800px;
-  margin: 0 auto;
-  padding: 40px 24px 60px;
-}
-
-h1 {
-  font-size: 2rem;
-  font-weight: 500;
-  margin: 0 0 4px;
-  color: #1565c0;
-}
-
-.subtitle {
-  color: #666;
-  margin: 0 0 32px;
-  font-size: 1rem;
-}
-
-.demo-card {
-  margin: 24px 0;
-  padding: 24px;
-  border-radius: 12px;
-}
-
-.result {
-  margin-top: 16px;
-  padding: 12px 16px;
-  background: #e8f5e9;
-  border-radius: 8px;
-  font-size: 0.9rem;
-  color: #2e7d32;
-}
-
-.form-value {
-  margin-top: 12px;
-  padding: 12px 16px;
-  background: #fff3e0;
-  border-radius: 8px;
-  font-size: 0.85rem;
-  color: #e65100;
-  font-family: 'Roboto Mono', monospace;
-  word-break: break-all;
-}
-
-.toolbar {
-  display: flex;
-  justify-content: flex-end;
-  margin-bottom: 16px;
-}
-
-.search-container {
-  padding: 8px 16px 0;
-  position: sticky;
-  top: 0;
-  background: white;
-  z-index: 1;
-}

package/projects/demo/src/app/app.ts

@@ -1,167 +0,0 @@
-import { Component, inject } from '@angular/core';
-import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
-import { MatTabsModule } from '@angular/material/tabs';
-import { MatCardModule } from '@angular/material/card';
-import { MatButtonModule } from '@angular/material/button';
-import { JsonPipe } from '@angular/common';
-import {
-  NgxMatSearchableSelectComponent,
-  SearchableSelectConfig,
-  MockSearchableSelectDataSource,
-} from 'ngx-mat-searchable-select';
-
-// ── Sample data ────────────────────────────────────────────
-const CITIES = [
-  { id: 1, name: 'Paris' },
-  { id: 2, name: 'London' },
-  { id: 3, name: 'Berlin' },
-  { id: 4, name: 'Madrid' },
-  { id: 5, name: 'Rome' },
-  { id: 6, name: 'Vienna' },
-  { id: 7, name: 'Warsaw' },
-  { id: 8, name: 'Prague' },
-  { id: 9, name: 'Amsterdam' },
-  { id: 10, name: 'Brussels' },
-  { id: 11, name: 'Lisbon' },
-  { id: 12, name: 'Athens' },
-  { id: 13, name: 'Dublin' },
-  { id: 14, name: 'Copenhagen' },
-  { id: 15, name: 'Stockholm' },
-  { id: 16, name: 'Helsinki' },
-  { id: 17, name: 'Oslo' },
-  { id: 18, name: 'Zurich' },
-  { id: 19, name: 'Budapest' },
-  { id: 20, name: 'Bucharest' },
-];
-
-const LANGUAGES = [
-  { id: 1, name: 'TypeScript' },
-  { id: 2, name: 'JavaScript' },
-  { id: 3, name: 'Python' },
-  { id: 4, name: 'Rust' },
-  { id: 5, name: 'Go' },
-  { id: 6, name: 'Java' },
-  { id: 7, name: 'C#' },
-  { id: 8, name: 'Kotlin' },
-  { id: 9, name: 'Swift' },
-  { id: 10, name: 'Ruby' },
-  { id: 11, name: 'PHP' },
-  { id: 12, name: 'Dart' },
-];
-
-@Component({
-  selector: 'app-root',
-  standalone: true,
-  imports: [
-    ReactiveFormsModule,
-    MatTabsModule,
-    MatCardModule,
-    MatButtonModule,
-    JsonPipe,
-    NgxMatSearchableSelectComponent,
-  ],
-  templateUrl: './app.html',
-  styleUrl: './app.scss',
-})
-export class App {
-  private readonly fb = inject(FormBuilder);
-
-  // ── Example 1: Static items (simplest) ───────────────────
-  readonly staticForm = this.fb.group({ city: [null, Validators.required] });
-  readonly staticConfig: SearchableSelectConfig = {
-    option: {
-      label: 'City',
-      formControlName: 'city',
-      displayName: 'name',
-      isRequired: true,
-      fontIcon: 'location_city',
-    },
-    mode: 'create',
-    searchable: true,
-  };
-
-  // ── Example 2: MockSearchableSelectDataSource ────────────
-  readonly mockForm = this.fb.group({ language: [null] });
-  readonly mockConfig: SearchableSelectConfig = {
-    dataSource: new MockSearchableSelectDataSource(LANGUAGES),
-    option: {
-      label: 'Language',
-      formControlName: 'language',
-      displayName: 'name',
-      isRequired: false,
-      fontIcon: 'code',
-    },
-    mode: 'create',
-    searchable: true,
-  };
-
-  // ── Example 3: Edit mode (pre-selected value) ───────────
-  readonly editForm = this.fb.group({ city: [8] }); // Prague pre-selected
-  readonly editConfig: SearchableSelectConfig = {
-    dataSource: new MockSearchableSelectDataSource(CITIES),
-    option: {
-      label: 'City',
-      formControlName: 'city',
-      displayName: 'name',
-      isRequired: true,
-      fontIcon: 'location_city',
-      currentId: 8,
-      currentLabel: 'Prague',
-    },
-    mode: 'edit',
-    searchable: true,
-  };
-
-  // ── Example 4: Multiple selection ────────────────────────
-  readonly multiForm = this.fb.group({ cities: [[]] });
-  readonly multiConfig: SearchableSelectConfig = {
-    dataSource: new MockSearchableSelectDataSource(CITIES),
-    option: {
-      label: 'Favorite cities',
-      formControlName: 'cities',
-      displayName: 'name',
-      isRequired: false,
-      fontIcon: 'location_city',
-    },
-    mode: 'create',
-    searchable: true,
-    multiple: true,
-  };
-
-  // ── Example 5: Non-searchable select ─────────────────────
-  readonly simpleForm = this.fb.group({ city: [null] });
-  readonly simpleConfig: SearchableSelectConfig = {
-    option: {
-      label: 'City (no search)',
-      formControlName: 'city',
-      displayName: 'name',
-      isRequired: false,
-      fontIcon: 'place',
-    },
-    mode: 'create',
-    searchable: false,
-  };
-
-  readonly cities = CITIES;
-
-  selectedCity: unknown = null;
-  selectedLanguage: unknown = null;
-
-  onCitySelect(event: any): void {
-    this.selectedCity = event.value;
-  }
-
-  onLanguageSelect(event: any): void {
-    this.selectedLanguage = event.value;
-  }
-
-  resetAll(): void {
-    this.staticForm.reset();
-    this.mockForm.reset();
-    this.editForm.reset({ city: 8 });
-    this.multiForm.reset({ cities: [] as any });
-    this.simpleForm.reset();
-    this.selectedCity = null;
-    this.selectedLanguage = null;
-  }
-}

package/projects/demo/src/index.html

@@ -1,16 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>ngx-mat-searchable-select — Demo</title>
-  <base href="/">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <!-- Google Fonts: Roboto + Material Icons -->
-  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-</head>
-<body>
-  <app-root></app-root>
-</body>
-</html>

package/projects/demo/src/main.ts

@@ -1,6 +0,0 @@
-import { bootstrapApplication } from '@angular/platform-browser';
-import { appConfig } from './app/app.config';
-import { App } from './app/app';
-
-bootstrapApplication(App, appConfig)
-  .catch((err) => console.error(err));

package/projects/demo/src/styles.scss

@@ -1,31 +0,0 @@
-@use '@angular/material' as mat;
-
-// Use a prebuilt Angular Material theme
-html {
-  @include mat.theme((
-    color: (
-      theme-type: light,
-      primary: mat.$azure-palette,
-      tertiary: mat.$blue-palette,
-    ),
-    typography: Roboto,
-    density: 0,
-  ));
-}
-
-/* ── Global resets ──────────────────────────────────────── */
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-html,
-body {
-  margin: 0;
-  padding: 0;
-  font-family: Roboto, 'Helvetica Neue', sans-serif;
-  background: #fafafa;
-  color: #333;
-  min-height: 100vh;
-}

package/projects/demo/tsconfig.app.json

@@ -1,17 +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/app",
-    "types": []
-  },
-  "include": [
-    "src/**/*.ts",
-    "../ngx-mat-searchable-select/src/**/*.ts"
-  ],
-  "exclude": [
-    "src/**/*.spec.ts",
-    "../ngx-mat-searchable-select/src/**/*.spec.ts"
-  ]
-}