@smallpearl/ngx-helper 0.29.39 → 0.29.40

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

@@ -1,36 +1,28 @@
-import * as i0 from '@angular/core';
-import { InjectionToken, input, EventEmitter, computed, inject, ChangeDetectorRef, ElementRef, Component, ChangeDetectionStrategy, ViewChild, Input, Output, HostBinding } from '@angular/core';
 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 * as i0 from '@angular/core';
+import { input, EventEmitter, computed, inject, ChangeDetectorRef, ElementRef, Component, ChangeDetectionStrategy, ViewChild, Input, Output, HostBinding } from '@angular/core';
 import * as i2 from '@angular/forms';
 import { NgControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MAT_FORM_FIELD, MatFormFieldControl } from '@angular/material/form-field';
 import * as i3 from '@angular/material/select';
 import { MatSelect, MatSelectModule } from '@angular/material/select';
-import { getNgxHelperConfig } from '@smallpearl/ngx-helper/core';
 import { camelCase } from 'lodash';
-import * as i5 from 'ngx-mat-select-search';
+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 * as i5 from '@jsverse/transloco';
+import { TranslocoService, provideTranslocoScope, TranslocoModule } from '@jsverse/transloco';
 import * as i4 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
@@ -143,9 +135,9 @@ class SPMatSelectEntityComponent {
     selectionChange = new EventEmitter();
     createNewItemSelected = new EventEmitter();
     // allow per component customization
-    searchText;
-    notFoundText;
-    addItemText;
+    searchText = input();
+    notFoundText = input();
+    addItemText = input();
     /**
      * Template for the option label. If not provided, the default label
      * function will be used. Option label is what is placed inside the
@@ -199,20 +191,18 @@ class SPMatSelectEntityComponent {
     static nextId = 0;
     id = `sp-select-entity-${SPMatSelectEntityComponent.nextId++}`;
     _placeholder;
-    ngxHelperConfig = getNgxHelperConfig();
     http = inject(HttpClient);
     cdr = inject(ChangeDetectorRef);
     _elementRef = inject((ElementRef));
     _formField = inject(MAT_FORM_FIELD, { optional: true });
-    config = inject(SP_MAT_SELECT_ENTITY_CONFIG, { optional: true });
     ngControl = inject(NgControl, { optional: true });
+    transloco = inject(TranslocoService);
     constructor() {
         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) {
@@ -249,18 +239,6 @@ class SPMatSelectEntityComponent {
         //   }
         // }
     }
-    _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.
@@ -679,164 +657,171 @@ class SPMatSelectEntityComponent {
         return context;
     }
     /** @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: 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: [
+    /** @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: 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: [
+            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: `
-    <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>
+    <ng-container *transloco="let t; scope: 'sp-mat-select-entity'">
+      <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>
+        <mat-option>
+          <ngx-mat-select-search
+            [(ngModel)]="filterStr"
+            (ngModelChange)="this.filter$.next($event)"
+            [placeholderLabel]="searchText() ? searchText() : t('spMatSelectEntity.search')"
+            [noEntriesFoundLabel]="notFoundText() ? notFoundText() : t('spMatSelectEntity.notFound')"
+            [searching]="searching"
+          >
+          </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>
-          }
+        <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)">
+            <!-- <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)) {
+          </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-option class="sel-entity-option" [value]="entityId(entity)">
+                {{ entityLabelFn(entity) }}
+              </mat-option>
+              }
+            </mat-optgroup>
             }
-          </mat-optgroup>
-          }
-        </span>
-      </ng-template>
+          </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: 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: NgxMatSelectSearchModule }, { kind: "component", type: i5.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 });
+        <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
+        >
+      </mat-select>
+    </ng-container>
+  `, 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 });
 }
 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>
+    <ng-container *transloco="let t; scope: 'sp-mat-select-entity'">
+      <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>
+        <mat-option>
+          <ngx-mat-select-search
+            [(ngModel)]="filterStr"
+            (ngModelChange)="this.filter$.next($event)"
+            [placeholderLabel]="searchText() ? searchText() : t('spMatSelectEntity.search')"
+            [noEntriesFoundLabel]="notFoundText() ? notFoundText() : t('spMatSelectEntity.notFound')"
+            [searching]="searching"
+          >
+          </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>
-          }
+        <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)">
+            <!-- <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)) {
+          </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-option class="sel-entity-option" [value]="entityId(entity)">
+                {{ entityLabelFn(entity) }}
+              </mat-option>
+              }
+            </mat-optgroup>
             }
-          </mat-optgroup>
-          }
-        </span>
-      </ng-template>
+          </span>
+        </ng-template>
 
-      <mat-option
-        *ngIf="!multiple && inlineNew"
-        class="add-item-option"
-        value="0"
-        (click)="$event.stopPropagation()"
-        >⊕ {{ addItemText }}</mat-option
-      >
-    </mat-select>
+        <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
+        >
+      </mat-select>
+    </ng-container>
   `, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         CommonModule,
                         NgTemplateOutlet,
                         FormsModule,
                         ReactiveFormsModule,
                         MatSelectModule,
+                        TranslocoModule,
                         NgxMatSelectSearchModule,
                     ], 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: [{
@@ -882,12 +867,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                 type: Output
             }], createNewItemSelected: [{
                 type: Output
-            }], searchText: [{
-                type: Input
-            }], notFoundText: [{
-                type: Input
-            }], addItemText: [{
-                type: Input
             }], matSelect: [{
                 type: ViewChild,
                 args: [MatSelect]
@@ -912,5 +891,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { SPMatSelectEntityComponent, SP_MAT_SELECT_ENTITY_CONFIG, SP_MAT_SELECT_ENTITY_HTTP_CONTEXT };
+export { SPMatSelectEntityComponent, SP_MAT_SELECT_ENTITY_HTTP_CONTEXT };
 //# sourceMappingURL=smallpearl-ngx-helper-mat-select-entity.mjs.map