@smallpearl/ngx-helper 0.29.23

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

@@ -0,0 +1,854 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, input, EventEmitter, computed, Component, ChangeDetectionStrategy, Optional, Inject, Self, ViewChild, Input, Output, HostBinding } from '@angular/core';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import * as i3 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i1 from '@angular/common/http';
+import { HttpContextToken, HttpParams, HttpContext } from '@angular/common/http';
+import * as i2 from '@angular/forms';
+import { Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i7 from '@angular/material/form-field';
+import { MAT_FORM_FIELD, MatFormFieldControl } from '@angular/material/form-field';
+import * as i4 from '@angular/material/select';
+import { MatSelect, MatSelectModule } from '@angular/material/select';
+import * as i6 from 'ngx-mat-select-search';
+import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
+import { Subject, BehaviorSubject, combineLatest, debounceTime, takeUntil, switchMap, of, tap } from 'rxjs';
+import { getNgxHelperConfig } from '@smallpearl/ngx-helper/core';
+import { plural } from 'pluralize';
+import { camelCase } from 'lodash';
+import * as i5 from '@angular/material/core';
+
+const SP_MAT_SELECT_ENTITY_CONFIG = new InjectionToken('SPMatSelectEntityConfig');
+
+const SP_MAT_SELECT_ENTITY_HTTP_CONTEXT = new HttpContextToken(() => ({
+    entityName: '',
+    entityNamePlural: '',
+    endpoint: '',
+}));
+const DEFAULT_SP_MAT_SELECT_ENTITY_CONFIG = {
+    i18n: {
+        search: 'Search',
+        notFound: 'Not found',
+        addItem: 'New Item',
+    },
+};
+/**
+ * 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
+ * the given url (or URL). The objects thus retrieved should have a
+ * unique 'id' field that will be used as the value of each `option` element.
+ * Therefore upon selection of an `option` element, the `select` value will
+ * 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 {
+    http;
+    cdr;
+    _elementRef;
+    injector;
+    _formField;
+    ngControl;
+    config;
+    // 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
+    // refcount reaches 0, the endpoint is removed from the cache.
+    //
+    // 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;
+    // 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;
+    /**
+     * 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;
+    /**
+     * 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;
+    /**
+     * Sideload data key name.
+     */
+    sideloadDataKey = input();
+    /**
+     * Parser function to return the list of entities from the GET response.
+     */
+    responseParserFn = input();
+    selectionChange = new EventEmitter();
+    createNewItemSelected = new EventEmitter();
+    // allow per component customization
+    searchText;
+    notFoundText;
+    addItemText;
+    _sideloadDataKey = computed(() => {
+        if (this.sideloadDataKey()) {
+            return this.sideloadDataKey();
+        }
+        return this.entityName ? plural(camelCase(this.entityName)) : 'results';
+    });
+    _entities = new Map();
+    _groupedEntities = new Array();
+    stateChanges = new Subject();
+    focused = false;
+    touched = false;
+    selectValue;
+    // For storing last select value, which we use to restore the select's value
+    // to when New Item is selected. This ensures that when New Item is selected,
+    // the select's value remains the same. If the newly created item is to be
+    // set as the select's value, the corresponding TEntity has to be added
+    // to _entities (via addEntity()) and then selected by setting the
+    // corresponding formControl's value to the entity's id.
+    lastSelectValue;
+    searching = false;
+    filterStr = '';
+    filter$ = new BehaviorSubject('');
+    // ControlValueAccessor callback
+    onChanged = (_) => { };
+    onTouched = () => { };
+    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;
+    ngxHelperConfig = getNgxHelperConfig();
+    constructor(http, cdr, _elementRef, injector, _formField, ngControl, config) {
+        this.http = http;
+        this.cdr = cdr;
+        this._elementRef = _elementRef;
+        this.injector = injector;
+        this._formField = _formField;
+        this.ngControl = ngControl;
+        this.config = config;
+        if (this.ngControl != null) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    ngOnInit() {
+        this._initStrings();
+        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();
+            }
+            else {
+                return of(this.entities ?? []);
+            }
+        }), tap(() => {
+            if (this.group) {
+                this.filterGroupedValues(this.filterStr);
+            }
+            else {
+                this.filterValues(this.filterStr);
+            }
+            this.cdr.detectChanges();
+        }))
+            .subscribe();
+    }
+    ngOnDestroy() {
+        this.destroy.next();
+        this.removeFromCache();
+        this.stateChanges.complete();
+    }
+    ngAfterViewInit() {
+        // I'm not sure this is how this logic is right, but this seems to work.
+        // if (this.ngControl && this.ngControl.control?.validator) {
+        //   const validator = this.ngControl.control.validator;
+        //   const res = validator(this.ngControl.control);
+        //   if (res && res['required']) {
+        //     this.required = true;
+        //   }
+        // }
+    }
+    _initStrings() {
+        const config = this.config ?? DEFAULT_SP_MAT_SELECT_ENTITY_CONFIG;
+        if (!this.searchText) {
+            this.searchText = config.i18n.search;
+        }
+        if (!this.notFoundText) {
+            this.notFoundText = config.i18n.notFound;
+        }
+        if (!this.addItemText) {
+            this.addItemText = config.i18n.addItem.replace(/\{\{\s*item\s*}}/, this.entityName ?? "**Item");
+        }
+    }
+    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.cdr.detectChanges();
+    }
+    get selectTriggerValue() {
+        if (this.selectValue) {
+            const firstSelected = Array.isArray(this.selectValue) ? this.selectValue[0] : this.selectValue;
+            const selectedEntity = this._entities.get(firstSelected);
+            return selectedEntity ? this.entityLabelFn(selectedEntity) : '';
+        }
+        return '';
+    }
+    get selectTriggerValueAsArray() {
+        return Array.isArray(this.selectValue) ? this.selectValue : [];
+    }
+    entityId(entity) {
+        return entity[this.idKey];
+    }
+    writeValue(entityId) {
+        if (Array.isArray(entityId)) {
+            if (this.multiple) {
+                const selectedValues = [];
+                entityId.forEach(id => {
+                    if (this._entities.has(id)) {
+                        selectedValues.push(id);
+                    }
+                });
+                this.selectValue = selectedValues;
+                this.cdr.detectChanges();
+            }
+        }
+        else {
+            if (this._entities.has(entityId)) {
+                this.selectValue = entityId;
+                if (this.filterStr) {
+                    this.filterStr = '';
+                    this.filterValues(this.filterStr);
+                }
+                this.cdr.detectChanges();
+            }
+        }
+    }
+    registerOnChange(fn) {
+        this.onChanged = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    get entities() {
+        return Array.from(this._entities.values());
+    }
+    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);
+                });
+            });
+        }
+    }
+    get value() {
+        return this.selectValue;
+    }
+    set value(val) {
+        this.selectValue = val;
+        this.stateChanges.next();
+    }
+    get shouldLabelFloat() {
+        return this.focused || !this.empty;
+    }
+    userAriaDescribedBy;
+    get placeholder() {
+        return this._placeholder;
+    }
+    set placeholder(value) {
+        this._placeholder = value;
+        this.stateChanges.next();
+    }
+    get required() {
+        return this._required ?? this.ngControl?.control?.hasValidator(Validators.required);
+    }
+    set required(req) {
+        this._required = coerceBooleanProperty(req);
+        this.stateChanges.next();
+    }
+    // Deliberately 'undefined' so that `get required()` will return the state
+    // from ngControl's validators.
+    _required;
+    get disabled() {
+        return this._disabled ?? this.ngControl?.control?.disabled;
+    }
+    set disabled(value) {
+        const disabled = coerceBooleanProperty(value);
+        ;
+        if (disabled !== this._disabled) {
+            this.setDisabledState(disabled);
+            this.stateChanges.next();
+        }
+    }
+    // Same as `_required`, deliberately `undefined` by default.
+    _disabled;
+    get empty() {
+        // TODO
+        return !this.value;
+    }
+    get errorState() {
+        // TODO
+        return false;
+    }
+    onFocusIn(event) {
+        if (!this.focused) {
+            this.focused = true;
+            this.stateChanges.next();
+        }
+    }
+    onFocusOut(event) {
+        if (!this._elementRef.nativeElement.contains(event.relatedTarget)) {
+            this.touched = true;
+            this.focused = false;
+            this.onTouched();
+            this.stateChanges.next();
+        }
+    }
+    setDescribedByIds(ids) { }
+    onContainerClick() {
+        // this._focusMonitor.focusVia(this.countrySelect, 'program');
+        // if (this.parts.controls.national.valid) {
+        //   this._focusMonitor.focusVia(this.nationalInput, 'program');
+        // } else if (this.parts.controls.country.valid) {
+        //   this._focusMonitor.focusVia(this.nationalInput, 'program');
+        // // } else if (this.parts.controls.national.valid) {
+        // //   this._focusMonitor.focusVia(this.nationalInput, 'program');
+        // } else {
+        //   this._focusMonitor.focusVia(this.countrySelect, 'program');
+        // }
+    }
+    setDisabledState(isDisabled) {
+        this._disabled = isDisabled;
+        if (this.matSelect) {
+            this.matSelect.setDisabledState(isDisabled);
+            this.cdr.detectChanges();
+        }
+    }
+    onSelectOpened(ev) {
+        // Store the current select value so that we can restore it if user
+        // 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.
+        }
+    }
+    onSelectionChange(ev) {
+        // console.log('SelectionChange - sel:', ev);
+        if (Array.isArray(ev.value)) {
+            this.selectValue = ev.value;
+            this.onTouched();
+            this.onChanged(ev.value);
+            const selectedEntities = ev.value.map(id => this._entities.get(id));
+            this.selectionChange.emit(selectedEntities);
+        }
+        else {
+            if (ev.value !== '0') {
+                this.selectValue = ev.value;
+                this.onTouched();
+                this.onChanged(ev.value);
+                this.selectionChange.emit(this._entities.get(ev.value));
+            }
+            else {
+                // New Item activated, return value to previous value. We track
+                // previous value via 'lastSelectValue' member which is updated
+                // whenever the select is opened.
+                if (this.ngControl) {
+                    this.ngControl.control?.setValue(this.lastSelectValue);
+                }
+                ev.source.value = this.lastSelectValue;
+                this.createNewItemSelected.emit();
+                this.cdr.detectChanges();
+            }
+        }
+    }
+    filterValues(search) {
+        const searchLwr = search.toLocaleLowerCase();
+        const entities = this.entities;
+        if (!entities) {
+            return;
+        }
+        if (!search) {
+            this.filteredValues.next(entities.slice());
+        }
+        else {
+            this.filteredValues.next(entities.filter((member) => {
+                if (this.entityFilterFn) {
+                    return this.entityFilterFn(member, search);
+                }
+                return this.entityLabelFn(member).toLocaleLowerCase().includes(searchLwr);
+            }));
+        }
+    }
+    /**
+     * 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.
+     * However, if the search string only matches certain entities, only those
+     * 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
+     */
+    filterGroupedValues(search) {
+        const searchLwr = search.toLocaleLowerCase();
+        const groups = this._groupedEntities;
+        if (!groups) {
+            return;
+        }
+        if (!search) {
+            const groupsCopy = groups.slice();
+            this.filteredGroupedValues.next(groupsCopy);
+        }
+        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;
+                }
+            });
+            // 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(this.injector);
+        }
+        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;
+        }
+    }
+    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
+        });
+        return context;
+    }
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SPMatSelectEntityComponent, deps: [{ token: i1.HttpClient }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Injector }, { token: MAT_FORM_FIELD, optional: true }, { token: i2.NgControl, optional: true, self: true }, { token: SP_MAT_SELECT_ENTITY_CONFIG, optional: true }], 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: true, 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: false, isRequired: false, transformFunction: null }, notFoundText: { classPropertyName: "notFoundText", publicName: "notFoundText", isSignal: false, isRequired: false, transformFunction: null }, addItemText: { classPropertyName: "addItemText", publicName: "addItemText", isSignal: false, 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: [{ provide: MatFormFieldControl, useExisting: SPMatSelectEntityComponent }], viewQueries: [{ propertyName: "matSel", first: true, predicate: MatSelect, descendants: true }, { propertyName: "matSelect", first: true, predicate: MatSelect, descendants: true }], ngImport: i0, template: `
+    <mat-select
+      [placeholder]="placeholder"
+      (opened)="onSelectOpened($event)"
+      (selectionChange)="onSelectionChange($event)"
+      [multiple]="multiple"
+      [(ngModel)]="selectValue"
+    >
+      <mat-select-trigger>
+        {{ selectTriggerValue }}
+        @if (selectTriggerValueAsArray.length > 1) {
+        <span class="addl-selection-count"> (+{{ selectTriggerValueAsArray.length - 1 }}) </span>
+        }
+      </mat-select-trigger>
+
+      <mat-option>
+        <ngx-mat-select-search
+          [(ngModel)]="filterStr"
+          (ngModelChange)="this.filter$.next($event)"
+          [placeholderLabel]="searchText"
+          [noEntriesFoundLabel]="notFoundText"
+          [searching]="searching"
+        >
+        </ngx-mat-select-search>
+      </mat-option>
+
+      <ng-container *ngIf="!group; else groupedOptions">
+        <span *ngIf="(filteredValues | async) as entities">
+          <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>
+
+      <mat-option *ngIf="!multiple && inlineNew" class="add-item-option" value="0" (click)="$event.stopPropagation()"
+        >⊕ {{ addItemText }}</mat-option
+      >
+    </mat-select>
+  `, 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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.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: i4.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: i4.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i5.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { 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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SPMatSelectEntityComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sp-mat-select-entity', template: `
+    <mat-select
+      [placeholder]="placeholder"
+      (opened)="onSelectOpened($event)"
+      (selectionChange)="onSelectionChange($event)"
+      [multiple]="multiple"
+      [(ngModel)]="selectValue"
+    >
+      <mat-select-trigger>
+        {{ selectTriggerValue }}
+        @if (selectTriggerValueAsArray.length > 1) {
+        <span class="addl-selection-count"> (+{{ selectTriggerValueAsArray.length - 1 }}) </span>
+        }
+      </mat-select-trigger>
+
+      <mat-option>
+        <ngx-mat-select-search
+          [(ngModel)]="filterStr"
+          (ngModelChange)="this.filter$.next($event)"
+          [placeholderLabel]="searchText"
+          [noEntriesFoundLabel]="notFoundText"
+          [searching]="searching"
+        >
+        </ngx-mat-select-search>
+      </mat-option>
+
+      <ng-container *ngIf="!group; else groupedOptions">
+        <span *ngIf="(filteredValues | async) as entities">
+          <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>
+
+      <mat-option *ngIf="!multiple && inlineNew" class="add-item-option" value="0" (click)="$event.stopPropagation()"
+        >⊕ {{ addItemText }}</mat-option
+      >
+    </mat-select>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, ReactiveFormsModule, MatSelectModule, NgxMatSelectSearchModule], providers: [{ 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: () => [{ type: i1.HttpClient }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Injector }, { type: i7.MatFormField, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MAT_FORM_FIELD]
+                }] }, { type: i2.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [SP_MAT_SELECT_ENTITY_CONFIG]
+                }] }], propDecorators: { matSel: [{
+                type: ViewChild,
+                args: [MatSelect]
+            }], entityLabelFn: [{
+                type: Input,
+                args: [{ required: true }]
+            }], 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: [{
+                type: Output
+            }], createNewItemSelected: [{
+                type: Output
+            }], searchText: [{
+                type: Input
+            }], notFoundText: [{
+                type: Input
+            }], addItemText: [{
+                type: Input
+            }], matSelect: [{
+                type: ViewChild,
+                args: [MatSelect]
+            }], id: [{
+                type: HostBinding
+            }], entities: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], userAriaDescribedBy: [{
+                type: Input,
+                args: ['aria-describedby']
+            }], placeholder: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SPMatSelectEntityComponent, SP_MAT_SELECT_ENTITY_CONFIG, SP_MAT_SELECT_ENTITY_HTTP_CONTEXT };
+//# sourceMappingURL=smallpearl-ngx-helper-mat-select-entity.mjs.map