ngx-mat-searchable-select 2.0.2 → 2.0.4

package/fesm2022/ngx-mat-searchable-select.mjs

@@ -0,0 +1,245 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Output, Input, Self, Directive, inject, DestroyRef, input, output, signal, computed, Component } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i1$1 from '@angular/forms';
+import { FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i2 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i1 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i4 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i5 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i6 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import { of, Subscription } from 'rxjs';
+
+/**
+ * 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.
+ */
+class MockSearchableSelectDataSource {
+    constructor(items) {
+        this.items = items;
+    }
+    getAll(request) {
+        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 });
+    }
+}
+
+class MatSelectInfiniteScrollDirective {
+    constructor(matSelect) {
+        this.matSelect = matSelect;
+        this.complete = false;
+        this.threshold = 0.8;
+        this.infiniteScroll = new EventEmitter();
+        this.subscription = new Subscription();
+        this.boundOnScroll = this.onScroll.bind(this);
+        this.subscription.add(this.matSelect.openedChange.subscribe((isOpen) => {
+            if (isOpen) {
+                setTimeout(() => this.attachScrollListener());
+            }
+            else {
+                this.detachScrollListener();
+            }
+        }));
+    }
+    attachScrollListener() {
+        const panel = this.matSelect.panel?.nativeElement;
+        panel?.addEventListener('scroll', this.boundOnScroll);
+    }
+    detachScrollListener() {
+        const panel = this.matSelect.panel?.nativeElement;
+        panel?.removeEventListener('scroll', this.boundOnScroll);
+    }
+    onScroll(event) {
+        if (this.complete)
+            return;
+        const el = event.target;
+        const scrollRatio = (el.scrollTop + el.clientHeight) / el.scrollHeight;
+        if (scrollRatio >= this.threshold) {
+            this.infiniteScroll.emit();
+        }
+    }
+    ngOnDestroy() {
+        this.detachScrollListener();
+        this.subscription.unsubscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MatSelectInfiniteScrollDirective, deps: [{ token: i1.MatSelect, self: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: MatSelectInfiniteScrollDirective, isStandalone: true, selector: "mat-select[matSelectInfiniteScroll]", inputs: { complete: "complete", threshold: "threshold" }, outputs: { infiniteScroll: "infiniteScroll" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MatSelectInfiniteScrollDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'mat-select[matSelectInfiniteScroll]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i1.MatSelect, decorators: [{
+                    type: Self
+                }] }], propDecorators: { complete: [{
+                type: Input
+            }], threshold: [{
+                type: Input
+            }], infiniteScroll: [{
+                type: Output
+            }] } });
+
+const SEARCH_DELAY = 1000;
+const INITIAL_BATCH_SIZE = 5;
+const SUBSEQUENT_BATCH_SIZE = 10;
+class NgxMatSearchableSelectComponent {
+    constructor() {
+        this.destroyRef = inject(DestroyRef);
+        // Signal-based inputs
+        this.parentForm = input.required(...(ngDevMode ? [{ debugName: "parentForm" }] : []));
+        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
+        /** Optional static item list. When provided, no dataSource or server call is needed. */
+        this.staticItems = input(...(ngDevMode ? [undefined, { debugName: "staticItems" }] : []));
+        // Signal-based outputs
+        this.selectionChange = output();
+        this.valueChange = output();
+        // Internal search form (inline inject — no constructor needed)
+        this.searchForm = inject(FormBuilder).group({ searchTerm: '' });
+        // State signals
+        this.items = signal([], ...(ngDevMode ? [{ debugName: "items" }] : []));
+        this.isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+        this.offset = signal(0, ...(ngDevMode ? [{ debugName: "offset" }] : []));
+        this.totalItems = signal(0, ...(ngDevMode ? [{ debugName: "totalItems" }] : []));
+        this.hasLoaded = signal(false, ...(ngDevMode ? [{ debugName: "hasLoaded" }] : []));
+        this.isItemSelected = signal(false, ...(ngDevMode ? [{ debugName: "isItemSelected" }] : []));
+        // Computed: true when all pages have been loaded
+        this.isScrollComplete = computed(() => this.totalItems() > 0 && this.offset() >= this.totalItems(), ...(ngDevMode ? [{ debugName: "isScrollComplete" }] : []));
+        // Computed: true when a fetch completed but returned zero results
+        this.noItemsFound = computed(() => this.hasLoaded() && !this.isLoading() && this.items().length === 0, ...(ngDevMode ? [{ debugName: "noItemsFound" }] : []));
+        // Computed: show the pre-selected edit option when it is not in the loaded pages
+        this.showEditOption = computed(() => {
+            const cfg = this.config();
+            if (cfg.mode !== 'edit')
+                return false;
+            if (!cfg.option.currentLabel)
+                return false;
+            return !this.items().some(item => item['id'] === cfg.option.currentId);
+        }, ...(ngDevMode ? [{ debugName: "showEditOption" }] : []));
+    }
+    ngOnInit() {
+        const staticData = this.staticItems();
+        this.dataSource = staticData
+            ? new MockSearchableSelectDataSource(staticData)
+            : this.config().dataSource;
+        const filter = this.config().filter;
+        this.queryState = {
+            take: INITIAL_BATCH_SIZE,
+            skip: 0,
+            searchString: '',
+            ...(filter?.id !== undefined ? { id: filter.id } : {}),
+        };
+        this.fetchNextPage();
+    }
+    fetchNextPage() {
+        if (this.isLoading() || this.isScrollComplete())
+            return;
+        this.isLoading.set(true);
+        this.dataSource.getAll(this.queryState)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(response => {
+            this.items.update(prev => [...prev, ...response.data]);
+            this.totalItems.set(response.totalCount);
+            this.offset.update(n => n + response.data.length);
+            this.queryState = {
+                ...this.queryState,
+                take: SUBSEQUENT_BATCH_SIZE,
+                skip: this.offset(),
+            };
+            this.hasLoaded.set(true);
+            this.isLoading.set(false);
+        });
+    }
+    onPanelClosed() {
+        if (!this.isItemSelected()) {
+            this.resetSearch();
+        }
+    }
+    getDisplayLabel(item) {
+        return String(item[this.config().option.displayName] ?? '');
+    }
+    onSearchInput() {
+        this.isItemSelected.set(false);
+        clearTimeout(this.searchTimer);
+        this.searchTimer = setTimeout(() => this.applySearch(), SEARCH_DELAY);
+    }
+    onSelectionChange(event) {
+        this.selectionChange.emit(event);
+        this.isItemSelected.set(true);
+    }
+    onValueChange(value) {
+        this.valueChange.emit(value);
+        this.isItemSelected.set(true);
+    }
+    resetSearch() {
+        this.searchForm.controls.searchTerm.setValue('');
+        this.onSearchInput();
+    }
+    applySearch() {
+        const searchTerm = (this.searchForm.value.searchTerm ?? '').trim();
+        this.items.set([]);
+        this.offset.set(0);
+        this.totalItems.set(0);
+        this.hasLoaded.set(false);
+        this.queryState = {
+            ...this.queryState,
+            take: SUBSEQUENT_BATCH_SIZE,
+            skip: 0,
+            searchString: searchTerm,
+        };
+        this.fetchNextPage();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: NgxMatSearchableSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: NgxMatSearchableSelectComponent, isStandalone: true, selector: "ngx-mat-searchable-select", inputs: { parentForm: { classPropertyName: "parentForm", publicName: "parentForm", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, staticItems: { classPropertyName: "staticItems", publicName: "staticItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", valueChange: "valueChange" }, ngImport: i0, template: "<mat-form-field style=\"width: 100%\" [formGroup]=\"parentForm()\">\r\n  <mat-label>{{ config().option.label }}</mat-label>\r\n\r\n  <mat-select\r\n    matSelectInfiniteScroll\r\n    (infiniteScroll)=\"fetchNextPage()\"\r\n    [required]=\"config().option.isRequired\"\r\n    [complete]=\"isScrollComplete()\"\r\n    [formControlName]=\"config().option.formControlName\"\r\n    (selectionChange)=\"onSelectionChange($event)\"\r\n    (valueChange)=\"onValueChange($event)\"\r\n    (closed)=\"onPanelClosed()\"\r\n    [multiple]=\"config().multiple ?? false\"\r\n  >\r\n    @if (config().searchable !== false) {\r\n      <div style=\"padding: 8px 16px 0; position: sticky; top: 0;  z-index: 1;\" [formGroup]=\"searchForm\">\r\n        <mat-form-field style=\"width: 100%\">\r\n          <mat-icon matPrefix style=\"margin-right: 8px; color: rgba(0,0,0,.54)\">search</mat-icon>\r\n          <input\r\n            matInput\r\n            formControlName=\"searchTerm\"\r\n            (input)=\"onSearchInput()\"\r\n            placeholder=\"Type to search...\"\r\n            autocomplete=\"off\"\r\n            style=\"padding: 4px 0;\"\r\n          />\r\n          @if (searchForm.get('searchTerm')?.value) {\r\n            <button\r\n              mat-icon-button\r\n              matSuffix\r\n              aria-label=\"Clear\"\r\n              (click)=\"resetSearch()\"\r\n            >\r\n              <mat-icon>close</mat-icon>\r\n            </button>\r\n          }\r\n        </mat-form-field>\r\n      </div>\r\n    }\r\n\r\n    @if (showEditOption()) {\r\n      <mat-option [value]=\"config().option.currentId\">\r\n        {{ config().option.currentLabel }}\r\n      </mat-option>\r\n    }\r\n\r\n    @for (item of items(); track item['id']) {\r\n      <mat-option [value]=\"item['id']\">\r\n        {{ getDisplayLabel(item) }}\r\n      </mat-option>\r\n    }\r\n\r\n    @if (isLoading()) {\r\n      <mat-option disabled>Loading...</mat-option>\r\n    }\r\n\r\n    @if (noItemsFound()) {\r\n      <mat-option disabled>\r\n        <span style=\"color: rgba(0,0,0,.54); font-style: italic;\">No items found</span>\r\n      </mat-option>\r\n    }\r\n  </mat-select>\r\n\r\n  @if (config().option.svgIcon) {\r\n    <mat-icon class=\"icon-size-5 text-primary\" matPrefix [svgIcon]=\"config().option.svgIcon!\"></mat-icon>\r\n  } @else if (config().option.fontIcon) {\r\n    <mat-icon class=\"icon-size-5 text-primary\" matPrefix>{{ config().option.fontIcon }}</mat-icon>\r\n  }\r\n\r\n  @if (parentForm().get(config().option.formControlName)?.hasError('required')) {\r\n    <mat-error>\r\n      {{ config().option.label }} is required\r\n    </mat-error>\r\n  }\r\n</mat-form-field>\r\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatSelectInfiniteScrollDirective, selector: "mat-select[matSelectInfiniteScroll]", inputs: ["complete", "threshold"], outputs: ["infiniteScroll"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: NgxMatSearchableSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-mat-searchable-select', standalone: true, imports: [
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MatFormFieldModule,
+                        MatSelectModule,
+                        MatInputModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        MatSelectInfiniteScrollDirective,
+                    ], template: "<mat-form-field style=\"width: 100%\" [formGroup]=\"parentForm()\">\r\n  <mat-label>{{ config().option.label }}</mat-label>\r\n\r\n  <mat-select\r\n    matSelectInfiniteScroll\r\n    (infiniteScroll)=\"fetchNextPage()\"\r\n    [required]=\"config().option.isRequired\"\r\n    [complete]=\"isScrollComplete()\"\r\n    [formControlName]=\"config().option.formControlName\"\r\n    (selectionChange)=\"onSelectionChange($event)\"\r\n    (valueChange)=\"onValueChange($event)\"\r\n    (closed)=\"onPanelClosed()\"\r\n    [multiple]=\"config().multiple ?? false\"\r\n  >\r\n    @if (config().searchable !== false) {\r\n      <div style=\"padding: 8px 16px 0; position: sticky; top: 0;  z-index: 1;\" [formGroup]=\"searchForm\">\r\n        <mat-form-field style=\"width: 100%\">\r\n          <mat-icon matPrefix style=\"margin-right: 8px; color: rgba(0,0,0,.54)\">search</mat-icon>\r\n          <input\r\n            matInput\r\n            formControlName=\"searchTerm\"\r\n            (input)=\"onSearchInput()\"\r\n            placeholder=\"Type to search...\"\r\n            autocomplete=\"off\"\r\n            style=\"padding: 4px 0;\"\r\n          />\r\n          @if (searchForm.get('searchTerm')?.value) {\r\n            <button\r\n              mat-icon-button\r\n              matSuffix\r\n              aria-label=\"Clear\"\r\n              (click)=\"resetSearch()\"\r\n            >\r\n              <mat-icon>close</mat-icon>\r\n            </button>\r\n          }\r\n        </mat-form-field>\r\n      </div>\r\n    }\r\n\r\n    @if (showEditOption()) {\r\n      <mat-option [value]=\"config().option.currentId\">\r\n        {{ config().option.currentLabel }}\r\n      </mat-option>\r\n    }\r\n\r\n    @for (item of items(); track item['id']) {\r\n      <mat-option [value]=\"item['id']\">\r\n        {{ getDisplayLabel(item) }}\r\n      </mat-option>\r\n    }\r\n\r\n    @if (isLoading()) {\r\n      <mat-option disabled>Loading...</mat-option>\r\n    }\r\n\r\n    @if (noItemsFound()) {\r\n      <mat-option disabled>\r\n        <span style=\"color: rgba(0,0,0,.54); font-style: italic;\">No items found</span>\r\n      </mat-option>\r\n    }\r\n  </mat-select>\r\n\r\n  @if (config().option.svgIcon) {\r\n    <mat-icon class=\"icon-size-5 text-primary\" matPrefix [svgIcon]=\"config().option.svgIcon!\"></mat-icon>\r\n  } @else if (config().option.fontIcon) {\r\n    <mat-icon class=\"icon-size-5 text-primary\" matPrefix>{{ config().option.fontIcon }}</mat-icon>\r\n  }\r\n\r\n  @if (parentForm().get(config().option.formControlName)?.hasError('required')) {\r\n    <mat-error>\r\n      {{ config().option.label }} is required\r\n    </mat-error>\r\n  }\r\n</mat-form-field>\r\n" }]
+        }], propDecorators: { parentForm: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentForm", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], staticItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "staticItems", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
+
+/*
+ * Public API Surface of mat-list-shared
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MatSelectInfiniteScrollDirective, MockSearchableSelectDataSource, NgxMatSearchableSelectComponent };
+//# sourceMappingURL=ngx-mat-searchable-select.mjs.map

package/fesm2022/ngx-mat-searchable-select.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngx-mat-searchable-select.mjs","sources":["../../../projects/ngx-mat-searchable-select/src/lib/ngx-mat-searchable-select.mock.ts","../../../projects/ngx-mat-searchable-select/src/lib/mat-select-infinite-scroll.directive.ts","../../../projects/ngx-mat-searchable-select/src/lib/ngx-mat-searchable-select.component.ts","../../../projects/ngx-mat-searchable-select/src/lib/ngx-mat-searchable-select.component.html","../../../projects/ngx-mat-searchable-select/src/public-api.ts","../../../projects/ngx-mat-searchable-select/src/ngx-mat-searchable-select.ts"],"sourcesContent":["import { Observable, of } from 'rxjs';\r\nimport { SearchableSelectDataSource, PagedRequest, PagedResponse } from './ngx-mat-searchable-select.model';\r\n\r\n/**\r\n * A ready-made data source backed by a static in-memory array.\r\n *\r\n * Use this when you want to demo or test the component without a real API:\r\n *\r\n * ```ts\r\n * const dataSource = new MockSearchableSelectDataSource([\r\n *   { id: 1, name: 'Paris' },\r\n *   { id: 2, name: 'London' },\r\n * ]);\r\n *\r\n * this.config = {\r\n *   dataSource,\r\n *   option: { ... },\r\n *   mode: 'create',\r\n * };\r\n * ```\r\n *\r\n * Search is applied across all string-coercible fields of each item.\r\n * Pagination uses the `skip` / `take` values from the request.\r\n */\r\nexport class MockSearchableSelectDataSource implements SearchableSelectDataSource {\r\n  constructor(private readonly items: Record<string, unknown>[]) {}\r\n\r\n  getAll(request: PagedRequest): Observable<PagedResponse<Record<string, unknown>>> {\r\n    const term = request.searchString?.toLowerCase() ?? '';\r\n\r\n    const filtered = term\r\n      ? this.items.filter(item =>\r\n          Object.values(item).some(value =>\r\n            String(value ?? '').toLowerCase().includes(term)\r\n          )\r\n        )\r\n      : this.items;\r\n\r\n    const page = filtered.slice(request.skip, request.skip + request.take);\r\n\r\n    return of({ data: page, totalCount: filtered.length });\r\n  }\r\n}\r\n","import { Directive, EventEmitter, Input, OnDestroy, Output, Self } from '@angular/core';\r\nimport { MatSelect } from '@angular/material/select';\r\nimport { Subscription } from 'rxjs';\r\n\r\n@Directive({\r\n  selector: 'mat-select[matSelectInfiniteScroll]',\r\n  standalone: true,\r\n})\r\nexport class MatSelectInfiniteScrollDirective implements OnDestroy {\r\n  @Input() complete = false;\r\n  @Input() threshold = 0.8;\r\n  @Output() infiniteScroll = new EventEmitter<void>();\r\n\r\n  private subscription = new Subscription();\r\n  private boundOnScroll = this.onScroll.bind(this);\r\n\r\n  constructor(@Self() private matSelect: MatSelect) {\r\n    this.subscription.add(\r\n      this.matSelect.openedChange.subscribe((isOpen: boolean) => {\r\n        if (isOpen) {\r\n          setTimeout(() => this.attachScrollListener());\r\n        } else {\r\n          this.detachScrollListener();\r\n        }\r\n      })\r\n    );\r\n  }\r\n\r\n  private attachScrollListener(): void {\r\n    const panel = this.matSelect.panel?.nativeElement as HTMLElement | undefined;\r\n    panel?.addEventListener('scroll', this.boundOnScroll);\r\n  }\r\n\r\n  private detachScrollListener(): void {\r\n    const panel = this.matSelect.panel?.nativeElement as HTMLElement | undefined;\r\n    panel?.removeEventListener('scroll', this.boundOnScroll);\r\n  }\r\n\r\n  private onScroll(event: Event): void {\r\n    if (this.complete) return;\r\n    const el = event.target as HTMLElement;\r\n    const scrollRatio = (el.scrollTop + el.clientHeight) / el.scrollHeight;\r\n    if (scrollRatio >= this.threshold) {\r\n      this.infiniteScroll.emit();\r\n    }\r\n  }\r\n\r\n  ngOnDestroy(): void {\r\n    this.detachScrollListener();\r\n    this.subscription.unsubscribe();\r\n  }\r\n}\r\n","import {\r\n  Component,\r\n  DestroyRef,\r\n  OnInit,\r\n  computed,\r\n  inject,\r\n  input,\r\n  output,\r\n  signal,\r\n} from '@angular/core';\r\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\r\nimport { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';\r\nimport { MatFormFieldModule } from '@angular/material/form-field';\r\nimport { MatSelectModule, MatSelectChange } from '@angular/material/select';\r\nimport { MatInputModule } from '@angular/material/input';\r\nimport { MatButtonModule } from '@angular/material/button';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { SearchableSelectConfig, SearchableSelectDataSource, PagedRequest } from './ngx-mat-searchable-select.model';\r\nimport { MockSearchableSelectDataSource } from './ngx-mat-searchable-select.mock';\r\nimport { MatSelectInfiniteScrollDirective } from './mat-select-infinite-scroll.directive';\r\n\r\nconst SEARCH_DELAY = 1000;\r\nconst INITIAL_BATCH_SIZE = 5;\r\nconst SUBSEQUENT_BATCH_SIZE = 10;\r\n\r\n@Component({\r\n  selector: 'ngx-mat-searchable-select',\r\n  templateUrl: 'ngx-mat-searchable-select.component.html',\r\n  standalone: true,\r\n  imports: [\r\n    FormsModule,\r\n    ReactiveFormsModule,\r\n    MatFormFieldModule,\r\n    MatSelectModule,\r\n    MatInputModule,\r\n    MatButtonModule,\r\n    MatIconModule,\r\n    MatSelectInfiniteScrollDirective,\r\n  ],\r\n})\r\nexport class NgxMatSearchableSelectComponent implements OnInit {\r\n  private readonly destroyRef = inject(DestroyRef);\r\n\r\n  // Signal-based inputs\r\n  readonly parentForm = input.required<FormGroup>();\r\n  readonly config = input.required<SearchableSelectConfig>();\r\n  /** Optional static item list. When provided, no dataSource or server call is needed. */\r\n  readonly staticItems = input<Record<string, unknown>[]>();\r\n\r\n  // Signal-based outputs\r\n  readonly selectionChange = output<MatSelectChange>();\r\n  readonly valueChange = output<unknown>();\r\n\r\n  // Internal search form (inline inject — no constructor needed)\r\n  readonly searchForm = inject(FormBuilder).group({ searchTerm: '' });\r\n\r\n  // State signals\r\n  readonly items = signal<Record<string, unknown>[]>([]);\r\n  readonly isLoading = signal(false);\r\n\r\n  private readonly offset = signal(0);\r\n  private readonly totalItems = signal(0);\r\n  private readonly hasLoaded = signal(false);\r\n  private readonly isItemSelected = signal(false);\r\n  private searchTimer: ReturnType<typeof setTimeout> | undefined;\r\n  private queryState!: PagedRequest;\r\n  private dataSource!: SearchableSelectDataSource;\r\n\r\n  // Computed: true when all pages have been loaded\r\n  readonly isScrollComplete = computed(\r\n    () => this.totalItems() > 0 && this.offset() >= this.totalItems()\r\n  );\r\n\r\n  // Computed: true when a fetch completed but returned zero results\r\n  readonly noItemsFound = computed(\r\n    () => this.hasLoaded() && !this.isLoading() && this.items().length === 0\r\n  );\r\n\r\n  // Computed: show the pre-selected edit option when it is not in the loaded pages\r\n  readonly showEditOption = computed(() => {\r\n    const cfg = this.config();\r\n    if (cfg.mode !== 'edit') return false;\r\n    if (!cfg.option.currentLabel) return false;\r\n    return !this.items().some(item => item['id'] === cfg.option.currentId);\r\n  });\r\n\r\n  ngOnInit(): void {\r\n    const staticData = this.staticItems();\r\n    this.dataSource = staticData\r\n      ? new MockSearchableSelectDataSource(staticData)\r\n      : this.config().dataSource!;\r\n\r\n    const filter = this.config().filter;\r\n    this.queryState = {\r\n      take: INITIAL_BATCH_SIZE,\r\n      skip: 0,\r\n      searchString: '',\r\n      ...(filter?.id !== undefined ? { id: filter.id } : {}),\r\n    };\r\n    this.fetchNextPage();\r\n  }\r\n\r\n  fetchNextPage(): void {\r\n    if (this.isLoading() || this.isScrollComplete()) return;\r\n\r\n    this.isLoading.set(true);\r\n    this.dataSource.getAll(this.queryState)\r\n      .pipe(takeUntilDestroyed(this.destroyRef))\r\n      .subscribe(response => {\r\n        this.items.update(prev => [...prev, ...response.data]);\r\n        this.totalItems.set(response.totalCount);\r\n        this.offset.update(n => n + response.data.length);\r\n        this.queryState = {\r\n          ...this.queryState,\r\n          take: SUBSEQUENT_BATCH_SIZE,\r\n          skip: this.offset(),\r\n        };\r\n        this.hasLoaded.set(true);\r\n        this.isLoading.set(false);\r\n      });\r\n  }\r\n\r\n  onPanelClosed(): void {\r\n    if (!this.isItemSelected()) {\r\n      this.resetSearch();\r\n    }\r\n  }\r\n\r\n  getDisplayLabel(item: Record<string, unknown>): string {\r\n    return String(item[this.config().option.displayName] ?? '');\r\n  }\r\n\r\n  onSearchInput(): void {\r\n    this.isItemSelected.set(false);\r\n    clearTimeout(this.searchTimer);\r\n    this.searchTimer = setTimeout(() => this.applySearch(), SEARCH_DELAY);\r\n  }\r\n\r\n  onSelectionChange(event: MatSelectChange): void {\r\n    this.selectionChange.emit(event);\r\n    this.isItemSelected.set(true);\r\n  }\r\n\r\n  onValueChange(value: unknown): void {\r\n    this.valueChange.emit(value);\r\n    this.isItemSelected.set(true);\r\n  }\r\n\r\n  resetSearch(): void {\r\n    this.searchForm.controls.searchTerm.setValue('');\r\n    this.onSearchInput();\r\n  }\r\n\r\n  private applySearch(): void {\r\n    const searchTerm = (this.searchForm.value.searchTerm ?? '').trim();\r\n    this.items.set([]);\r\n    this.offset.set(0);\r\n    this.totalItems.set(0);\r\n    this.hasLoaded.set(false);\r\n    this.queryState = {\r\n      ...this.queryState,\r\n      take: SUBSEQUENT_BATCH_SIZE,\r\n      skip: 0,\r\n      searchString: searchTerm,\r\n    };\r\n    this.fetchNextPage();\r\n  }\r\n}\r\n","<mat-form-field style=\"width: 100%\" [formGroup]=\"parentForm()\">\r\n  <mat-label>{{ config().option.label }}</mat-label>\r\n\r\n  <mat-select\r\n    matSelectInfiniteScroll\r\n    (infiniteScroll)=\"fetchNextPage()\"\r\n    [required]=\"config().option.isRequired\"\r\n    [complete]=\"isScrollComplete()\"\r\n    [formControlName]=\"config().option.formControlName\"\r\n    (selectionChange)=\"onSelectionChange($event)\"\r\n    (valueChange)=\"onValueChange($event)\"\r\n    (closed)=\"onPanelClosed()\"\r\n    [multiple]=\"config().multiple ?? false\"\r\n  >\r\n    @if (config().searchable !== false) {\r\n      <div style=\"padding: 8px 16px 0; position: sticky; top: 0;  z-index: 1;\" [formGroup]=\"searchForm\">\r\n        <mat-form-field style=\"width: 100%\">\r\n          <mat-icon matPrefix style=\"margin-right: 8px; color: rgba(0,0,0,.54)\">search</mat-icon>\r\n          <input\r\n            matInput\r\n            formControlName=\"searchTerm\"\r\n            (input)=\"onSearchInput()\"\r\n            placeholder=\"Type to search...\"\r\n            autocomplete=\"off\"\r\n            style=\"padding: 4px 0;\"\r\n          />\r\n          @if (searchForm.get('searchTerm')?.value) {\r\n            <button\r\n              mat-icon-button\r\n              matSuffix\r\n              aria-label=\"Clear\"\r\n              (click)=\"resetSearch()\"\r\n            >\r\n              <mat-icon>close</mat-icon>\r\n            </button>\r\n          }\r\n        </mat-form-field>\r\n      </div>\r\n    }\r\n\r\n    @if (showEditOption()) {\r\n      <mat-option [value]=\"config().option.currentId\">\r\n        {{ config().option.currentLabel }}\r\n      </mat-option>\r\n    }\r\n\r\n    @for (item of items(); track item['id']) {\r\n      <mat-option [value]=\"item['id']\">\r\n        {{ getDisplayLabel(item) }}\r\n      </mat-option>\r\n    }\r\n\r\n    @if (isLoading()) {\r\n      <mat-option disabled>Loading...</mat-option>\r\n    }\r\n\r\n    @if (noItemsFound()) {\r\n      <mat-option disabled>\r\n        <span style=\"color: rgba(0,0,0,.54); font-style: italic;\">No items found</span>\r\n      </mat-option>\r\n    }\r\n  </mat-select>\r\n\r\n  @if (config().option.svgIcon) {\r\n    <mat-icon class=\"icon-size-5 text-primary\" matPrefix [svgIcon]=\"config().option.svgIcon!\"></mat-icon>\r\n  } @else if (config().option.fontIcon) {\r\n    <mat-icon class=\"icon-size-5 text-primary\" matPrefix>{{ config().option.fontIcon }}</mat-icon>\r\n  }\r\n\r\n  @if (parentForm().get(config().option.formControlName)?.hasError('required')) {\r\n    <mat-error>\r\n      {{ config().option.label }} is required\r\n    </mat-error>\r\n  }\r\n</mat-form-field>\r\n","/*\r\n * Public API Surface of mat-list-shared\r\n */\r\n\r\nexport * from './lib/ngx-mat-searchable-select.component';\r\nexport * from './lib/mat-select-infinite-scroll.directive';\r\nexport * from './lib/ngx-mat-searchable-select.model';\r\nexport * from './lib/ngx-mat-searchable-select.mock';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i1"],"mappings":";;;;;;;;;;;;;;;;;AAGA;;;;;;;;;;;;;;;;;;;;AAoBG;MACU,8BAA8B,CAAA;AACzC,IAAA,WAAA,CAA6B,KAAgC,EAAA;QAAhC,IAAA,CAAA,KAAK,GAAL,KAAK;IAA8B;AAEhE,IAAA,MAAM,CAAC,OAAqB,EAAA;QAC1B,MAAM,IAAI,GAAG,OAAO,CAAC,YAAY,EAAE,WAAW,EAAE,IAAI,EAAE;QAEtD,MAAM,QAAQ,GAAG;AACf,cAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,IACpB,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,IAC5B,MAAM,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,CACjD;AAEL,cAAE,IAAI,CAAC,KAAK;AAEd,QAAA,MAAM,IAAI,GAAG,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;AAEtE,QAAA,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,CAAC,MAAM,EAAE,CAAC;IACxD;AACD;;MClCY,gCAAgC,CAAA;AAQ3C,IAAA,WAAA,CAA4B,SAAoB,EAAA;QAApB,IAAA,CAAA,SAAS,GAAT,SAAS;QAP5B,IAAA,CAAA,QAAQ,GAAG,KAAK;QAChB,IAAA,CAAA,SAAS,GAAG,GAAG;AACd,QAAA,IAAA,CAAA,cAAc,GAAG,IAAI,YAAY,EAAQ;AAE3C,QAAA,IAAA,CAAA,YAAY,GAAG,IAAI,YAAY,EAAE;QACjC,IAAA,CAAA,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;AAG9C,QAAA,IAAI,CAAC,YAAY,CAAC,GAAG,CACnB,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,MAAe,KAAI;YACxD,IAAI,MAAM,EAAE;gBACV,UAAU,CAAC,MAAM,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAC/C;iBAAO;gBACL,IAAI,CAAC,oBAAoB,EAAE;YAC7B;QACF,CAAC,CAAC,CACH;IACH;IAEQ,oBAAoB,GAAA;QAC1B,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,aAAwC;QAC5E,KAAK,EAAE,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC;IACvD;IAEQ,oBAAoB,GAAA;QAC1B,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,aAAwC;QAC5E,KAAK,EAAE,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC;IAC1D;AAEQ,IAAA,QAAQ,CAAC,KAAY,EAAA;QAC3B,IAAI,IAAI,CAAC,QAAQ;YAAE;AACnB,QAAA,MAAM,EAAE,GAAG,KAAK,CAAC,MAAqB;AACtC,QAAA,MAAM,WAAW,GAAG,CAAC,EAAE,CAAC,SAAS,GAAG,EAAE,CAAC,YAAY,IAAI,EAAE,CAAC,YAAY;AACtE,QAAA,IAAI,WAAW,IAAI,IAAI,CAAC,SAAS,EAAE;AACjC,YAAA,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE;QAC5B;IACF;IAEA,WAAW,GAAA;QACT,IAAI,CAAC,oBAAoB,EAAE;AAC3B,QAAA,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE;IACjC;8GA1CW,gCAAgC,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,SAAA,EAAA,IAAA,EAAA,IAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAhC,gCAAgC,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,qCAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,UAAA,EAAA,SAAA,EAAA,WAAA,EAAA,EAAA,OAAA,EAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAAhC,gCAAgC,EAAA,UAAA,EAAA,CAAA;kBAJ5C,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,qCAAqC;AAC/C,oBAAA,UAAU,EAAE,IAAI;AACjB,iBAAA;;0BASc;;sBAPZ;;sBACA;;sBACA;;;ACUH,MAAM,YAAY,GAAG,IAAI;AACzB,MAAM,kBAAkB,GAAG,CAAC;AAC5B,MAAM,qBAAqB,GAAG,EAAE;MAiBnB,+BAA+B,CAAA;AAf5C,IAAA,WAAA,GAAA;AAgBmB,QAAA,IAAA,CAAA,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;;AAGvC,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK,CAAC,QAAQ,qDAAa;AACxC,QAAA,IAAA,CAAA,MAAM,GAAG,KAAK,CAAC,QAAQ,iDAA0B;;QAEjD,IAAA,CAAA,WAAW,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,aAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAA6B;;QAGhD,IAAA,CAAA,eAAe,GAAG,MAAM,EAAmB;QAC3C,IAAA,CAAA,WAAW,GAAG,MAAM,EAAW;;AAG/B,QAAA,IAAA,CAAA,UAAU,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC,KAAK,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC;;AAG1D,QAAA,IAAA,CAAA,KAAK,GAAG,MAAM,CAA4B,EAAE,iDAAC;AAC7C,QAAA,IAAA,CAAA,SAAS,GAAG,MAAM,CAAC,KAAK,qDAAC;AAEjB,QAAA,IAAA,CAAA,MAAM,GAAG,MAAM,CAAC,CAAC,kDAAC;AAClB,QAAA,IAAA,CAAA,UAAU,GAAG,MAAM,CAAC,CAAC,sDAAC;AACtB,QAAA,IAAA,CAAA,SAAS,GAAG,MAAM,CAAC,KAAK,qDAAC;AACzB,QAAA,IAAA,CAAA,cAAc,GAAG,MAAM,CAAC,KAAK,0DAAC;;QAMtC,IAAA,CAAA,gBAAgB,GAAG,QAAQ,CAClC,MAAM,IAAI,CAAC,UAAU,EAAE,GAAG,CAAC,IAAI,IAAI,CAAC,MAAM,EAAE,IAAI,IAAI,CAAC,UAAU,EAAE,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,kBAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAClE;;QAGQ,IAAA,CAAA,YAAY,GAAG,QAAQ,CAC9B,MAAM,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC,MAAM,KAAK,CAAC,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,cAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CACzE;;AAGQ,QAAA,IAAA,CAAA,cAAc,GAAG,QAAQ,CAAC,MAAK;AACtC,YAAA,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,EAAE;AACzB,YAAA,IAAI,GAAG,CAAC,IAAI,KAAK,MAAM;AAAE,gBAAA,OAAO,KAAK;AACrC,YAAA,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,YAAY;AAAE,gBAAA,OAAO,KAAK;YAC1C,OAAO,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,CAAC,MAAM,CAAC,SAAS,CAAC;AACxE,QAAA,CAAC,0DAAC;AAmFH,IAAA;IAjFC,QAAQ,GAAA;AACN,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,EAAE;QACrC,IAAI,CAAC,UAAU,GAAG;AAChB,cAAE,IAAI,8BAA8B,CAAC,UAAU;AAC/C,cAAE,IAAI,CAAC,MAAM,EAAE,CAAC,UAAW;QAE7B,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,MAAM;QACnC,IAAI,CAAC,UAAU,GAAG;AAChB,YAAA,IAAI,EAAE,kBAAkB;AACxB,YAAA,IAAI,EAAE,CAAC;AACP,YAAA,YAAY,EAAE,EAAE;YAChB,IAAI,MAAM,EAAE,EAAE,KAAK,SAAS,GAAG,EAAE,EAAE,EAAE,MAAM,CAAC,EAAE,EAAE,GAAG,EAAE,CAAC;SACvD;QACD,IAAI,CAAC,aAAa,EAAE;IACtB;IAEA,aAAa,GAAA;QACX,IAAI,IAAI,CAAC,SAAS,EAAE,IAAI,IAAI,CAAC,gBAAgB,EAAE;YAAE;AAEjD,QAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC;QACxB,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU;AACnC,aAAA,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC;aACxC,SAAS,CAAC,QAAQ,IAAG;AACpB,YAAA,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,GAAG,IAAI,EAAE,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;YACtD,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,QAAQ,CAAC,UAAU,CAAC;AACxC,YAAA,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC;YACjD,IAAI,CAAC,UAAU,GAAG;gBAChB,GAAG,IAAI,CAAC,UAAU;AAClB,gBAAA,IAAI,EAAE,qBAAqB;AAC3B,gBAAA,IAAI,EAAE,IAAI,CAAC,MAAM,EAAE;aACpB;AACD,YAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC;AACxB,YAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC;AAC3B,QAAA,CAAC,CAAC;IACN;IAEA,aAAa,GAAA;AACX,QAAA,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,EAAE;YAC1B,IAAI,CAAC,WAAW,EAAE;QACpB;IACF;AAEA,IAAA,eAAe,CAAC,IAA6B,EAAA;AAC3C,QAAA,OAAO,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,MAAM,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;IAC7D;IAEA,aAAa,GAAA;AACX,QAAA,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,KAAK,CAAC;AAC9B,QAAA,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC;AAC9B,QAAA,IAAI,CAAC,WAAW,GAAG,UAAU,CAAC,MAAM,IAAI,CAAC,WAAW,EAAE,EAAE,YAAY,CAAC;IACvE;AAEA,IAAA,iBAAiB,CAAC,KAAsB,EAAA;AACtC,QAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC;AAChC,QAAA,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC;IAC/B;AAEA,IAAA,aAAa,CAAC,KAAc,EAAA;AAC1B,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC;AAC5B,QAAA,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC;IAC/B;IAEA,WAAW,GAAA;QACT,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC;QAChD,IAAI,CAAC,aAAa,EAAE;IACtB;IAEQ,WAAW,GAAA;AACjB,QAAA,MAAM,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,UAAU,IAAI,EAAE,EAAE,IAAI,EAAE;AAClE,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC;AAClB,QAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC;AAClB,QAAA,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC;AACtB,QAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC;QACzB,IAAI,CAAC,UAAU,GAAG;YAChB,GAAG,IAAI,CAAC,UAAU;AAClB,YAAA,IAAI,EAAE,qBAAqB;AAC3B,YAAA,IAAI,EAAE,CAAC;AACP,YAAA,YAAY,EAAE,UAAU;SACzB;QACD,IAAI,CAAC,aAAa,EAAE;IACtB;8GA9HW,+BAA+B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAA/B,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,+BAA+B,wjBCxC5C,qoFA2EA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,ED7CI,WAAW,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAA,IAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,8MAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAA,IAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAA,IAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,sGAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAA,IAAA,CAAA,iBAAA,EAAA,QAAA,EAAA,wIAAA,EAAA,MAAA,EAAA,CAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACX,mBAAmB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAA,IAAA,CAAA,kBAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,WAAA,CAAA,EAAA,OAAA,EAAA,CAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAA,IAAA,CAAA,eAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,CAAA,iBAAA,EAAA,UAAA,EAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACnB,kBAAkB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,YAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,CAAA,oBAAA,EAAA,OAAA,EAAA,YAAA,EAAA,YAAA,EAAA,iBAAA,EAAA,WAAA,CAAA,EAAA,QAAA,EAAA,CAAA,cAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,QAAA,EAAA,QAAA,EAAA,WAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,QAAA,EAAA,QAAA,EAAA,uBAAA,EAAA,MAAA,EAAA,CAAA,IAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,QAAA,EAAA,+CAAA,EAAA,MAAA,EAAA,CAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,QAAA,EAAA,+CAAA,EAAA,MAAA,EAAA,CAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAClB,eAAe,+sBACf,cAAc,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,QAAA,EAAA,QAAA,EAAA,yHAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,IAAA,EAAA,aAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,mBAAA,EAAA,kBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,qBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACd,eAAe,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,aAAA,EAAA,QAAA,EAAA,sFAAA,EAAA,QAAA,EAAA,CAAA,WAAA,EAAA,WAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACf,aAAa,oLACb,gCAAgC,EAAA,QAAA,EAAA,qCAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,WAAA,CAAA,EAAA,OAAA,EAAA,CAAA,gBAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;2FAGvB,+BAA+B,EAAA,UAAA,EAAA,CAAA;kBAf3C,SAAS;+BACE,2BAA2B,EAAA,UAAA,EAEzB,IAAI,EAAA,OAAA,EACP;wBACP,WAAW;wBACX,mBAAmB;wBACnB,kBAAkB;wBAClB,eAAe;wBACf,cAAc;wBACd,eAAe;wBACf,aAAa;wBACb,gCAAgC;AACjC,qBAAA,EAAA,QAAA,EAAA,qoFAAA,EAAA;;;AEtCH;;AAEG;;ACFH;;AAEG;;;;"}

package/package.json

@@ -1,12 +1,27 @@
-{
-  "name": "ngx-mat-searchable-select",
-  "version": "2.0.2",
-  "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"
-  }
-}
+{
+  "name": "ngx-mat-searchable-select",
+  "version": "2.0.4",
+  "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"
+  },
+  "module": "fesm2022/ngx-mat-searchable-select.mjs",
+  "typings": "types/ngx-mat-searchable-select.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/ngx-mat-searchable-select.d.ts",
+      "default": "./fesm2022/ngx-mat-searchable-select.mjs"
+    }
+  },
+  "sideEffects": false,
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}

package/types/ngx-mat-searchable-select.d.ts

@@ -0,0 +1,125 @@
+import * as _angular_forms from '@angular/forms';
+import { FormGroup } from '@angular/forms';
+import * as _angular_core from '@angular/core';
+import { OnInit, OnDestroy, EventEmitter } from '@angular/core';
+import { MatSelectChange, MatSelect } from '@angular/material/select';
+import { Observable } from 'rxjs';
+
+interface SearchableSelectConfig {
+    dataSource?: SearchableSelectDataSource;
+    option: SearchableSelectOption;
+    mode: 'create' | 'edit';
+    filter?: {
+        id?: number;
+    };
+    searchable?: boolean;
+    multiple?: boolean;
+}
+interface SearchableSelectDataSource {
+    getAll(request: PagedRequest): Observable<PagedResponse<Record<string, unknown>>>;
+}
+interface SearchableSelectOption {
+    isRequired: boolean;
+    displayName: string;
+    formControlName: string;
+    label: string;
+    /** Material SVG icon name (requires MatIconRegistry setup). */
+    svgIcon?: string;
+    /** Material font icon name — used when svgIcon is not provided. */
+    fontIcon?: string;
+    currentId?: number;
+    currentLabel?: string;
+}
+interface PagedRequest {
+    skip: number;
+    take: number;
+    sort?: string;
+    searchString: string;
+    id?: number;
+}
+interface PagedResponse<T> {
+    data: T[];
+    totalCount: number;
+}
+
+declare class NgxMatSearchableSelectComponent implements OnInit {
+    private readonly destroyRef;
+    readonly parentForm: _angular_core.InputSignal<FormGroup<any>>;
+    readonly config: _angular_core.InputSignal<SearchableSelectConfig>;
+    /** Optional static item list. When provided, no dataSource or server call is needed. */
+    readonly staticItems: _angular_core.InputSignal<Record<string, unknown>[] | undefined>;
+    readonly selectionChange: _angular_core.OutputEmitterRef<MatSelectChange<any>>;
+    readonly valueChange: _angular_core.OutputEmitterRef<unknown>;
+    readonly searchForm: FormGroup<{
+        searchTerm: _angular_forms.FormControl<string | null>;
+    }>;
+    readonly items: _angular_core.WritableSignal<Record<string, unknown>[]>;
+    readonly isLoading: _angular_core.WritableSignal<boolean>;
+    private readonly offset;
+    private readonly totalItems;
+    private readonly hasLoaded;
+    private readonly isItemSelected;
+    private searchTimer;
+    private queryState;
+    private dataSource;
+    readonly isScrollComplete: _angular_core.Signal<boolean>;
+    readonly noItemsFound: _angular_core.Signal<boolean>;
+    readonly showEditOption: _angular_core.Signal<boolean>;
+    ngOnInit(): void;
+    fetchNextPage(): void;
+    onPanelClosed(): void;
+    getDisplayLabel(item: Record<string, unknown>): string;
+    onSearchInput(): void;
+    onSelectionChange(event: MatSelectChange): void;
+    onValueChange(value: unknown): void;
+    resetSearch(): void;
+    private applySearch;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgxMatSearchableSelectComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgxMatSearchableSelectComponent, "ngx-mat-searchable-select", never, { "parentForm": { "alias": "parentForm"; "required": true; "isSignal": true; }; "config": { "alias": "config"; "required": true; "isSignal": true; }; "staticItems": { "alias": "staticItems"; "required": false; "isSignal": true; }; }, { "selectionChange": "selectionChange"; "valueChange": "valueChange"; }, never, never, true, never>;
+}
+
+declare class MatSelectInfiniteScrollDirective implements OnDestroy {
+    private matSelect;
+    complete: boolean;
+    threshold: number;
+    infiniteScroll: EventEmitter<void>;
+    private subscription;
+    private boundOnScroll;
+    constructor(matSelect: MatSelect);
+    private attachScrollListener;
+    private detachScrollListener;
+    private onScroll;
+    ngOnDestroy(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MatSelectInfiniteScrollDirective, [{ self: true; }]>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MatSelectInfiniteScrollDirective, "mat-select[matSelectInfiniteScroll]", never, { "complete": { "alias": "complete"; "required": false; }; "threshold": { "alias": "threshold"; "required": false; }; }, { "infiniteScroll": "infiniteScroll"; }, never, never, true, never>;
+}
+
+/**
+ * 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.
+ */
+declare class MockSearchableSelectDataSource implements SearchableSelectDataSource {
+    private readonly items;
+    constructor(items: Record<string, unknown>[]);
+    getAll(request: PagedRequest): Observable<PagedResponse<Record<string, unknown>>>;
+}
+
+export { MatSelectInfiniteScrollDirective, MockSearchableSelectDataSource, NgxMatSearchableSelectComponent };
+export type { PagedRequest, PagedResponse, SearchableSelectConfig, SearchableSelectDataSource, SearchableSelectOption };

package/karma.conf.js

@@ -1,44 +0,0 @@
-// Karma configuration file, see link for more information
-// https://karma-runner.github.io/1.0/config/configuration-file.html
-
-module.exports = function (config) {
-  config.set({
-    basePath: '',
-    frameworks: ['jasmine', '@angular-devkit/build-angular'],
-    plugins: [
-      require('karma-jasmine'),
-      require('karma-chrome-launcher'),
-      require('karma-jasmine-html-reporter'),
-      require('karma-coverage'),
-      require('@angular-devkit/build-angular/plugins/karma')
-    ],
-    client: {
-      jasmine: {
-        // you can add configuration options for Jasmine here
-        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
-        // for example, you can disable the random execution with `random: false`
-        // or set a specific seed with `seed: 4321`
-      },
-      clearContext: false // leave Jasmine Spec Runner output visible in browser
-    },
-    jasmineHtmlReporter: {
-      suppressAll: true // removes the duplicated traces
-    },
-    coverageReporter: {
-      dir: require('path').join(__dirname, '../../coverage/mat-list-shared'),
-      subdir: '.',
-      reporters: [
-        { type: 'html' },
-        { type: 'text-summary' }
-      ]
-    },
-    reporters: ['progress', 'kjhtml'],
-    port: 9876,
-    colors: true,
-    logLevel: config.LOG_INFO,
-    autoWatch: true,
-    browsers: ['Chrome'],
-    singleRun: false,
-    restartOnFileChange: true
-  });
-};

package/ng-package.json

@@ -1,7 +0,0 @@
-{
-  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/ngx-mat-searchable-select",
-  "lib": {
-    "entryFile": "src/public-api.ts"
-  }
-}

package/src/lib/mat-list-shared.component.html

@@ -1,75 +0,0 @@
-<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/src/lib/mat-list-shared.component.spec.ts

@@ -1,229 +0,0 @@
-import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
-import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { provideZoneChangeDetection } from '@angular/core';
-
-import { NgxMatSearchableSelectComponent } from './mat-list-shared.component';
-import { MockSearchableSelectDataSource } from './mat-list-shared.mock';
-import { SearchableSelectConfig } from './mat-list-shared.model';
-
-const MOCK_CITIES: Record<string, unknown>[] = [
-  { 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' },
-];
-
-function buildConfig(overrides: Partial<SearchableSelectConfig> = {}): SearchableSelectConfig {
-  return {
-    option: {
-      isRequired: true,
-      displayName: 'name',
-      formControlName: 'city',
-      label: 'City',
-      svgIcon: 'city-icon',
-    },
-    mode: 'create',
-    searchable: true,
-    multiple: false,
-    ...overrides,
-  };
-}
-
-describe('NgxMatSearchableSelectComponent', () => {
-  let fixture: ComponentFixture<NgxMatSearchableSelectComponent>;
-  let component: NgxMatSearchableSelectComponent;
-  const fb = new FormBuilder();
-
-  function createFixture(config: SearchableSelectConfig, staticItems?: Record<string, unknown>[]) {
-    fixture = TestBed.createComponent(NgxMatSearchableSelectComponent);
-    component = fixture.componentInstance;
-
-    const parentForm = fb.group({ city: [null, Validators.required] });
-
-    fixture.componentRef.setInput('parentForm', parentForm);
-    fixture.componentRef.setInput('config', config);
-    if (staticItems) {
-      fixture.componentRef.setInput('staticItems', staticItems);
-    }
-
-    fixture.detectChanges();
-  }
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [NgxMatSearchableSelectComponent, ReactiveFormsModule, NoopAnimationsModule],
-      providers: [provideZoneChangeDetection()],
-    }).compileComponents();
-  });
-
-  describe('with staticItems', () => {
-    beforeEach(() => {
-      createFixture(buildConfig(), MOCK_CITIES);
-    });
-
-    it('should create the component', () => {
-      expect(component).toBeTruthy();
-    });
-
-    it('should load the first page from staticItems on init', () => {
-      expect(component.items().length).toBeGreaterThan(0);
-    });
-
-    it('should not show a loading indicator after items are loaded', () => {
-      expect(component.isLoading()).toBeFalse();
-    });
-
-    it('isScrollComplete should be false when not all items are loaded', () => {
-      expect(component.isScrollComplete()).toBeFalse();
-    });
-  });
-
-  describe('with MockSearchableSelectDataSource', () => {
-    beforeEach(() => {
-      const config = buildConfig({ dataSource: new MockSearchableSelectDataSource(MOCK_CITIES) });
-      createFixture(config);
-    });
-
-    it('should create the component', () => {
-      expect(component).toBeTruthy();
-    });
-
-    it('should load the initial page on init', () => {
-      expect(component.items().length).toBe(5);
-      expect(component.isLoading()).toBeFalse();
-    });
-
-    it('should accumulate items on fetchNextPage', () => {
-      component.fetchNextPage();
-      fixture.detectChanges();
-      expect(component.items().length).toBe(8);
-    });
-
-    it('isScrollComplete should be true when offset reaches totalCount', () => {
-      component.fetchNextPage();
-      fixture.detectChanges();
-      expect(component.isScrollComplete()).toBeTrue();
-    });
-
-    it('should not fetch again when isScrollComplete is true', () => {
-      component.fetchNextPage();
-      fixture.detectChanges();
-      const itemsBefore = component.items().length;
-
-      component.fetchNextPage();
-      fixture.detectChanges();
-      expect(component.items().length).toBe(itemsBefore);
-    });
-  });
-
-  describe('search', () => {
-    beforeEach(() => {
-      createFixture(buildConfig(), MOCK_CITIES);
-    });
-
-    it('should filter items after search debounce', fakeAsync(() => {
-      component.searchForm.controls.searchTerm.setValue('par');
-      component.onSearchInput();
-      tick(1000);
-      fixture.detectChanges();
-
-      expect(component.items().length).toBe(1);
-      expect(component.items()[0]['name']).toBe('Paris');
-    }));
-
-    it('should restore all items after resetSearch', fakeAsync(() => {
-      component.searchForm.controls.searchTerm.setValue('par');
-      component.onSearchInput();
-      tick(1000);
-      fixture.detectChanges();
-
-      component.resetSearch();
-      tick(1000);
-      fixture.detectChanges();
-
-      expect(component.items().length).toBe(5);
-    }));
-  });
-
-  describe('showEditOption', () => {
-    it('should be false in create mode', () => {
-      createFixture(buildConfig({ mode: 'create' }), MOCK_CITIES);
-      expect(component.showEditOption()).toBeFalse();
-    });
-
-    it('should be false in edit mode when currentLabel is not set', () => {
-      createFixture(buildConfig({ mode: 'edit' }), MOCK_CITIES);
-      expect(component.showEditOption()).toBeFalse();
-    });
-
-    it('should be false when currentId is already in the loaded items', () => {
-      createFixture(
-        buildConfig({
-          mode: 'edit',
-          option: {
-            isRequired: true,
-            displayName: 'name',
-            formControlName: 'city',
-            label: 'City',
-            svgIcon: 'city-icon',
-            currentId: 1,
-            currentLabel: 'Paris',
-          },
-        }),
-        MOCK_CITIES
-      );
-      expect(component.showEditOption()).toBeFalse();
-    });
-
-    it('should be true when currentId is NOT in the loaded items', () => {
-      createFixture(
-        buildConfig({
-          mode: 'edit',
-          option: {
-            isRequired: true,
-            displayName: 'name',
-            formControlName: 'city',
-            label: 'City',
-            svgIcon: 'city-icon',
-            currentId: 99,
-            currentLabel: 'Unknown City',
-          },
-        }),
-        MOCK_CITIES
-      );
-      expect(component.showEditOption()).toBeTrue();
-    });
-  });
-
-  describe('outputs', () => {
-    beforeEach(() => {
-      createFixture(buildConfig(), MOCK_CITIES);
-    });
-
-    it('should emit selectionChange when onSelectionChange is called', () => {
-      const emitted: unknown[] = [];
-      component.selectionChange.subscribe(e => emitted.push(e));
-
-      const mockEvent = { value: 1 } as any;
-      component.onSelectionChange(mockEvent);
-
-      expect(emitted.length).toBe(1);
-      expect(emitted[0]).toEqual(mockEvent);
-    });
-
-    it('should emit valueChange when onValueChange is called', () => {
-      const emitted: unknown[] = [];
-      component.valueChange.subscribe(e => emitted.push(e));
-
-      component.onValueChange(42);
-
-      expect(emitted.length).toBe(1);
-      expect(emitted[0]).toBe(42);
-    });
-  });
-});

package/src/lib/mat-list-shared.component.ts

@@ -1,168 +0,0 @@
-import {
-  Component,
-  DestroyRef,
-  OnInit,
-  computed,
-  inject,
-  input,
-  output,
-  signal,
-} from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatSelectModule, MatSelectChange } from '@angular/material/select';
-import { MatInputModule } from '@angular/material/input';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import { SearchableSelectConfig, SearchableSelectDataSource, PagedRequest } from './mat-list-shared.model';
-import { MockSearchableSelectDataSource } from './mat-list-shared.mock';
-import { MatSelectInfiniteScrollDirective } from './mat-select-infinite-scroll.directive';
-
-const SEARCH_DELAY = 1000;
-const INITIAL_BATCH_SIZE = 5;
-const SUBSEQUENT_BATCH_SIZE = 10;
-
-@Component({
-  selector: 'ngx-mat-searchable-select',
-  templateUrl: 'mat-list-shared.component.html',
-  standalone: true,
-  imports: [
-    FormsModule,
-    ReactiveFormsModule,
-    MatFormFieldModule,
-    MatSelectModule,
-    MatInputModule,
-    MatButtonModule,
-    MatIconModule,
-    MatSelectInfiniteScrollDirective,
-  ],
-})
-export class NgxMatSearchableSelectComponent implements OnInit {
-  private readonly destroyRef = inject(DestroyRef);
-
-  // Signal-based inputs
-  readonly parentForm = input.required<FormGroup>();
-  readonly config = input.required<SearchableSelectConfig>();
-  /** Optional static item list. When provided, no dataSource or server call is needed. */
-  readonly staticItems = input<Record<string, unknown>[]>();
-
-  // Signal-based outputs
-  readonly selectionChange = output<MatSelectChange>();
-  readonly valueChange = output<unknown>();
-
-  // Internal search form (inline inject — no constructor needed)
-  readonly searchForm = inject(FormBuilder).group({ searchTerm: '' });
-
-  // State signals
-  readonly items = signal<Record<string, unknown>[]>([]);
-  readonly isLoading = signal(false);
-
-  private readonly offset = signal(0);
-  private readonly totalItems = signal(0);
-  private readonly hasLoaded = signal(false);
-  private readonly isItemSelected = signal(false);
-  private searchTimer: ReturnType<typeof setTimeout> | undefined;
-  private queryState!: PagedRequest;
-  private dataSource!: SearchableSelectDataSource;
-
-  // Computed: true when all pages have been loaded
-  readonly isScrollComplete = computed(
-    () => this.totalItems() > 0 && this.offset() >= this.totalItems()
-  );
-
-  // Computed: true when a fetch completed but returned zero results
-  readonly noItemsFound = computed(
-    () => this.hasLoaded() && !this.isLoading() && this.items().length === 0
-  );
-
-  // Computed: show the pre-selected edit option when it is not in the loaded pages
-  readonly showEditOption = computed(() => {
-    const cfg = this.config();
-    if (cfg.mode !== 'edit') return false;
-    if (!cfg.option.currentLabel) return false;
-    return !this.items().some(item => item['id'] === cfg.option.currentId);
-  });
-
-  ngOnInit(): void {
-    const staticData = this.staticItems();
-    this.dataSource = staticData
-      ? new MockSearchableSelectDataSource(staticData)
-      : this.config().dataSource!;
-
-    const filter = this.config().filter;
-    this.queryState = {
-      take: INITIAL_BATCH_SIZE,
-      skip: 0,
-      searchString: '',
-      ...(filter?.id !== undefined ? { id: filter.id } : {}),
-    };
-    this.fetchNextPage();
-  }
-
-  fetchNextPage(): void {
-    if (this.isLoading() || this.isScrollComplete()) return;
-
-    this.isLoading.set(true);
-    this.dataSource.getAll(this.queryState)
-      .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe(response => {
-        this.items.update(prev => [...prev, ...response.data]);
-        this.totalItems.set(response.totalCount);
-        this.offset.update(n => n + response.data.length);
-        this.queryState = {
-          ...this.queryState,
-          take: SUBSEQUENT_BATCH_SIZE,
-          skip: this.offset(),
-        };
-        this.hasLoaded.set(true);
-        this.isLoading.set(false);
-      });
-  }
-
-  onPanelClosed(): void {
-    if (!this.isItemSelected()) {
-      this.resetSearch();
-    }
-  }
-
-  getDisplayLabel(item: Record<string, unknown>): string {
-    return String(item[this.config().option.displayName] ?? '');
-  }
-
-  onSearchInput(): void {
-    this.isItemSelected.set(false);
-    clearTimeout(this.searchTimer);
-    this.searchTimer = setTimeout(() => this.applySearch(), SEARCH_DELAY);
-  }
-
-  onSelectionChange(event: MatSelectChange): void {
-    this.selectionChange.emit(event);
-    this.isItemSelected.set(true);
-  }
-
-  onValueChange(value: unknown): void {
-    this.valueChange.emit(value);
-    this.isItemSelected.set(true);
-  }
-
-  resetSearch(): void {
-    this.searchForm.controls.searchTerm.setValue('');
-    this.onSearchInput();
-  }
-
-  private applySearch(): void {
-    const searchTerm = (this.searchForm.value.searchTerm ?? '').trim();
-    this.items.set([]);
-    this.offset.set(0);
-    this.totalItems.set(0);
-    this.hasLoaded.set(false);
-    this.queryState = {
-      ...this.queryState,
-      take: SUBSEQUENT_BATCH_SIZE,
-      skip: 0,
-      searchString: searchTerm,
-    };
-    this.fetchNextPage();
-  }
-}

package/src/lib/mat-list-shared.mock.ts

@@ -1,43 +0,0 @@
-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/src/lib/mat-list-shared.model.ts

@@ -1,40 +0,0 @@
-import { Observable } from 'rxjs';
-
-export interface SearchableSelectConfig {
-  dataSource?: SearchableSelectDataSource;
-  option: SearchableSelectOption;
-  mode: 'create' | 'edit';
-  filter?: { id?: number };
-  searchable?: boolean;
-  multiple?: boolean;
-}
-
-export interface SearchableSelectDataSource {
-  getAll(request: PagedRequest): Observable<PagedResponse<Record<string, unknown>>>;
-}
-
-export interface SearchableSelectOption {
-  isRequired: boolean;
-  displayName: string;
-  formControlName: string;
-  label: string;
-  /** Material SVG icon name (requires MatIconRegistry setup). */
-  svgIcon?: string;
-  /** Material font icon name — used when svgIcon is not provided. */
-  fontIcon?: string;
-  currentId?: number;
-  currentLabel?: string;
-}
-
-export interface PagedRequest {
-  skip: number;
-  take: number;
-  sort?: string;
-  searchString: string;
-  id?: number;
-}
-
-export interface PagedResponse<T> {
-  data: T[];
-  totalCount: number;
-}

package/src/lib/mat-list-shared.service.spec.ts

@@ -1,16 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { MatListSharedService } from './mat-list-shared.service';
-
-describe('MatListSharedService', () => {
-  let service: MatListSharedService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(MatListSharedService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-});

package/src/lib/mat-select-infinite-scroll.directive.ts

@@ -1,52 +0,0 @@
-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/src/public-api.ts

@@ -1,8 +0,0 @@
-/*
- * Public API Surface of mat-list-shared
- */
-
-export * from './lib/mat-list-shared.component';
-export * from './lib/mat-select-infinite-scroll.directive';
-export * from './lib/mat-list-shared.model';
-export * from './lib/mat-list-shared.mock';

package/src/test.ts

@@ -1,15 +0,0 @@
-// 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';
-
-// First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting(),
-);

package/tsconfig.lib.json

@@ -1,15 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/lib",
-    "declaration": true,
-    "declarationMap": true,
-    "inlineSources": true,
-    "types": []
-  },
-  "exclude": [
-    "src/test.ts",
-    "**/*.spec.ts"
-  ]
-}

package/tsconfig.lib.prod.json

@@ -1,10 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "./tsconfig.lib.json",
-  "compilerOptions": {
-    "declarationMap": false
-  },
-  "angularCompilerOptions": {
-    "compilationMode": "partial"
-  }
-}

package/tsconfig.spec.json

@@ -1,17 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/spec",
-    "types": [
-      "jasmine"
-    ]
-  },
-  "files": [
-    "src/test.ts"
-  ],
-  "include": [
-    "**/*.spec.ts",
-    "**/*.d.ts"
-  ]
-}