@smallpearl/ngx-helper 0.32.8 → 0.32.11

package/mat-select-entity/src/mat-select-entity.component.d.ts

@@ -1,11 +1,12 @@
 import { BooleanInput } from '@angular/cdk/coercion';
-import { HttpClient, HttpContextToken, HttpParams } from '@angular/common/http';
+import { HttpContextToken } from '@angular/common/http';
 import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, OnInit, TemplateRef } from '@angular/core';
 import { ControlValueAccessor, NgControl } from '@angular/forms';
 import { MatFormFieldControl } from '@angular/material/form-field';
 import { MatSelect, MatSelectChange } from '@angular/material/select';
 import { TranslocoService } from '@jsverse/transloco';
-import { BehaviorSubject, Observable, Subject } from 'rxjs';
+import { SPPagedEntityLoader } from '@smallpearl/ngx-helper/entities';
+import { Subject } from 'rxjs';
 import * as i0 from "@angular/core";
 export interface SPMatSelectEntityHttpContext {
     entityName: string;
@@ -13,13 +14,9 @@ export interface SPMatSelectEntityHttpContext {
     endpoint: string;
 }
 export declare const SP_MAT_SELECT_ENTITY_HTTP_CONTEXT: HttpContextToken<SPMatSelectEntityHttpContext>;
-type EntityGroup<T> = {
-    id?: PropertyKey;
-    name?: string;
-    label?: string;
-    description?: string;
-    items?: T[];
-    __items__?: T[];
+type EntityGroup<TEntity> = {
+    label: string;
+    entities: TEntity[];
 };
 export type SPMatSelectEntityResponseParser = <TEntity extends {
     [P in IdKey]: PropertyKey;
@@ -35,86 +32,31 @@ export type SPMatSelectEntityResponseParser = <TEntity extends {
  */
 export declare class SPMatSelectEntityComponent<TEntity extends {
     [P in IdKey]: PropertyKey;
-}, IdKey extends string = 'id'> implements OnInit, OnDestroy, AfterViewInit, ControlValueAccessor, MatFormFieldControl<string | number | string[] | number[]> {
-    static _entitiesCache: Map<string, {
-        refCount: number;
-        entities: Array<any>;
-    }>;
-    matSel: MatSelect;
+}, IdKey extends string = 'id'> extends SPPagedEntityLoader<TEntity, IdKey> implements OnInit, OnDestroy, AfterViewInit, ControlValueAccessor, MatFormFieldControl<string | number | string[] | number[]> {
+    labelFn: import("@angular/core").InputSignal<((entity: TEntity) => string) | undefined>;
+    filterFn: import("@angular/core").InputSignal<((entity: TEntity, search: string) => boolean) | undefined>;
+    inlineNew: import("@angular/core").InputSignal<boolean>;
+    multiple: import("@angular/core").InputSignal<boolean>;
     /**
-     * Entity label function. Given an entity return its natural label
-     * to display to the user.
+     * The entity key name that is used to classify entities into groups.
+     * Entities with the same key value will be grouped together. If this is
+     * specified, grouping will be enabled.
+     * @see groupByFn
      */
-    entityLabelFn: (entity: TEntity) => string;
+    groupOptionsKey: import("@angular/core").InputSignal<string | undefined>;
     /**
-     * Entity filter function - return a boolean if the entity is to be included
-     * in the filtered entities list.
-     * @param entity: TEntity object to test for 'search' string.
-     * @param search - search string
+     * A function that takes a TEntity and returns the group id (string)
+     * that the entity belongs to. If this is specified, grouping of entities
+     * in the select will be enabled. This takes precedence over
+     * `groupOptionsKey`.
+     * @see groupOptionsKey
      */
-    entityFilterFn: (entity: TEntity, search: string) => boolean;
-    /**
-     * Entity idKey, if idKey is different from the default 'id'.
-     */
-    idKey: string;
-    /**
-     * URL of the remote from where entities are to be loaded.
-     * This won't be used if `loadFromRemoteFn` is specified.
-     */
-    url: string;
-    /**
-     * Parameters to be added to the HTTP request to retrieve data from
-     * remote. This won't be used if `loadFromRemoteFn` is specified.
-     */
-    httpParams: HttpParams;
-    /**
-     * Function to load entities from remote.
-     */
-    loadFromRemoteFn: () => Observable<TEntity[]>;
-    inlineNew: boolean;
-    /**
-     * Entity name, that is used to form the "New { item }" menu item if
-     * inlineNew=true. This is also used as the key of the object in GET response
-     * if the reponse JSON is not an array and rather an object, where the values
-     * are stored indexed by the server model name. For eg:-
-     *
-     * {
-     *    'customers': [
-     *      {...},
-     *      {...},
-     *      {...},
-     *    ]
-     * }
-     */
-    entityName: string;
-    multiple: boolean;
-    group: boolean;
-    /**
-     * The group object key name under which options are stored. Defaults to
-     * 'items' or pluralized 'entityName'. Ideally the client class should
-     * explicitly set this property value.
-     */
-    groupOptionsKey: string;
-    /**
-     * If groupOptions = true, specify this to provide accurate label for each
-     * group. If not specified, group label will be determined by looking up one
-     * of the standard fields - name, label or description - whichever comes
-     * first.
-     */
-    groupLabelFn: (group: any) => string;
-    /**
-     * Sideload data key name.
-     */
-    sideloadDataKey: import("@angular/core").InputSignal<string | undefined>;
-    /**
-     * Parser function to return the list of entities from the GET response.
-     */
-    responseParserFn: import("@angular/core").InputSignal<SPMatSelectEntityResponseParser | undefined>;
+    groupByFn: import("@angular/core").InputSignal<((entity: TEntity) => string) | undefined>;
     selectionChange: EventEmitter<TEntity | TEntity[]>;
     createNewItemSelected: EventEmitter<void>;
     readonly searchText: import("@angular/core").InputSignal<string | undefined>;
     readonly notFoundText: import("@angular/core").InputSignal<string | undefined>;
-    readonly addItemText: import("@angular/core").InputSignal<string | undefined>;
+    readonly createNewText: import("@angular/core").InputSignal<string | undefined>;
     controlType: string;
     /**
      * Template for the option label. If not provided, the default label
@@ -126,7 +68,7 @@ export declare class SPMatSelectEntityComponent<TEntity extends {
      * ```
      *  <sp-mat-select-entity
      *    [url]="'/api/v1/customers/'"
-     *    [entityLabelFn]="entity => entity.name"
+     *    [labelFn]="entity => entity.name"
      *    [optionLabelTemplate]="optionLabelTemplate"
      *  ></sp-mat-select-entity>
      *  <ng-template #optionLabelTemplate let-entity>
@@ -135,10 +77,9 @@ export declare class SPMatSelectEntityComponent<TEntity extends {
      * ```
      */
     optionLabelTemplate: import("@angular/core").InputSignal<TemplateRef<any> | undefined>;
-    _entityLabelFn: import("@angular/core").Signal<(entity: TEntity) => string>;
-    _sideloadDataKey: import("@angular/core").Signal<string>;
-    private _entities;
-    private _groupedEntities;
+    protected _entityLabelFn: import("@angular/core").Signal<(entity: TEntity) => string>;
+    protected _group: import("@angular/core").Signal<boolean>;
+    protected _groupEntitiesKey: import("@angular/core").Signal<string>;
     stateChanges: Subject<void>;
     focused: boolean;
     touched: boolean;
@@ -146,25 +87,32 @@ export declare class SPMatSelectEntityComponent<TEntity extends {
     lastSelectValue: string | number | string[] | number[];
     searching: boolean;
     filterStr: string;
-    filter$: BehaviorSubject<string>;
+    filter$: Subject<string>;
     onChanged: (_: any) => void;
     onTouched: () => void;
-    matSelect: MatSelect;
+    matSelect: import("@angular/core").Signal<MatSelect | undefined>;
     filteredValues: Subject<TEntity[]>;
     filteredGroupedValues: Subject<EntityGroup<TEntity>[]>;
     destroy: Subject<void>;
-    private loaded;
-    private load$;
     static nextId: number;
     id: string;
     private _placeholder;
-    protected http: HttpClient;
     protected cdr: ChangeDetectorRef;
     protected _elementRef: ElementRef<any>;
     protected _formField: import("@angular/material/form-field").MatFormField | null;
     ngControl: NgControl | null;
     transloco: TranslocoService;
     constructor();
+    /**
+     * Conditions for loading entities:
+     *
+     * 1. When the select is opened, if entities have not already been loaded.
+     * 2. When the search string changes.
+     * 3. When the scroll reaches the bottom and more entities are available
+     *    to be loaded.
+     *
+     * We need to create an 'observer-loop' that can handle the above.
+     */
     ngOnInit(): void;
     ngOnDestroy(): void;
     ngAfterViewInit(): void;
@@ -198,7 +146,21 @@ export declare class SPMatSelectEntityComponent<TEntity extends {
     setDisabledState(isDisabled: boolean): void;
     onSelectOpened(ev: any): void;
     onSelectionChange(ev: MatSelectChange): void;
-    filterValues(search: string): void;
+    /**
+     * Wrapper to filter entities based on whether grouping is enabled or not.
+     * Calls one of the two filtering methods -- filterGroupedEntities() or
+     * filterNonGroupedEntities().
+     * @param entities
+     * @param filterStr
+     * @returns
+     */
+    filterEntities(entities: TEntity[], filterStr: string): void;
+    /**
+     * Filters the entities based on the search string.
+     * @param search The search string to filter entities.
+     * @returns The number of entities in the filtered result set or undefined.
+     */
+    filterNonGroupedEntities(entities: TEntity[], search: string): void;
     /**
      * Filtering grouped entities logic works like this. If the search string
      * matches a group label, the entire group is to be included in the results.
@@ -206,20 +168,25 @@ export declare class SPMatSelectEntityComponent<TEntity extends {
      * groups are to be included and within those groups, only entities whose
      * label matches the search string are to be included in the result set.
      * @param search
-     * @returns
+     * @returns number of groups in the filtered result set.
      */
-    filterGroupedValues(search: string): void;
-    loadFromRemote(): Observable<TEntity[] | ((group: EntityGroup<TEntity>) => TEntity[])>;
-    groupLabel(group: EntityGroup<TEntity>): string;
-    groupEntities(group: EntityGroup<TEntity>): TEntity[];
-    groupEntitiesKey(): string;
-    private existsInCache;
-    private getCacheKey;
-    private getFromCache;
-    private addToCache;
-    private removeFromCache;
+    filterGroupedEntities(entities: TEntity[], search: string): void;
+    /**
+     * Helper to arrange the given array of entities into groups based on the
+     * groupByFn or groupOptionsKey. groupByFn takes precedence over
+     * groupOptionsKey.
+     * @param entities
+     * @returns EntityGroup<TEntity>[]
+     */
+    protected groupEntities(entities: TEntity[]): EntityGroup<TEntity>[];
     private getHttpReqContext;
+    /**
+     * If more entities are available, load the next page of entities.
+     * This method is triggered when user scrolls to the bottom of the options
+     * list. Well almost to the bottom of the options list. :)
+     */
+    onInfiniteScroll(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SPMatSelectEntityComponent<any, any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SPMatSelectEntityComponent<any, any>, "sp-mat-select-entity", never, { "entityLabelFn": { "alias": "entityLabelFn"; "required": false; }; "entityFilterFn": { "alias": "entityFilterFn"; "required": false; }; "idKey": { "alias": "idKey"; "required": false; }; "url": { "alias": "url"; "required": false; }; "httpParams": { "alias": "httpParams"; "required": false; }; "loadFromRemoteFn": { "alias": "loadFromRemoteFn"; "required": false; }; "inlineNew": { "alias": "inlineNew"; "required": false; }; "entityName": { "alias": "entityName"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "group": { "alias": "group"; "required": false; }; "groupOptionsKey": { "alias": "groupOptionsKey"; "required": false; }; "groupLabelFn": { "alias": "groupLabelFn"; "required": false; }; "sideloadDataKey": { "alias": "sideloadDataKey"; "required": false; "isSignal": true; }; "responseParserFn": { "alias": "responseParserFn"; "required": false; "isSignal": true; }; "searchText": { "alias": "searchText"; "required": false; "isSignal": true; }; "notFoundText": { "alias": "notFoundText"; "required": false; "isSignal": true; }; "addItemText": { "alias": "addItemText"; "required": false; "isSignal": true; }; "optionLabelTemplate": { "alias": "optionLabelTemplate"; "required": false; "isSignal": true; }; "entities": { "alias": "entities"; "required": false; }; "value": { "alias": "value"; "required": false; }; "userAriaDescribedBy": { "alias": "aria-describedby"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "selectionChange": "selectionChange"; "createNewItemSelected": "createNewItemSelected"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SPMatSelectEntityComponent<any, any>, "sp-mat-select-entity", never, { "labelFn": { "alias": "labelFn"; "required": false; "isSignal": true; }; "filterFn": { "alias": "filterFn"; "required": false; "isSignal": true; }; "inlineNew": { "alias": "inlineNew"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "groupOptionsKey": { "alias": "groupOptionsKey"; "required": false; "isSignal": true; }; "groupByFn": { "alias": "groupByFn"; "required": false; "isSignal": true; }; "searchText": { "alias": "searchText"; "required": false; "isSignal": true; }; "notFoundText": { "alias": "notFoundText"; "required": false; "isSignal": true; }; "createNewText": { "alias": "createNewText"; "required": false; "isSignal": true; }; "optionLabelTemplate": { "alias": "optionLabelTemplate"; "required": false; "isSignal": true; }; "entities": { "alias": "entities"; "required": false; }; "value": { "alias": "value"; "required": false; }; "userAriaDescribedBy": { "alias": "aria-describedby"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "selectionChange": "selectionChange"; "createNewItemSelected": "createNewItemSelected"; }, never, never, true, never>;
 }
 export {};

package/mat-select-infinite-scroll/index.d.ts

@@ -0,0 +1,2 @@
+export * from './src/mat-select-infinite-scroll.directive';
+export * from './src/mat-select-infinite-scroll.service';

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

@@ -0,0 +1,19 @@
+import { AfterViewInit, EventEmitter, OnDestroy } from '@angular/core';
+import { MatSelect } from '@angular/material/select';
+import { MatSelectInfiniteScrollService } from './mat-select-infinite-scroll.service';
+import * as i0 from "@angular/core";
+export declare class MatSelectInfiniteScrollDirective implements OnDestroy, AfterViewInit {
+    protected matSelect: MatSelect;
+    private infiniteScrollService;
+    threshold: string;
+    debounceTime: number;
+    complete: boolean;
+    infiniteScroll: EventEmitter<void>;
+    private destroyed$;
+    constructor(matSelect: MatSelect, infiniteScrollService: MatSelectInfiniteScrollService);
+    ngAfterViewInit(): void;
+    getSelectItemHeightPx(panel: Element): number;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatSelectInfiniteScrollDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatSelectInfiniteScrollDirective, "[msInfiniteScroll]", never, { "threshold": { "alias": "threshold"; "required": false; }; "debounceTime": { "alias": "debounceTime"; "required": false; }; "complete": { "alias": "complete"; "required": false; }; }, { "infiniteScroll": "infiniteScroll"; }, never, never, true, never>;
+}

package/mat-select-infinite-scroll/src/mat-select-infinite-scroll.service.d.ts

@@ -0,0 +1,25 @@
+import { NgZone } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class MatSelectInfiniteScrollService {
+    private ngZone;
+    private threshold;
+    private debounceTime;
+    private complete;
+    private thrPx;
+    private thrPc;
+    private destroyed$;
+    private selectItemHeightPx;
+    private panel;
+    constructor(ngZone: NgZone);
+    initialize(panel: Element, selectItemHeightPx: number, config: {
+        threshold: string;
+        debounceTime: number;
+        complete: boolean;
+    }): void;
+    evaluateThreshold(): void;
+    registerScrollListener(infiniteScrollCallback: () => void): void;
+    handleScrollEvent(event: Event, infiniteScrollCallback: () => void): void;
+    destroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatSelectInfiniteScrollService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<MatSelectInfiniteScrollService>;
+}

package/package.json

@@ -6,7 +6,7 @@
       "path": "src/assets/i18n/"
     }
   ],
-  "version": "0.32.8",
+  "version": "0.32.11",
   "peerDependencies": {
     "@angular/common": "^19.1.0",
     "@angular/core": "^19.1.0",
@@ -16,6 +16,7 @@
     "@jsverse/transloco": "7.5.1",
     "@ngneat/elf": "^2.5.1",
     "@ngneat/elf-entities": "^5.0.2",
+    "@ngneat/elf-pagination": "^1.1.0",
     "angular-split": "^19.0.0",
     "google-libphonenumber": "^3.2.34",
     "lodash": "^4.17.21",
@@ -43,13 +44,17 @@
       "types": "./core/index.d.ts",
       "default": "./fesm2022/smallpearl-ngx-helper-core.mjs"
     },
+    "./entities": {
+      "types": "./entities/index.d.ts",
+      "default": "./fesm2022/smallpearl-ngx-helper-entities.mjs"
+    },
     "./entity-field": {
       "types": "./entity-field/index.d.ts",
       "default": "./fesm2022/smallpearl-ngx-helper-entity-field.mjs"
     },
-    "./mat-busy-wheel": {
-      "types": "./mat-busy-wheel/index.d.ts",
-      "default": "./fesm2022/smallpearl-ngx-helper-mat-busy-wheel.mjs"
+    "./forms": {
+      "types": "./forms/index.d.ts",
+      "default": "./fesm2022/smallpearl-ngx-helper-forms.mjs"
     },
     "./locale": {
       "types": "./locale/index.d.ts",
@@ -59,14 +64,14 @@
       "types": "./hover-dropdown/index.d.ts",
       "default": "./fesm2022/smallpearl-ngx-helper-hover-dropdown.mjs"
     },
+    "./mat-busy-wheel": {
+      "types": "./mat-busy-wheel/index.d.ts",
+      "default": "./fesm2022/smallpearl-ngx-helper-mat-busy-wheel.mjs"
+    },
     "./mat-context-menu": {
       "types": "./mat-context-menu/index.d.ts",
       "default": "./fesm2022/smallpearl-ngx-helper-mat-context-menu.mjs"
     },
-    "./forms": {
-      "types": "./forms/index.d.ts",
-      "default": "./fesm2022/smallpearl-ngx-helper-forms.mjs"
-    },
     "./mat-entity-crud": {
       "types": "./mat-entity-crud/index.d.ts",
       "default": "./fesm2022/smallpearl-ngx-helper-mat-entity-crud.mjs"
@@ -87,6 +92,10 @@
       "types": "./mat-select-entity/index.d.ts",
       "default": "./fesm2022/smallpearl-ngx-helper-mat-select-entity.mjs"
     },
+    "./mat-select-infinite-scroll": {
+      "types": "./mat-select-infinite-scroll/index.d.ts",
+      "default": "./fesm2022/smallpearl-ngx-helper-mat-select-infinite-scroll.mjs"
+    },
     "./mat-side-menu-layout": {
       "types": "./mat-side-menu-layout/index.d.ts",
       "default": "./fesm2022/smallpearl-ngx-helper-mat-side-menu-layout.mjs"