verben-authentication-ui 1.0.37 → 1.1.1

package/fesm2022/verben-authentication-ui-src-lib-base.mjs

@@ -1,43 +1,163 @@
+import { SearchPropertyValueType, SortDirection, SearchOperator, SearchPropertySign, ErrorResponse } from 'verben-authentication-ui/src/lib/models';
+export { SearchOperator, SearchPropertySign, SearchPropertyValueType, SortDirection } from 'verben-authentication-ui/src/lib/models';
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Component, Input, Output } from '@angular/core';
-import { BehaviorSubject, Subject, debounceTime, distinctUntilChanged, takeUntil } from 'rxjs';
-import { takeUntil as takeUntil$1 } from 'rxjs/operators';
+import { signal, Injectable } from '@angular/core';
+import { BehaviorSubject, lastValueFrom, Subject, debounce, timer, distinctUntilChanged, takeUntil } from 'rxjs';
+import * as i1 from 'verben-authentication-ui/src/lib/services';
+import { SortDirection as SortDirection$1 } from 'verben-ng-ui';
 
-class BaseDataState {
+// Re-export the shared API payload models so base-page consumers can import
+// them from a single place without reaching into the models entry point.
+
+/**
+ * Extract property name from column definition.
+ * Only columns with accessorKey can be used for filter/sort.
+ */
+function getPropertyName(column) {
+    if (!column.accessorKey) {
+        throw new Error(`Column '${column.id}' must have accessorKey for filter/sort operations`);
+    }
+    return String(column.accessorKey);
+}
+/**
+ * Infer API property type from column definition.
+ * Uses basic heuristics based on the accessor key name.
+ */
+function inferPropertyType(column) {
+    if (!column.accessorKey) {
+        return SearchPropertyValueType.String;
+    }
+    const propertyName = String(column.accessorKey).toLowerCase();
+    // Date detection. Includes the common audit fields (CreatedAt, UpdatedAt,
+    // ModifiedAt, DeletedAt) whose names contain neither "date" nor "time".
+    if (propertyName.includes('date') ||
+        propertyName.includes('time') ||
+        /^(created|updated|modified|deleted)/.test(propertyName)) {
+        return SearchPropertyValueType.Date;
+    }
+    if (propertyName.startsWith('is') || propertyName.startsWith('has')) {
+        return SearchPropertyValueType.Bool;
+    }
+    if (propertyName.includes('count') ||
+        propertyName.includes('amount') ||
+        propertyName.includes('price') ||
+        propertyName.includes('total')) {
+        return SearchPropertyValueType.Decimal;
+    }
+    return SearchPropertyValueType.String;
+}
+/**
+ * Find a column by its id.
+ */
+function findColumn(columns, columnId) {
+    return columns.find((col) => col.id === columnId);
+}
+
+/**
+ * Abstract state management for base data pages.
+ * Tracks items, loading state, query params, filters, sorts, search, and
+ * visible columns. Card data is held in signals for cheap change detection.
+ */
+class BaseDataPageState {
     updating$ = new BehaviorSubject(false);
     items$ = new BehaviorSubject([]);
-    searchTerm$ = new BehaviorSubject('');
+    totalCount$ = new BehaviorSubject(0);
     queryParams$ = new BehaviorSubject({
         skip: 0,
         limit: 20,
-        sortOrder: 'asc',
+        sortOrder: SortDirection.Asc,
     });
-    columns$ = new BehaviorSubject([]);
+    searchTerm$ = new BehaviorSubject('');
+    filters$ = new BehaviorSubject([]);
+    sorts$ = new BehaviorSubject([]);
+    visibleColumns$ = new BehaviorSubject([]);
+    cardData = signal([]);
+    currentCardData = signal(null);
+    cardDataMapper;
+    /**
+     * Stable identity for a record. The auth models key on uppercase `Id`/`Code`
+     * and only sometimes carry a lowercase `id`, so match across all three rather
+     * than assuming one is populated.
+     */
+    getItemKey(item) {
+        return item.Id || item.id || item.Code;
+    }
+    updateCardDataFromItems(items) {
+        if (this.cardDataMapper) {
+            this.cardData.set(items.map((item) => this.cardDataMapper(item)));
+        }
+    }
+    // ===== Loading State =====
     isUpdating$() {
         return this.updating$.asObservable();
     }
     setUpdating(isUpdating) {
         this.updating$.next(isUpdating);
     }
+    // ===== Items =====
     getItems$() {
         return this.items$.asObservable();
     }
+    getItemsValue() {
+        return this.items$.getValue();
+    }
     setItems(items) {
         this.items$.next(items);
+        this.updateCardDataFromItems(items);
     }
     appendItems(newItems) {
-        const currentItems = this.items$.getValue();
-        this.items$.next([...currentItems, ...newItems]);
+        const allItems = [...this.items$.getValue(), ...newItems];
+        this.items$.next(allItems);
+        this.updateCardDataFromItems(allItems);
     }
-    getSearchTerm$() {
-        return this.searchTerm$.asObservable();
+    addItem(item) {
+        const allItems = [item, ...this.items$.getValue()];
+        this.items$.next(allItems);
+        this.updateCardDataFromItems(allItems);
     }
-    getSearchTermValue() {
-        return this.searchTerm$.getValue();
+    updateItem(updatedItem) {
+        const items = this.items$.getValue();
+        const key = this.getItemKey(updatedItem);
+        const index = items.findIndex((item) => this.getItemKey(item) === key);
+        if (index !== -1) {
+            items[index] = updatedItem;
+            const allItems = [...items];
+            this.items$.next(allItems);
+            this.updateCardDataFromItems(allItems);
+        }
     }
-    setSearchTerm(term) {
-        this.searchTerm$.next(term);
+    /** Update the item when its key already exists, otherwise prepend it. */
+    upsertItem(item) {
+        const key = this.getItemKey(item);
+        const exists = this.items$
+            .getValue()
+            .some((existing) => this.getItemKey(existing) === key);
+        if (exists) {
+            this.updateItem(item);
+        }
+        else {
+            this.addItem(item);
+        }
+    }
+    removeItem(itemKey) {
+        const filteredItems = this.items$
+            .getValue()
+            .filter((item) => this.getItemKey(item) !== itemKey);
+        this.items$.next(filteredItems);
+        this.updateCardDataFromItems(filteredItems);
+    }
+    clearItems() {
+        this.items$.next([]);
+        this.updateCardDataFromItems([]);
+    }
+    // ===== Total Count =====
+    getTotalCount$() {
+        return this.totalCount$.asObservable();
     }
+    setTotalCount(count) {
+        this.totalCount$.next(count);
+    }
+    // ===== Query Parameters =====
     getQueryParams$() {
         return this.queryParams$.asObservable();
     }
@@ -48,258 +168,520 @@ class BaseDataState {
         this.queryParams$.next({ ...this.queryParams$.getValue(), ...params });
     }
     resetPagination() {
+        this.queryParams$.next({ ...this.queryParams$.getValue(), skip: 0 });
+    }
+    incrementPagination() {
         const currentParams = this.queryParams$.getValue();
-        this.queryParams$.next({ ...currentParams, skip: 0 });
+        this.queryParams$.next({
+            ...currentParams,
+            skip: currentParams.skip + currentParams.limit,
+        });
     }
-    getColumns$() {
-        return this.columns$.asObservable();
+    // ===== Search =====
+    getSearchTerm$() {
+        return this.searchTerm$.asObservable();
     }
-    setColumns(columns) {
-        this.columns$.next(columns);
+    getSearchTermValue() {
+        return this.searchTerm$.getValue();
     }
-    // CRUD Operations
-    addItem(item) {
-        const currentItems = this.items$.getValue();
-        this.items$.next([...currentItems, item]);
+    setSearchTerm(term) {
+        this.searchTerm$.next(term);
     }
-    updateItem(updatedItem) {
-        const items = this.items$.getValue();
-        const index = items.findIndex((item) => item.Id === updatedItem.Id);
-        if (index !== -1) {
-            items[index] = updatedItem;
-            this.items$.next([...items]);
-        }
+    // ===== Filters =====
+    getFilters$() {
+        return this.filters$.asObservable();
     }
-    removeItem(itemId) {
-        const currentItems = this.items$.getValue();
-        this.items$.next(currentItems.filter((item) => item.Id !== itemId));
+    getFiltersValue() {
+        return this.filters$.getValue();
     }
-}
-
-class BaseDataService {
-    http;
-    baseUrl;
-    constructor(http, baseUrl) {
-        this.http = http;
-        this.baseUrl = baseUrl;
+    setFilters(filters) {
+        this.filters$.next(filters);
     }
-    getItems(skip, limit, sortParam, sortOrder) {
-        return this.http.get(`${this.baseUrl}/${this.getEndpoint()}/${skip}/${limit}/${String(sortParam)}/${sortOrder}`);
+    clearFilters() {
+        this.filters$.next([]);
     }
-    getItemsBySearchTerm(searchTerm, skip, limit, sortParam, sortOrder) {
-        return this.http.get(`${this.baseUrl}/${this.getEndpoint()}/search/${searchTerm}/${skip}/${limit}/${String(sortParam)}/${sortOrder}`);
+    // ===== Sorts =====
+    getSorts$() {
+        return this.sorts$.asObservable();
     }
-    saveItems(items) {
-        return this.http.post(`${this.baseUrl}/${this.getEndpoint()}`, items);
+    getSortsValue() {
+        return this.sorts$.getValue();
     }
-    deleteItems(itemIds) {
-        return this.http.delete(`${this.baseUrl}/${this.getEndpoint()}?ids=${itemIds.join(',')}`);
+    setSorts(sorts) {
+        this.sorts$.next(sorts);
     }
-}
-
-class BaseDataFacade {
-    state;
-    service;
-    searchSubject = new Subject();
-    destroy$ = new Subject();
-    constructor(state, service) {
-        this.state = state;
-        this.service = service;
-        this.setupSearchHandler();
+    clearSorts() {
+        this.sorts$.next([]);
     }
-    setupSearchHandler() {
-        this.searchSubject
-            .pipe(debounceTime(300), distinctUntilChanged(), takeUntil(this.destroy$))
-            .subscribe((searchTerm) => {
-            this.handleSearch(searchTerm);
-        });
+    // ===== Visible Columns =====
+    getVisibleColumns$() {
+        return this.visibleColumns$.asObservable();
     }
-    destroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
+    getVisibleColumnsValue() {
+        return this.visibleColumns$.getValue();
     }
-    // State Observables
-    isUpdating$() {
-        return this.state.isUpdating$();
+    setVisibleColumns(columns) {
+        this.visibleColumns$.next(columns);
     }
-    getItems$() {
-        return this.state.getItems$();
+    // ===== Card Data =====
+    setCardDataMapper(mapper) {
+        this.cardDataMapper = mapper;
     }
-    getSearchTerm$() {
-        return this.state.getSearchTerm$();
+    getCardData() {
+        return this.cardData;
     }
-    getQueryParams$() {
-        return this.state.getQueryParams$();
+    setCardData(data) {
+        this.cardData.set(data);
     }
-    // Actions
-    search(term) {
-        this.searchSubject.next(term);
+    getCurrentCardData() {
+        return this.currentCardData;
     }
-    async handleSearch(searchTerm) {
-        this.state.setSearchTerm(searchTerm);
-        this.state.resetPagination();
-        await this.loadItems();
+    setCurrentCardData(data) {
+        this.currentCardData.set(data);
     }
-    async loadItems() {
-        try {
-            this.state.setUpdating(true);
-            const params = this.state.getQueryParamsValue();
-            const searchTerm = this.state.getSearchTermValue();
-            const response = searchTerm
-                ? await this.service
-                    .getItemsBySearchTerm(searchTerm, params.skip, params.limit, params.sortParam, params.sortOrder)
-                    .toPromise()
-                : await this.service
-                    .getItems(params.skip, params.limit, params.sortParam, params.sortOrder)
-                    .toPromise();
-            if (response?.Result) {
-                this.state.setItems(response?.Result);
-            }
-        }
-        catch (error) {
-            console.error('Failed to load items:', error);
-            throw error;
-        }
-        finally {
-            this.state.setUpdating(false);
-        }
+    // ===== Reset All =====
+    reset() {
+        this.clearItems();
+        this.setSearchTerm('');
+        this.clearFilters();
+        this.clearSorts();
+        this.setVisibleColumns([]);
+        this.cardData.set([]);
+        this.currentCardData.set(null);
+        this.resetPagination();
+        this.setTotalCount(0);
     }
-    async loadMore() {
-        try {
-            this.state.setUpdating(true);
-            const currentParams = this.state.getQueryParamsValue();
-            const newSkip = currentParams.skip + currentParams.limit;
-            this.state.updateQueryParams({ skip: newSkip });
-            const response = await this.service
-                .getItems(newSkip, currentParams.limit, currentParams.sortParam, currentParams.sortOrder)
-                .toPromise();
-            if (response?.Result) {
-                this.state.appendItems(response.Result);
+}
+
+/**
+ * Converts FilterCondition[] emitted by lib-data-filter into the
+ * SearchPropertyValue[] payload the search API expects.
+ */
+class FilterHandlerService {
+    buildFilterPayload(filters, columns) {
+        return filters
+            .map((filter) => {
+            const column = findColumn(columns, filter.columnId);
+            if (!column) {
+                console.warn(`Column not found for filter: ${filter.columnId}`);
+                return null;
             }
-        }
-        catch (error) {
-            console.error('Failed to load more items:', error);
-            throw error;
-        }
-        finally {
-            this.state.setUpdating(false);
-        }
-    }
-    async saveItem(item) {
-        try {
-            this.state.setUpdating(true);
-            const response = await this.service.saveItems([item]).toPromise();
-            if (response?.[0]) {
-                this.state.updateItem(response[0]);
+            const propertyName = getPropertyName(column);
+            const propertyType = inferPropertyType(column);
+            const sign = this.mapOperatorToSign(filter.operator);
+            return {
+                PropertyName: propertyName,
+                EntityValue: String(filter.value),
+                Type: propertyType,
+                Operator: SearchOperator.And,
+                Sign: sign,
+            };
+        })
+            .filter(Boolean);
+    }
+    mapOperatorToSign(operator) {
+        const operatorMap = {
+            startsWith: SearchPropertySign.LIKE,
+            endsWith: SearchPropertySign.LIKE,
+            contains: SearchPropertySign.LIKE,
+            equals: SearchPropertySign.EQ,
+            equal: SearchPropertySign.EQ,
+            greaterThan: SearchPropertySign.GT,
+            lessThan: SearchPropertySign.LT,
+            on: SearchPropertySign.EQ,
+            before: SearchPropertySign.LT,
+            after: SearchPropertySign.GT,
+        };
+        return operatorMap[operator] || SearchPropertySign.EQ;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterHandlerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterHandlerService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterHandlerService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Converts SortCondition[] emitted by lib-data-sort into the
+ * SearchPropertyValue[] payload the search API expects.
+ */
+class SortHandlerService {
+    buildSortPayload(sorts, columns) {
+        return sorts
+            .map((sort) => {
+            const column = findColumn(columns, sort.columnId);
+            if (!column) {
+                console.warn(`Column not found for sort: ${sort.columnId}`);
+                return null;
             }
+            const propertyName = getPropertyName(column);
+            const propertyType = inferPropertyType(column);
+            return {
+                PropertyName: propertyName,
+                EntityValue: '',
+                Type: propertyType,
+                Operator: SearchOperator.And,
+                Sign: SearchPropertySign.EQ,
+                Sort: this.mapSortDirection(sort.direction),
+            };
+        })
+            .filter(Boolean);
+    }
+    mapSortDirection(direction) {
+        switch (direction) {
+            case SortDirection$1.Asc:
+                return SortDirection.Asc;
+            case SortDirection$1.Desc:
+                return SortDirection.Desc;
+            default:
+                return SortDirection.None;
         }
-        catch (error) {
-            console.error('Failed to save item:', error);
-            throw error;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SortHandlerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SortHandlerService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SortHandlerService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Abstract base service for data pages.
+ * Handles list/search/save/delete with filter and sort support.
+ *
+ * The concrete URLs are built by the protected `*Url` seams below so that
+ * services whose API does not follow the default `Get{Endpoint}/{skip}/{limit}`
+ * conventions (e.g. plural names or a trailing sort suffix) can override just
+ * the URL without reimplementing the request-selection logic in `getData()`.
+ * When `baseUrl` is omitted, HttpWebRequestService falls back to the
+ * AuthenticationAPI base.
+ */
+class BaseDataPageService {
+    server;
+    filterHandler;
+    sortHandler;
+    baseUrl;
+    constructor(server, filterHandler, sortHandler, baseUrl) {
+        this.server = server;
+        this.filterHandler = filterHandler;
+        this.sortHandler = sortHandler;
+        this.baseUrl = baseUrl;
+    }
+    // ===== URL seams (override in child services when the API deviates) =====
+    listUrl(skip, limit) {
+        return `Get${this.getEndpoint()}/${skip}/${limit}`;
+    }
+    searchTermUrl(term, skip, limit) {
+        return `Get${this.getEndpoint()}WithParam/${term}/${skip}/${limit}`;
+    }
+    filterSearchUrl(skip, limit) {
+        return `Search${this.getEndpoint()}/${skip}/${limit}`;
+    }
+    saveUrl() {
+        return `Save${this.getEndpoint()}`;
+    }
+    deleteUrl(itemIds) {
+        return `${this.getEndpoint()}/${itemIds.join(',')}`;
+    }
+    // ===== Payload =====
+    buildPayload(filters, sorts, columns) {
+        const filterPayload = this.filterHandler.buildFilterPayload(filters, columns);
+        const sortPayload = this.sortHandler.buildSortPayload(sorts, columns);
+        return [...filterPayload, ...sortPayload];
+    }
+    // ===== Reads =====
+    /**
+     * Fetch data, automatically choosing the endpoint based on parameters:
+     * search-only -> GET WithParam, filters/sorts -> POST Search, otherwise plain GET.
+     */
+    async getData(skip, limit, filters, sorts, searchTerm, columns) {
+        const hasFilters = !!filters && filters.length > 0;
+        const hasSorts = !!sorts && sorts.length > 0;
+        if (searchTerm && !hasFilters && !hasSorts) {
+            return this.server.get(this.searchTermUrl(searchTerm, skip, limit), this.baseUrl);
         }
-        finally {
-            this.state.setUpdating(false);
+        if (hasFilters || hasSorts) {
+            if (!columns) {
+                throw new Error('Columns required for filter/sort operations');
+            }
+            const payload = this.buildPayload(filters || [], sorts || [], columns);
+            return this.server.post(this.filterSearchUrl(skip, limit), payload, this.baseUrl);
         }
+        return this.server.get(this.listUrl(skip, limit), this.baseUrl);
+    }
+    // ===== Writes =====
+    async saveItems(items) {
+        return this.server.post(this.saveUrl(), items, this.baseUrl);
     }
-    async deleteItem(itemId) {
+    async deleteItems(itemIds) {
+        // HttpWebRequestService.delete returns a raw observable that rejects on HTTP
+        // error (unlike get/post, which resolve an ErrorResponse), so normalize here
+        // to keep the facade's error-handling contract uniform.
         try {
-            this.state.setUpdating(true);
-            await this.service.deleteItems([itemId]).toPromise();
-            this.state.removeItem(itemId);
+            const result = await lastValueFrom(this.server.delete(this.deleteUrl(itemIds), this.baseUrl));
+            return result ?? false;
         }
-        catch (error) {
-            console.error('Failed to delete item:', error);
-            throw error;
+        catch (err) {
+            const msg = err?.error?.ErrorMsg || err?.ErrorMsg || err?.message || 'Delete failed';
+            return new ErrorResponse(msg);
         }
-        finally {
-            this.state.setUpdating(false);
+    }
+    // ===== Export =====
+    async exportData(filters, sorts, searchTerm, columns) {
+        const result = await this.getData(0, 999999, filters, sorts, searchTerm, columns);
+        if (result instanceof ErrorResponse) {
+            return result;
         }
+        return result.Result || [];
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BaseDataFacade, deps: [{ token: BaseDataState }, { token: BaseDataService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BaseDataFacade });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BaseDataPageService, deps: "invalid", target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BaseDataPageService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BaseDataFacade, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BaseDataPageService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: BaseDataState }, { type: BaseDataService }] });
+        }], ctorParameters: () => [{ type: i1.HttpWebRequestService }, { type: FilterHandlerService }, { type: SortHandlerService }, { type: undefined }] });
 
-class BaseDataComponent {
-    facade;
-    columns;
-    selectionChange = new EventEmitter();
-    exportData = new EventEmitter();
-    destroy$ = new Subject();
-    isLoading = false;
-    items = [];
-    selectedItems = [];
-    isGridView = true;
-    constructor(facade) {
-        this.facade = facade;
+/**
+ * Debounces search terms. Emits the term after the user stops typing.
+ * Provided per page so each page owns its own debounce stream.
+ *
+ * `search$` is a stable observable whose debounce interval is read live from
+ * `debounceMs`, so `setDebounceTime()` can be called after subscribers have
+ * attached (e.g. from a runtime `@Input`) and still take effect.
+ */
+class SearchHandlerService {
+    searchSubject = new Subject();
+    debounceMs = 500;
+    search$ = this.searchSubject.asObservable().pipe(debounce(() => timer(this.debounceMs)), distinctUntilChanged());
+    search(term) {
+        this.searchSubject.next(term);
     }
-    ngOnInit() {
-        this.setupSubscriptions();
-        this.loadInitialData();
+    setDebounceTime(ms) {
+        this.debounceMs = ms;
     }
     ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
+        this.searchSubject.complete();
     }
-    setupSubscriptions() {
-        this.facade
-            .isUpdating$()
-            .pipe(takeUntil$1(this.destroy$))
-            .subscribe((loading) => (this.isLoading = loading));
-        this.facade
-            .getItems$()
-            .pipe(takeUntil$1(this.destroy$))
-            .subscribe((items) => (this.items = items));
-    }
-    async loadInitialData() {
-        try {
-            await this.facade.loadItems();
-        }
-        catch (error) {
-            // Handle error appropriately
-            console.error('Failed to load initial data:', error);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SearchHandlerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SearchHandlerService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SearchHandlerService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Abstract facade for base data pages.
+ * Orchestrates state, service, and search handler, and surfaces the host app's
+ * busy indicator / toasts through UtilService.
+ */
+class BaseDataPageFacade {
+    state;
+    service;
+    searchHandler;
+    utilService;
+    config;
+    destroy$ = new Subject();
+    cardSelectionCleared = new Subject();
+    constructor(state, service, searchHandler, utilService, config) {
+        this.state = state;
+        this.service = service;
+        this.searchHandler = searchHandler;
+        this.utilService = utilService;
+        this.config = config;
+        this.initializeSearchHandler();
+        this.state.setVisibleColumns(this.config.columns);
+        if (this.config.cardDataMapper) {
+            this.state.setCardDataMapper(this.config.cardDataMapper);
         }
+        // Drive the host busy indicator from the shared loading flag.
+        this.state
+            .isUpdating$()
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((loading) => this.utilService.sendBI(loading));
     }
-    onSearch(event) {
-        this.facade.search(event.value);
+    // ===== Configuration =====
+    getConfig() {
+        return this.config;
     }
-    async onLoadMore() {
-        try {
-            await this.facade.loadMore();
+    getColumns() {
+        return this.config.columns;
+    }
+    // ===== Observables =====
+    get items$() {
+        return this.state.getItems$();
+    }
+    get isLoading$() {
+        return this.state.isUpdating$();
+    }
+    get totalCount$() {
+        return this.state.getTotalCount$();
+    }
+    get filters$() {
+        return this.state.getFilters$();
+    }
+    get sorts$() {
+        return this.state.getSorts$();
+    }
+    get searchTerm$() {
+        return this.state.getSearchTerm$();
+    }
+    get visibleColumns$() {
+        return this.state.getVisibleColumns$();
+    }
+    get cardData() {
+        return this.state.getCardData();
+    }
+    get currentCardData() {
+        return this.state.getCurrentCardData();
+    }
+    /**
+     * Emits when a refetch invalidates the current card selection.
+     * Card views listen to this to clear their own selection state.
+     */
+    get cardSelectionCleared$() {
+        return this.cardSelectionCleared.asObservable();
+    }
+    // ===== Data Loading =====
+    async loadData() {
+        this.clearCardSelection();
+        this.state.setUpdating(true);
+        this.state.clearItems();
+        this.state.resetPagination();
+        const params = this.state.getQueryParamsValue();
+        const filters = this.state.getFiltersValue();
+        const sorts = this.state.getSortsValue();
+        const searchTerm = this.state.getSearchTermValue();
+        const result = await this.service.getData(params.skip, params.limit, filters, sorts, searchTerm, this.config.columns);
+        this.state.setUpdating(false);
+        if (result instanceof ErrorResponse) {
+            this.utilService.showError(result.ErrorMsg);
+            return;
         }
-        catch (error) {
-            console.error('Failed to load more:', error);
+        this.state.setItems(result.Result || []);
+        this.state.setTotalCount(result.Total || 0);
+    }
+    addItem(item) {
+        this.state.addItem(item);
+    }
+    async loadMore() {
+        this.state.setUpdating(true);
+        this.state.incrementPagination();
+        const params = this.state.getQueryParamsValue();
+        const filters = this.state.getFiltersValue();
+        const sorts = this.state.getSortsValue();
+        const searchTerm = this.state.getSearchTermValue();
+        const result = await this.service.getData(params.skip, params.limit, filters, sorts, searchTerm, this.config.columns);
+        this.state.setUpdating(false);
+        if (result instanceof ErrorResponse) {
+            this.utilService.showError(result.ErrorMsg);
+            return;
         }
+        this.state.appendItems(result.Result || []);
+    }
+    async refresh() {
+        await this.loadData();
+    }
+    // ===== Search =====
+    onSearch(term) {
+        this.searchHandler.search(term);
     }
-    onViewChange(isGridView) {
-        this.isGridView = isGridView;
+    initializeSearchHandler() {
+        if (this.config.searchDebounceTime) {
+            this.searchHandler.setDebounceTime(this.config.searchDebounceTime);
+        }
+        this.searchHandler.search$.pipe(takeUntil(this.destroy$)).subscribe((term) => {
+            this.state.setSearchTerm(term);
+            this.loadData();
+        });
     }
-    onSelectionChange(selected) {
-        this.selectedItems = selected;
-        this.selectionChange.emit(selected);
+    // ===== Filters / Sorts =====
+    async applyFilters(filters) {
+        this.state.setFilters(filters);
+        await this.loadData();
+    }
+    async clearFilters() {
+        this.state.clearFilters();
+        await this.loadData();
+    }
+    async applySorts(sorts) {
+        this.state.setSorts(sorts);
+        await this.loadData();
+    }
+    async clearSorts() {
+        this.state.clearSorts();
+        await this.loadData();
+    }
+    // ===== Visible Columns =====
+    updateVisibleColumns(columns) {
+        this.state.setVisibleColumns(columns);
+    }
+    // ===== Card Data =====
+    selectCard(cardData) {
+        this.state.setCurrentCardData(cardData);
+    }
+    /**
+     * Drop the current card selection because the data it referred to is being
+     * replaced. Called by loadData(); deliberately not by loadMore(), which only
+     * appends and leaves an existing selection valid.
+     */
+    clearCardSelection() {
+        this.state.setCurrentCardData(null);
+        this.cardSelectionCleared.next();
+    }
+    // ===== CRUD =====
+    async saveItems(items) {
+        this.state.setUpdating(true);
+        const result = await this.service.saveItems(items);
+        this.state.setUpdating(false);
+        if (result instanceof ErrorResponse) {
+            this.utilService.showError(result.ErrorMsg);
+            return false;
+        }
+        this.utilService.showSuccess('Record(s) saved successfully');
+        result.forEach((savedItem) => this.state.upsertItem(savedItem));
+        return true;
+    }
+    async deleteItems(itemIds) {
+        this.state.setUpdating(true);
+        const result = await this.service.deleteItems(itemIds);
+        this.state.setUpdating(false);
+        if (result instanceof ErrorResponse) {
+            this.utilService.showError(result.ErrorMsg);
+            return false;
+        }
+        itemIds.forEach((id) => this.state.removeItem(id));
+        return true;
+    }
+    // ===== Export =====
+    async exportData() {
+        const filters = this.state.getFiltersValue();
+        const sorts = this.state.getSortsValue();
+        const searchTerm = this.state.getSearchTermValue();
+        const result = await this.service.exportData(filters, sorts, searchTerm, this.config.columns);
+        if (result instanceof ErrorResponse) {
+            return [];
+        }
+        return result;
     }
-    onExport(data) {
-        this.exportData.emit(data);
+    // ===== Cleanup =====
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+        this.cardSelectionCleared.complete();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BaseDataComponent, deps: [{ token: BaseDataFacade }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BaseDataComponent, selector: "ng-component", inputs: { columns: "columns" }, outputs: { selectionChange: "selectionChange", exportData: "exportData" }, ngImport: i0, template: '', isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BaseDataPageFacade, deps: "invalid", target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BaseDataPageFacade });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BaseDataComponent, decorators: [{
-            type: Component,
-            args: [{ template: '' }]
-        }], ctorParameters: () => [{ type: BaseDataFacade }], propDecorators: { columns: [{
-                type: Input
-            }], selectionChange: [{
-                type: Output
-            }], exportData: [{
-                type: Output
-            }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BaseDataPageFacade, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: BaseDataPageState }, { type: BaseDataPageService }, { type: SearchHandlerService }, { type: i1.UtilService }, { type: undefined }] });
+
+// Models and interfaces
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { BaseDataComponent, BaseDataFacade, BaseDataService, BaseDataState };
+export { BaseDataPageFacade, BaseDataPageService, BaseDataPageState, FilterHandlerService, SearchHandlerService, SortHandlerService, findColumn, getPropertyName, inferPropertyType };
 //# sourceMappingURL=verben-authentication-ui-src-lib-base.mjs.map