@smallpearl/ngx-helper 0.29.25 → 0.29.29

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

@@ -2,7 +2,7 @@ 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 { CommonModule, NgTemplateOutlet } from '@angular/common';
 import * as i1 from '@angular/common/http';
 import { HttpContextToken, HttpParams, HttpContext } from '@angular/common/http';
 import * as i2 from '@angular/forms';
@@ -155,6 +155,25 @@ class SPMatSelectEntityComponent {
     searchText;
     notFoundText;
     addItemText;
+    /**
+     * Template for the option label. If not provided, the default label
+     * function will be used. Option label is what is placed inside the
+     * <mat-option> tag. The template gets an implicit 'entity' variable
+     * in the context, value for which is the entity object.
+     *
+     * For example:
+     * ```
+     *  <sp-mat-select-entity
+     *    [url]="'/api/v1/customers/'"
+     *    [entityLabelFn]="entity => entity.name"
+     *    [optionLabelTemplate]="optionLabelTemplate"
+     *  ></sp-mat-select-entity>
+     *  <ng-template #optionLabelTemplate let-entity>
+     *    {{ entity.name }} - {{ entity.description }}
+     *  </ng-template>
+     * ```
+     */
+    optionLabelTemplate = input();
     _sideloadDataKey = computed(() => {
         if (this.sideloadDataKey()) {
             return this.sideloadDataKey();
@@ -249,7 +268,7 @@ class SPMatSelectEntityComponent {
             this.notFoundText = config.i18n.notFound;
         }
         if (!this.addItemText) {
-            this.addItemText = config.i18n.addItem.replace(/\{\{\s*item\s*}}/, this.entityName ?? "**Item");
+            this.addItemText = config.i18n.addItem.replace(/\{\{\s*item\s*}}/, this.entityName ?? '**Item');
         }
     }
     addEntity(entity) {
@@ -260,14 +279,18 @@ class SPMatSelectEntityComponent {
     }
     get selectTriggerValue() {
         if (this.selectValue) {
-            const firstSelected = Array.isArray(this.selectValue) ? this.selectValue[0] : 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 : [];
+        return Array.isArray(this.selectValue)
+            ? this.selectValue
+            : [];
     }
     entityId(entity) {
         return entity[this.idKey];
@@ -276,7 +299,7 @@ class SPMatSelectEntityComponent {
         if (Array.isArray(entityId)) {
             if (this.multiple) {
                 const selectedValues = [];
-                entityId.forEach(id => {
+                entityId.forEach((id) => {
                     if (this._entities.has(id)) {
                         selectedValues.push(id);
                     }
@@ -307,17 +330,17 @@ class SPMatSelectEntityComponent {
     }
     set entities(items) {
         if (!this.group) {
-            items.forEach(item => {
+            items.forEach((item) => {
                 this._entities.set(item[this.idKey], item);
             });
         }
         else {
             this._groupedEntities = items;
-            this._groupedEntities.forEach(group => {
+            this._groupedEntities.forEach((group) => {
                 const key = this.groupEntitiesKey();
                 const groupEntities = group[key];
                 group['__items__'] = groupEntities;
-                groupEntities.forEach(item => {
+                groupEntities.forEach((item) => {
                     this._entities.set(item[this.idKey], item);
                 });
             });
@@ -342,7 +365,8 @@ class SPMatSelectEntityComponent {
         this.stateChanges.next();
     }
     get required() {
-        return this._required ?? this.ngControl?.control?.hasValidator(Validators.required);
+        return (this._required ??
+            this.ngControl?.control?.hasValidator(Validators.required));
     }
     set required(req) {
         this._required = coerceBooleanProperty(req);
@@ -356,7 +380,6 @@ class SPMatSelectEntityComponent {
     }
     set disabled(value) {
         const disabled = coerceBooleanProperty(value);
-        ;
         if (disabled !== this._disabled) {
             this.setDisabledState(disabled);
             this.stateChanges.next();
@@ -421,7 +444,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._entities.get(id));
             this.selectionChange.emit(selectedEntities);
         }
         else {
@@ -458,7 +481,9 @@ class SPMatSelectEntityComponent {
                 if (this.entityFilterFn) {
                     return this.entityFilterFn(member, search);
                 }
-                return this.entityLabelFn(member).toLocaleLowerCase().includes(searchLwr);
+                return this.entityLabelFn(member)
+                    .toLocaleLowerCase()
+                    .includes(searchLwr);
             }));
         }
     }
@@ -483,15 +508,15 @@ class SPMatSelectEntityComponent {
         }
         else {
             const groupEntitiesKey = this.groupEntitiesKey();
-            const groups = this._groupedEntities.map(ge => {
+            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 groupEntities = ge.__items__?.filter((e) => this.entityLabelFn(e).toLocaleLowerCase().includes(searchLwr));
                     const ret = {
-                        ...ge
+                        ...ge,
                     };
                     ret['__items__'] = groupEntities ?? [];
                     return ret;
@@ -518,7 +543,7 @@ class SPMatSelectEntityComponent {
             let params;
             if (this.httpParams) {
                 params = new HttpParams({
-                    fromString: this.httpParams.toString()
+                    fromString: this.httpParams.toString(),
                 });
             }
             else {
@@ -549,7 +574,8 @@ class SPMatSelectEntityComponent {
                     Array.isArray(entities['results'])) {
                     entities = entities['results'];
                 }
-                else if ( // sideloaded response, where entities are usually provided in 'entityName'
+                else if (
+                // sideloaded response, where entities are usually provided in 'entityName'
                 this._sideloadDataKey() &&
                     !Array.isArray(entities) &&
                     typeof entities === 'object' &&
@@ -590,8 +616,11 @@ class SPMatSelectEntityComponent {
         return group[this.groupEntitiesKey()] ?? [];
     }
     groupEntitiesKey() {
-        return this.groupOptionsKey ? this.groupOptionsKey
-            : (this.entityName ? plural(this.entityName.toLocaleLowerCase()) : 'items');
+        return this.groupOptionsKey
+            ? this.groupOptionsKey
+            : this.entityName
+                ? plural(this.entityName.toLocaleLowerCase())
+                : 'items';
     }
     existsInCache() {
         const cacheKey = this.getCacheKey();
@@ -605,7 +634,7 @@ class SPMatSelectEntityComponent {
             let params;
             if (this.httpParams) {
                 params = new HttpParams({
-                    fromString: this.httpParams.toString()
+                    fromString: this.httpParams.toString(),
                 });
             }
             else {
@@ -619,7 +648,8 @@ class SPMatSelectEntityComponent {
     getFromCache() {
         const cacheKey = this.getCacheKey();
         if (cacheKey && SPMatSelectEntityComponent._entitiesCache.has(cacheKey)) {
-            return SPMatSelectEntityComponent._entitiesCache.get(cacheKey)?.entities;
+            return SPMatSelectEntityComponent._entitiesCache.get(cacheKey)
+                ?.entities;
         }
         return [];
     }
@@ -627,7 +657,10 @@ class SPMatSelectEntityComponent {
         const cacheKey = this.getCacheKey();
         if (cacheKey) {
             if (!SPMatSelectEntityComponent._entitiesCache.has(cacheKey)) {
-                SPMatSelectEntityComponent._entitiesCache.set(cacheKey, { refCount: 0, entities });
+                SPMatSelectEntityComponent._entitiesCache.set(cacheKey, {
+                    refCount: 0,
+                    entities,
+                });
             }
             const cacheEntry = SPMatSelectEntityComponent._entitiesCache.get(cacheKey);
             cacheEntry.refCount += 1;
@@ -651,12 +684,14 @@ class SPMatSelectEntityComponent {
         context.set(SP_MAT_SELECT_ENTITY_HTTP_CONTEXT, {
             entityName: this.entityName ?? '',
             entityNamePlural: this.entityName ? plural(this.entityName) : '',
-            endpoint: this.url
+            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: `
+    /** @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 }, 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: [
+            { 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)"
@@ -667,7 +702,9 @@ class SPMatSelectEntityComponent {
       <mat-select-trigger>
         {{ selectTriggerValue }}
         @if (selectTriggerValueAsArray.length > 1) {
-        <span class="addl-selection-count"> (+{{ selectTriggerValueAsArray.length - 1 }}) </span>
+        <span class="addl-selection-count">
+          (+{{ selectTriggerValueAsArray.length - 1 }})
+        </span>
         }
       </mat-select-trigger>
 
@@ -683,31 +720,50 @@ class SPMatSelectEntityComponent {
       </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)">
+        <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">
+        <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>
+          <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()"
+      <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 });
+  `, 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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,
@@ -722,7 +778,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
       <mat-select-trigger>
         {{ selectTriggerValue }}
         @if (selectTriggerValueAsArray.length > 1) {
-        <span class="addl-selection-count"> (+{{ selectTriggerValueAsArray.length - 1 }}) </span>
+        <span class="addl-selection-count">
+          (+{{ selectTriggerValueAsArray.length - 1 }})
+        </span>
         }
       </mat-select-trigger>
 
@@ -738,31 +796,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
       </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)">
+        <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">
+        <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>
+          <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()"
+      <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"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        NgTemplateOutlet,
+                        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
                 }, {