@elderbyte/ngx-starter 13.7.7 → 13.8.1

package/fesm2020/elderbyte-ngx-starter.mjs

@@ -4406,6 +4406,57 @@ class DelegateContinuableDataSource extends DelegateDataSource {
     }
 }
 
+class FilterUtil {
+    static filterData(data, filters) {
+        FilterUtil.logger.debug('Filtering data with ' + data.length + ' items.', filters);
+        if (filters && filters.length > 0) {
+            for (const filter of filters) {
+                data = data.filter(e => FilterUtil.matches(e, filter));
+            }
+        }
+        return data;
+    }
+    static matches(entity, filter) {
+        if (filter.value === null || filter.value === undefined) {
+            return true;
+        }
+        let value;
+        if (entity === null || entity === undefined) {
+            value = null;
+        }
+        else if (typeof entity === 'object') {
+            value = entity[filter.key];
+        }
+        else {
+            value = String(entity); // Support filtering primitive values
+        }
+        if (Array.isArray(filter.value)) {
+            for (const val of filter.value) {
+                if (FilterUtil.matchesValue(value, val)) {
+                    return true;
+                }
+            }
+            return false;
+        }
+        else {
+            return FilterUtil.matchesValue(value, filter.value);
+        }
+    }
+    static matchesValue(haystack, needle) {
+        if (haystack === needle) {
+            return true;
+        }
+        if (haystack === null || haystack === undefined) {
+            return false;
+        }
+        const str = String(haystack);
+        const match = str.toLowerCase().startsWith(needle.toLowerCase());
+        // FilterUtil.logger.debug('Haystack: ' + str + ' starts with needle: ' + needle + ' --> ' + match);
+        return match;
+    }
+}
+FilterUtil.logger = LoggerFactory.getLogger(FilterUtil.constructor.name);
+
 /**
  * Provides the ability to build a IDataContext<T>.
  */
@@ -4531,12 +4582,12 @@ class DataContextBuilder {
      *                                                                         *
      **************************************************************************/
     buildLocal(items, idProperty) {
-        return this.build(LocalListDataSource.from(items, idProperty));
+        return this.build(LocalListDataSource.from(items, idProperty, this._localSort, FilterUtil.filterData));
     }
     buildLocalActivePaged(data, idProperty) {
         this._skipLocalSort = true;
         this.activePaged();
-        return this.build(LocalPagedDataSource.from(data, idProperty, this._localSort));
+        return this.build(LocalPagedDataSource.from(data, idProperty, this._localSort, FilterUtil.filterData));
     }
     /***************************************************************************
      *                                                                         *
@@ -6096,48 +6147,6 @@ class PropertyPathUtil {
     }
 }
 
-class FilterUtil {
-    static filterData(data, filters) {
-        FilterUtil.logger.debug('Filtering data with ' + data.length + ' items.', filters);
-        if (filters && filters.length > 0) {
-            for (const filter of filters) {
-                data = data.filter(e => FilterUtil.matches(e, filter));
-            }
-        }
-        return data;
-    }
-    static matches(entity, filter) {
-        if (filter.value === null || filter.value === undefined) {
-            return true;
-        }
-        const value = entity[filter.key];
-        if (Array.isArray(filter.value)) {
-            for (const val of filter.value) {
-                if (FilterUtil.matchesValue(value, val)) {
-                    return true;
-                }
-            }
-            return false;
-        }
-        else {
-            return FilterUtil.matchesValue(value, filter.value);
-        }
-    }
-    static matchesValue(haystack, needle) {
-        if (haystack === needle) {
-            return true;
-        }
-        if (haystack === null || haystack === undefined) {
-            return false;
-        }
-        const str = String(haystack);
-        const match = str.toLowerCase().startsWith(needle.toLowerCase());
-        // FilterUtil.logger.debug('Haystack: ' + str + ' starts with needle: ' + needle + ' --> ' + match);
-        return match;
-    }
-}
-FilterUtil.logger = LoggerFactory.getLogger(FilterUtil.constructor.name);
-
 class NextNumberUtil {
     /***************************************************************************
      *                                                                         *
@@ -14631,7 +14640,11 @@ class TemplateSlotManager {
      * Constructors                                                            *
      *                                                                         *
      **************************************************************************/
-    constructor(availableSlots) {
+    /**
+     * Create a new Template Slot Manager.
+     * @param slotDefinitions Slot definitions, supporting synonyms
+     */
+    constructor(slotDefinitions) {
         /***************************************************************************
          *                                                                         *
          * Fields                                                                  *
@@ -14641,10 +14654,15 @@ class TemplateSlotManager {
         /** Default templates (App Level) */
         this._defaultSlotTemplates = new Map();
         /** Custom templates (Component Level) */
-        this._slotTemplates = new Map(); // TODO Still required??
+        this._slotTemplates = new Map();
         this._activeSlotTemplates = new Map();
-        for (const slot of availableSlots) {
-            this._activeSlotTemplates.set(slot, new BehaviorSubject(null));
+        /**
+         * Key: A synonym slot name
+         * Value: The primary slot the synonym is resolving to
+         */
+        this._slotSynonyms = new Map();
+        for (const slotDefinition of slotDefinitions) {
+            this.initSlot(slotDefinition);
         }
     }
     /***************************************************************************
@@ -14657,6 +14675,7 @@ class TemplateSlotManager {
      * over time.
      */
     activeSlotTemplate(slot) {
+        slot = this.resolveSlot(slot);
         const activeColumn = this._activeSlotTemplates.get(slot);
         if (activeColumn) {
             return activeColumn.asObservable();
@@ -14673,7 +14692,7 @@ class TemplateSlotManager {
      * @param isDefault if the given template should be used as global default
      */
     registerSlotTemplate(slot, template, isDefault = false) {
-        // this.logger.trace('Registering toolbar column at slot ' + slot, template);
+        slot = this.resolveSlot(slot);
         if (isDefault) {
             this._defaultSlotTemplates.set(slot, template);
         }
@@ -14690,6 +14709,7 @@ class TemplateSlotManager {
      */
     deregisterSlotTemplate(template, slot) {
         if (slot) {
+            slot = this.resolveSlot(slot);
             if (this._slotTemplates.get(slot) === template) {
                 this.removeSlotTemplate(slot);
             }
@@ -14707,6 +14727,23 @@ class TemplateSlotManager {
      * Private methods                                                         *
      *                                                                         *
      **************************************************************************/
+    initSlot(slotDefinition) {
+        let slot;
+        if (slotDefinition instanceof Array) {
+            slot = slotDefinition.shift();
+            this.registerSlotSynonyms(slot, slotDefinition);
+        }
+        else {
+            slot = slotDefinition;
+        }
+        this._activeSlotTemplates.set(slot, new BehaviorSubject(null));
+    }
+    registerSlotSynonyms(primarySlot, synonyms) {
+        synonyms.forEach(synonym => this._slotSynonyms.set(synonym, primarySlot));
+    }
+    resolveSlot(slot) {
+        return this._slotSynonyms.get(slot) ?? slot;
+    }
     removeSlotTemplate(slot) {
         this.logger.trace('Deregistering template slot at ', slot);
         this._slotTemplates.delete(slot);
@@ -14741,10 +14778,12 @@ class ElderToolbarService {
         this.logger = LoggerFactory.getLogger(this.constructor.name);
         this.slotManager = new TemplateSlotManager([
             'left',
+            'left.begin',
+            ['left.end', 'left.actions'],
             'center',
             'right',
-            'left.actions',
-            'right.actions',
+            ['right.begin', 'right.actions'],
+            'right.end',
         ]);
     }
     /***************************************************************************
@@ -15067,10 +15106,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.4", ngImpor
 
 class ElderToolbarComponent {
     /***************************************************************************
-       *                                                                         *
-       * Constructor                                                             *
-       *                                                                         *
-       **************************************************************************/
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
     constructor(toolbarService) {
         this.toolbarService = toolbarService;
         /***************************************************************************
@@ -15079,24 +15118,28 @@ class ElderToolbarComponent {
          *                                                                         *
          **************************************************************************/
         this.logger = LoggerFactory.getLogger(this.constructor.name);
-        this.leftColumnTemplate$ = toolbarService.activeColumnTemplate('left');
-        this.centerColumnTemplate$ = toolbarService.activeColumnTemplate('center');
-        this.rightColumnTemplate$ = toolbarService.activeColumnTemplate('right');
-        this.leftActionsColumnTemplate$ = toolbarService.activeColumnTemplate('left.actions');
-        this.rightActionsColumnTemplate$ = toolbarService.activeColumnTemplate('right.actions');
     }
     /***************************************************************************
      *                                                                         *
      * Life Cycle                                                              *
      *                                                                         *
      **************************************************************************/
-    ngOnInit() { }
+    ngOnInit() {
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Public API                                                              *
+     *                                                                         *
+     **************************************************************************/
+    slotTemplate$(slot) {
+        return this.toolbarService.activeColumnTemplate(slot);
+    }
 }
 ElderToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: ElderToolbarComponent, deps: [{ token: ElderToolbarService }], target: i0.ɵɵFactoryTarget.Component });
-ElderToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.4", type: ElderToolbarComponent, selector: "elder-toolbar, ebs-toolbar", inputs: { color: "color" }, ngImport: i0, template: "\n\n<div fxLayout=\"row\">\n\n  <ng-content></ng-content>\n\n  <mat-toolbar fxLayout=\"row\" fxLayoutAlign=\"start center\"\n               [color]=\"color ? color : 'primary'\">\n\n    <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n      <ng-container *ngTemplateOutlet=\"(leftColumnTemplate$ | async) || defaultLeftColumnTemplate\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"(leftActionsColumnTemplate$ | async) || defaultEmptyTemplate\"></ng-container>\n    </div>\n\n    <div fxLayout=\"row\" fxLayoutAlign=\"center center\" fxFlex>\n      <ng-container *ngTemplateOutlet=\"(centerColumnTemplate$ | async) || defaultCenterColumnTemplate\"></ng-container>\n    </div>\n\n    <div fxLayout=\"row\" fxLayoutAlign=\"end center\">\n      <ng-container *ngTemplateOutlet=\"(rightActionsColumnTemplate$ | async) || defaultEmptyTemplate\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"(rightColumnTemplate$ | async) || defaultRightColumnTemplate\"></ng-container>\n    </div>\n\n\n    <!-- Default Templates -->\n\n    <ng-template #defaultLeftColumnTemplate>\n\n      <elder-toolbar-title></elder-toolbar-title>\n\n    </ng-template>\n\n\n    <ng-template #defaultCenterColumnTemplate></ng-template>\n\n    <ng-template #defaultEmptyTemplate></ng-template>\n\n\n    <ng-template #defaultRightColumnTemplate>\n\n      <elder-language-switcher [slimMode]=\"true\"></elder-language-switcher>\n\n    </ng-template>\n\n  </mat-toolbar>\n\n</div>\n\n", styles: [""], components: [{ type: i2$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: ElderToolbarTitleComponent, selector: "elder-toolbar-title, ebs-toolbar-title" }, { type: ElderLanguageSwitcherComponent, selector: "elder-language-switcher, ebs-language-switcher", inputs: ["slimMode"] }], directives: [{ type: i5.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i5.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }], pipes: { "async": i3$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.4", type: ElderToolbarComponent, selector: "elder-toolbar, ebs-toolbar", inputs: { color: "color" }, ngImport: i0, template: "\n\n<div fxLayout=\"row\">\n\n  <ng-content></ng-content>\n\n  <mat-toolbar fxLayout=\"row\" fxLayoutAlign=\"start center\"\n               [color]=\"color ? color : 'primary'\">\n\n    <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n      <ng-container *ngTemplateOutlet=\"(slotTemplate$('left.begin') | async)\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"(slotTemplate$('left') | async) || defaultLeftColumnTemplate\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"(slotTemplate$('left.end') | async) || defaultEmptyTemplate\"></ng-container>\n    </div>\n\n    <div fxLayout=\"row\" fxLayoutAlign=\"center center\" fxFlex>\n      <ng-container *ngTemplateOutlet=\"(slotTemplate$('center') | async) || defaultCenterColumnTemplate\"></ng-container>\n    </div>\n\n    <div fxLayout=\"row\" fxLayoutAlign=\"end center\">\n      <ng-container *ngTemplateOutlet=\"(slotTemplate$('right.begin') | async) || defaultEmptyTemplate\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"(slotTemplate$('right') | async) || defaultRightColumnTemplate\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"(slotTemplate$('right.end') | async)\"></ng-container>\n    </div>\n\n\n    <!-- Default Templates -->\n\n    <ng-template #defaultLeftColumnTemplate>\n\n      <elder-toolbar-title></elder-toolbar-title>\n\n    </ng-template>\n\n\n    <ng-template #defaultCenterColumnTemplate></ng-template>\n\n    <ng-template #defaultEmptyTemplate></ng-template>\n\n\n    <ng-template #defaultRightColumnTemplate>\n\n      <elder-language-switcher [slimMode]=\"true\"></elder-language-switcher>\n\n    </ng-template>\n\n  </mat-toolbar>\n\n</div>\n\n", styles: [""], components: [{ type: i2$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: ElderToolbarTitleComponent, selector: "elder-toolbar-title, ebs-toolbar-title" }, { type: ElderLanguageSwitcherComponent, selector: "elder-language-switcher, ebs-language-switcher", inputs: ["slimMode"] }], directives: [{ type: i5.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i5.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }], pipes: { "async": i3$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: ElderToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'elder-toolbar, ebs-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "\n\n<div fxLayout=\"row\">\n\n  <ng-content></ng-content>\n\n  <mat-toolbar fxLayout=\"row\" fxLayoutAlign=\"start center\"\n               [color]=\"color ? color : 'primary'\">\n\n    <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n      <ng-container *ngTemplateOutlet=\"(leftColumnTemplate$ | async) || defaultLeftColumnTemplate\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"(leftActionsColumnTemplate$ | async) || defaultEmptyTemplate\"></ng-container>\n    </div>\n\n    <div fxLayout=\"row\" fxLayoutAlign=\"center center\" fxFlex>\n      <ng-container *ngTemplateOutlet=\"(centerColumnTemplate$ | async) || defaultCenterColumnTemplate\"></ng-container>\n    </div>\n\n    <div fxLayout=\"row\" fxLayoutAlign=\"end center\">\n      <ng-container *ngTemplateOutlet=\"(rightActionsColumnTemplate$ | async) || defaultEmptyTemplate\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"(rightColumnTemplate$ | async) || defaultRightColumnTemplate\"></ng-container>\n    </div>\n\n\n    <!-- Default Templates -->\n\n    <ng-template #defaultLeftColumnTemplate>\n\n      <elder-toolbar-title></elder-toolbar-title>\n\n    </ng-template>\n\n\n    <ng-template #defaultCenterColumnTemplate></ng-template>\n\n    <ng-template #defaultEmptyTemplate></ng-template>\n\n\n    <ng-template #defaultRightColumnTemplate>\n\n      <elder-language-switcher [slimMode]=\"true\"></elder-language-switcher>\n\n    </ng-template>\n\n  </mat-toolbar>\n\n</div>\n\n", styles: [""] }]
+            args: [{ selector: 'elder-toolbar, ebs-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "\n\n<div fxLayout=\"row\">\n\n  <ng-content></ng-content>\n\n  <mat-toolbar fxLayout=\"row\" fxLayoutAlign=\"start center\"\n               [color]=\"color ? color : 'primary'\">\n\n    <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n      <ng-container *ngTemplateOutlet=\"(slotTemplate$('left.begin') | async)\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"(slotTemplate$('left') | async) || defaultLeftColumnTemplate\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"(slotTemplate$('left.end') | async) || defaultEmptyTemplate\"></ng-container>\n    </div>\n\n    <div fxLayout=\"row\" fxLayoutAlign=\"center center\" fxFlex>\n      <ng-container *ngTemplateOutlet=\"(slotTemplate$('center') | async) || defaultCenterColumnTemplate\"></ng-container>\n    </div>\n\n    <div fxLayout=\"row\" fxLayoutAlign=\"end center\">\n      <ng-container *ngTemplateOutlet=\"(slotTemplate$('right.begin') | async) || defaultEmptyTemplate\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"(slotTemplate$('right') | async) || defaultRightColumnTemplate\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"(slotTemplate$('right.end') | async)\"></ng-container>\n    </div>\n\n\n    <!-- Default Templates -->\n\n    <ng-template #defaultLeftColumnTemplate>\n\n      <elder-toolbar-title></elder-toolbar-title>\n\n    </ng-template>\n\n\n    <ng-template #defaultCenterColumnTemplate></ng-template>\n\n    <ng-template #defaultEmptyTemplate></ng-template>\n\n\n    <ng-template #defaultRightColumnTemplate>\n\n      <elder-language-switcher [slimMode]=\"true\"></elder-language-switcher>\n\n    </ng-template>\n\n  </mat-toolbar>\n\n</div>\n\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: ElderToolbarService }]; }, propDecorators: { color: [{
                 type: Input
             }] } });
@@ -20314,6 +20357,7 @@ class ElderSelectBase extends FormFieldBaseComponent {
         this.autoCleanUp();
         if (data instanceof Array) {
             this.suggestionsDc = DataContextBuilder.start()
+                .localSort()
                 .buildLocal(data); // Memory leak
             this.suggestionsDc.start();
         }
@@ -21077,6 +21121,7 @@ class ElderSelectComponent extends ElderSelectBase {
         ElderSelectFirstUtil.trySelectFirst(this);
     }
     updateValueByEntity(entity) {
+        this._entity$.next(entity);
         this.updateValue(this.entityToValue(entity));
     }
     /***************************************************************************
@@ -21188,22 +21233,6 @@ class ElderSelectComponent extends ElderSelectBase {
         }
         super.writeToControl(value);
     }
-    /**
-     * @description
-     * Writes a new value to the element.
-     *
-     * This method is called by the forms API to write to the view when programmatic
-     * changes from model to view are requested.
-     *
-     * @param value The new value for the element
-     */
-    writeValue(value) {
-        // this.logger.debug('ElderSelectBase.writeValue(): Current value-id ' + this._valueId + ', new value: ', value);
-        super.writeValue(value);
-    }
-    isNullOrEmpty(value) {
-        return (value == null || value === '');
-    }
 }
 ElderSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: ElderSelectComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
 ElderSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.4", type: ElderSelectComponent, selector: "elder-select", inputs: { nullDisplay: "nullDisplay", autocomplete: "autocomplete", allowNull: "allowNull", entity: "entity", entityId: "entityId", hintProperty: "hintProperty", hintPropertyResolver: "hintPropertyResolver" }, outputs: { entityIdChange: "entityIdChange", entityIdUpdated: "entityIdUpdated", entityChange: "entityChange", entityUpdated: "entityUpdated" }, providers: [
@@ -21314,13 +21343,22 @@ class ElderMultiSelectBase extends ElderSelectBase {
         this.entities$ = new BehaviorSubject([]);
         this.entityIdsChange = this.valueChange.pipe(map(values => this.entityIdsFromValues(values)));
         this.entityIdsUpdated = this.valueUpdated.pipe(map(values => this.entityIdsFromValues(values)));
-        this.entitiesUpdated = this.entityIdsUpdated.pipe(switchMap(entityId => this.awaitEntitiesWithId(entityId, this.timeoutAfterMs)), catchError(err => {
+        this.entitiesUpdated = this.entityIdsUpdated.pipe(tap(entityIds => this.logger.debug('Awaiting entities with ids', entityIds)), switchMap(entityIds => this.awaitEntitiesWithId(entityIds, this.timeoutAfterMs)), catchError(err => {
             this.logger.warn(`awaitEntitiesWithId -> timed out after: ${this.timeoutAfterMs}`, err);
             return EMPTY;
         }));
     }
     awaitEntitiesWithId(entityIds, timeoutMs) {
-        return this.entities$.pipe(filter(entities => this.equalIds(this.getEntityIds(entities), entityIds)), take(1), timeout(timeoutMs));
+        return this.entities$.pipe(tap(entities => this.logger.debug('Got entities for ids' + entityIds, entities)), filter(entities => this.equalIds(this.getEntityIds(entities), entityIds)), take(1), timeout(timeoutMs));
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Properties                                                              *
+     *                                                                         *
+     **************************************************************************/
+    updateValueByEntities(entities) {
+        this.entities$.next(entities);
+        this.updateValue(this.entitiesToValues(entities));
     }
     /***************************************************************************
      *                                                                         *
@@ -21612,7 +21650,7 @@ class ElderMultiSelectChipsComponent extends ElderMultiSelectBase {
     }
     addLabels(labels) {
         const current = this.entities ? this.entities : [];
-        this.entities = [...current, ...labels];
+        this.updateValueByEntities([...current, ...labels]);
     }
     addLabel(label) {
         this.addLabels([label]);
@@ -21620,7 +21658,7 @@ class ElderMultiSelectChipsComponent extends ElderMultiSelectBase {
     removeLabel(toRemove) {
         const remaining = this.entities
             .filter(l => !this.isEqual(l, toRemove));
-        this.entities = remaining;
+        this.updateValueByEntities(remaining);
     }
     /***************************************************************************
      *                                                                         *