@elderbyte/ngx-starter 19.1.0-beta.18 → 19.1.0-beta.19

package/fesm2022/elderbyte-ngx-starter.mjs

@@ -9923,7 +9923,7 @@ class ElderLabelInputComponent extends FormFieldBaseComponent {
         return this._compareWith ? this._compareWith(a, b) : a === b;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ElderLabelInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: ElderLabelInputComponent, isStandalone: true, selector: "elder-label-input", inputs: { labels: "labels", suggestionLoader: "suggestionLoader", allowNew: "allowNew", compareWith: "compareWith", colorResolver: "colorResolver", nameResolver: "nameResolver", labelBuilder: "labelBuilder" }, outputs: { labelsChanged: "labelsChanged" }, providers: buildFormIntegrationProviders(ElderLabelInputComponent), viewQueries: [{ propertyName: "inputControl", first: true, predicate: ["labelInput"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<mat-form-field\n  [floatLabel]=\"floatLabel\"\n  class=\"full-width\"\n  [appearance]=\"appearance\"\n  [color]=\"color\"\n>\n  <mat-label *ngIf=\"label\">{{ label | translate }}</mat-label>\n\n  <mat-chip-grid #chips>\n    <mat-chip-row\n      *ngFor=\"let label of currentLabels$ | async\"\n      class=\"noselect\"\n      [color]=\"labelColor(label)\"\n      [disabled]=\"disabled\"\n      [removable]=\"removable\"\n      (removed)=\"removeLabel(label)\"\n    >\n      {{ labelName(label) }}\n      <mat-icon matChipRemove *ngIf=\"!readonly && removable\">cancel</mat-icon>\n    </mat-chip-row>\n\n    <input\n      matInput\n      type=\"text\"\n      [matChipInputFor]=\"chips\"\n      [matAutocomplete]=\"labelAutoComplete\"\n      [formControl]=\"labelInputControl\"\n      (matChipInputTokenEnd)=\"createNewLabels($event)\"\n      [name]=\"name\"\n      [disabled]=\"disabled\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [placeholder]=\"placeholder\"\n      autocomplete=\"off\"\n      #labelInput\n    />\n  </mat-chip-grid>\n\n  <mat-autocomplete\n    #labelAutoComplete=\"matAutocomplete\"\n    panelWidth=\"auto\"\n    (optionSelected)=\"labelSelected($event)\"\n  >\n    <mat-option *ngFor=\"let suggestion of availableSuggestions$ | async\" [value]=\"suggestion\">\n      {{ labelName(suggestion) }}\n    </mat-option>\n  </mat-autocomplete>\n</mat-form-field>\n", styles: [".full-width{width:100%}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: ElderLabelInputComponent, isStandalone: true, selector: "elder-label-input", inputs: { labels: "labels", suggestionLoader: "suggestionLoader", allowNew: "allowNew", compareWith: "compareWith", colorResolver: "colorResolver", nameResolver: "nameResolver", labelBuilder: "labelBuilder" }, outputs: { labelsChanged: "labelsChanged" }, providers: buildFormIntegrationProviders(ElderLabelInputComponent), viewQueries: [{ propertyName: "inputControl", first: true, predicate: ["labelInput"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<mat-form-field\n  [floatLabel]=\"floatLabel\"\n  class=\"full-width\"\n  [appearance]=\"appearance\"\n  [color]=\"color\"\n>\n  <mat-label *ngIf=\"label\">{{ label | translate }}</mat-label>\n\n  <mat-chip-grid #chips>\n    <mat-chip-row\n      highlighted\n      *ngFor=\"let label of currentLabels$ | async\"\n      class=\"noselect\"\n      [color]=\"labelColor(label)\"\n      [disabled]=\"disabled\"\n      [removable]=\"removable\"\n      (removed)=\"removeLabel(label)\"\n    >\n      {{ labelName(label) }}\n      <mat-icon matChipRemove *ngIf=\"!readonly && removable\">cancel</mat-icon>\n    </mat-chip-row>\n\n    <input\n      matInput\n      type=\"text\"\n      [matChipInputFor]=\"chips\"\n      [matAutocomplete]=\"labelAutoComplete\"\n      [formControl]=\"labelInputControl\"\n      (matChipInputTokenEnd)=\"createNewLabels($event)\"\n      [name]=\"name\"\n      [disabled]=\"disabled\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [placeholder]=\"placeholder\"\n      autocomplete=\"off\"\n      #labelInput\n    />\n  </mat-chip-grid>\n\n  <mat-autocomplete\n    #labelAutoComplete=\"matAutocomplete\"\n    panelWidth=\"auto\"\n    (optionSelected)=\"labelSelected($event)\"\n  >\n    <mat-option *ngFor=\"let suggestion of availableSuggestions$ | async\" [value]=\"suggestion\">\n      {{ labelName(suggestion) }}\n    </mat-option>\n  </mat-autocomplete>\n</mat-form-field>\n", styles: [".full-width{width:100%}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ElderLabelInputComponent, decorators: [{
             type: Component,
@@ -9945,7 +9945,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
                         MatOption,
                         AsyncPipe,
                         TranslateModule,
-                    ], template: "<mat-form-field\n  [floatLabel]=\"floatLabel\"\n  class=\"full-width\"\n  [appearance]=\"appearance\"\n  [color]=\"color\"\n>\n  <mat-label *ngIf=\"label\">{{ label | translate }}</mat-label>\n\n  <mat-chip-grid #chips>\n    <mat-chip-row\n      *ngFor=\"let label of currentLabels$ | async\"\n      class=\"noselect\"\n      [color]=\"labelColor(label)\"\n      [disabled]=\"disabled\"\n      [removable]=\"removable\"\n      (removed)=\"removeLabel(label)\"\n    >\n      {{ labelName(label) }}\n      <mat-icon matChipRemove *ngIf=\"!readonly && removable\">cancel</mat-icon>\n    </mat-chip-row>\n\n    <input\n      matInput\n      type=\"text\"\n      [matChipInputFor]=\"chips\"\n      [matAutocomplete]=\"labelAutoComplete\"\n      [formControl]=\"labelInputControl\"\n      (matChipInputTokenEnd)=\"createNewLabels($event)\"\n      [name]=\"name\"\n      [disabled]=\"disabled\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [placeholder]=\"placeholder\"\n      autocomplete=\"off\"\n      #labelInput\n    />\n  </mat-chip-grid>\n\n  <mat-autocomplete\n    #labelAutoComplete=\"matAutocomplete\"\n    panelWidth=\"auto\"\n    (optionSelected)=\"labelSelected($event)\"\n  >\n    <mat-option *ngFor=\"let suggestion of availableSuggestions$ | async\" [value]=\"suggestion\">\n      {{ labelName(suggestion) }}\n    </mat-option>\n  </mat-autocomplete>\n</mat-form-field>\n", styles: [".full-width{width:100%}\n"] }]
+                    ], template: "<mat-form-field\n  [floatLabel]=\"floatLabel\"\n  class=\"full-width\"\n  [appearance]=\"appearance\"\n  [color]=\"color\"\n>\n  <mat-label *ngIf=\"label\">{{ label | translate }}</mat-label>\n\n  <mat-chip-grid #chips>\n    <mat-chip-row\n      highlighted\n      *ngFor=\"let label of currentLabels$ | async\"\n      class=\"noselect\"\n      [color]=\"labelColor(label)\"\n      [disabled]=\"disabled\"\n      [removable]=\"removable\"\n      (removed)=\"removeLabel(label)\"\n    >\n      {{ labelName(label) }}\n      <mat-icon matChipRemove *ngIf=\"!readonly && removable\">cancel</mat-icon>\n    </mat-chip-row>\n\n    <input\n      matInput\n      type=\"text\"\n      [matChipInputFor]=\"chips\"\n      [matAutocomplete]=\"labelAutoComplete\"\n      [formControl]=\"labelInputControl\"\n      (matChipInputTokenEnd)=\"createNewLabels($event)\"\n      [name]=\"name\"\n      [disabled]=\"disabled\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [placeholder]=\"placeholder\"\n      autocomplete=\"off\"\n      #labelInput\n    />\n  </mat-chip-grid>\n\n  <mat-autocomplete\n    #labelAutoComplete=\"matAutocomplete\"\n    panelWidth=\"auto\"\n    (optionSelected)=\"labelSelected($event)\"\n  >\n    <mat-option *ngFor=\"let suggestion of availableSuggestions$ | async\" [value]=\"suggestion\">\n      {{ labelName(suggestion) }}\n    </mat-option>\n  </mat-autocomplete>\n</mat-form-field>\n", styles: [".full-width{width:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { inputControl: [{
                 type: ViewChild,
                 args: ['labelInput', { static: true }]
@@ -13675,11 +13675,11 @@ class ElderDataToolbarComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ElderDataToolbarComponent, deps: [{ token: SelectionModel, optional: true }, { token: ELDER_DATA_VIEW, optional: true }, { token: ElderDialogService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: ElderDataToolbarComponent, isStandalone: true, selector: "elder-data-toolbar", inputs: { canAdd: "canAdd", canRemove: "canRemove", canMore: "canMore", confirmRemoval: "confirmRemoval", keepSelectionAfterRemoval: "keepSelectionAfterRemoval", selectionModel: "selectionModel" }, outputs: { requestNew: "requestNew", requestRemove: "requestRemove" }, queries: [{ propertyName: "templates", predicate: ElderToolbarContentDirective }], ngImport: i0, template: "<!-- Table Toolbar -->\n<div\n  class=\"layout-row place-between-center gap-md px-sm pt-xs full\"\n  *ngIf=\"selection$ | async as selection\"\n>\n  <ng-container\n    *ngTemplateOutlet=\"getTemplate('main') || defaultContent; context: { $implicit: selection }\"\n  ></ng-container>\n</div>\n\n<!-- Default Templates -->\n\n<!-- Default Main Content -->\n<ng-template #defaultContent let-selection>\n  <!-- Left column -->\n  <div class=\"layout-row place-start-center\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        getTemplate('left') || defaultLeftContent;\n        context: { $implicit: selection }\n      \"\n    ></ng-container>\n  </div>\n\n  <div class=\"layout-row place-center-center flex\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        getTemplate('center') || defaultCenterContent;\n        context: { $implicit: selection }\n      \"\n    ></ng-container>\n  </div>\n\n  <!-- Right column -->\n  <div class=\"layout-row place-end-center\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        getTemplate('right') || defaultRightContent;\n        context: { $implicit: selection }\n      \"\n    ></ng-container>\n  </div>\n</ng-template>\n\n<!-- Default Left Content -->\n<ng-template #defaultLeftContent let-selection>\n  <!-- Add Action -->\n  <button\n    mat-icon-button\n    type=\"button\"\n    color=\"primary\"\n    *ngIf=\"canAdd\"\n    (click)=\"requestNew.next($event)\"\n  >\n    <mat-icon>add</mat-icon>\n  </button>\n\n  <!-- Placeholder for additional actions -->\n  <ng-container\n    *ngTemplateOutlet=\"getTemplate('left.actions'); context: { $implicit: selection }\"\n  ></ng-container>\n</ng-template>\n\n<!-- Default Center Content -->\n<ng-template #defaultCenterContent let-selection></ng-template>\n\n<!-- Default Right Content -->\n<ng-template #defaultRightContent let-selection>\n  <!-- Placeholder for additional actions -->\n  <ng-container\n    *ngTemplateOutlet=\"getTemplate('right.actions'); context: { $implicit: selection }\"\n  ></ng-container>\n\n  <!-- Delete Action -->\n  <button\n    mat-icon-button\n    type=\"button\"\n    color=\"primary\"\n    *ngIf=\"canRemove\"\n    [disabled]=\"!selection?.length\"\n    (click)=\"requestRemoveItems(selection, $event)\"\n  >\n    <mat-icon>delete</mat-icon>\n  </button>\n\n  <!-- More Menu -->\n  <button\n    mat-icon-button\n    type=\"button\"\n    color=\"primary\"\n    [matMenuTriggerFor]=\"elderTableMenu\"\n    [disabled]=\"!canMore\"\n  >\n    <mat-icon>more_vert</mat-icon>\n    <mat-menu #elderTableMenu=\"matMenu\">\n      <ng-content select=\"[mat-menu-item]\"></ng-content>\n      <!-- Placeholder for mat menu items-->\n      <ng-container\n        *ngTemplateOutlet=\"getTemplate('right.menu'); context: { $implicit: selection }\"\n      ></ng-container>\n    </mat-menu>\n  </button>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: ElderDataToolbarComponent, isStandalone: true, selector: "elder-data-toolbar", inputs: { canAdd: "canAdd", canRemove: "canRemove", canMore: "canMore", confirmRemoval: "confirmRemoval", keepSelectionAfterRemoval: "keepSelectionAfterRemoval", selectionModel: "selectionModel" }, outputs: { requestNew: "requestNew", requestRemove: "requestRemove" }, queries: [{ propertyName: "templates", predicate: ElderToolbarContentDirective }], ngImport: i0, template: "<!-- Table Toolbar -->\n<div\n  class=\"layout-row place-between-center gap-md px-sm full\"\n  *ngIf=\"selection$ | async as selection\"\n>\n  <ng-container\n    *ngTemplateOutlet=\"getTemplate('main') || defaultContent; context: { $implicit: selection }\"\n  ></ng-container>\n</div>\n\n<!-- Default Templates -->\n\n<!-- Default Main Content -->\n<ng-template #defaultContent let-selection>\n  <!-- Left column -->\n  <div class=\"layout-row place-start-center\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        getTemplate('left') || defaultLeftContent;\n        context: { $implicit: selection }\n      \"\n    ></ng-container>\n  </div>\n\n  <div class=\"layout-row place-center-center flex\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        getTemplate('center') || defaultCenterContent;\n        context: { $implicit: selection }\n      \"\n    ></ng-container>\n  </div>\n\n  <!-- Right column -->\n  <div class=\"layout-row place-end-center\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        getTemplate('right') || defaultRightContent;\n        context: { $implicit: selection }\n      \"\n    ></ng-container>\n  </div>\n</ng-template>\n\n<!-- Default Left Content -->\n<ng-template #defaultLeftContent let-selection>\n  <!-- Add Action -->\n  <button\n    mat-icon-button\n    type=\"button\"\n    color=\"primary\"\n    *ngIf=\"canAdd\"\n    (click)=\"requestNew.next($event)\"\n  >\n    <mat-icon>add</mat-icon>\n  </button>\n\n  <!-- Placeholder for additional actions -->\n  <ng-container\n    *ngTemplateOutlet=\"getTemplate('left.actions'); context: { $implicit: selection }\"\n  ></ng-container>\n</ng-template>\n\n<!-- Default Center Content -->\n<ng-template #defaultCenterContent let-selection></ng-template>\n\n<!-- Default Right Content -->\n<ng-template #defaultRightContent let-selection>\n  <!-- Placeholder for additional actions -->\n  <ng-container\n    *ngTemplateOutlet=\"getTemplate('right.actions'); context: { $implicit: selection }\"\n  ></ng-container>\n\n  <!-- Delete Action -->\n  <button\n    mat-icon-button\n    type=\"button\"\n    color=\"primary\"\n    *ngIf=\"canRemove\"\n    [disabled]=\"!selection?.length\"\n    (click)=\"requestRemoveItems(selection, $event)\"\n  >\n    <mat-icon>delete</mat-icon>\n  </button>\n\n  <!-- More Menu -->\n  <button\n    mat-icon-button\n    type=\"button\"\n    color=\"primary\"\n    [matMenuTriggerFor]=\"elderTableMenu\"\n    [disabled]=\"!canMore\"\n  >\n    <mat-icon>more_vert</mat-icon>\n    <mat-menu #elderTableMenu=\"matMenu\">\n      <ng-content select=\"[mat-menu-item]\"></ng-content>\n      <!-- Placeholder for mat menu items-->\n      <ng-container\n        *ngTemplateOutlet=\"getTemplate('right.menu'); context: { $implicit: selection }\"\n      ></ng-container>\n    </mat-menu>\n  </button>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ElderDataToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'elder-data-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf, NgTemplateOutlet, MatIconButton, MatIcon, MatMenuTrigger, MatMenu, AsyncPipe], template: "<!-- Table Toolbar -->\n<div\n  class=\"layout-row place-between-center gap-md px-sm pt-xs full\"\n  *ngIf=\"selection$ | async as selection\"\n>\n  <ng-container\n    *ngTemplateOutlet=\"getTemplate('main') || defaultContent; context: { $implicit: selection }\"\n  ></ng-container>\n</div>\n\n<!-- Default Templates -->\n\n<!-- Default Main Content -->\n<ng-template #defaultContent let-selection>\n  <!-- Left column -->\n  <div class=\"layout-row place-start-center\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        getTemplate('left') || defaultLeftContent;\n        context: { $implicit: selection }\n      \"\n    ></ng-container>\n  </div>\n\n  <div class=\"layout-row place-center-center flex\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        getTemplate('center') || defaultCenterContent;\n        context: { $implicit: selection }\n      \"\n    ></ng-container>\n  </div>\n\n  <!-- Right column -->\n  <div class=\"layout-row place-end-center\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        getTemplate('right') || defaultRightContent;\n        context: { $implicit: selection }\n      \"\n    ></ng-container>\n  </div>\n</ng-template>\n\n<!-- Default Left Content -->\n<ng-template #defaultLeftContent let-selection>\n  <!-- Add Action -->\n  <button\n    mat-icon-button\n    type=\"button\"\n    color=\"primary\"\n    *ngIf=\"canAdd\"\n    (click)=\"requestNew.next($event)\"\n  >\n    <mat-icon>add</mat-icon>\n  </button>\n\n  <!-- Placeholder for additional actions -->\n  <ng-container\n    *ngTemplateOutlet=\"getTemplate('left.actions'); context: { $implicit: selection }\"\n  ></ng-container>\n</ng-template>\n\n<!-- Default Center Content -->\n<ng-template #defaultCenterContent let-selection></ng-template>\n\n<!-- Default Right Content -->\n<ng-template #defaultRightContent let-selection>\n  <!-- Placeholder for additional actions -->\n  <ng-container\n    *ngTemplateOutlet=\"getTemplate('right.actions'); context: { $implicit: selection }\"\n  ></ng-container>\n\n  <!-- Delete Action -->\n  <button\n    mat-icon-button\n    type=\"button\"\n    color=\"primary\"\n    *ngIf=\"canRemove\"\n    [disabled]=\"!selection?.length\"\n    (click)=\"requestRemoveItems(selection, $event)\"\n  >\n    <mat-icon>delete</mat-icon>\n  </button>\n\n  <!-- More Menu -->\n  <button\n    mat-icon-button\n    type=\"button\"\n    color=\"primary\"\n    [matMenuTriggerFor]=\"elderTableMenu\"\n    [disabled]=\"!canMore\"\n  >\n    <mat-icon>more_vert</mat-icon>\n    <mat-menu #elderTableMenu=\"matMenu\">\n      <ng-content select=\"[mat-menu-item]\"></ng-content>\n      <!-- Placeholder for mat menu items-->\n      <ng-container\n        *ngTemplateOutlet=\"getTemplate('right.menu'); context: { $implicit: selection }\"\n      ></ng-container>\n    </mat-menu>\n  </button>\n</ng-template>\n" }]
+            args: [{ selector: 'elder-data-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf, NgTemplateOutlet, MatIconButton, MatIcon, MatMenuTrigger, MatMenu, AsyncPipe], template: "<!-- Table Toolbar -->\n<div\n  class=\"layout-row place-between-center gap-md px-sm full\"\n  *ngIf=\"selection$ | async as selection\"\n>\n  <ng-container\n    *ngTemplateOutlet=\"getTemplate('main') || defaultContent; context: { $implicit: selection }\"\n  ></ng-container>\n</div>\n\n<!-- Default Templates -->\n\n<!-- Default Main Content -->\n<ng-template #defaultContent let-selection>\n  <!-- Left column -->\n  <div class=\"layout-row place-start-center\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        getTemplate('left') || defaultLeftContent;\n        context: { $implicit: selection }\n      \"\n    ></ng-container>\n  </div>\n\n  <div class=\"layout-row place-center-center flex\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        getTemplate('center') || defaultCenterContent;\n        context: { $implicit: selection }\n      \"\n    ></ng-container>\n  </div>\n\n  <!-- Right column -->\n  <div class=\"layout-row place-end-center\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        getTemplate('right') || defaultRightContent;\n        context: { $implicit: selection }\n      \"\n    ></ng-container>\n  </div>\n</ng-template>\n\n<!-- Default Left Content -->\n<ng-template #defaultLeftContent let-selection>\n  <!-- Add Action -->\n  <button\n    mat-icon-button\n    type=\"button\"\n    color=\"primary\"\n    *ngIf=\"canAdd\"\n    (click)=\"requestNew.next($event)\"\n  >\n    <mat-icon>add</mat-icon>\n  </button>\n\n  <!-- Placeholder for additional actions -->\n  <ng-container\n    *ngTemplateOutlet=\"getTemplate('left.actions'); context: { $implicit: selection }\"\n  ></ng-container>\n</ng-template>\n\n<!-- Default Center Content -->\n<ng-template #defaultCenterContent let-selection></ng-template>\n\n<!-- Default Right Content -->\n<ng-template #defaultRightContent let-selection>\n  <!-- Placeholder for additional actions -->\n  <ng-container\n    *ngTemplateOutlet=\"getTemplate('right.actions'); context: { $implicit: selection }\"\n  ></ng-container>\n\n  <!-- Delete Action -->\n  <button\n    mat-icon-button\n    type=\"button\"\n    color=\"primary\"\n    *ngIf=\"canRemove\"\n    [disabled]=\"!selection?.length\"\n    (click)=\"requestRemoveItems(selection, $event)\"\n  >\n    <mat-icon>delete</mat-icon>\n  </button>\n\n  <!-- More Menu -->\n  <button\n    mat-icon-button\n    type=\"button\"\n    color=\"primary\"\n    [matMenuTriggerFor]=\"elderTableMenu\"\n    [disabled]=\"!canMore\"\n  >\n    <mat-icon>more_vert</mat-icon>\n    <mat-menu #elderTableMenu=\"matMenu\">\n      <ng-content select=\"[mat-menu-item]\"></ng-content>\n      <!-- Placeholder for mat menu items-->\n      <ng-container\n        *ngTemplateOutlet=\"getTemplate('right.menu'); context: { $implicit: selection }\"\n      ></ng-container>\n    </mat-menu>\n  </button>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: SelectionModel, decorators: [{
                     type: Optional
                 }] }, { type: undefined, decorators: [{
@@ -14246,7 +14246,7 @@ class ElderBadgeComponent {
         return this.chipAvatarTemplate$.getValue();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ElderBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: ElderBadgeComponent, isStandalone: true, selector: "elder-badge", inputs: { appearance: "appearance", value: "value", colorSpec: "colorSpec", badgeColor: "badgeColor", avatarSpec: "avatarSpec", setCssClass: ["cssClass", "setCssClass"], chipTemplate: "chipTemplate", chipAvatarTemplate: "chipAvatarTemplate" }, queries: [{ propertyName: "chipTemplateQuery", first: true, predicate: ElderBadgeChipDirective, descendants: true, read: TemplateRef }, { propertyName: "chipAvatarTemplateQuery", first: true, predicate: ElderBadgeChipAvatarDirective, descendants: true, read: TemplateRef }], ngImport: i0, template: "<ng-container *ngIf=\"templates$ | async as templates\">\n  <ng-container *ngIf=\"badgeModel$ | async as badgeModel\">\n    <mat-chip\n      elderChipLabel\n      [appearance]=\"appearance\"\n      [color]=\"badgeModel.colorSpec?.theme\"\n      [stateColor]=\"badgeModel.colorSpec?.state\"\n      [levelColor]=\"badgeModel.colorSpec?.level\"\n      [class]=\"'elder-badge fill ' + elementClass\"\n    >\n      <mat-chip-avatar clasS=\"elder-badge-avatar\" *ngIf=\"templates.avatar || badgeModel.showAvatar\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            templates.avatar || simpleAvatarTemplate;\n            context: { $implicit: badgeModel }\n          \"\n        >\n        </ng-container>\n      </mat-chip-avatar>\n\n      <ng-container\n        *ngTemplateOutlet=\"templates.chip || simpleChipTemplate; context: { $implicit: badgeModel }\"\n      >\n      </ng-container>\n\n      <ng-content></ng-content>\n    </mat-chip>\n  </ng-container>\n</ng-container>\n\n<ng-template #simpleChipTemplate let-badgeModel>\n  <!--\n  <span class=\"elder-chip-text\">{{badgeModel.value | elderTruncate:20}}</span>\n  -->\n  {{ badgeModel.value | elderTruncate: 20 }}\n</ng-template>\n\n<ng-template #simpleAvatarTemplate let-badgeModel>\n  <mat-icon>{{ badgeModel.avatarSpec?.icon }}</mat-icon>\n</ng-template>\n", styles: [".elder-badge{position:absolute!important;width:unset!important;max-width:unset!important;--mdc-chip-container-shape-radius: 10px}.elder-badge.mat-mdc-standard-chip{height:auto}.elder-badge.mat-mdc-standard-chip .mdc-evolution-chip__text-label{font-size:var(--mat-badge-text-size, 12px);font-weight:var(--mat-badge-text-weight, 600)}.elder-badge .mdc-evolution-chip,.elder-badge .mdc-evolution-chip__cell,.elder-badge .mdc-evolution-chip__action{justify-content:center}.elder-badge.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic{padding-left:0;padding-right:0}.mat-badge-small .elder-badge.mat-badge-content{border-radius:16px;min-width:16px}.mat-badge-small.mat-badge-above .elder-badge.mat-badge-content{top:-7px!important}.mat-badge-small.mat-badge-overlap.mat-badge-after .elder-badge.mat-badge-content{right:-5px;transform:translate(100%)!important}.mat-badge-small.mat-badge-overlap.mat-badge-before .elder-badge.mat-badge-content{left:-5px;transform:translate(-100%)!important}.mat-badge-small .elder-badge.mat-mdc-standard-chip .mdc-evolution-chip__action--primary{padding:0 3px!important}.mat-badge-small .elder-badge.mat-badge-content{line-height:14px!important}.mat-badge-medium .elder-badge.mat-badge-content{border-radius:22px;min-width:22px}.mat-badge-medium.mat-badge-overlap.mat-badge-after .elder-badge.mat-badge-content{right:-5px;transform:translate(100%)!important}.mat-badge-medium.mat-badge-overlap.mat-badge-before .elder-badge.mat-badge-content{left:-5px;transform:translate(-100%)!important}.mat-badge-medium .elder-badge.mat-mdc-standard-chip .mdc-evolution-chip__action--primary{padding:0 6px!important}.mat-badge-medium .elder-badge.mat-badge-content{line-height:20px!important}.mat-badge-large .elder-badge.mat-badge-content{border-radius:28px;min-width:28px}.mat-badge-large.mat-badge-overlap.mat-badge-after .elder-badge.mat-badge-content{right:-5px;transform:translate(100%)!important}.mat-badge-large.mat-badge-overlap.mat-badge-before .elder-badge.mat-badge-content{left:-5px;transform:translate(-100%)!important}.mat-badge-large .elder-badge.mat-mdc-standard-chip .mdc-evolution-chip__action--primary{padding:0 6px!important}.mat-badge-large .elder-badge.mat-badge-content{line-height:26px!important}.elder-badge.mat-badge-content{transform:unset!important}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: ElderChipLabelDirective, selector: "[elderChipLabel]", inputs: ["appearance", "color", "stateColor", "levelColor"] }, { kind: "directive", type: MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: ElderTruncatePipe, name: "elderTruncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: ElderBadgeComponent, isStandalone: true, selector: "elder-badge", inputs: { appearance: "appearance", value: "value", colorSpec: "colorSpec", badgeColor: "badgeColor", avatarSpec: "avatarSpec", setCssClass: ["cssClass", "setCssClass"], chipTemplate: "chipTemplate", chipAvatarTemplate: "chipAvatarTemplate" }, queries: [{ propertyName: "chipTemplateQuery", first: true, predicate: ElderBadgeChipDirective, descendants: true, read: TemplateRef }, { propertyName: "chipAvatarTemplateQuery", first: true, predicate: ElderBadgeChipAvatarDirective, descendants: true, read: TemplateRef }], ngImport: i0, template: "<ng-container *ngIf=\"templates$ | async as templates\">\n  <ng-container *ngIf=\"badgeModel$ | async as badgeModel\">\n    <mat-chip\n      elderChipLabel\n      highlighted\n      [appearance]=\"appearance\"\n      [color]=\"badgeModel.colorSpec?.theme\"\n      [stateColor]=\"badgeModel.colorSpec?.state\"\n      [levelColor]=\"badgeModel.colorSpec?.level\"\n      [class]=\"'elder-badge fill ' + elementClass\"\n    >\n      <mat-chip-avatar clasS=\"elder-badge-avatar\" *ngIf=\"templates.avatar || badgeModel.showAvatar\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            templates.avatar || simpleAvatarTemplate;\n            context: { $implicit: badgeModel }\n          \"\n        >\n        </ng-container>\n      </mat-chip-avatar>\n\n      <ng-container\n        *ngTemplateOutlet=\"templates.chip || simpleChipTemplate; context: { $implicit: badgeModel }\"\n      >\n      </ng-container>\n\n      <ng-content></ng-content>\n    </mat-chip>\n  </ng-container>\n</ng-container>\n\n<ng-template #simpleChipTemplate let-badgeModel>\n  <!--\n  <span class=\"elder-chip-text\">{{badgeModel.value | elderTruncate:20}}</span>\n  -->\n  {{ badgeModel.value | elderTruncate: 20 }}\n</ng-template>\n\n<ng-template #simpleAvatarTemplate let-badgeModel>\n  <mat-icon>{{ badgeModel.avatarSpec?.icon }}</mat-icon>\n</ng-template>\n", styles: [".elder-badge{position:absolute!important;width:unset!important;max-width:unset!important;--mdc-chip-container-shape-radius: 10px}.elder-badge.mat-mdc-standard-chip{height:auto}.elder-badge.mat-mdc-standard-chip .mdc-evolution-chip__text-label{font-size:var(--mat-badge-text-size, 12px);font-weight:var(--mat-badge-text-weight, 600)}.elder-badge .mdc-evolution-chip,.elder-badge .mdc-evolution-chip__cell,.elder-badge .mdc-evolution-chip__action{justify-content:center}.elder-badge.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic{padding-left:0;padding-right:0}.mat-badge-small .elder-badge.mat-badge-content{border-radius:16px;min-width:16px}.mat-badge-small.mat-badge-above .elder-badge.mat-badge-content{top:-7px!important}.mat-badge-small.mat-badge-overlap.mat-badge-after .elder-badge.mat-badge-content{right:-5px;transform:translate(100%)!important}.mat-badge-small.mat-badge-overlap.mat-badge-before .elder-badge.mat-badge-content{left:-5px;transform:translate(-100%)!important}.mat-badge-small .elder-badge.mat-mdc-standard-chip .mdc-evolution-chip__action--primary{padding:0 3px!important}.mat-badge-small .elder-badge.mat-badge-content{line-height:14px!important}.mat-badge-medium .elder-badge.mat-badge-content{border-radius:22px;min-width:22px}.mat-badge-medium.mat-badge-overlap.mat-badge-after .elder-badge.mat-badge-content{right:-5px;transform:translate(100%)!important}.mat-badge-medium.mat-badge-overlap.mat-badge-before .elder-badge.mat-badge-content{left:-5px;transform:translate(-100%)!important}.mat-badge-medium .elder-badge.mat-mdc-standard-chip .mdc-evolution-chip__action--primary{padding:0 6px!important}.mat-badge-medium .elder-badge.mat-badge-content{line-height:20px!important}.mat-badge-large .elder-badge.mat-badge-content{border-radius:28px;min-width:28px}.mat-badge-large.mat-badge-overlap.mat-badge-after .elder-badge.mat-badge-content{right:-5px;transform:translate(100%)!important}.mat-badge-large.mat-badge-overlap.mat-badge-before .elder-badge.mat-badge-content{left:-5px;transform:translate(-100%)!important}.mat-badge-large .elder-badge.mat-mdc-standard-chip .mdc-evolution-chip__action--primary{padding:0 6px!important}.mat-badge-large .elder-badge.mat-badge-content{line-height:26px!important}.elder-badge.mat-badge-content{transform:unset!important}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: ElderChipLabelDirective, selector: "[elderChipLabel]", inputs: ["appearance", "color", "stateColor", "levelColor"] }, { kind: "directive", type: MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: ElderTruncatePipe, name: "elderTruncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ElderBadgeComponent, decorators: [{
             type: Component,
@@ -14259,7 +14259,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
                         MatIcon,
                         AsyncPipe,
                         ElderTruncatePipe,
-                    ], template: "<ng-container *ngIf=\"templates$ | async as templates\">\n  <ng-container *ngIf=\"badgeModel$ | async as badgeModel\">\n    <mat-chip\n      elderChipLabel\n      [appearance]=\"appearance\"\n      [color]=\"badgeModel.colorSpec?.theme\"\n      [stateColor]=\"badgeModel.colorSpec?.state\"\n      [levelColor]=\"badgeModel.colorSpec?.level\"\n      [class]=\"'elder-badge fill ' + elementClass\"\n    >\n      <mat-chip-avatar clasS=\"elder-badge-avatar\" *ngIf=\"templates.avatar || badgeModel.showAvatar\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            templates.avatar || simpleAvatarTemplate;\n            context: { $implicit: badgeModel }\n          \"\n        >\n        </ng-container>\n      </mat-chip-avatar>\n\n      <ng-container\n        *ngTemplateOutlet=\"templates.chip || simpleChipTemplate; context: { $implicit: badgeModel }\"\n      >\n      </ng-container>\n\n      <ng-content></ng-content>\n    </mat-chip>\n  </ng-container>\n</ng-container>\n\n<ng-template #simpleChipTemplate let-badgeModel>\n  <!--\n  <span class=\"elder-chip-text\">{{badgeModel.value | elderTruncate:20}}</span>\n  -->\n  {{ badgeModel.value | elderTruncate: 20 }}\n</ng-template>\n\n<ng-template #simpleAvatarTemplate let-badgeModel>\n  <mat-icon>{{ badgeModel.avatarSpec?.icon }}</mat-icon>\n</ng-template>\n", styles: [".elder-badge{position:absolute!important;width:unset!important;max-width:unset!important;--mdc-chip-container-shape-radius: 10px}.elder-badge.mat-mdc-standard-chip{height:auto}.elder-badge.mat-mdc-standard-chip .mdc-evolution-chip__text-label{font-size:var(--mat-badge-text-size, 12px);font-weight:var(--mat-badge-text-weight, 600)}.elder-badge .mdc-evolution-chip,.elder-badge .mdc-evolution-chip__cell,.elder-badge .mdc-evolution-chip__action{justify-content:center}.elder-badge.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic{padding-left:0;padding-right:0}.mat-badge-small .elder-badge.mat-badge-content{border-radius:16px;min-width:16px}.mat-badge-small.mat-badge-above .elder-badge.mat-badge-content{top:-7px!important}.mat-badge-small.mat-badge-overlap.mat-badge-after .elder-badge.mat-badge-content{right:-5px;transform:translate(100%)!important}.mat-badge-small.mat-badge-overlap.mat-badge-before .elder-badge.mat-badge-content{left:-5px;transform:translate(-100%)!important}.mat-badge-small .elder-badge.mat-mdc-standard-chip .mdc-evolution-chip__action--primary{padding:0 3px!important}.mat-badge-small .elder-badge.mat-badge-content{line-height:14px!important}.mat-badge-medium .elder-badge.mat-badge-content{border-radius:22px;min-width:22px}.mat-badge-medium.mat-badge-overlap.mat-badge-after .elder-badge.mat-badge-content{right:-5px;transform:translate(100%)!important}.mat-badge-medium.mat-badge-overlap.mat-badge-before .elder-badge.mat-badge-content{left:-5px;transform:translate(-100%)!important}.mat-badge-medium .elder-badge.mat-mdc-standard-chip .mdc-evolution-chip__action--primary{padding:0 6px!important}.mat-badge-medium .elder-badge.mat-badge-content{line-height:20px!important}.mat-badge-large .elder-badge.mat-badge-content{border-radius:28px;min-width:28px}.mat-badge-large.mat-badge-overlap.mat-badge-after .elder-badge.mat-badge-content{right:-5px;transform:translate(100%)!important}.mat-badge-large.mat-badge-overlap.mat-badge-before .elder-badge.mat-badge-content{left:-5px;transform:translate(-100%)!important}.mat-badge-large .elder-badge.mat-mdc-standard-chip .mdc-evolution-chip__action--primary{padding:0 6px!important}.mat-badge-large .elder-badge.mat-badge-content{line-height:26px!important}.elder-badge.mat-badge-content{transform:unset!important}\n"] }]
+                    ], template: "<ng-container *ngIf=\"templates$ | async as templates\">\n  <ng-container *ngIf=\"badgeModel$ | async as badgeModel\">\n    <mat-chip\n      elderChipLabel\n      highlighted\n      [appearance]=\"appearance\"\n      [color]=\"badgeModel.colorSpec?.theme\"\n      [stateColor]=\"badgeModel.colorSpec?.state\"\n      [levelColor]=\"badgeModel.colorSpec?.level\"\n      [class]=\"'elder-badge fill ' + elementClass\"\n    >\n      <mat-chip-avatar clasS=\"elder-badge-avatar\" *ngIf=\"templates.avatar || badgeModel.showAvatar\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            templates.avatar || simpleAvatarTemplate;\n            context: { $implicit: badgeModel }\n          \"\n        >\n        </ng-container>\n      </mat-chip-avatar>\n\n      <ng-container\n        *ngTemplateOutlet=\"templates.chip || simpleChipTemplate; context: { $implicit: badgeModel }\"\n      >\n      </ng-container>\n\n      <ng-content></ng-content>\n    </mat-chip>\n  </ng-container>\n</ng-container>\n\n<ng-template #simpleChipTemplate let-badgeModel>\n  <!--\n  <span class=\"elder-chip-text\">{{badgeModel.value | elderTruncate:20}}</span>\n  -->\n  {{ badgeModel.value | elderTruncate: 20 }}\n</ng-template>\n\n<ng-template #simpleAvatarTemplate let-badgeModel>\n  <mat-icon>{{ badgeModel.avatarSpec?.icon }}</mat-icon>\n</ng-template>\n", styles: [".elder-badge{position:absolute!important;width:unset!important;max-width:unset!important;--mdc-chip-container-shape-radius: 10px}.elder-badge.mat-mdc-standard-chip{height:auto}.elder-badge.mat-mdc-standard-chip .mdc-evolution-chip__text-label{font-size:var(--mat-badge-text-size, 12px);font-weight:var(--mat-badge-text-weight, 600)}.elder-badge .mdc-evolution-chip,.elder-badge .mdc-evolution-chip__cell,.elder-badge .mdc-evolution-chip__action{justify-content:center}.elder-badge.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic{padding-left:0;padding-right:0}.mat-badge-small .elder-badge.mat-badge-content{border-radius:16px;min-width:16px}.mat-badge-small.mat-badge-above .elder-badge.mat-badge-content{top:-7px!important}.mat-badge-small.mat-badge-overlap.mat-badge-after .elder-badge.mat-badge-content{right:-5px;transform:translate(100%)!important}.mat-badge-small.mat-badge-overlap.mat-badge-before .elder-badge.mat-badge-content{left:-5px;transform:translate(-100%)!important}.mat-badge-small .elder-badge.mat-mdc-standard-chip .mdc-evolution-chip__action--primary{padding:0 3px!important}.mat-badge-small .elder-badge.mat-badge-content{line-height:14px!important}.mat-badge-medium .elder-badge.mat-badge-content{border-radius:22px;min-width:22px}.mat-badge-medium.mat-badge-overlap.mat-badge-after .elder-badge.mat-badge-content{right:-5px;transform:translate(100%)!important}.mat-badge-medium.mat-badge-overlap.mat-badge-before .elder-badge.mat-badge-content{left:-5px;transform:translate(-100%)!important}.mat-badge-medium .elder-badge.mat-mdc-standard-chip .mdc-evolution-chip__action--primary{padding:0 6px!important}.mat-badge-medium .elder-badge.mat-badge-content{line-height:20px!important}.mat-badge-large .elder-badge.mat-badge-content{border-radius:28px;min-width:28px}.mat-badge-large.mat-badge-overlap.mat-badge-after .elder-badge.mat-badge-content{right:-5px;transform:translate(100%)!important}.mat-badge-large.mat-badge-overlap.mat-badge-before .elder-badge.mat-badge-content{left:-5px;transform:translate(-100%)!important}.mat-badge-large .elder-badge.mat-mdc-standard-chip .mdc-evolution-chip__action--primary{padding:0 6px!important}.mat-badge-large .elder-badge.mat-badge-content{line-height:26px!important}.elder-badge.mat-badge-content{transform:unset!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { appearance: [{
                 type: Input
             }], value: [{
@@ -24332,7 +24332,7 @@ class ElderMultiSelectChipsComponent extends ElderMultiSelectBase {
                 provide: ELDER_SELECT_BASE,
                 useExisting: forwardRef(() => ElderMultiSelectChipsComponent),
             },
-        ], queries: [{ propertyName: "_customChipInput", first: true, predicate: MatFormFieldControl, descendants: true }, { propertyName: "chipTemplateQuery", first: true, predicate: ElderSelectChipDirective, descendants: true, read: TemplateRef }, { propertyName: "chipAvatarTemplateQuery", first: true, predicate: ElderSelectChipAvatarDirective, descendants: true, read: TemplateRef }, { propertyName: "customInputTemplateQuery", first: true, predicate: ElderSelectCustomInputDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "_chipInput", first: true, predicate: ElderSelectComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"elder-flex-control\" [matTooltip]=\"state()?.error\">\n  <mat-chip-set\n    #chips\n    [class.mat-mdc-chip-set-stacked]=\"stacked\"\n    cdkDropList\n    [cdkDropListOrientation]=\"stacked ? 'vertical' : 'horizontal'\"\n    (cdkDropListDropped)=\"drop($event)\"\n    [cdkDropListDisabled]=\"!allowSorting\"\n  >\n    @if (icon) {\n      <div class=\"elder-input-prefix-icon-container flex-none\">\n        <mat-icon\n          disabled\n          class=\"elder-prefix-icon elder-mdc-control-icon elder-icon-small noselect\"\n          [class.loading]=\"state()?.loading\"\n        >\n          {{ icon }}\n        </mat-icon>\n      </div>\n    }\n\n    @for (chipModel of selectChips(); track chipModel.id) {\n      <mat-chip-row\n        elderChipLabel\n        class=\"noselect clickable-chip\"\n        [value]=\"resolveChipValue(chipModel.value)\"\n        [color]=\"chipModel.colorSpec?.themeColor\"\n        [levelColor]=\"chipModel.colorSpec?.levelColor\"\n        [stateColor]=\"chipModel.colorSpec?.stateColor\"\n        [removable]=\"chipModel.removable\"\n        (keydown)=\"onChipKeyDown($event, chipModel.value)\"\n        (click)=\"onCurrentClicked(chipModel.value)\"\n        cdkDrag\n        [cdkDragData]=\"chipModel.value\"\n        [cdkDragDisabled]=\"!allowSorting\"\n      >\n        @if (templates()?.avatar && !chipModel.avatarSpec?.hide) {\n          <mat-chip-avatar [class.chip-avatar-xl]=\"chipModel.avatarSpec?.large\">\n            <ng-container *ngTemplateOutlet=\"templates().avatar; context: { $implicit: chipModel }\">\n            </ng-container>\n          </mat-chip-avatar>\n        }\n\n        <ng-container\n          *ngTemplateOutlet=\"\n            templates()?.chip || simpleChipTemplate;\n            context: { $implicit: chipModel }\n          \"\n        >\n        </ng-container>\n\n        @if (chipModel.trailingSpec?.icon; as trailingIcon) {\n          <mat-icon\n            matChipTrailingIcon\n            class=\"elder-trailing-icon\"\n            [fontSet]=\"chipModel.trailingSpec?.iconFontSet\"\n            >{{ trailingIcon }}</mat-icon\n          >\n        }\n\n        @if (chipModel.removable) {\n          <mat-icon matChipRemove (click)=\"onClickRemoveChip($event, chipModel.value)\">\n            cancel\n          </mat-icon>\n        }\n      </mat-chip-row>\n    }\n\n    <div class=\"layout-row place-start-center elder-chip-input\">\n      <!-- [matChipInputFor]=\"chips\" -->\n      <ng-container *ngTemplateOutlet=\"templates()?.input || selectInput\"> </ng-container>\n\n      @if (selectionPopup) {\n        <button\n          mat-icon-button\n          type=\"button\"\n          class=\"elder-control-icon-button elder-browse-icon\"\n          [disabled]=\"isLocked\"\n          (click)=\"openSelectionPopup($event)\"\n          aria-label=\"Search\"\n          elderStopEventPropagation\n          tabIndex=\"-1\"\n        >\n          <mat-icon class=\"elder-mdc-control-icon\">search</mat-icon>\n        </button>\n      }\n    </div>\n  </mat-chip-set>\n</div>\n\n<ng-template #selectInput>\n  <!-- mat-mdc-chip-input -->\n  <elder-select\n    autocomplete\n    elderClearSelect\n    class=\"elder-chip-input-select flex\"\n    [data]=\"dataContextS()\"\n    [disabled]=\"!!disabled\"\n    [required]=\"!!required\"\n    [readonly]=\"!!readonly\"\n    [placeholder]=\"placeholderS()\"\n    (entityUpdated)=\"appendEntity($event)\"\n    [displayPropertyResolver]=\"displayPropertyResolverS()\"\n    [valueTemplate]=\"valueTemplate\"\n    [queryFilter]=\"queryFilter\"\n    [filters]=\"filters\"\n    [sorts]=\"sorts\"\n    [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n    [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n  ></elder-select>\n</ng-template>\n\n<ng-template #simpleChipTemplate let-chipModel>\n  <span class=\"elder-chip-text\">{{ chipModel.displayText | elderTruncate: 20 }}</span>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: ElderChipLabelDirective, selector: "[elderChipLabel]", inputs: ["appearance", "color", "stateColor", "levelColor"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatChipTrailingIcon, selector: "mat-chip-trailing-icon, [matChipTrailingIcon]" }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "component", type: ElderSelectComponent, selector: "elder-select", inputs: ["nullDisplay", "autocomplete", "allowNull", "entity", "entityId"], outputs: ["entityIdChange", "entityIdUpdated", "entityChange", "entityUpdated", "entity"] }, { kind: "directive", type: ElderClearSelectDirective, selector: "[elderClearSelect]" }, { kind: "pipe", type: ElderTruncatePipe, name: "elderTruncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "_customChipInput", first: true, predicate: MatFormFieldControl, descendants: true }, { propertyName: "chipTemplateQuery", first: true, predicate: ElderSelectChipDirective, descendants: true, read: TemplateRef }, { propertyName: "chipAvatarTemplateQuery", first: true, predicate: ElderSelectChipAvatarDirective, descendants: true, read: TemplateRef }, { propertyName: "customInputTemplateQuery", first: true, predicate: ElderSelectCustomInputDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "_chipInput", first: true, predicate: ElderSelectComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"elder-flex-control\" [matTooltip]=\"state()?.error\">\n  <mat-chip-set\n    #chips\n    [class.mat-mdc-chip-set-stacked]=\"stacked\"\n    cdkDropList\n    [cdkDropListOrientation]=\"stacked ? 'vertical' : 'horizontal'\"\n    (cdkDropListDropped)=\"drop($event)\"\n    [cdkDropListDisabled]=\"!allowSorting\"\n  >\n    @if (icon) {\n      <div class=\"elder-input-prefix-icon-container flex-none\">\n        <mat-icon\n          disabled\n          class=\"elder-prefix-icon elder-mdc-control-icon elder-icon-small noselect\"\n          [class.loading]=\"state()?.loading\"\n        >\n          {{ icon }}\n        </mat-icon>\n      </div>\n    }\n\n    @for (chipModel of selectChips(); track chipModel.id) {\n      <mat-chip-row\n        elderChipLabel\n        highlighted\n        class=\"noselect clickable-chip\"\n        [value]=\"resolveChipValue(chipModel.value)\"\n        [color]=\"chipModel.colorSpec?.themeColor\"\n        [levelColor]=\"chipModel.colorSpec?.levelColor\"\n        [stateColor]=\"chipModel.colorSpec?.stateColor\"\n        [removable]=\"chipModel.removable\"\n        (keydown)=\"onChipKeyDown($event, chipModel.value)\"\n        (click)=\"onCurrentClicked(chipModel.value)\"\n        cdkDrag\n        [cdkDragData]=\"chipModel.value\"\n        [cdkDragDisabled]=\"!allowSorting\"\n      >\n        @if (templates()?.avatar && !chipModel.avatarSpec?.hide) {\n          <mat-chip-avatar [class.chip-avatar-xl]=\"chipModel.avatarSpec?.large\">\n            <ng-container *ngTemplateOutlet=\"templates().avatar; context: { $implicit: chipModel }\">\n            </ng-container>\n          </mat-chip-avatar>\n        }\n\n        <ng-container\n          *ngTemplateOutlet=\"\n            templates()?.chip || simpleChipTemplate;\n            context: { $implicit: chipModel }\n          \"\n        >\n        </ng-container>\n\n        @if (chipModel.trailingSpec?.icon; as trailingIcon) {\n          <mat-icon\n            matChipTrailingIcon\n            class=\"elder-trailing-icon\"\n            [fontSet]=\"chipModel.trailingSpec?.iconFontSet\"\n            >{{ trailingIcon }}</mat-icon\n          >\n        }\n\n        @if (chipModel.removable) {\n          <mat-icon matChipRemove (click)=\"onClickRemoveChip($event, chipModel.value)\">\n            cancel\n          </mat-icon>\n        }\n      </mat-chip-row>\n    }\n\n    <div class=\"layout-row place-start-center elder-chip-input\">\n      <!-- [matChipInputFor]=\"chips\" -->\n      <ng-container *ngTemplateOutlet=\"templates()?.input || selectInput\"> </ng-container>\n\n      @if (selectionPopup) {\n        <button\n          mat-icon-button\n          type=\"button\"\n          class=\"elder-control-icon-button elder-browse-icon\"\n          [disabled]=\"isLocked\"\n          (click)=\"openSelectionPopup($event)\"\n          aria-label=\"Search\"\n          elderStopEventPropagation\n          tabIndex=\"-1\"\n        >\n          <mat-icon class=\"elder-mdc-control-icon\">search</mat-icon>\n        </button>\n      }\n    </div>\n  </mat-chip-set>\n</div>\n\n<ng-template #selectInput>\n  <!-- mat-mdc-chip-input -->\n  <elder-select\n    autocomplete\n    elderClearSelect\n    class=\"elder-chip-input-select flex\"\n    [data]=\"dataContextS()\"\n    [disabled]=\"!!disabled\"\n    [required]=\"!!required\"\n    [readonly]=\"!!readonly\"\n    [placeholder]=\"placeholderS()\"\n    (entityUpdated)=\"appendEntity($event)\"\n    [displayPropertyResolver]=\"displayPropertyResolverS()\"\n    [valueTemplate]=\"valueTemplate\"\n    [queryFilter]=\"queryFilter\"\n    [filters]=\"filters\"\n    [sorts]=\"sorts\"\n    [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n    [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n  ></elder-select>\n</ng-template>\n\n<ng-template #simpleChipTemplate let-chipModel>\n  <span class=\"elder-chip-text\">{{ chipModel.displayText | elderTruncate: 20 }}</span>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: ElderChipLabelDirective, selector: "[elderChipLabel]", inputs: ["appearance", "color", "stateColor", "levelColor"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatChipTrailingIcon, selector: "mat-chip-trailing-icon, [matChipTrailingIcon]" }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "component", type: ElderSelectComponent, selector: "elder-select", inputs: ["nullDisplay", "autocomplete", "allowNull", "entity", "entityId"], outputs: ["entityIdChange", "entityIdUpdated", "entityChange", "entityUpdated", "entity"] }, { kind: "directive", type: ElderClearSelectDirective, selector: "[elderClearSelect]" }, { kind: "pipe", type: ElderTruncatePipe, name: "elderTruncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ElderMultiSelectChipsComponent, decorators: [{
             type: Component,
@@ -24359,7 +24359,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
                         ElderSelectComponent,
                         ElderClearSelectDirective,
                         ElderTruncatePipe,
-                    ], template: "<div class=\"elder-flex-control\" [matTooltip]=\"state()?.error\">\n  <mat-chip-set\n    #chips\n    [class.mat-mdc-chip-set-stacked]=\"stacked\"\n    cdkDropList\n    [cdkDropListOrientation]=\"stacked ? 'vertical' : 'horizontal'\"\n    (cdkDropListDropped)=\"drop($event)\"\n    [cdkDropListDisabled]=\"!allowSorting\"\n  >\n    @if (icon) {\n      <div class=\"elder-input-prefix-icon-container flex-none\">\n        <mat-icon\n          disabled\n          class=\"elder-prefix-icon elder-mdc-control-icon elder-icon-small noselect\"\n          [class.loading]=\"state()?.loading\"\n        >\n          {{ icon }}\n        </mat-icon>\n      </div>\n    }\n\n    @for (chipModel of selectChips(); track chipModel.id) {\n      <mat-chip-row\n        elderChipLabel\n        class=\"noselect clickable-chip\"\n        [value]=\"resolveChipValue(chipModel.value)\"\n        [color]=\"chipModel.colorSpec?.themeColor\"\n        [levelColor]=\"chipModel.colorSpec?.levelColor\"\n        [stateColor]=\"chipModel.colorSpec?.stateColor\"\n        [removable]=\"chipModel.removable\"\n        (keydown)=\"onChipKeyDown($event, chipModel.value)\"\n        (click)=\"onCurrentClicked(chipModel.value)\"\n        cdkDrag\n        [cdkDragData]=\"chipModel.value\"\n        [cdkDragDisabled]=\"!allowSorting\"\n      >\n        @if (templates()?.avatar && !chipModel.avatarSpec?.hide) {\n          <mat-chip-avatar [class.chip-avatar-xl]=\"chipModel.avatarSpec?.large\">\n            <ng-container *ngTemplateOutlet=\"templates().avatar; context: { $implicit: chipModel }\">\n            </ng-container>\n          </mat-chip-avatar>\n        }\n\n        <ng-container\n          *ngTemplateOutlet=\"\n            templates()?.chip || simpleChipTemplate;\n            context: { $implicit: chipModel }\n          \"\n        >\n        </ng-container>\n\n        @if (chipModel.trailingSpec?.icon; as trailingIcon) {\n          <mat-icon\n            matChipTrailingIcon\n            class=\"elder-trailing-icon\"\n            [fontSet]=\"chipModel.trailingSpec?.iconFontSet\"\n            >{{ trailingIcon }}</mat-icon\n          >\n        }\n\n        @if (chipModel.removable) {\n          <mat-icon matChipRemove (click)=\"onClickRemoveChip($event, chipModel.value)\">\n            cancel\n          </mat-icon>\n        }\n      </mat-chip-row>\n    }\n\n    <div class=\"layout-row place-start-center elder-chip-input\">\n      <!-- [matChipInputFor]=\"chips\" -->\n      <ng-container *ngTemplateOutlet=\"templates()?.input || selectInput\"> </ng-container>\n\n      @if (selectionPopup) {\n        <button\n          mat-icon-button\n          type=\"button\"\n          class=\"elder-control-icon-button elder-browse-icon\"\n          [disabled]=\"isLocked\"\n          (click)=\"openSelectionPopup($event)\"\n          aria-label=\"Search\"\n          elderStopEventPropagation\n          tabIndex=\"-1\"\n        >\n          <mat-icon class=\"elder-mdc-control-icon\">search</mat-icon>\n        </button>\n      }\n    </div>\n  </mat-chip-set>\n</div>\n\n<ng-template #selectInput>\n  <!-- mat-mdc-chip-input -->\n  <elder-select\n    autocomplete\n    elderClearSelect\n    class=\"elder-chip-input-select flex\"\n    [data]=\"dataContextS()\"\n    [disabled]=\"!!disabled\"\n    [required]=\"!!required\"\n    [readonly]=\"!!readonly\"\n    [placeholder]=\"placeholderS()\"\n    (entityUpdated)=\"appendEntity($event)\"\n    [displayPropertyResolver]=\"displayPropertyResolverS()\"\n    [valueTemplate]=\"valueTemplate\"\n    [queryFilter]=\"queryFilter\"\n    [filters]=\"filters\"\n    [sorts]=\"sorts\"\n    [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n    [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n  ></elder-select>\n</ng-template>\n\n<ng-template #simpleChipTemplate let-chipModel>\n  <span class=\"elder-chip-text\">{{ chipModel.displayText | elderTruncate: 20 }}</span>\n</ng-template>\n" }]
+                    ], template: "<div class=\"elder-flex-control\" [matTooltip]=\"state()?.error\">\n  <mat-chip-set\n    #chips\n    [class.mat-mdc-chip-set-stacked]=\"stacked\"\n    cdkDropList\n    [cdkDropListOrientation]=\"stacked ? 'vertical' : 'horizontal'\"\n    (cdkDropListDropped)=\"drop($event)\"\n    [cdkDropListDisabled]=\"!allowSorting\"\n  >\n    @if (icon) {\n      <div class=\"elder-input-prefix-icon-container flex-none\">\n        <mat-icon\n          disabled\n          class=\"elder-prefix-icon elder-mdc-control-icon elder-icon-small noselect\"\n          [class.loading]=\"state()?.loading\"\n        >\n          {{ icon }}\n        </mat-icon>\n      </div>\n    }\n\n    @for (chipModel of selectChips(); track chipModel.id) {\n      <mat-chip-row\n        elderChipLabel\n        highlighted\n        class=\"noselect clickable-chip\"\n        [value]=\"resolveChipValue(chipModel.value)\"\n        [color]=\"chipModel.colorSpec?.themeColor\"\n        [levelColor]=\"chipModel.colorSpec?.levelColor\"\n        [stateColor]=\"chipModel.colorSpec?.stateColor\"\n        [removable]=\"chipModel.removable\"\n        (keydown)=\"onChipKeyDown($event, chipModel.value)\"\n        (click)=\"onCurrentClicked(chipModel.value)\"\n        cdkDrag\n        [cdkDragData]=\"chipModel.value\"\n        [cdkDragDisabled]=\"!allowSorting\"\n      >\n        @if (templates()?.avatar && !chipModel.avatarSpec?.hide) {\n          <mat-chip-avatar [class.chip-avatar-xl]=\"chipModel.avatarSpec?.large\">\n            <ng-container *ngTemplateOutlet=\"templates().avatar; context: { $implicit: chipModel }\">\n            </ng-container>\n          </mat-chip-avatar>\n        }\n\n        <ng-container\n          *ngTemplateOutlet=\"\n            templates()?.chip || simpleChipTemplate;\n            context: { $implicit: chipModel }\n          \"\n        >\n        </ng-container>\n\n        @if (chipModel.trailingSpec?.icon; as trailingIcon) {\n          <mat-icon\n            matChipTrailingIcon\n            class=\"elder-trailing-icon\"\n            [fontSet]=\"chipModel.trailingSpec?.iconFontSet\"\n            >{{ trailingIcon }}</mat-icon\n          >\n        }\n\n        @if (chipModel.removable) {\n          <mat-icon matChipRemove (click)=\"onClickRemoveChip($event, chipModel.value)\">\n            cancel\n          </mat-icon>\n        }\n      </mat-chip-row>\n    }\n\n    <div class=\"layout-row place-start-center elder-chip-input\">\n      <!-- [matChipInputFor]=\"chips\" -->\n      <ng-container *ngTemplateOutlet=\"templates()?.input || selectInput\"> </ng-container>\n\n      @if (selectionPopup) {\n        <button\n          mat-icon-button\n          type=\"button\"\n          class=\"elder-control-icon-button elder-browse-icon\"\n          [disabled]=\"isLocked\"\n          (click)=\"openSelectionPopup($event)\"\n          aria-label=\"Search\"\n          elderStopEventPropagation\n          tabIndex=\"-1\"\n        >\n          <mat-icon class=\"elder-mdc-control-icon\">search</mat-icon>\n        </button>\n      }\n    </div>\n  </mat-chip-set>\n</div>\n\n<ng-template #selectInput>\n  <!-- mat-mdc-chip-input -->\n  <elder-select\n    autocomplete\n    elderClearSelect\n    class=\"elder-chip-input-select flex\"\n    [data]=\"dataContextS()\"\n    [disabled]=\"!!disabled\"\n    [required]=\"!!required\"\n    [readonly]=\"!!readonly\"\n    [placeholder]=\"placeholderS()\"\n    (entityUpdated)=\"appendEntity($event)\"\n    [displayPropertyResolver]=\"displayPropertyResolverS()\"\n    [valueTemplate]=\"valueTemplate\"\n    [queryFilter]=\"queryFilter\"\n    [filters]=\"filters\"\n    [sorts]=\"sorts\"\n    [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n    [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n  ></elder-select>\n</ng-template>\n\n<ng-template #simpleChipTemplate let-chipModel>\n  <span class=\"elder-chip-text\">{{ chipModel.displayText | elderTruncate: 20 }}</span>\n</ng-template>\n" }]
         }], ctorParameters: () => [], propDecorators: { defaultChipSpec: [{
                 type: Input
             }], chipSpecFn: [{
@@ -24915,7 +24915,7 @@ class ElderMultiSelectChipOptionsComponent extends ElderMultiSelectBase {
                 provide: ELDER_SELECT_BASE,
                 useExisting: forwardRef(() => ElderMultiSelectChipOptionsComponent),
             },
-        ], queries: [{ propertyName: "chipTemplateQuery", first: true, predicate: ElderSelectChipDirective, descendants: true, read: TemplateRef }, { propertyName: "chipAvatarTemplateQuery", first: true, predicate: ElderSelectChipAvatarDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "_listBox", first: true, predicate: MatChipListbox, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"elder-flex-control\" [matTooltip]=\"state()?.error\">\n  <mat-chip-listbox #chips [class.mat-mdc-chip-set-stacked]=\"stacked\" [multiple]=\"multiple\">\n    @if (state(); as state) {\n      @if (icon) {\n        <div class=\"elder-input-prefix-icon-container flex-none\">\n          <mat-icon\n            disabled\n            class=\"elder-prefix-icon elder-mdc-control-icon elder-icon-small noselect\"\n            [class.loading]=\"state.loading\"\n          >\n            {{ icon }}\n          </mat-icon>\n        </div>\n      }\n    }\n\n    <ng-content></ng-content>\n\n    @for (chipModel of selectChips(); track chipModel.id) {\n      <mat-chip-option\n        class=\"noselect\"\n        [value]=\"resolveChipValue(chipModel.value)\"\n        elderChipLabel\n        [levelColor]=\"chipModel.colorSpec?.levelColor\"\n        [stateColor]=\"chipModel.colorSpec?.stateColor\"\n        [color]=\"chipModel.colorSpec?.themeColor\"\n        [selectable]=\"!chipModel.locked\"\n        [disabled]=\"chipModel.locked\"\n        [selected]=\"chipModel.selected\"\n        (selectionChange)=\"selectionChanged($event, chipModel.value)\"\n      >\n        @if (templates()?.avatar && !chipModel.avatarSpec?.hide) {\n          <mat-chip-avatar [class.chip-avatar-xl]=\"chipModel.avatarSpec?.large\">\n            <ng-container *ngTemplateOutlet=\"templates().avatar; context: { $implicit: chipModel }\">\n            </ng-container>\n          </mat-chip-avatar>\n        }\n\n        <ng-container\n          *ngTemplateOutlet=\"\n            templates()?.chip || simpleChipTemplate;\n            context: { $implicit: chipModel }\n          \"\n        >\n        </ng-container>\n\n        @if (chipModel.trailingSpec?.icon) {\n          <mat-icon\n            matChipTrailingIcon\n            class=\"elder-trailing-icon\"\n            [fontSet]=\"chipModel.trailingSpec?.iconFontSet\"\n            >{{ chipModel.trailingSpec?.icon }}\n          </mat-icon>\n        }\n      </mat-chip-option>\n    }\n\n    <div class=\"layout-row place-start-center elder-chip-input\">\n      @if (selectionPopup) {\n        <button\n          mat-icon-button\n          type=\"button\"\n          class=\"elder-control-icon-button elder-browse-icon\"\n          [disabled]=\"isLocked\"\n          (click)=\"openSelectionPopup($event)\"\n          aria-label=\"Search\"\n          elderStopEventPropagation\n          tabIndex=\"-1\"\n        >\n          <mat-icon class=\"elder-mdc-control-icon\">search</mat-icon>\n        </button>\n      }\n    </div>\n  </mat-chip-listbox>\n</div>\n\n<ng-template #simpleChipTemplate let-chipModel>\n  <span class=\"elder-chip-text\">{{ chipModel.displayText | elderTruncate: 20 }}</span>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: ElderChipLabelDirective, selector: "[elderChipLabel]", inputs: ["appearance", "color", "stateColor", "levelColor"] }, { kind: "directive", type: MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatChipTrailingIcon, selector: "mat-chip-trailing-icon, [matChipTrailingIcon]" }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "pipe", type: ElderTruncatePipe, name: "elderTruncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "chipTemplateQuery", first: true, predicate: ElderSelectChipDirective, descendants: true, read: TemplateRef }, { propertyName: "chipAvatarTemplateQuery", first: true, predicate: ElderSelectChipAvatarDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "_listBox", first: true, predicate: MatChipListbox, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"elder-flex-control\" [matTooltip]=\"state()?.error\">\n  <mat-chip-listbox #chips [class.mat-mdc-chip-set-stacked]=\"stacked\" [multiple]=\"multiple\">\n    @if (state(); as state) {\n      @if (icon) {\n        <div class=\"elder-input-prefix-icon-container flex-none\">\n          <mat-icon\n            disabled\n            class=\"elder-prefix-icon elder-mdc-control-icon elder-icon-small noselect\"\n            [class.loading]=\"state.loading\"\n          >\n            {{ icon }}\n          </mat-icon>\n        </div>\n      }\n    }\n\n    <ng-content></ng-content>\n\n    @for (chipModel of selectChips(); track chipModel.id) {\n      <mat-chip-option\n        class=\"noselect\"\n        [value]=\"resolveChipValue(chipModel.value)\"\n        elderChipLabel\n        highlighted\n        [levelColor]=\"chipModel.colorSpec?.levelColor\"\n        [stateColor]=\"chipModel.colorSpec?.stateColor\"\n        [color]=\"chipModel.colorSpec?.themeColor\"\n        [selectable]=\"!chipModel.locked\"\n        [disabled]=\"chipModel.locked\"\n        [selected]=\"chipModel.selected\"\n        (selectionChange)=\"selectionChanged($event, chipModel.value)\"\n      >\n        @if (templates()?.avatar && !chipModel.avatarSpec?.hide) {\n          <mat-chip-avatar [class.chip-avatar-xl]=\"chipModel.avatarSpec?.large\">\n            <ng-container *ngTemplateOutlet=\"templates().avatar; context: { $implicit: chipModel }\">\n            </ng-container>\n          </mat-chip-avatar>\n        }\n\n        <ng-container\n          *ngTemplateOutlet=\"\n            templates()?.chip || simpleChipTemplate;\n            context: { $implicit: chipModel }\n          \"\n        >\n        </ng-container>\n\n        @if (chipModel.trailingSpec?.icon) {\n          <mat-icon\n            matChipTrailingIcon\n            class=\"elder-trailing-icon\"\n            [fontSet]=\"chipModel.trailingSpec?.iconFontSet\"\n            >{{ chipModel.trailingSpec?.icon }}\n          </mat-icon>\n        }\n      </mat-chip-option>\n    }\n\n    <div class=\"layout-row place-start-center elder-chip-input\">\n      @if (selectionPopup) {\n        <button\n          mat-icon-button\n          type=\"button\"\n          class=\"elder-control-icon-button elder-browse-icon\"\n          [disabled]=\"isLocked\"\n          (click)=\"openSelectionPopup($event)\"\n          aria-label=\"Search\"\n          elderStopEventPropagation\n          tabIndex=\"-1\"\n        >\n          <mat-icon class=\"elder-mdc-control-icon\">search</mat-icon>\n        </button>\n      }\n    </div>\n  </mat-chip-listbox>\n</div>\n\n<ng-template #simpleChipTemplate let-chipModel>\n  <span class=\"elder-chip-text\">{{ chipModel.displayText | elderTruncate: 20 }}</span>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: ElderChipLabelDirective, selector: "[elderChipLabel]", inputs: ["appearance", "color", "stateColor", "levelColor"] }, { kind: "directive", type: MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatChipTrailingIcon, selector: "mat-chip-trailing-icon, [matChipTrailingIcon]" }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "pipe", type: ElderTruncatePipe, name: "elderTruncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ElderMultiSelectChipOptionsComponent, decorators: [{
             type: Component,
@@ -24937,7 +24937,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
                         MatIconButton,
                         ElderStopEventPropagationDirective,
                         ElderTruncatePipe,
-                    ], template: "<div class=\"elder-flex-control\" [matTooltip]=\"state()?.error\">\n  <mat-chip-listbox #chips [class.mat-mdc-chip-set-stacked]=\"stacked\" [multiple]=\"multiple\">\n    @if (state(); as state) {\n      @if (icon) {\n        <div class=\"elder-input-prefix-icon-container flex-none\">\n          <mat-icon\n            disabled\n            class=\"elder-prefix-icon elder-mdc-control-icon elder-icon-small noselect\"\n            [class.loading]=\"state.loading\"\n          >\n            {{ icon }}\n          </mat-icon>\n        </div>\n      }\n    }\n\n    <ng-content></ng-content>\n\n    @for (chipModel of selectChips(); track chipModel.id) {\n      <mat-chip-option\n        class=\"noselect\"\n        [value]=\"resolveChipValue(chipModel.value)\"\n        elderChipLabel\n        [levelColor]=\"chipModel.colorSpec?.levelColor\"\n        [stateColor]=\"chipModel.colorSpec?.stateColor\"\n        [color]=\"chipModel.colorSpec?.themeColor\"\n        [selectable]=\"!chipModel.locked\"\n        [disabled]=\"chipModel.locked\"\n        [selected]=\"chipModel.selected\"\n        (selectionChange)=\"selectionChanged($event, chipModel.value)\"\n      >\n        @if (templates()?.avatar && !chipModel.avatarSpec?.hide) {\n          <mat-chip-avatar [class.chip-avatar-xl]=\"chipModel.avatarSpec?.large\">\n            <ng-container *ngTemplateOutlet=\"templates().avatar; context: { $implicit: chipModel }\">\n            </ng-container>\n          </mat-chip-avatar>\n        }\n\n        <ng-container\n          *ngTemplateOutlet=\"\n            templates()?.chip || simpleChipTemplate;\n            context: { $implicit: chipModel }\n          \"\n        >\n        </ng-container>\n\n        @if (chipModel.trailingSpec?.icon) {\n          <mat-icon\n            matChipTrailingIcon\n            class=\"elder-trailing-icon\"\n            [fontSet]=\"chipModel.trailingSpec?.iconFontSet\"\n            >{{ chipModel.trailingSpec?.icon }}\n          </mat-icon>\n        }\n      </mat-chip-option>\n    }\n\n    <div class=\"layout-row place-start-center elder-chip-input\">\n      @if (selectionPopup) {\n        <button\n          mat-icon-button\n          type=\"button\"\n          class=\"elder-control-icon-button elder-browse-icon\"\n          [disabled]=\"isLocked\"\n          (click)=\"openSelectionPopup($event)\"\n          aria-label=\"Search\"\n          elderStopEventPropagation\n          tabIndex=\"-1\"\n        >\n          <mat-icon class=\"elder-mdc-control-icon\">search</mat-icon>\n        </button>\n      }\n    </div>\n  </mat-chip-listbox>\n</div>\n\n<ng-template #simpleChipTemplate let-chipModel>\n  <span class=\"elder-chip-text\">{{ chipModel.displayText | elderTruncate: 20 }}</span>\n</ng-template>\n" }]
+                    ], template: "<div class=\"elder-flex-control\" [matTooltip]=\"state()?.error\">\n  <mat-chip-listbox #chips [class.mat-mdc-chip-set-stacked]=\"stacked\" [multiple]=\"multiple\">\n    @if (state(); as state) {\n      @if (icon) {\n        <div class=\"elder-input-prefix-icon-container flex-none\">\n          <mat-icon\n            disabled\n            class=\"elder-prefix-icon elder-mdc-control-icon elder-icon-small noselect\"\n            [class.loading]=\"state.loading\"\n          >\n            {{ icon }}\n          </mat-icon>\n        </div>\n      }\n    }\n\n    <ng-content></ng-content>\n\n    @for (chipModel of selectChips(); track chipModel.id) {\n      <mat-chip-option\n        class=\"noselect\"\n        [value]=\"resolveChipValue(chipModel.value)\"\n        elderChipLabel\n        highlighted\n        [levelColor]=\"chipModel.colorSpec?.levelColor\"\n        [stateColor]=\"chipModel.colorSpec?.stateColor\"\n        [color]=\"chipModel.colorSpec?.themeColor\"\n        [selectable]=\"!chipModel.locked\"\n        [disabled]=\"chipModel.locked\"\n        [selected]=\"chipModel.selected\"\n        (selectionChange)=\"selectionChanged($event, chipModel.value)\"\n      >\n        @if (templates()?.avatar && !chipModel.avatarSpec?.hide) {\n          <mat-chip-avatar [class.chip-avatar-xl]=\"chipModel.avatarSpec?.large\">\n            <ng-container *ngTemplateOutlet=\"templates().avatar; context: { $implicit: chipModel }\">\n            </ng-container>\n          </mat-chip-avatar>\n        }\n\n        <ng-container\n          *ngTemplateOutlet=\"\n            templates()?.chip || simpleChipTemplate;\n            context: { $implicit: chipModel }\n          \"\n        >\n        </ng-container>\n\n        @if (chipModel.trailingSpec?.icon) {\n          <mat-icon\n            matChipTrailingIcon\n            class=\"elder-trailing-icon\"\n            [fontSet]=\"chipModel.trailingSpec?.iconFontSet\"\n            >{{ chipModel.trailingSpec?.icon }}\n          </mat-icon>\n        }\n      </mat-chip-option>\n    }\n\n    <div class=\"layout-row place-start-center elder-chip-input\">\n      @if (selectionPopup) {\n        <button\n          mat-icon-button\n          type=\"button\"\n          class=\"elder-control-icon-button elder-browse-icon\"\n          [disabled]=\"isLocked\"\n          (click)=\"openSelectionPopup($event)\"\n          aria-label=\"Search\"\n          elderStopEventPropagation\n          tabIndex=\"-1\"\n        >\n          <mat-icon class=\"elder-mdc-control-icon\">search</mat-icon>\n        </button>\n      }\n    </div>\n  </mat-chip-listbox>\n</div>\n\n<ng-template #simpleChipTemplate let-chipModel>\n  <span class=\"elder-chip-text\">{{ chipModel.displayText | elderTruncate: 20 }}</span>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i0.DestroyRef }], propDecorators: { defaultChipSpec: [{
                 type: Input
             }], stacked: [{
@@ -30941,7 +30941,7 @@ class ElderLocalizedInputTableComponent extends FormFieldBaseComponent {
         return localizables;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ElderLocalizedInputTableComponent, deps: [{ token: ElderToastService }, { token: ElderLanguageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: ElderLocalizedInputTableComponent, isStandalone: true, selector: "elder-localized-input-table", inputs: { dense: "dense", float: "float", embedded: "embedded", textColumns: "textColumns", defaultLanguageTags: "defaultLanguageTags" }, providers: buildFormIntegrationProviders(ElderLocalizedInputTableComponent), queries: [{ propertyName: "textColumnsQuery", predicate: ElderLocalizedTextColumnDirective }], usesInheritance: true, ngImport: i0, template: "<div class=\"layout-col full\">\n  <elder-table\n    matSort\n    class=\"flex\"\n    [data]=\"data\"\n    [selectionVisible]=\"true\"\n    [selectionMultiEnabled]=\"true\"\n    [dense]=\"dense\"\n    [float]=\"float\"\n    [embedded]=\"embedded\"\n  >\n    <elder-data-toolbar\n      *elderTableToolbar\n      [canAdd]=\"!isLocked\"\n      [canRemove]=\"!isLocked\"\n      [canMore]=\"false\"\n      (requestNew)=\"onNewRequested()\"\n      (requestRemove)=\"onRemoveRequested($event)\"\n    >\n      <ng-template elderToolbarContent=\"left.actions\">\n        <div class=\"layout-col place-start-center\">\n          <h4 elderCardSubtitle style=\"margin: 0\">{{ label ?? placeholder }}</h4>\n        </div>\n      </ng-template>\n    </elder-data-toolbar>\n\n    <ng-container matColumnDef=\"locale\">\n      <th mat-header-cell *matHeaderCellDef style=\"width: 100px\" mat-sort-header>Locale</th>\n      <td mat-cell *matCellDef=\"let localized\">\n        <mat-chip-set\n          ><mat-chip>{{ localized.locale }}</mat-chip></mat-chip-set\n        >\n      </td>\n    </ng-container>\n\n    <ng-container\n      *ngFor=\"let textColumn of textColumns$ | async\"\n      matColumnDef=\"{{ textColumn.name }}\"\n    >\n      <th mat-header-cell *matHeaderCellDef>{{ textColumn.title | translate }}</th>\n      <td mat-cell *matCellDef=\"let localized\">\n        <div class=\"layout-row place-center-center\">\n          <mat-form-field class=\"full-width\" appearance=\"fill\" elderDense>\n            <!--\n            <mat-label>{{textColumn.title | translate}} ({{localized.locale}})</mat-label>\n            -->\n            <!--\n            <span matTextPrefix>{{textColumn.title | translate}}</span>\n            -->\n            <input\n              matInput\n              type=\"text\"\n              name=\"i18n-{{ localized.locale }}-{{ textColumn.name }}\"\n              [ngModel]=\"localized[textColumn.name]\"\n              [ngModelOptions]=\"{ updateOn: 'blur' }\"\n              (ngModelChange)=\"onColumnTextUpdated(localized, textColumn, $event)\"\n              [required]=\"required && textColumn.required\"\n              [readonly]=\"readonly\"\n              [disabled]=\"disabled\"\n            />\n          </mat-form-field>\n        </div>\n      </td>\n    </ng-container>\n  </elder-table>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: ElderTableComponent, selector: "elder-table", inputs: ["idField", "removingField", "hiddenField", "pageSizeOptions", "keepSelection", "showFooter", "toolbarTemplate", "data", "displayedColumns", "selectionVisible"] }, { kind: "directive", type: MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "directive", type: ElderTableToolbarDirective, selector: "[elderTableToolbar]" }, { kind: "component", type: ElderDataToolbarComponent, selector: "elder-data-toolbar", inputs: ["canAdd", "canRemove", "canMore", "confirmRemoval", "keepSelectionAfterRemoval", "selectionModel"], outputs: ["requestNew", "requestRemove"] }, { kind: "directive", type: ElderToolbarContentDirective, selector: "[elderToolbarContent]", inputs: ["elderToolbarContent"] }, { kind: "directive", type: ElderCardSubtitleDirective, selector: "elder-card-subtitle, [elder-card-subtitle], [elderCardSubtitle]" }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "component", type: MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: ElderFormFieldDenseDirective, selector: "mat-form-field[elderDense]", inputs: ["elderDense", "subscriptSizing", "floatLabel"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: ElderLocalizedInputTableComponent, isStandalone: true, selector: "elder-localized-input-table", inputs: { dense: "dense", float: "float", embedded: "embedded", textColumns: "textColumns", defaultLanguageTags: "defaultLanguageTags" }, providers: buildFormIntegrationProviders(ElderLocalizedInputTableComponent), queries: [{ propertyName: "textColumnsQuery", predicate: ElderLocalizedTextColumnDirective }], usesInheritance: true, ngImport: i0, template: "<div class=\"layout-col full\">\n  <elder-table\n    matSort\n    class=\"flex\"\n    [data]=\"data\"\n    [selectionVisible]=\"true\"\n    [selectionMultiEnabled]=\"true\"\n    [dense]=\"dense\"\n    [float]=\"float\"\n    [embedded]=\"embedded\"\n  >\n    <elder-data-toolbar\n      *elderTableToolbar\n      [canAdd]=\"!isLocked\"\n      [canRemove]=\"!isLocked\"\n      [canMore]=\"false\"\n      (requestNew)=\"onNewRequested()\"\n      (requestRemove)=\"onRemoveRequested($event)\"\n    >\n      <ng-template elderToolbarContent=\"left.actions\">\n        <div class=\"layout-col place-start-center\">\n          <h4 elderCardSubtitle style=\"margin: 0\">{{ label ?? placeholder }}</h4>\n        </div>\n      </ng-template>\n    </elder-data-toolbar>\n\n    <ng-container matColumnDef=\"locale\">\n      <th mat-header-cell *matHeaderCellDef style=\"width: 100px\" mat-sort-header>Locale</th>\n      <td mat-cell *matCellDef=\"let localized\">\n        <mat-chip-set\n          ><mat-chip highlighted>{{ localized.locale }}</mat-chip></mat-chip-set\n        >\n      </td>\n    </ng-container>\n\n    <ng-container\n      *ngFor=\"let textColumn of textColumns$ | async\"\n      matColumnDef=\"{{ textColumn.name }}\"\n    >\n      <th mat-header-cell *matHeaderCellDef>{{ textColumn.title | translate }}</th>\n      <td mat-cell *matCellDef=\"let localized\">\n        <div class=\"layout-row place-center-center\">\n          <mat-form-field class=\"full-width\" appearance=\"fill\" elderDense>\n            <!--\n            <mat-label>{{textColumn.title | translate}} ({{localized.locale}})</mat-label>\n            -->\n            <!--\n            <span matTextPrefix>{{textColumn.title | translate}}</span>\n            -->\n            <input\n              matInput\n              type=\"text\"\n              name=\"i18n-{{ localized.locale }}-{{ textColumn.name }}\"\n              [ngModel]=\"localized[textColumn.name]\"\n              [ngModelOptions]=\"{ updateOn: 'blur' }\"\n              (ngModelChange)=\"onColumnTextUpdated(localized, textColumn, $event)\"\n              [required]=\"required && textColumn.required\"\n              [readonly]=\"readonly\"\n              [disabled]=\"disabled\"\n            />\n          </mat-form-field>\n        </div>\n      </td>\n    </ng-container>\n  </elder-table>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: ElderTableComponent, selector: "elder-table", inputs: ["idField", "removingField", "hiddenField", "pageSizeOptions", "keepSelection", "showFooter", "toolbarTemplate", "data", "displayedColumns", "selectionVisible"] }, { kind: "directive", type: MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "directive", type: ElderTableToolbarDirective, selector: "[elderTableToolbar]" }, { kind: "component", type: ElderDataToolbarComponent, selector: "elder-data-toolbar", inputs: ["canAdd", "canRemove", "canMore", "confirmRemoval", "keepSelectionAfterRemoval", "selectionModel"], outputs: ["requestNew", "requestRemove"] }, { kind: "directive", type: ElderToolbarContentDirective, selector: "[elderToolbarContent]", inputs: ["elderToolbarContent"] }, { kind: "directive", type: ElderCardSubtitleDirective, selector: "elder-card-subtitle, [elder-card-subtitle], [elderCardSubtitle]" }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "component", type: MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: ElderFormFieldDenseDirective, selector: "mat-form-field[elderDense]", inputs: ["elderDense", "subscriptSizing", "floatLabel"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ElderLocalizedInputTableComponent, decorators: [{
             type: Component,
@@ -30967,7 +30967,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
                         FormsModule,
                         AsyncPipe,
                         TranslateModule,
-                    ], template: "<div class=\"layout-col full\">\n  <elder-table\n    matSort\n    class=\"flex\"\n    [data]=\"data\"\n    [selectionVisible]=\"true\"\n    [selectionMultiEnabled]=\"true\"\n    [dense]=\"dense\"\n    [float]=\"float\"\n    [embedded]=\"embedded\"\n  >\n    <elder-data-toolbar\n      *elderTableToolbar\n      [canAdd]=\"!isLocked\"\n      [canRemove]=\"!isLocked\"\n      [canMore]=\"false\"\n      (requestNew)=\"onNewRequested()\"\n      (requestRemove)=\"onRemoveRequested($event)\"\n    >\n      <ng-template elderToolbarContent=\"left.actions\">\n        <div class=\"layout-col place-start-center\">\n          <h4 elderCardSubtitle style=\"margin: 0\">{{ label ?? placeholder }}</h4>\n        </div>\n      </ng-template>\n    </elder-data-toolbar>\n\n    <ng-container matColumnDef=\"locale\">\n      <th mat-header-cell *matHeaderCellDef style=\"width: 100px\" mat-sort-header>Locale</th>\n      <td mat-cell *matCellDef=\"let localized\">\n        <mat-chip-set\n          ><mat-chip>{{ localized.locale }}</mat-chip></mat-chip-set\n        >\n      </td>\n    </ng-container>\n\n    <ng-container\n      *ngFor=\"let textColumn of textColumns$ | async\"\n      matColumnDef=\"{{ textColumn.name }}\"\n    >\n      <th mat-header-cell *matHeaderCellDef>{{ textColumn.title | translate }}</th>\n      <td mat-cell *matCellDef=\"let localized\">\n        <div class=\"layout-row place-center-center\">\n          <mat-form-field class=\"full-width\" appearance=\"fill\" elderDense>\n            <!--\n            <mat-label>{{textColumn.title | translate}} ({{localized.locale}})</mat-label>\n            -->\n            <!--\n            <span matTextPrefix>{{textColumn.title | translate}}</span>\n            -->\n            <input\n              matInput\n              type=\"text\"\n              name=\"i18n-{{ localized.locale }}-{{ textColumn.name }}\"\n              [ngModel]=\"localized[textColumn.name]\"\n              [ngModelOptions]=\"{ updateOn: 'blur' }\"\n              (ngModelChange)=\"onColumnTextUpdated(localized, textColumn, $event)\"\n              [required]=\"required && textColumn.required\"\n              [readonly]=\"readonly\"\n              [disabled]=\"disabled\"\n            />\n          </mat-form-field>\n        </div>\n      </td>\n    </ng-container>\n  </elder-table>\n</div>\n" }]
+                    ], template: "<div class=\"layout-col full\">\n  <elder-table\n    matSort\n    class=\"flex\"\n    [data]=\"data\"\n    [selectionVisible]=\"true\"\n    [selectionMultiEnabled]=\"true\"\n    [dense]=\"dense\"\n    [float]=\"float\"\n    [embedded]=\"embedded\"\n  >\n    <elder-data-toolbar\n      *elderTableToolbar\n      [canAdd]=\"!isLocked\"\n      [canRemove]=\"!isLocked\"\n      [canMore]=\"false\"\n      (requestNew)=\"onNewRequested()\"\n      (requestRemove)=\"onRemoveRequested($event)\"\n    >\n      <ng-template elderToolbarContent=\"left.actions\">\n        <div class=\"layout-col place-start-center\">\n          <h4 elderCardSubtitle style=\"margin: 0\">{{ label ?? placeholder }}</h4>\n        </div>\n      </ng-template>\n    </elder-data-toolbar>\n\n    <ng-container matColumnDef=\"locale\">\n      <th mat-header-cell *matHeaderCellDef style=\"width: 100px\" mat-sort-header>Locale</th>\n      <td mat-cell *matCellDef=\"let localized\">\n        <mat-chip-set\n          ><mat-chip highlighted>{{ localized.locale }}</mat-chip></mat-chip-set\n        >\n      </td>\n    </ng-container>\n\n    <ng-container\n      *ngFor=\"let textColumn of textColumns$ | async\"\n      matColumnDef=\"{{ textColumn.name }}\"\n    >\n      <th mat-header-cell *matHeaderCellDef>{{ textColumn.title | translate }}</th>\n      <td mat-cell *matCellDef=\"let localized\">\n        <div class=\"layout-row place-center-center\">\n          <mat-form-field class=\"full-width\" appearance=\"fill\" elderDense>\n            <!--\n            <mat-label>{{textColumn.title | translate}} ({{localized.locale}})</mat-label>\n            -->\n            <!--\n            <span matTextPrefix>{{textColumn.title | translate}}</span>\n            -->\n            <input\n              matInput\n              type=\"text\"\n              name=\"i18n-{{ localized.locale }}-{{ textColumn.name }}\"\n              [ngModel]=\"localized[textColumn.name]\"\n              [ngModelOptions]=\"{ updateOn: 'blur' }\"\n              (ngModelChange)=\"onColumnTextUpdated(localized, textColumn, $event)\"\n              [required]=\"required && textColumn.required\"\n              [readonly]=\"readonly\"\n              [disabled]=\"disabled\"\n            />\n          </mat-form-field>\n        </div>\n      </td>\n    </ng-container>\n  </elder-table>\n</div>\n" }]
         }], ctorParameters: () => [{ type: ElderToastService }, { type: ElderLanguageService }], propDecorators: { textColumnsQuery: [{
                 type: ContentChildren,
                 args: [ElderLocalizedTextColumnDirective]
@@ -32469,7 +32469,7 @@ class ElderChipListSelectComponent {
                 provide: ELDER_DATA_VIEW,
                 useExisting: forwardRef(() => ElderChipListSelectComponent),
             },
-        ], ngImport: i0, template: "<div class=\"layout-col full\">\n  <mat-chip-listbox\n    [multiple]=\"selectionModel.isMultipleSelection\"\n    [ngClass]=\"{ 'mat-mdc-chip-set-stacked': stacked }\"\n  >\n    <mat-chip-option\n      *ngFor=\"let chip of data$ | async\"\n      selectable\n      [selected]=\"isSelected(chip)\"\n      (click)=\"onItemClick(chip)\"\n      [color]=\"color\"\n    >\n      {{ getDisplayText(chip) }}\n    </mat-chip-option>\n  </mat-chip-listbox>\n</div>\n", styles: [".select-item{padding-left:16px;padding-right:16px;min-height:56px;border-radius:0;font-size:16px;font-weight:400}elder-select-list-item a.select-item-inactive mat-icon{color:#757575}.nested-items-container{overflow:hidden;padding-left:20px}\n"], dependencies: [{ kind: "component", type: MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "<div class=\"layout-col full\">\n  <mat-chip-listbox\n    [multiple]=\"selectionModel.isMultipleSelection\"\n    [ngClass]=\"{ 'mat-mdc-chip-set-stacked': stacked }\"\n  >\n    <mat-chip-option\n      *ngFor=\"let chip of data$ | async\"\n      selectable\n      highlighted\n      [selected]=\"isSelected(chip)\"\n      (click)=\"onItemClick(chip)\"\n      [color]=\"color\"\n    >\n      {{ getDisplayText(chip) }}\n    </mat-chip-option>\n  </mat-chip-listbox>\n</div>\n", styles: [".select-item{padding-left:16px;padding-right:16px;min-height:56px;border-radius:0;font-size:16px;font-weight:400}elder-select-list-item a.select-item-inactive mat-icon{color:#757575}.nested-items-container{overflow:hidden;padding-left:20px}\n"], dependencies: [{ kind: "component", type: MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ElderChipListSelectComponent, decorators: [{
             type: Component,
@@ -32478,7 +32478,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
                             provide: ELDER_DATA_VIEW,
                             useExisting: forwardRef(() => ElderChipListSelectComponent),
                         },
-                    ], imports: [MatChipListbox, NgClass, NgFor, MatChipOption, AsyncPipe], template: "<div class=\"layout-col full\">\n  <mat-chip-listbox\n    [multiple]=\"selectionModel.isMultipleSelection\"\n    [ngClass]=\"{ 'mat-mdc-chip-set-stacked': stacked }\"\n  >\n    <mat-chip-option\n      *ngFor=\"let chip of data$ | async\"\n      selectable\n      [selected]=\"isSelected(chip)\"\n      (click)=\"onItemClick(chip)\"\n      [color]=\"color\"\n    >\n      {{ getDisplayText(chip) }}\n    </mat-chip-option>\n  </mat-chip-listbox>\n</div>\n", styles: [".select-item{padding-left:16px;padding-right:16px;min-height:56px;border-radius:0;font-size:16px;font-weight:400}elder-select-list-item a.select-item-inactive mat-icon{color:#757575}.nested-items-container{overflow:hidden;padding-left:20px}\n"] }]
+                    ], imports: [MatChipListbox, NgClass, NgFor, MatChipOption, AsyncPipe], template: "<div class=\"layout-col full\">\n  <mat-chip-listbox\n    [multiple]=\"selectionModel.isMultipleSelection\"\n    [ngClass]=\"{ 'mat-mdc-chip-set-stacked': stacked }\"\n  >\n    <mat-chip-option\n      *ngFor=\"let chip of data$ | async\"\n      selectable\n      highlighted\n      [selected]=\"isSelected(chip)\"\n      (click)=\"onItemClick(chip)\"\n      [color]=\"color\"\n    >\n      {{ getDisplayText(chip) }}\n    </mat-chip-option>\n  </mat-chip-listbox>\n</div>\n", styles: [".select-item{padding-left:16px;padding-right:16px;min-height:56px;border-radius:0;font-size:16px;font-weight:400}elder-select-list-item a.select-item-inactive mat-icon{color:#757575}.nested-items-container{overflow:hidden;padding-left:20px}\n"] }]
         }], ctorParameters: () => [{ type: SelectionModel, decorators: [{
                     type: Optional
                 }] }], propDecorators: { data$: [{