@smallpearl/ngx-helper 0.32.9 → 0.32.11

package/fesm2022/smallpearl-ngx-helper-mat-select-entity.mjs

@@ -1,21 +1,24 @@
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i1 from '@angular/common';
 import { CommonModule, NgTemplateOutlet } from '@angular/common';
-import { HttpContextToken, HttpClient, HttpParams, HttpContext } from '@angular/common/http';
+import { HttpContextToken, HttpContext } from '@angular/common/http';
 import * as i0 from '@angular/core';
-import { input, EventEmitter, computed, inject, ChangeDetectorRef, ElementRef, Component, ChangeDetectionStrategy, ViewChild, Input, Output, HostBinding } from '@angular/core';
+import { input, EventEmitter, computed, viewChild, inject, ChangeDetectorRef, ElementRef, Component, ChangeDetectionStrategy, Output, HostBinding, Input } from '@angular/core';
 import * as i2 from '@angular/forms';
 import { NgControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
 import { MAT_FORM_FIELD, MatFormFieldControl } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
 import * as i3 from '@angular/material/select';
 import { MatSelect, MatSelectModule } from '@angular/material/select';
 import * as i5 from '@jsverse/transloco';
 import { TranslocoService, provideTranslocoScope, TranslocoModule } from '@jsverse/transloco';
-import { camelCase } from 'lodash';
+import { selectAllEntities, upsertEntities, hasEntity, getEntity } from '@ngneat/elf-entities';
+import { SPPagedEntityLoader } from '@smallpearl/ngx-helper/entities';
+import { MatSelectInfiniteScrollDirective } from '@smallpearl/ngx-helper/mat-select-infinite-scroll';
 import * as i6 from 'ngx-mat-select-search';
 import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
-import { plural } from 'pluralize';
-import { Subject, BehaviorSubject, combineLatest, debounceTime, takeUntil, switchMap, of, tap } from 'rxjs';
+import { Subject, startWith, distinctUntilChanged, debounceTime, tap, combineLatest, takeUntil } from 'rxjs';
 import * as i4 from '@angular/material/core';
 
 const SP_MAT_SELECT_ENTITY_HTTP_CONTEXT = new HttpContextToken(() => ({
@@ -23,6 +26,68 @@ const SP_MAT_SELECT_ENTITY_HTTP_CONTEXT = new HttpContextToken(() => ({
     entityNamePlural: '',
     endpoint: '',
 }));
+// Default paginator implementation. This can handle dynamic-rest and DRF
+// native pagination schemes. It also has a fallback to handle response conists
+// of an array of entities.
+class DefaultPaginator {
+    getRequestPageParams(endpoint, page, pageSize) {
+        return {
+            page: page + 1,
+            pageSize,
+        };
+    }
+    parseRequestResponse(entityName, entityNamePlural, endpoint, params, resp) {
+        if (Array.isArray(resp)) {
+            return {
+                total: resp.length,
+                entities: resp,
+            };
+        }
+        if (typeof resp === 'object') {
+            const keys = Object.keys(resp);
+            // Handle dynamic-rest sideloaded response
+            // Rudimentary sideloaded response support. This should work for most
+            // of the sideloaded responses where the main entities are stored
+            // under the plural entity name key and resp['meta'] object contains
+            // the total count.
+            if (keys.includes(entityNamePlural) &&
+                Array.isArray(resp[entityNamePlural])) {
+                let total = resp[entityNamePlural].length;
+                if (keys.includes('meta') &&
+                    typeof resp['meta'] === 'object' &&
+                    typeof resp['meta']['total'] === 'number') {
+                    total = resp['meta']['total'];
+                }
+                return {
+                    total,
+                    entities: resp[entityNamePlural],
+                };
+            }
+            // Handle django-rest-framework style response
+            if (keys.includes('results') && Array.isArray(resp['results'])) {
+                let total = resp['results'].length;
+                if (keys.includes('count') && typeof resp['count'] === 'number') {
+                    total = resp['count'];
+                }
+                return {
+                    total,
+                    entities: resp['results'],
+                };
+            }
+            // Finally, look for "items" key
+            if (keys.includes('items') && Array.isArray(resp['items'])) {
+                return {
+                    total: resp['items'].length,
+                    entities: resp['items'],
+                };
+            }
+        }
+        return {
+            total: 0,
+            entities: [],
+        };
+    }
+}
 /**
  * This is a generic component to display a <mat-select> for a FK field
  * where the select's options are dynamically loaded from the server using
@@ -32,7 +97,7 @@ const SP_MAT_SELECT_ENTITY_HTTP_CONTEXT = new HttpContextToken(() => ({
  * be set to the object's `id` property. By default 'id' is used as its id,
  * but this can be customized by specifying the `idKey' property value.
  */
-class SPMatSelectEntityComponent {
+class SPMatSelectEntityComponent extends SPPagedEntityLoader {
     // We cache the entities that we fetch from remote here. Cache is indexed
     // by the endpoint. Each endpoint also keeps a refCount, which is incremented
     // for each instance of the component using the same endpoint. When this
@@ -40,104 +105,49 @@ class SPMatSelectEntityComponent {
     //
     // This mechanism is to suppress multiple fetches from the remote from the
     // same endpoint as that can occur if a form has multiple instances of
-    // this component, with the same endpoint.
-    static _entitiesCache = new Map();
-    matSel;
-    // REQUIRED PROPERTIES //
-    /**
-     * Entity label function. Given an entity return its natural label
-     * to display to the user.
-     */
-    entityLabelFn;
-    // OPTIONAL PROPERTIES //
-    /**
-     * 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
-     */
-    entityFilterFn;
-    /**
-     * Entity idKey, if idKey is different from the default 'id'.
-     */
-    idKey = 'id';
-    /**
-     * URL of the remote from where entities are to be loaded.
-     * This won't be used if `loadFromRemoteFn` is specified.
-     */
-    url;
-    /**
-     * Parameters to be added to the HTTP request to retrieve data from
-     * remote. This won't be used if `loadFromRemoteFn` is specified.
-     */
-    httpParams;
-    /**
-     * Function to load entities from remote.
-     */
-    loadFromRemoteFn;
-    inlineNew = false;
-    /**
-     * 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;
+    // this component with the same url.
+    // static _entitiesCache = new Map<
+    //   string,
+    //   { refCount: number; entities: Array<any> }
+    // >();
+    //**** OPTIONAL ATTRIBUTES ****//
+    // Entity label function - function that takes an entity object and returns
+    // a string label for it. If not specified, a default label function is used
+    // that returns the value of 'name' or 'label' or 'title' property. If
+    // none of these properties are present, the entity's id is returned as
+    // string.
+    labelFn = input();
+    // Entity filter function - return a boolean if the entity is to be included
+    // in the filtered entities list.
+    filterFn = input();
+    // Set to true to show "Add { item }" option in the select dropdown.
+    // Selecting this option, will emit `createNewItemSelected` event.
+    inlineNew = input(false);
     // Set to true to allow multiple option selection. The returned value
     // would be an array of entity ids.
-    multiple = false;
-    /*
-      Whether to group options using <mat-optgroup></mat-optgroup>.
-      If set to true, the response from the server should be an array of
-      groups of TEntity objects, where each object is of the form:
-        [
-          {
-            id: <id>,
-            name|label: <>,
-            items|<plural_entityName>|<custom_key>: [
-                TEntity,
-                ...
-            ]
-          },
-          ...
-        ]
-    */
-    group = false;
+    multiple = input(false);
     /**
-     * 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.
+     * 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
      */
-    groupOptionsKey;
+    groupOptionsKey = input();
     /**
-     * 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.
+     * 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
      */
-    groupLabelFn;
-    /**
-     * Sideload data key name.
-     */
-    sideloadDataKey = input();
-    /**
-     * Parser function to return the list of entities from the GET response.
-     */
-    responseParserFn = input();
+    groupByFn = input();
     selectionChange = new EventEmitter();
     createNewItemSelected = new EventEmitter();
-    // allow per component customization
+    // i18n localization support toallow per component customization of
+    // some strings used.
     searchText = input();
     notFoundText = input();
-    addItemText = input();
+    createNewText = input();
     controlType = 'sp-mat-select-entity';
     /**
      * Template for the option label. If not provided, the default label
@@ -149,7 +159,7 @@ class SPMatSelectEntityComponent {
      * ```
      *  <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>
@@ -158,25 +168,44 @@ class SPMatSelectEntityComponent {
      * ```
      */
     optionLabelTemplate = input();
+    // a computed version of labelFn that provides a default implementation
     _entityLabelFn = computed(() => {
-        const fn = this.entityLabelFn;
+        const fn = this.labelFn();
         if (fn) {
             return fn;
         }
         return (entity) => {
             return (entity['name'] ||
                 entity['label'] ||
-                String(entity[this.idKey]));
+                entity['title'] ||
+                String(entity[this.idKey()]));
         };
     });
-    _sideloadDataKey = computed(() => {
-        if (this.sideloadDataKey()) {
-            return this.sideloadDataKey();
-        }
-        return this.entityName ? plural(camelCase(this.entityName)) : 'results';
+    // Whether to group options. Grouping is enabled when either groupOptionsKey
+    // or groupByFn is specified.
+    _group = computed(() => {
+        return !!this.groupOptionsKey() || !!this.groupByFn();
     });
-    _entities = new Map();
-    _groupedEntities = new Array();
+    _groupEntitiesKey = computed(() => {
+        const groupOptionsKey = this.groupOptionsKey();
+        return groupOptionsKey
+            ? groupOptionsKey
+            : this.entityName()
+                ? this._pluralEntityName()
+                : 'items';
+    });
+    // For the global paginator. We'll abstract this into an independent
+    // configuration that can be shared across both mat-entity-list and
+    // mat-select-entity later.
+    // entityListConfig = getEntityListConfig();
+    // protected _paginator = computed<SPMatEntityListPaginator>(() => {
+    //   const paginator = this.paginator();
+    //   const entityListConfigPaginator = this.entityListConfig
+    //     ?.paginator as SPMatEntityListPaginator;
+    //   return paginator
+    //     ? paginator
+    //     : entityListConfigPaginator ?? new DefaultPaginator();
+    // });
     stateChanges = new Subject();
     focused = false;
     touched = false;
@@ -190,55 +219,110 @@ class SPMatSelectEntityComponent {
     lastSelectValue;
     searching = false;
     filterStr = '';
-    filter$ = new BehaviorSubject('');
-    // ControlValueAccessor callback
+    filter$ = new Subject();
+    // ControlValueAccessor callbacks
     onChanged = (_) => { };
     onTouched = () => { };
-    matSelect;
+    // @ViewChild(MatSelect) matSelect!: MatSelect;
+    matSelect = viewChild(MatSelect);
     filteredValues = new Subject();
     filteredGroupedValues = new Subject();
     destroy = new Subject();
-    loaded = false;
-    load$ = new BehaviorSubject(false);
     static nextId = 0;
     id = `sp-select-entity-${SPMatSelectEntityComponent.nextId++}`;
     _placeholder;
-    http = inject(HttpClient);
+    //protected http = inject(HttpClient);
     cdr = inject(ChangeDetectorRef);
     _elementRef = inject((ElementRef));
     _formField = inject(MAT_FORM_FIELD, { optional: true });
     ngControl = inject(NgControl, { optional: true });
     transloco = inject(TranslocoService);
+    // pagedEntityLoader!: SPPagedEntityLoader<TEntity, IdKey>;
     constructor() {
+        super();
         if (this.ngControl != null) {
             this.ngControl.valueAccessor = this;
         }
     }
+    /**
+     * 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() {
-        combineLatest([this.filter$.pipe(debounceTime(400)), this.load$])
-            .pipe(takeUntil(this.destroy), switchMap(([str, load]) => {
-            if (load && !this.loaded) {
-                this.searching = true;
-                this.cdr.detectChanges();
-                return this.loadFromRemote();
+        // this.pagedEntityLoader = new SPPagedEntityLoader<TEntity, IdKey>(
+        //   this.entityName(),
+        //   this.url(),
+        //   this.http,
+        //   this.pageSize(),
+        //   this._paginator(),
+        //   this.searchParamName(),
+        //   this.idKey(),
+        //   this._pluralEntityName(),
+        //   undefined,
+        //   this.httpParams()
+        // );
+        this.startLoader();
+        // A rudimentary mechanism to detect which of the two observables
+        // emitted the latest value. We reset this array to 'false' after
+        // processing every combined emission.
+        const emittedObservable = [false, false];
+        const store$ = this.store.pipe(selectAllEntities());
+        const filter$ = this.filter$.pipe(startWith(''), distinctUntilChanged(), debounceTime(400));
+        const emittedStatusObservable = (obs, index) => obs.pipe(tap(() => (emittedObservable[index] = true)));
+        // We need to determine if the emission is owing to a change in
+        // filterStr or a change in the entities in pagedEntityLoader.store$.
+        //
+        //  1. If entities in pagedEntityLoader.store$ have changed, we just need
+        //     to filter the entities in local store using the current filterStr.
+        //  2. If filterStr has changed, there are two cases to handle:-
+        //     a. If all entities have been loaded, we don't need to reload
+        //        entities. Instead we just have to filter the entities in
+        //        local store using the filterStr.
+        //     b. If all entities have not been loaded, we trigger a server
+        //        load with the new filterStr as the search param.
+        //
+        // The following logic implements the above.
+        combineLatest([
+            emittedStatusObservable(store$, 0),
+            emittedStatusObservable(filter$, 1),
+        ])
+            .pipe(takeUntil(this.destroy), tap(([entities, filterStr]) => {
+            if (emittedObservable.every((eo) => eo)) {
+                // initial emission. This can be combined with the case immediately
+                // below it. But we keep it separate for clarity.
+                emittedObservable[0] = emittedObservable[1] = false;
+                this.filterEntities(entities, filterStr);
             }
-            else {
-                return of(this.entities ?? []);
-            }
-        }), tap(() => {
-            if (this.group) {
-                this.filterGroupedValues(this.filterStr);
+            else if (emittedObservable[0]) {
+                emittedObservable[0] = false;
+                this.filterEntities(entities, filterStr);
             }
             else {
-                this.filterValues(this.filterStr);
+                emittedObservable[1] = false;
+                if (this.allEntitiesLoaded()) {
+                    this.filterEntities(entities, filterStr);
+                }
+                else {
+                    this.setSearchParamValue(filterStr);
+                    // This will cause an emission from store$ observable as the
+                    // 'forceRefresh=true' arg causes the store to be reset.
+                    this.loadNextPage(true);
+                }
             }
-            this.cdr.detectChanges();
         }))
             .subscribe();
     }
     ngOnDestroy() {
         this.destroy.next();
-        this.removeFromCache();
+        this.destroy.complete();
+        this.stopLoader();
+        // this.removeFromCache();
         this.stateChanges.complete();
     }
     ngAfterViewInit() {
@@ -250,11 +334,11 @@ class SPMatSelectEntityComponent {
         //     this.required = true;
         //   }
         // }
+        // load first page
+        // this.loadMoreEntities();
     }
     addEntity(entity) {
-        this._entities.set(entity[this.idKey], entity);
-        // So that the newly added entity will be added to the <mat-option> list.
-        this.filterValues(this.filterStr);
+        this.store.update(upsertEntities(entity));
         this.cdr.detectChanges();
     }
     get selectTriggerValue() {
@@ -262,7 +346,7 @@ class SPMatSelectEntityComponent {
             const firstSelected = Array.isArray(this.selectValue)
                 ? this.selectValue[0]
                 : this.selectValue;
-            const selectedEntity = this._entities.get(firstSelected);
+            const selectedEntity = this.getEntity(firstSelected);
             return selectedEntity ? this._entityLabelFn()(selectedEntity) : '';
         }
         return '';
@@ -273,14 +357,16 @@ class SPMatSelectEntityComponent {
             : [];
     }
     entityId(entity) {
-        return entity[this.idKey];
+        return entity[this.idKey()];
     }
     writeValue(entityId) {
+        const store = this.store;
+        const entities = this.getEntities();
         if (Array.isArray(entityId)) {
-            if (this.multiple) {
+            if (this.multiple()) {
                 const selectedValues = [];
                 entityId.forEach((id) => {
-                    if (this._entities.has(id)) {
+                    if (store.query(hasEntity(id))) {
                         selectedValues.push(id);
                     }
                 });
@@ -289,11 +375,12 @@ class SPMatSelectEntityComponent {
             }
         }
         else {
-            if (this._entities.has(entityId)) {
+            if (store.query(hasEntity(entityId))) {
+                // if (this._entities.has(entityId)) {
                 this.selectValue = entityId;
                 if (this.filterStr) {
                     this.filterStr = '';
-                    this.filterValues(this.filterStr);
+                    // this.filterNonGroupedEntities(entities, this.filterStr);
                 }
                 this.cdr.detectChanges();
             }
@@ -306,25 +393,10 @@ class SPMatSelectEntityComponent {
         this.onTouched = fn;
     }
     get entities() {
-        return Array.from(this._entities.values());
+        return this.getEntities();
     }
     set entities(items) {
-        if (!this.group) {
-            items.forEach((item) => {
-                this._entities.set(item[this.idKey], item);
-            });
-        }
-        else {
-            this._groupedEntities = items;
-            this._groupedEntities.forEach((group) => {
-                const key = this.groupEntitiesKey();
-                const groupEntities = group[key];
-                group['__items__'] = groupEntities;
-                groupEntities.forEach((item) => {
-                    this._entities.set(item[this.idKey], item);
-                });
-            });
-        }
+        this.setEntities(items);
     }
     get value() {
         return this.selectValue;
@@ -395,8 +467,9 @@ class SPMatSelectEntityComponent {
     }
     setDisabledState(isDisabled) {
         this._disabled = isDisabled;
-        if (this.matSelect) {
-            this.matSelect.setDisabledState(isDisabled);
+        const matSelect = this.matSelect();
+        if (matSelect) {
+            matSelect.setDisabledState(isDisabled);
             this.cdr.detectChanges();
         }
     }
@@ -405,8 +478,9 @@ class SPMatSelectEntityComponent {
         // eventually selects 'New Item' option.
         this.lastSelectValue = this.selectValue;
         // If values have not been loaded from remote, trigger a load.
-        if (!this.loaded) {
-            this.load$.next(true); // this will trigger the loadFromRemote() call.
+        if (this.totalEntitiesAtRemote() === 0) {
+            // first load
+            this.loadNextPage();
         }
     }
     onSelectionChange(ev) {
@@ -415,7 +489,7 @@ class SPMatSelectEntityComponent {
             this.selectValue = ev.value;
             this.onTouched();
             this.onChanged(ev.value);
-            const selectedEntities = ev.value.map((id) => this._entities.get(id));
+            const selectedEntities = ev.value.map((id) => this.store.query(getEntity(id)));
             this.selectionChange.emit(selectedEntities);
         }
         else {
@@ -423,7 +497,7 @@ class SPMatSelectEntityComponent {
                 this.selectValue = ev.value;
                 this.onTouched();
                 this.onChanged(ev.value);
-                this.selectionChange.emit(this._entities.get(ev.value));
+                this.selectionChange.emit(this.store.query(getEntity(ev.value)));
             }
             else {
                 // New Item activated, return value to previous value. We track
@@ -438,23 +512,45 @@ class SPMatSelectEntityComponent {
             }
         }
     }
-    filterValues(search) {
-        const searchLwr = search.toLocaleLowerCase();
-        const entities = this.entities;
-        if (!entities) {
-            return;
+    /**
+     * 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, filterStr) {
+        this.searching = true;
+        let retval;
+        if (this._group()) {
+            this.filterGroupedEntities(entities, filterStr);
+        }
+        else {
+            this.filterNonGroupedEntities(entities, filterStr);
         }
+        this.searching = false;
+    }
+    /**
+     * 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, search) {
+        const searchLwr = search.toLocaleLowerCase();
         if (!search) {
             this.filteredValues.next(entities.slice());
         }
         else {
-            this.filteredValues.next(entities.filter((member) => {
-                if (this.entityFilterFn) {
-                    return this.entityFilterFn(member, search);
+            const filteredEntities = entities.filter((member) => {
+                const filterFn = this.filterFn();
+                if (filterFn) {
+                    return filterFn(member, search);
                 }
                 const labelFn = this._entityLabelFn();
                 return labelFn(member).toLocaleLowerCase().includes(searchLwr);
-            }));
+            });
+            this.filteredValues.next(filteredEntities);
         }
     }
     /**
@@ -464,205 +560,144 @@ class SPMatSelectEntityComponent {
      * 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) {
+    filterGroupedEntities(entities, search) {
         const searchLwr = search.toLocaleLowerCase();
-        const groups = this._groupedEntities;
-        if (!groups) {
-            return;
-        }
+        // First filter entities by the search string, if it's specified
+        let filteredEntities;
         if (!search) {
-            const groupsCopy = groups.slice();
-            this.filteredGroupedValues.next(groupsCopy);
+            filteredEntities = entities;
         }
         else {
-            const groupEntitiesKey = this.groupEntitiesKey();
-            const groups = this._groupedEntities.map((ge) => {
-                const label = this.groupLabel(ge);
-                if (label.toLocaleLowerCase().includes(searchLwr)) {
-                    return { ...ge };
-                }
-                else {
-                    const groupEntities = ge.__items__?.filter((e) => this._entityLabelFn()(e).toLocaleLowerCase().includes(searchLwr));
-                    const ret = {
-                        ...ge,
-                    };
-                    ret['__items__'] = groupEntities ?? [];
-                    return ret;
+            filteredEntities = entities.filter((member) => {
+                const filterFn = this.filterFn();
+                if (filterFn) {
+                    return filterFn(member, search);
                 }
+                const labelFn = this._entityLabelFn();
+                return labelFn(member).toLocaleLowerCase().includes(searchLwr);
             });
-            // filter out groups with no entities
-            // console.log(`Groups: ${JSON.stringify(groups)}`);
-            this.filteredGroupedValues.next(groups.filter((group) => Array.isArray(group[groupEntitiesKey]) &&
-                group['__items__'].length > 0));
-        }
-    }
-    loadFromRemote() {
-        if (!this.url && !this.loadFromRemoteFn) {
-            // If user had initialized entities, they will be dispalyed
-            // in the options list. If not, options would be empty.
-            return of(this.group ? this.groupEntities : this.entities);
-        }
-        let cacheKey;
-        let obs;
-        if (this.loadFromRemoteFn) {
-            obs = this.loadFromRemoteFn();
-        }
-        else {
-            let params;
-            if (this.httpParams) {
-                params = new HttpParams({
-                    fromString: this.httpParams.toString(),
-                });
-            }
-            else {
-                params = new HttpParams();
-            }
-            params = params.set('paginate', false);
-            cacheKey = this.getCacheKey();
-            if (this.existsInCache()) {
-                obs = of(this.getFromCache());
-            }
-            else {
-                obs = this.http.get(this.url, {
-                    context: this.getHttpReqContext(),
-                    params,
-                });
-            }
-        }
-        return obs.pipe(tap((entities) => {
-            this.searching = false; // remote loading done, will hide the loading wheel
-            // Handle DRF paginated response
-            const responseParserFn = this.responseParserFn();
-            if (responseParserFn) {
-                entities = responseParserFn(entities);
-            }
-            else {
-                if (!Array.isArray(entities) &&
-                    entities['results'] &&
-                    Array.isArray(entities['results'])) {
-                    entities = entities['results'];
-                }
-                else if (
-                // sideloaded response, where entities are usually provided in 'entityName'
-                this._sideloadDataKey() &&
-                    !Array.isArray(entities) &&
-                    typeof entities === 'object' &&
-                    entities[this._sideloadDataKey()] &&
-                    Array.isArray(entities[this._sideloadDataKey()])) {
-                    entities = entities[this._sideloadDataKey()];
-                }
-            }
-            if (Array.isArray(entities)) {
-                this.entities = entities;
-                // if (this.group) {
-                //   this._groupedEntities = entities as EntityGroup<TEntity>[];
-                // } else {
-                //   this.entities = entities;
-                // }
-            }
-            this.loaded = true;
-            this.addToCache(entities);
-            this.cdr.detectChanges();
-        }));
-    }
-    groupLabel(group) {
-        if (this.groupLabelFn) {
-            return this.groupLabelFn(group);
-        }
-        const standardLabelFields = ['name', 'label', 'desc', 'description'];
-        for (let index = 0; index < standardLabelFields.length; index++) {
-            const labelField = standardLabelFields[index];
-            if (group[labelField]) {
-                return group[labelField];
-            }
-        }
-        return `Group ${String(group.id)}`;
-    }
-    groupEntities(group) {
-        const key = this.groupEntitiesKey();
-        console.log(`groupEntities - group: ${JSON.stringify(group)}, key: ${key}`);
-        return group[this.groupEntitiesKey()] ?? [];
-    }
-    groupEntitiesKey() {
-        return this.groupOptionsKey
-            ? this.groupOptionsKey
-            : this.entityName
-                ? plural(this.entityName.toLocaleLowerCase())
-                : 'items';
-    }
-    existsInCache() {
-        const cacheKey = this.getCacheKey();
-        if (cacheKey) {
-            return SPMatSelectEntityComponent._entitiesCache.has(cacheKey);
-        }
-        return false;
-    }
-    getCacheKey() {
-        if (!this.loadFromRemoteFn) {
-            let params;
-            if (this.httpParams) {
-                params = new HttpParams({
-                    fromString: this.httpParams.toString(),
-                });
-            }
-            else {
-                params = new HttpParams();
-            }
-            // params = params.set('paginate', false)
-            return `${this.url}?${params.toString()}`;
-        }
-        return ''; // empty string evalutes to boolean(false)
-    }
-    getFromCache() {
-        const cacheKey = this.getCacheKey();
-        if (cacheKey && SPMatSelectEntityComponent._entitiesCache.has(cacheKey)) {
-            return SPMatSelectEntityComponent._entitiesCache.get(cacheKey)
-                ?.entities;
-        }
-        return [];
-    }
-    addToCache(entities) {
-        const cacheKey = this.getCacheKey();
-        if (cacheKey) {
-            if (!SPMatSelectEntityComponent._entitiesCache.has(cacheKey)) {
-                SPMatSelectEntityComponent._entitiesCache.set(cacheKey, {
-                    refCount: 0,
-                    entities,
-                });
-            }
-            const cacheEntry = SPMatSelectEntityComponent._entitiesCache.get(cacheKey);
-            cacheEntry.refCount += 1;
         }
+        this.filteredGroupedValues.next(this.groupEntities(filteredEntities));
     }
-    removeFromCache() {
-        const cacheKey = this.getCacheKey();
-        if (cacheKey) {
-            const cacheEntry = SPMatSelectEntityComponent._entitiesCache.get(cacheKey);
-            if (cacheEntry) {
-                cacheEntry.refCount -= 1;
-                if (cacheEntry.refCount <= 0) {
-                    SPMatSelectEntityComponent._entitiesCache.delete(cacheKey);
-                }
+    /**
+     * 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>[]
+     */
+    groupEntities(entities) {
+        let groupByFn;
+        if (this.groupByFn()) {
+            groupByFn = this.groupByFn();
+        }
+        else if (this.groupOptionsKey()) {
+            groupByFn = (entity) => {
+                const key = this.groupOptionsKey();
+                return entity[key] ?? '???';
+            };
+        }
+        const groupedEntitiesMap = new Map();
+        entities.forEach((entity) => {
+            const groupId = groupByFn(entity);
+            if (!groupedEntitiesMap.has(groupId)) {
+                groupedEntitiesMap.set(groupId, []);
             }
-        }
-    }
+            groupedEntitiesMap.get(groupId).push(entity);
+        });
+        let entityGroups = [];
+        groupedEntitiesMap.forEach((entities, groupId) => {
+            entityGroups.push({
+                label: String(groupId),
+                entities,
+            });
+        });
+        return entityGroups;
+    }
+    // private existsInCache() {
+    //   const cacheKey = this.getCacheKey();
+    //   if (cacheKey) {
+    //     return SPMatSelectEntityComponent._entitiesCache.has(cacheKey);
+    //   }
+    //   return false;
+    // }
+    // private getCacheKey() {
+    //   if (typeof this.url() !== 'function') {
+    //     let params!: HttpParams;
+    //     if (this.httpParams) {
+    //       params = new HttpParams({
+    //         fromString: this.httpParams.toString(),
+    //       });
+    //     } else {
+    //       params = new HttpParams();
+    //     }
+    //     // params = params.set('paginate', false)
+    //     return `${this.url}?${params.toString()}`;
+    //   }
+    //   return ''; // empty string evalutes to boolean(false)
+    // }
+    // private getFromCache() {
+    //   const cacheKey = this.getCacheKey();
+    //   if (cacheKey && SPMatSelectEntityComponent._entitiesCache.has(cacheKey)) {
+    //     return SPMatSelectEntityComponent._entitiesCache.get(cacheKey)
+    //       ?.entities as TEntity[];
+    //   }
+    //   return [];
+    // }
+    // private addToCache(entities: TEntity[]) {
+    //   const cacheKey = this.getCacheKey();
+    //   if (cacheKey) {
+    //     if (!SPMatSelectEntityComponent._entitiesCache.has(cacheKey)) {
+    //       SPMatSelectEntityComponent._entitiesCache.set(cacheKey, {
+    //         refCount: 0,
+    //         entities,
+    //       });
+    //     }
+    //     const cacheEntry =
+    //       SPMatSelectEntityComponent._entitiesCache.get(cacheKey);
+    //     cacheEntry!.refCount += 1;
+    //   }
+    // }
+    // private removeFromCache() {
+    //   const cacheKey = this.getCacheKey();
+    //   if (cacheKey) {
+    //     const cacheEntry =
+    //       SPMatSelectEntityComponent._entitiesCache.get(cacheKey);
+    //     if (cacheEntry) {
+    //       cacheEntry!.refCount -= 1;
+    //       if (cacheEntry.refCount <= 0) {
+    //         SPMatSelectEntityComponent._entitiesCache.delete(cacheKey);
+    //       }
+    //     }
+    //   }
+    // }
     getHttpReqContext() {
         const context = new HttpContext();
         const entityName = this.entityName;
         context.set(SP_MAT_SELECT_ENTITY_HTTP_CONTEXT, {
-            entityName: this.entityName ?? '',
-            entityNamePlural: this.entityName ? plural(this.entityName) : '',
-            endpoint: this.url,
+            entityName: this.entityName(),
+            entityNamePlural: this._pluralEntityName(),
+            endpoint: this.url(),
         });
         return context;
     }
+    /**
+     * 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() {
+        if (this.hasMore() && !this.loading()) {
+            this.loadNextPage();
+        }
+    }
     /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SPMatSelectEntityComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: SPMatSelectEntityComponent, isStandalone: true, selector: "sp-mat-select-entity", inputs: { entityLabelFn: { classPropertyName: "entityLabelFn", publicName: "entityLabelFn", isSignal: false, isRequired: false, transformFunction: null }, entityFilterFn: { classPropertyName: "entityFilterFn", publicName: "entityFilterFn", isSignal: false, isRequired: false, transformFunction: null }, idKey: { classPropertyName: "idKey", publicName: "idKey", isSignal: false, isRequired: false, transformFunction: null }, url: { classPropertyName: "url", publicName: "url", isSignal: false, isRequired: false, transformFunction: null }, httpParams: { classPropertyName: "httpParams", publicName: "httpParams", isSignal: false, isRequired: false, transformFunction: null }, loadFromRemoteFn: { classPropertyName: "loadFromRemoteFn", publicName: "loadFromRemoteFn", isSignal: false, isRequired: false, transformFunction: null }, inlineNew: { classPropertyName: "inlineNew", publicName: "inlineNew", isSignal: false, isRequired: false, transformFunction: null }, entityName: { classPropertyName: "entityName", publicName: "entityName", isSignal: false, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: false, isRequired: false, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: false, isRequired: false, transformFunction: null }, groupOptionsKey: { classPropertyName: "groupOptionsKey", publicName: "groupOptionsKey", isSignal: false, isRequired: false, transformFunction: null }, groupLabelFn: { classPropertyName: "groupLabelFn", publicName: "groupLabelFn", isSignal: false, isRequired: false, transformFunction: null }, sideloadDataKey: { classPropertyName: "sideloadDataKey", publicName: "sideloadDataKey", isSignal: true, isRequired: false, transformFunction: null }, responseParserFn: { classPropertyName: "responseParserFn", publicName: "responseParserFn", isSignal: true, isRequired: false, transformFunction: null }, searchText: { classPropertyName: "searchText", publicName: "searchText", isSignal: true, isRequired: false, transformFunction: null }, notFoundText: { classPropertyName: "notFoundText", publicName: "notFoundText", isSignal: true, isRequired: false, transformFunction: null }, addItemText: { classPropertyName: "addItemText", publicName: "addItemText", isSignal: true, isRequired: false, transformFunction: null }, optionLabelTemplate: { classPropertyName: "optionLabelTemplate", publicName: "optionLabelTemplate", isSignal: true, isRequired: false, transformFunction: null }, entities: { classPropertyName: "entities", publicName: "entities", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, userAriaDescribedBy: { classPropertyName: "userAriaDescribedBy", publicName: "aria-describedby", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", createNewItemSelected: "createNewItemSelected" }, host: { properties: { "id": "this.id" } }, providers: [
+    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: SPMatSelectEntityComponent, isStandalone: true, selector: "sp-mat-select-entity", inputs: { labelFn: { classPropertyName: "labelFn", publicName: "labelFn", isSignal: true, isRequired: false, transformFunction: null }, filterFn: { classPropertyName: "filterFn", publicName: "filterFn", isSignal: true, isRequired: false, transformFunction: null }, inlineNew: { classPropertyName: "inlineNew", publicName: "inlineNew", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, groupOptionsKey: { classPropertyName: "groupOptionsKey", publicName: "groupOptionsKey", isSignal: true, isRequired: false, transformFunction: null }, groupByFn: { classPropertyName: "groupByFn", publicName: "groupByFn", isSignal: true, isRequired: false, transformFunction: null }, searchText: { classPropertyName: "searchText", publicName: "searchText", isSignal: true, isRequired: false, transformFunction: null }, notFoundText: { classPropertyName: "notFoundText", publicName: "notFoundText", isSignal: true, isRequired: false, transformFunction: null }, createNewText: { classPropertyName: "createNewText", publicName: "createNewText", isSignal: true, isRequired: false, transformFunction: null }, optionLabelTemplate: { classPropertyName: "optionLabelTemplate", publicName: "optionLabelTemplate", isSignal: true, isRequired: false, transformFunction: null }, entities: { classPropertyName: "entities", publicName: "entities", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, userAriaDescribedBy: { classPropertyName: "userAriaDescribedBy", publicName: "aria-describedby", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", createNewItemSelected: "createNewItemSelected" }, host: { properties: { "id": "this.id" } }, providers: [
             provideTranslocoScope('sp-mat-select-entity'),
             { provide: MatFormFieldControl, useExisting: SPMatSelectEntityComponent },
-        ], viewQueries: [{ propertyName: "matSel", first: true, predicate: MatSelect, descendants: true }, { propertyName: "matSelect", first: true, predicate: MatSelect, descendants: true }], ngImport: i0, template: `
+        ], viewQueries: [{ propertyName: "matSelect", first: true, predicate: MatSelect, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
     <div
       *transloco="let t; scope: 'sp-mat-select-entity'"
       (focusin)="onFocusIn($event)"
@@ -674,8 +709,10 @@ class SPMatSelectEntityComponent {
         [placeholder]="placeholder"
         (opened)="onSelectOpened($event)"
         (selectionChange)="onSelectionChange($event)"
-        [multiple]="multiple"
+        [multiple]="multiple()"
         [(ngModel)]="selectValue"
+        msInfiniteScroll
+        (infiniteScroll)="onInfiniteScroll()"
       >
         <mat-select-trigger>
           {{ selectTriggerValue }}
@@ -688,6 +725,7 @@ class SPMatSelectEntityComponent {
 
         <mat-option>
           <ngx-mat-select-search
+            class="flex-grow-1"
             [(ngModel)]="filterStr"
             (ngModelChange)="this.filter$.next($event)"
             [placeholderLabel]="
@@ -701,57 +739,58 @@ class SPMatSelectEntityComponent {
           </ngx-mat-select-search>
         </mat-option>
 
-        <ng-container *ngIf="!group; else groupedOptions">
-          <span *ngIf="filteredValues | async as entities">
-            <ng-template #defaultOptionLabelTemplate let-entity>
-              {{ _entityLabelFn()(entity) }}
-            </ng-template>
-            @for (entity of entities; track entityId(entity)) {
-            <mat-option class="sel-entity-option" [value]="entityId(entity)">
-              <ng-container
-                *ngTemplateOutlet="
-                  optionLabelTemplate() || defaultOptionLabelTemplate;
-                  context: { $implicit: entity }
-                "
-              ></ng-container>
-            </mat-option>
-            }
-
-            <!-- <mat-option class="sel-entity-option" *ngFor="let entity of entities" [value]="entityId(entity)">
-            {{ _entityLabelFn()(entity) }}
-          </mat-option> -->
-          </span>
-        </ng-container>
-        <ng-template #groupedOptions>
-          <span *ngIf="filteredGroupedValues | async as groups">
-            @for (group of groups; track groupLabel(group)) {
-            <mat-optgroup [label]="groupLabel(group)">
-              @for (entity of group.__items__; track entityId(entity)) {
-
-              <mat-option class="sel-entity-option" [value]="entityId(entity)">
-                {{ _entityLabelFn()(entity) }}
-              </mat-option>
-              }
-            </mat-optgroup>
-            }
-          </span>
+        <ng-template #defaultOptionLabelTemplate let-entity>
+          {{ _entityLabelFn()(entity) }}
         </ng-template>
+        @if (!_group()) { @if (filteredValues | async; as entities) { @for
+        (entity of entities; track entityId(entity)) {
+        <mat-option class="sel-entity-option" [value]="entityId(entity)">
+          <ng-container
+            *ngTemplateOutlet="
+              optionLabelTemplate() || defaultOptionLabelTemplate;
+              context: { $implicit: entity }
+            "
+          ></ng-container>
+        </mat-option>
+        } } } @else { @if (filteredGroupedValues | async; as groups) { @for
+        (group of groups; track group.label) {
+        <mat-optgroup [label]="group.label">
+          @for (entity of group.entities; track entityId(entity)) {
+          <mat-option class="sel-entity-option" [value]="entityId(entity)">
+            <ng-container
+              *ngTemplateOutlet="
+                optionLabelTemplate() || defaultOptionLabelTemplate;
+                context: { $implicit: entity }
+              "
+            ></ng-container>
+          </mat-option>
+          }
+        </mat-optgroup>
+        } } }
 
+        <!--
+        Create New option is displayed only if there is a filter string.
+        The logic behind this behavior being that user searches for a matching
+        item and when not finding one, would like to add a new one.
+        -->
+        @if (inlineNew() && filterStr.length > 0) {
         <mat-option
-          *ngIf="!multiple && inlineNew"
           class="add-item-option"
           value="0"
           (click)="$event.stopPropagation()"
           >⊕
           {{
-            this.addItemText()
-              ? this.addItemText()
-              : t('spMatSelectEntity.addItem', { item: this.entityName })
-          }}</mat-option
-        >
+            this.createNewText()
+              ? this.createNewText()
+              : t('spMatSelectEntity.createNew', {
+                  item: this._capitalizedEntityName()
+                })
+          }}
+        </mat-option>
+        }
       </mat-select>
     </div>
-  `, isInline: true, styles: [".add-item-option{padding-top:2px;border-top:1px solid gray}.addl-selection-count{opacity:.75;font-size:.8em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.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: "directive", type: i3.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i4.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "directive", type: i5.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: NgxMatSelectSearchModule }, { kind: "component", type: i6.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti", "recreateValuesArray"], outputs: ["toggleAll"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".add-item-option{padding-top:2px;border-top:1px solid var(--mat-sys-outline)}.addl-selection-count{opacity:.75;font-size:.8em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.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: "directive", type: i3.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i4.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: TranslocoModule }, { kind: "directive", type: i5.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: NgxMatSelectSearchModule }, { kind: "component", type: i6.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti", "recreateValuesArray"], outputs: ["toggleAll"] }, { kind: "directive", type: MatSelectInfiniteScrollDirective, selector: "[msInfiniteScroll]", inputs: ["threshold", "debounceTime", "complete"], outputs: ["infiniteScroll"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SPMatSelectEntityComponent, decorators: [{
             type: Component,
@@ -767,8 +806,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
         [placeholder]="placeholder"
         (opened)="onSelectOpened($event)"
         (selectionChange)="onSelectionChange($event)"
-        [multiple]="multiple"
+        [multiple]="multiple()"
         [(ngModel)]="selectValue"
+        msInfiniteScroll
+        (infiniteScroll)="onInfiniteScroll()"
       >
         <mat-select-trigger>
           {{ selectTriggerValue }}
@@ -781,6 +822,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
 
         <mat-option>
           <ngx-mat-select-search
+            class="flex-grow-1"
             [(ngModel)]="filterStr"
             (ngModelChange)="this.filter$.next($event)"
             [placeholderLabel]="
@@ -794,54 +836,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
           </ngx-mat-select-search>
         </mat-option>
 
-        <ng-container *ngIf="!group; else groupedOptions">
-          <span *ngIf="filteredValues | async as entities">
-            <ng-template #defaultOptionLabelTemplate let-entity>
-              {{ _entityLabelFn()(entity) }}
-            </ng-template>
-            @for (entity of entities; track entityId(entity)) {
-            <mat-option class="sel-entity-option" [value]="entityId(entity)">
-              <ng-container
-                *ngTemplateOutlet="
-                  optionLabelTemplate() || defaultOptionLabelTemplate;
-                  context: { $implicit: entity }
-                "
-              ></ng-container>
-            </mat-option>
-            }
-
-            <!-- <mat-option class="sel-entity-option" *ngFor="let entity of entities" [value]="entityId(entity)">
-            {{ _entityLabelFn()(entity) }}
-          </mat-option> -->
-          </span>
-        </ng-container>
-        <ng-template #groupedOptions>
-          <span *ngIf="filteredGroupedValues | async as groups">
-            @for (group of groups; track groupLabel(group)) {
-            <mat-optgroup [label]="groupLabel(group)">
-              @for (entity of group.__items__; track entityId(entity)) {
-
-              <mat-option class="sel-entity-option" [value]="entityId(entity)">
-                {{ _entityLabelFn()(entity) }}
-              </mat-option>
-              }
-            </mat-optgroup>
-            }
-          </span>
+        <ng-template #defaultOptionLabelTemplate let-entity>
+          {{ _entityLabelFn()(entity) }}
         </ng-template>
+        @if (!_group()) { @if (filteredValues | async; as entities) { @for
+        (entity of entities; track entityId(entity)) {
+        <mat-option class="sel-entity-option" [value]="entityId(entity)">
+          <ng-container
+            *ngTemplateOutlet="
+              optionLabelTemplate() || defaultOptionLabelTemplate;
+              context: { $implicit: entity }
+            "
+          ></ng-container>
+        </mat-option>
+        } } } @else { @if (filteredGroupedValues | async; as groups) { @for
+        (group of groups; track group.label) {
+        <mat-optgroup [label]="group.label">
+          @for (entity of group.entities; track entityId(entity)) {
+          <mat-option class="sel-entity-option" [value]="entityId(entity)">
+            <ng-container
+              *ngTemplateOutlet="
+                optionLabelTemplate() || defaultOptionLabelTemplate;
+                context: { $implicit: entity }
+              "
+            ></ng-container>
+          </mat-option>
+          }
+        </mat-optgroup>
+        } } }
 
+        <!--
+        Create New option is displayed only if there is a filter string.
+        The logic behind this behavior being that user searches for a matching
+        item and when not finding one, would like to add a new one.
+        -->
+        @if (inlineNew() && filterStr.length > 0) {
         <mat-option
-          *ngIf="!multiple && inlineNew"
           class="add-item-option"
           value="0"
           (click)="$event.stopPropagation()"
           >⊕
           {{
-            this.addItemText()
-              ? this.addItemText()
-              : t('spMatSelectEntity.addItem', { item: this.entityName })
-          }}</mat-option
-        >
+            this.createNewText()
+              ? this.createNewText()
+              : t('spMatSelectEntity.createNew', {
+                  item: this._capitalizedEntityName()
+                })
+          }}
+        </mat-option>
+        }
       </mat-select>
     </div>
   `, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
@@ -850,57 +893,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                         FormsModule,
                         ReactiveFormsModule,
                         MatSelectModule,
+                        MatButtonModule,
+                        MatIconModule,
                         TranslocoModule,
                         NgxMatSelectSearchModule,
+                        MatSelectInfiniteScrollDirective,
                     ], providers: [
                         provideTranslocoScope('sp-mat-select-entity'),
                         { provide: MatFormFieldControl, useExisting: SPMatSelectEntityComponent },
-                    ], styles: [".add-item-option{padding-top:2px;border-top:1px solid gray}.addl-selection-count{opacity:.75;font-size:.8em}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { matSel: [{
-                type: ViewChild,
-                args: [MatSelect]
-            }], entityLabelFn: [{
-                type: Input
-            }], entityFilterFn: [{
-                type: Input,
-                args: [{ required: false }]
-            }], idKey: [{
-                type: Input,
-                args: [{ required: false }]
-            }], url: [{
-                type: Input,
-                args: [{ required: false }]
-            }], httpParams: [{
-                type: Input,
-                args: [{ required: false }]
-            }], loadFromRemoteFn: [{
-                type: Input,
-                args: [{ required: false }]
-            }], inlineNew: [{
-                type: Input,
-                args: [{ required: false }]
-            }], entityName: [{
-                type: Input,
-                args: [{ required: false }]
-            }], multiple: [{
-                type: Input,
-                args: [{ required: false }]
-            }], group: [{
-                type: Input,
-                args: [{ required: false }]
-            }], groupOptionsKey: [{
-                type: Input,
-                args: [{ required: false }]
-            }], groupLabelFn: [{
-                type: Input,
-                args: [{ required: false }]
-            }], selectionChange: [{
+                    ], styles: [".add-item-option{padding-top:2px;border-top:1px solid var(--mat-sys-outline)}.addl-selection-count{opacity:.75;font-size:.8em}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { selectionChange: [{
                 type: Output
             }], createNewItemSelected: [{
                 type: Output
-            }], matSelect: [{
-                type: ViewChild,
-                args: [MatSelect]
             }], id: [{
                 type: HostBinding
             }], entities: [{