@elderbyte/ngx-starter 16.2.7 → 16.2.9

package/fesm2022/elderbyte-ngx-starter.mjs

@@ -19100,7 +19100,26 @@ class ElderSelectBase extends ElderFormFieldControlBase {
      *                                                                         *
      **************************************************************************/
     getEntityId(entity) {
-        return this.dataContext?.dataSource?.getId(entity) || entity;
+        try {
+            return this.dataSourceOrThrow().getId(entity);
+        }
+        catch (e) {
+            throw new Error('Failed to extract id from entity since no dataSource is available! Caused by ' + e?.message);
+        }
+    }
+    dataSourceOrThrow() {
+        if (this.dataContext) {
+            const dataSource = this.dataContext.dataSource;
+            if (dataSource) {
+                return dataSource;
+            }
+            else {
+                throw new Error('The provided DataContext has not DataSource, which is required for valueAsId! ' + typeof this.dataContext);
+            }
+        }
+        else {
+            throw new Error('No DataContext available! A DataContext (DataSource) is required for valueAsId!');
+        }
     }
     isEqual(a, b) {
         if (a === b) {
@@ -19933,7 +19952,7 @@ class ElderSelectComponent extends ElderSelectBase {
         if (currentEntity && this.getEntityId(currentEntity) === id) {
             return; // Entity already loaded
         }
-        if (id === null || id === undefined || id === "") {
+        if (id === null || id === undefined || id === '') {
             if (currentEntity !== null && currentEntity !== undefined) {
                 this.entity = null;
             }
@@ -19954,13 +19973,16 @@ class ElderSelectComponent extends ElderSelectBase {
         }
     }
     loadEntityById(id) {
-        this.dataContext.dataSource.findById(id)
-            .subscribe(entity => {
-            this.logger.debug('Loaded missing entity by id ' + id + ':', entity);
-            this.entity = entity;
-        }, err => {
-            this.logger.error('Failed to load entity by id ' + id, err);
-            this.updateState(ElderSelectComponentState.error(err));
+        this.dataSourceOrThrow().findById(id)
+            .subscribe({
+            next: entity => {
+                this.logger.debug('Loaded missing entity by id ' + id + ':', entity);
+                this.entity = entity;
+            },
+            error: err => {
+                this.logger.error('Failed to load entity by id ' + id, err);
+                this.updateState(ElderSelectComponentState.error(err));
+            }
         });
     }
     findInDataContext(id) {
@@ -21456,7 +21478,7 @@ class ElderMultiSelectBase extends ElderSelectBase {
         }
     }
     loadEntitiesByIds(ids) {
-        return this.dataContext.dataSource.findByIds(ids).pipe(catchError(err => {
+        return this.dataSourceOrThrow().findByIds(ids).pipe(catchError(err => {
             this.logger.error('Failed to load entities by ids: ' + ids, err);
             return throwError(err);
         }), map(values => {
@@ -25518,6 +25540,166 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
                 type: Input
             }] } });
 
+/**
+ * The search container manages a group of search-inputs
+ * and holds their values in a central search model.
+ */
+class ElderSearchContextDirective {
+    constructor() {
+        /***************************************************************************
+         *                                                                         *
+         * Fields                                                                  *
+         *                                                                         *
+         **************************************************************************/
+        this.forcedFilters$ = new BehaviorSubject$1([]);
+        this.startFilters$ = new BehaviorSubject$1([]);
+        this.log = LoggerFactory.getLogger(this.constructor.name);
+        this.destroy$ = new Subject$1();
+        this._searchInputs = new BehaviorSubject$1([]);
+        this._searchStates = new BehaviorSubject$1([]);
+        this._filters$ = new BehaviorSubject$1([]);
+        this._initialFilters$ = new BehaviorSubject$1([]);
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Life Cycle                                                              *
+     *                                                                         *
+     **************************************************************************/
+    ngAfterContentInit() {
+        this._searchInputs.pipe(takeUntil(this.destroy$), switchMap(inputs => combineLatest(inputs.map(i => i.state$))), combineLatestWith(this.forcedFilters$), debounceTime(5)).subscribe(([states, forcedFilters]) => {
+            this._searchStates.next(states);
+            const userFilters = this.convertToFilters(states);
+            this._filters$.next(userFilters);
+            this.applyFilters(userFilters, forcedFilters);
+        });
+    }
+    ngAfterViewInit() {
+        this.subscribeInitialFilters();
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Properties                                                              *
+     *                                                                         *
+     **************************************************************************/
+    set filterContext(value) {
+        this._filterContext = value instanceof FilterContext ? value : null;
+    }
+    get filterContext() {
+        return this._filterContext;
+    }
+    /**
+     * Forced filters are always merged into the final FilterContext.
+     *
+     * This means they override user defined filters, but attempt
+     * to also keep the users intent (by merging) them.
+     */
+    set forcedFilters(filters) {
+        this.forcedFilters$.next(filters);
+    }
+    get forcedFilters() {
+        return this.forcedFilters$.getValue();
+    }
+    set startFilters(filters) {
+        this.startFilters$.next(filters);
+    }
+    get attributes() {
+        return this._searchInputs.asObservable();
+    }
+    get attributesSnapshot() {
+        return this._searchInputs.getValue();
+    }
+    get states$() {
+        return this._searchStates.asObservable();
+    }
+    get statesSnapshot() {
+        return this._searchStates.getValue();
+    }
+    /**
+     * Returns the current user touched attributes. (ignoring fallbacks)
+     */
+    get userDefinedAttributes$() {
+        return this.states$.pipe(map(states => states.filter(s => !s.pristine)));
+    }
+    /**
+     * Returns the current active filters
+     */
+    get filters$() {
+        return this._filters$.asObservable();
+    }
+    get initialFilters$() {
+        return this._initialFilters$.asObservable();
+    }
+    get filtersSnapshot() {
+        return this._filters$.getValue();
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Public API                                                              *
+     *                                                                         *
+     **************************************************************************/
+    /**
+     * Register a new search name in this container
+     */
+    register(searchInput) {
+        this.log.debug("Registering search input [" + searchInput.name + "]");
+        const current = this._searchInputs.getValue();
+        this._searchInputs.next([...current, searchInput]);
+    }
+    reset() {
+        this.attributesSnapshot
+            .filter(attr => !attr.readonly)
+            .forEach(a => {
+            a.reset();
+        });
+    }
+    registerInitialFilters(filters) {
+        this._initialFilters$.next(filters);
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Private                                                                 *
+     *                                                                         *
+     **************************************************************************/
+    subscribeInitialFilters() {
+        this.initialFilters$.pipe(takeUntil(this.destroy$), combineLatestWith(this._searchInputs, this.startFilters$)).subscribe(([initialFilters, searchInputs, startFilters]) => {
+            var filters = [...initialFilters, ...startFilters];
+            searchInputs.forEach(input => input.setInitialFilter(filters));
+        });
+    }
+    convertToFilters(states) {
+        return states
+            .map(s => new Filter(s.queryKey, s.queryValue));
+    }
+    applyFilters(userFilters, forcedFilters) {
+        const context = this.filterContext;
+        if (context) {
+            context.updateFilters(userFilters);
+            context.mergeFilters(forcedFilters);
+            this.log.trace("Search-Model filters updated:", Array.from(context.filtersSnapshot));
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ElderSearchContextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.9", type: ElderSearchContextDirective, selector: "[elderSearchContext]", inputs: { filterContext: ["elderSearchContext", "filterContext"], forcedFilters: "forcedFilters", startFilters: "startFilters" }, exportAs: ["elderSearchContext"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ElderSearchContextDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[elderSearchContext]",
+                    exportAs: "elderSearchContext"
+                }]
+        }], propDecorators: { filterContext: [{
+                type: Input,
+                args: ["elderSearchContext"]
+            }], forcedFilters: [{
+                type: Input
+            }], startFilters: [{
+                type: Input
+            }] } });
+
 /**
  * Immutable representation of the state of an search input
  */
@@ -25599,8 +25781,19 @@ class SearchInputState {
  * Search name adapter for input controls.
  */
 class ElderInitialValueDirective {
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
     constructor(ngModel) {
         this.ngModel = ngModel;
+        /***************************************************************************
+         *                                                                         *
+         * Fields                                                                  *
+         *                                                                         *
+         **************************************************************************/
+        this.log = LoggerFactory.getLogger(this.constructor.name);
         this.newValue$ = new BehaviorSubject(null);
         this.unsubscribe$ = new Subject();
         this.initialDone$ = new Subject();
@@ -25614,8 +25807,16 @@ class ElderInitialValueDirective {
                 this.initialDone$.complete();
                 ngModel.control.setValue(newValue ? newValue : value);
             }
+            else {
+                this.log.warn('Initialisation not yet done! initialValue = ' + this.initialValue + '. Current Val: ', value);
+            }
         });
     }
+    /***************************************************************************
+     *                                                                         *
+     * Properties                                                              *
+     *                                                                         *
+     **************************************************************************/
     get valueChanges$() {
         return this.ngModel.control.valueChanges
             .pipe(skipUntil(this.initialDone$), filter$1(value => this.filterInitialValue(value)));
@@ -25627,6 +25828,11 @@ class ElderInitialValueDirective {
         this.unsubscribe$.next();
         this.unsubscribe$.complete();
     }
+    /***************************************************************************
+     *                                                                         *
+     * Private methods                                                         *
+     *                                                                         *
+     **************************************************************************/
     filterInitialValue(value) {
         if (this.isInitial && this.initialValue === value) {
             this.isInitial = false;
@@ -25656,14 +25862,13 @@ class ElderSearchInputDirective {
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    constructor(searchContext, changeDetection, ngModel) {
+    constructor(searchContext, ngModel) {
         this.searchContext = searchContext;
-        this.changeDetection = changeDetection;
         this.ngModel = ngModel;
         //TODO: In Angular 16, use standalone directives and host component to inject directive to component
         this.initialValueDirective = new ElderInitialValueDirective(this.ngModel);
         this._state = new BehaviorSubject(null);
-        this._unsubscribe$ = new Subject();
+        this.destroy$ = new Subject();
         this.log = LoggerFactory.getLogger(this.constructor.name);
     }
     /***************************************************************************
@@ -25673,14 +25878,15 @@ class ElderSearchInputDirective {
      **************************************************************************/
     ngAfterViewInit() {
         this._extractedName = this.extractName();
-        console.log(this.extractName() + "|" + this.queryKey + "|" + this.resolvePath);
+        this.log.debug(this.extractName() + "|" + this.queryKey + "|" + this.resolvePath);
+        this.searchContext.register(this);
         this.stateObservable().subscribe(state => {
             this.emitState(state);
         });
     }
     ngOnDestroy() {
-        this._unsubscribe$.next();
-        this._unsubscribe$.complete();
+        this.destroy$.next();
+        this.destroy$.complete();
     }
     /***************************************************************************
      *                                                                         *
@@ -25741,7 +25947,7 @@ class ElderSearchInputDirective {
         return null;
     }
     stateObservable() {
-        return this.initialValueDirective.valueChanges$.pipe(takeUntil(this._unsubscribe$), map(value => {
+        return this.initialValueDirective.valueChanges$.pipe(takeUntil(this.destroy$), map(value => {
             const queryValue = this.convertRawModelValueToQueryString(value);
             const pristine = !this.isAttributeValuePresent(value);
             return new SearchInputState(this.name, queryValue, this.queryKey || this.name, pristine);
@@ -25843,7 +26049,7 @@ class ElderSearchInputDirective {
         });
         return CollectionUtil.flatten(arrays);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ElderSearchInputDirective, deps: [{ token: ElderSearchContextDirective }, { token: i0.ChangeDetectorRef }, { token: i3.NgModel, host: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ElderSearchInputDirective, deps: [{ token: ElderSearchContextDirective }, { token: i3.NgModel, host: true }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.9", type: ElderSearchInputDirective, selector: "[elderSearchInput]", inputs: { queryKey: ["elderSearchInputKey", "queryKey"], valueTransform: ["elderSearchInputTransform", "valueTransform"], resolvePath: ["elderSearchInput", "resolvePath"], dataSource: "dataSource", fallbackValue: ["elderSearchInputFallback", "fallbackValue"], valueAsId: "valueAsId" }, exportAs: ["elderSearchInput"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ElderSearchInputDirective, decorators: [{
@@ -25852,7 +26058,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
                     selector: "[elderSearchInput]",
                     exportAs: "elderSearchInput"
                 }]
-        }], ctorParameters: function () { return [{ type: ElderSearchContextDirective }, { type: i0.ChangeDetectorRef }, { type: i3.NgModel, decorators: [{
+        }], ctorParameters: function () { return [{ type: ElderSearchContextDirective }, { type: i3.NgModel, decorators: [{
                     type: Host
                 }] }]; }, propDecorators: { queryKey: [{
                 type: Input,
@@ -25874,191 +26080,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
                 args: ["valueAsId"]
             }] } });
 
-/**
- * The search container manages a group of search-inputs
- * and holds their values in a central search model.
- */
-class ElderSearchContextDirective {
-    /***************************************************************************
-     *                                                                         *
-     * Constructor                                                             *
-     *                                                                         *
-     **************************************************************************/
-    constructor(parentContext) {
-        this.parentContext = parentContext;
-        this.childSearchInputs$ = new BehaviorSubject$1([]);
-        this.forcedFilters$ = new BehaviorSubject$1([]);
-        this.log = LoggerFactory.getLogger(this.constructor.name);
-        this._unsubscribe$ = new Subject$1();
-        this._searchStates = new BehaviorSubject$1([]);
-        this._filters$ = new BehaviorSubject$1([]);
-        this._initialFilters$ = new BehaviorSubject$1([]);
-    }
-    /***************************************************************************
-     *                                                                         *
-     * Life Cycle                                                              *
-     *                                                                         *
-     **************************************************************************/
-    ngAfterContentInit() {
-        if (!this.isParentContextNull()) {
-            this.registerInputsToParentContext();
-        }
-    }
-    ngAfterViewInit() {
-        if (this.isParentContextNull()) {
-            this.subscribeSearchInputs();
-            this.subscribeInitialFilters();
-        }
-    }
-    ngOnDestroy() {
-        this._unsubscribe$.next();
-        this._unsubscribe$.complete();
-    }
-    /***************************************************************************
-     *                                                                         *
-     * Properties                                                              *
-     *                                                                         *
-     **************************************************************************/
-    set filterContext(value) {
-        this._filterContext = value instanceof FilterContext ? value : null;
-    }
-    get filterContext() {
-        return this._filterContext;
-    }
-    /**
-     * Forced filters are always merged into the final FilterContext.
-     *
-     * This means they override user defined filters, but attempt
-     * to also keep the users intent (by merging) them.
-     */
-    set forcedFilters(filters) {
-        this.forcedFilters$.next(filters);
-    }
-    get forcedFilters() {
-        return this.forcedFilters$.getValue();
-    }
-    get attributes() {
-        return this.searchInputs.changes.pipe(map(inputs => inputs), map(inputs => inputs.toArray()));
-    }
-    get attributesSnapshot() {
-        return this.zipInputsWithChildInputs(this.searchInputs.toArray(), this.childSearchInputs$.getValue());
-    }
-    get states$() {
-        return this._searchStates.asObservable();
-    }
-    get statesSnapshot() {
-        return this._searchStates.getValue();
-    }
-    /**
-     * Returns the current user touched attributes. (ignoring fallbacks)
-     */
-    get userDefinedAttributes$() {
-        return this.states$.pipe(map(states => states.filter(s => !s.pristine)));
-    }
-    /**
-     * Returns the current active filters
-     */
-    get filters$() {
-        return this._filters$.asObservable();
-    }
-    get initialFilters$() {
-        return this._initialFilters$.asObservable();
-    }
-    get filtersSnapshot() {
-        return this._filters$.getValue();
-    }
-    /***************************************************************************
-     *                                                                         *
-     * Public API                                                              *
-     *                                                                         *
-     **************************************************************************/
-    registerInput(searchInputs) {
-        this.childSearchInputs$.next([...this.childSearchInputs$.getValue(), ...searchInputs]);
-    }
-    registerInitialFilters(filters) {
-        this._initialFilters$.next(filters);
-    }
-    reset() {
-        if (this.isParentContextNull()) {
-            this.resetInputs();
-        }
-        else {
-            this.parentContext.reset();
-        }
-    }
-    /***************************************************************************
-     *                                                                         *
-     * Private                                                                 *
-     *                                                                         *
-     **************************************************************************/
-    resetInputs() {
-        this.attributesSnapshot
-            .filter(attr => !attr.readonly)
-            .forEach(a => {
-            a.reset();
-        });
-    }
-    registerInputsToParentContext() {
-        if (!this.isParentContextNull()) {
-            this.parentContext.registerInput(this.searchInputs.toArray());
-        }
-    }
-    isParentContextNull() {
-        return this.parentContext === null;
-    }
-    subscribeSearchInputs() {
-        this.searchInputs.changes
-            .pipe(startWith(this.searchInputs), takeUntil(this._unsubscribe$), map(input => input), combineLatestWith(this.childSearchInputs$), map(([inputs, childInputs]) => this.zipInputsWithChildInputs(inputs.toArray(), childInputs)), switchMap(inputs => combineLatest(inputs.map(i => i.state$))), combineLatestWith(this.forcedFilters$), debounceTime(5)).subscribe(([states, forcedFilters]) => {
-            this._searchStates.next(states);
-            const userFilters = this.convertToFilters(states);
-            this._filters$.next(userFilters);
-            this.applyFilters(userFilters, forcedFilters);
-        });
-    }
-    zipInputsWithChildInputs(inputs, childInputs) {
-        return [...inputs, ...childInputs];
-    }
-    subscribeInitialFilters() {
-        this.initialFilters$.pipe(takeUntil(this._unsubscribe$), combineLatestWith(this.childSearchInputs$), skip(1)).subscribe(([initialFilters, childSearchInputs]) => {
-            var searchInputs = this.zipInputsWithChildInputs(this.searchInputs.toArray(), childSearchInputs);
-            searchInputs.forEach(input => input.setInitialFilter(initialFilters));
-        });
-    }
-    convertToFilters(states) {
-        return states
-            .map(s => new Filter(s.queryKey, s.queryValue));
-    }
-    applyFilters(userFilters, forcedFilters) {
-        const context = this.filterContext;
-        if (context) {
-            context.updateFilters(userFilters);
-            context.mergeFilters(forcedFilters);
-            this.log.trace("Search-Model filters updated:", Array.from(context.filtersSnapshot));
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ElderSearchContextDirective, deps: [{ token: ElderSearchContextDirective, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.9", type: ElderSearchContextDirective, selector: "[elderSearchContext]", inputs: { filterContext: ["elderSearchContext", "filterContext"], forcedFilters: "forcedFilters" }, queries: [{ propertyName: "searchInputs", predicate: ElderSearchInputDirective, descendants: true }], exportAs: ["elderSearchContext"], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ElderSearchContextDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: "[elderSearchContext]",
-                    exportAs: "elderSearchContext"
-                }]
-        }], ctorParameters: function () { return [{ type: ElderSearchContextDirective, decorators: [{
-                    type: SkipSelf
-                }, {
-                    type: Optional
-                }] }]; }, propDecorators: { searchInputs: [{
-                type: ContentChildren,
-                args: [ElderSearchInputDirective, { descendants: true }]
-            }], filterContext: [{
-                type: Input,
-                args: ["elderSearchContext"]
-            }], forcedFilters: [{
-                type: Input
-            }] } });
-
 class ElderSearchPanelComponent {
     constructor() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ElderSearchPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -26452,11 +26473,11 @@ class ElderSearchBoxComponent {
         this.searchModel.reset();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ElderSearchBoxComponent, deps: [{ token: ElderSearchContextDirective }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: ElderSearchBoxComponent, selector: "elder-search-box", inputs: { autoPanel: "autoPanel", name: "name", queryKey: "queryKey", placeholder: "placeholder", label: "label", hint: "hint", autocomplete: "autocomplete", appearance: "appearance", dense: "dense" }, host: { classAttribute: "elder-form-field-host" }, queries: [{ propertyName: "advancedSearch", first: true, predicate: ElderSearchPanelComponent, descendants: true }], viewQueries: [{ propertyName: "search", first: true, predicate: ["search"], descendants: true }], exportAs: ["elderSearchBox"], ngImport: i0, template: "<div class=\"layout-row place-stretch-center full flex\" style=\"overflow: hidden\" elderSearchContext>\n  <mat-form-field\n    *ngIf=\"overlayState$ | async as overlayState\"\n    [appearance]=\"appearance\"\n    class=\"elder-search-box-field flex-auto\" subscriptSizing=\"dynamic\"\n    [elderDense]=\"dense\">\n\n    <button matPrefix mat-icon-button type=\"button\"\n            [elderOverlayTrigger]=\"searchPanel\" (click)=\"blurFocus($event)\"\n    >\n      <mat-icon>search</mat-icon>\n    </button>\n\n    <input matInput type=\"text\" [name]=\"name\" [placeholder]=\"placeholder\" #search cdkFocusInitial\n           ngModel\n           elderSearchInput [elderSearchInputKey]=\"queryKey\" #searchInput=\"elderSearchInput\"\n           [autocomplete]=\"(autoPanel && overlayState.hasOverlay) ? 'off' : autocomplete\"\n           [elderOverlayOrigin]=\"searchPanel\"\n           [elderOverlayTrigger]=\"searchPanel\"\n           [elderOverlayTriggerType]=\"'focus'\"\n           [elderOverlayTriggerEnabled]=\"autoPanel && overlayState.hasOverlay && (searchInput?.state$ | async)?.pristine\"\n    >\n    <mat-hint *ngIf=\"hint\">{{hint}}</mat-hint>\n\n    <div class=\"layout-row\" matSuffix *ngIf=\"searchModel.userDefinedAttributes$ | async as userDefinedFilters\">\n\n      <button mat-icon-button type=\"button\"\n              *ngIf=\"userDefinedFilters.length > 0\"\n              (click)=\"clearSearch($event)\"\n              name=\"clear\" aria-label=\"Clear\">\n        <mat-icon>close</mat-icon>\n      </button>\n\n      <button mat-icon-button type=\"button\"\n              *ngIf=\"overlayState.hasOverlay\" name=\"openPanel\"\n              [elderOverlayTrigger]=\"searchPanel\" (click)=\"blurFocus($event)\">\n        <mat-icon\n          [matBadge]=\"userDefinedFilters.length\"\n          matBadgeSize=\"small\"\n          [matBadgeOverlap]=\"true\"\n          [matBadgeHidden]=\"userDefinedFilters.length == 0\"\n          matBadgeColor=\"accent\"\n          [color]=\"userDefinedFilters.length > 0 ? 'accent' : undefined\"\n        >\n          filter_list\n        </mat-icon>\n      </button>\n    </div>\n  </mat-form-field>\n</div>\n\n\n<!-- Overlay Panel for advanced search -->\n<elder-overlay #searchPanel=\"elderOverlay\">\n  <elder-dialog-panel class=\"elder-search-panel-container\">\n\n    <!-- Project the users search inputs here -->\n    <ng-content select=\"elder-search-panel\"></ng-content>\n\n    <div class=\"layout-row place-between-center\">\n      <button mat-raised-button type=\"button\" name=\"clear\"\n              (click)=\"clearSearch($event)\">{{'context.reset' | translate}}\n      </button>\n\n      <button mat-raised-button type=\"button\" name=\"ok\" color=\"primary\"\n              (click)=\"searchPanel.closeOverlay()\">Ok\n      </button>\n    </div>\n  </elder-dialog-panel>\n</elder-overlay>\n", styles: [".elder-search-box-field{margin-top:4px;margin-bottom:4px}.elder-search-panel-container{min-width:250px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2$3.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: ElderOverlayComponent, selector: "elder-overlay", inputs: ["originX", "originY", "overlayX", "overlayY", "offsetY", "offsetX", "backdrop", "backdropVisible", "origin", "positionStrategy", "overlaySize"], outputs: ["keydownEvents", "attachedChange"], exportAs: ["elderOverlay"] }, { kind: "directive", type: ElderOverlayTriggerDirective, selector: "[elderOverlayTrigger]", inputs: ["elderOverlayTrigger", "elderOverlayTriggerType", "elderOverlayTriggerEnabled"] }, { kind: "directive", type: ElderOverlayOriginDirective, selector: "[elderOverlayOrigin]", inputs: ["elderOverlayOrigin"] }, { kind: "component", type: ElderDialogPanelComponent, selector: "elder-dialog-panel" }, { kind: "directive", type: ElderFormFieldDenseDirective, selector: "mat-form-field[elderDense]", inputs: ["elderDense", "subscriptSizing", "floatLabel"] }, { kind: "directive", type: ElderSearchContextDirective, selector: "[elderSearchContext]", inputs: ["elderSearchContext", "forcedFilters"], exportAs: ["elderSearchContext"] }, { kind: "directive", type: ElderSearchInputDirective, selector: "[elderSearchInput]", inputs: ["elderSearchInputKey", "elderSearchInputTransform", "elderSearchInput", "dataSource", "elderSearchInputFallback", "valueAsId"], exportAs: ["elderSearchInput"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: ElderSearchBoxComponent, selector: "elder-search-box", inputs: { autoPanel: "autoPanel", name: "name", queryKey: "queryKey", placeholder: "placeholder", label: "label", hint: "hint", autocomplete: "autocomplete", appearance: "appearance", dense: "dense" }, host: { classAttribute: "elder-form-field-host" }, queries: [{ propertyName: "advancedSearch", first: true, predicate: ElderSearchPanelComponent, descendants: true }], viewQueries: [{ propertyName: "search", first: true, predicate: ["search"], descendants: true }], exportAs: ["elderSearchBox"], ngImport: i0, template: "<div class=\"layout-row place-stretch-center full flex\" style=\"overflow: hidden\">\n  <mat-form-field\n    *ngIf=\"overlayState$ | async as overlayState\"\n    [appearance]=\"appearance\"\n    class=\"elder-search-box-field flex-auto\" subscriptSizing=\"dynamic\"\n    [elderDense]=\"dense\">\n\n    <button matPrefix mat-icon-button type=\"button\"\n            [elderOverlayTrigger]=\"searchPanel\" (click)=\"blurFocus($event)\"\n    >\n      <mat-icon>search</mat-icon>\n    </button>\n\n    <input matInput type=\"text\" [name]=\"name\" [placeholder]=\"placeholder\" #search cdkFocusInitial\n           ngModel\n           elderSearchInput [elderSearchInputKey]=\"queryKey\" #searchInput=\"elderSearchInput\"\n           [autocomplete]=\"(autoPanel && overlayState.hasOverlay) ? 'off' : autocomplete\"\n           [elderOverlayOrigin]=\"searchPanel\"\n           [elderOverlayTrigger]=\"searchPanel\"\n           [elderOverlayTriggerType]=\"'focus'\"\n           [elderOverlayTriggerEnabled]=\"autoPanel && overlayState.hasOverlay && (searchInput?.state$ | async)?.pristine\"\n    >\n    <mat-hint *ngIf=\"hint\">{{hint}}</mat-hint>\n\n    <div class=\"layout-row\" matSuffix *ngIf=\"searchModel.userDefinedAttributes$ | async as userDefinedFilters\">\n\n      <button mat-icon-button type=\"button\"\n              *ngIf=\"userDefinedFilters.length > 0\"\n              (click)=\"clearSearch($event)\"\n              name=\"clear\" aria-label=\"Clear\">\n        <mat-icon>close</mat-icon>\n      </button>\n\n      <button mat-icon-button type=\"button\"\n              *ngIf=\"overlayState.hasOverlay\" name=\"openPanel\"\n              [elderOverlayTrigger]=\"searchPanel\" (click)=\"blurFocus($event)\">\n        <mat-icon\n          [matBadge]=\"userDefinedFilters.length\"\n          matBadgeSize=\"small\"\n          [matBadgeOverlap]=\"true\"\n          [matBadgeHidden]=\"userDefinedFilters.length == 0\"\n          matBadgeColor=\"accent\"\n          [color]=\"userDefinedFilters.length > 0 ? 'accent' : undefined\"\n        >\n          filter_list\n        </mat-icon>\n      </button>\n    </div>\n  </mat-form-field>\n</div>\n\n\n<!-- Overlay Panel for advanced search -->\n<elder-overlay #searchPanel=\"elderOverlay\">\n  <elder-dialog-panel class=\"elder-search-panel-container\">\n\n    <!-- Project the users search inputs here -->\n    <ng-content select=\"elder-search-panel\"></ng-content>\n\n    <div class=\"layout-row place-between-center\">\n      <button mat-raised-button type=\"button\" name=\"clear\"\n              (click)=\"clearSearch($event)\">{{'context.reset' | translate}}\n      </button>\n\n      <button mat-raised-button type=\"button\" name=\"ok\" color=\"primary\"\n              (click)=\"searchPanel.closeOverlay()\">Ok\n      </button>\n    </div>\n  </elder-dialog-panel>\n</elder-overlay>\n", styles: [".elder-search-box-field{margin-top:4px;margin-bottom:4px}.elder-search-panel-container{min-width:250px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2$3.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: ElderOverlayComponent, selector: "elder-overlay", inputs: ["originX", "originY", "overlayX", "overlayY", "offsetY", "offsetX", "backdrop", "backdropVisible", "origin", "positionStrategy", "overlaySize"], outputs: ["keydownEvents", "attachedChange"], exportAs: ["elderOverlay"] }, { kind: "directive", type: ElderOverlayTriggerDirective, selector: "[elderOverlayTrigger]", inputs: ["elderOverlayTrigger", "elderOverlayTriggerType", "elderOverlayTriggerEnabled"] }, { kind: "directive", type: ElderOverlayOriginDirective, selector: "[elderOverlayOrigin]", inputs: ["elderOverlayOrigin"] }, { kind: "component", type: ElderDialogPanelComponent, selector: "elder-dialog-panel" }, { kind: "directive", type: ElderFormFieldDenseDirective, selector: "mat-form-field[elderDense]", inputs: ["elderDense", "subscriptSizing", "floatLabel"] }, { kind: "directive", type: ElderSearchInputDirective, selector: "[elderSearchInput]", inputs: ["elderSearchInputKey", "elderSearchInputTransform", "elderSearchInput", "dataSource", "elderSearchInputFallback", "valueAsId"], exportAs: ["elderSearchInput"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ElderSearchBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'elder-search-box', exportAs: 'elderSearchBox', host: { 'class': 'elder-form-field-host' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-row place-stretch-center full flex\" style=\"overflow: hidden\" elderSearchContext>\n  <mat-form-field\n    *ngIf=\"overlayState$ | async as overlayState\"\n    [appearance]=\"appearance\"\n    class=\"elder-search-box-field flex-auto\" subscriptSizing=\"dynamic\"\n    [elderDense]=\"dense\">\n\n    <button matPrefix mat-icon-button type=\"button\"\n            [elderOverlayTrigger]=\"searchPanel\" (click)=\"blurFocus($event)\"\n    >\n      <mat-icon>search</mat-icon>\n    </button>\n\n    <input matInput type=\"text\" [name]=\"name\" [placeholder]=\"placeholder\" #search cdkFocusInitial\n           ngModel\n           elderSearchInput [elderSearchInputKey]=\"queryKey\" #searchInput=\"elderSearchInput\"\n           [autocomplete]=\"(autoPanel && overlayState.hasOverlay) ? 'off' : autocomplete\"\n           [elderOverlayOrigin]=\"searchPanel\"\n           [elderOverlayTrigger]=\"searchPanel\"\n           [elderOverlayTriggerType]=\"'focus'\"\n           [elderOverlayTriggerEnabled]=\"autoPanel && overlayState.hasOverlay && (searchInput?.state$ | async)?.pristine\"\n    >\n    <mat-hint *ngIf=\"hint\">{{hint}}</mat-hint>\n\n    <div class=\"layout-row\" matSuffix *ngIf=\"searchModel.userDefinedAttributes$ | async as userDefinedFilters\">\n\n      <button mat-icon-button type=\"button\"\n              *ngIf=\"userDefinedFilters.length > 0\"\n              (click)=\"clearSearch($event)\"\n              name=\"clear\" aria-label=\"Clear\">\n        <mat-icon>close</mat-icon>\n      </button>\n\n      <button mat-icon-button type=\"button\"\n              *ngIf=\"overlayState.hasOverlay\" name=\"openPanel\"\n              [elderOverlayTrigger]=\"searchPanel\" (click)=\"blurFocus($event)\">\n        <mat-icon\n          [matBadge]=\"userDefinedFilters.length\"\n          matBadgeSize=\"small\"\n          [matBadgeOverlap]=\"true\"\n          [matBadgeHidden]=\"userDefinedFilters.length == 0\"\n          matBadgeColor=\"accent\"\n          [color]=\"userDefinedFilters.length > 0 ? 'accent' : undefined\"\n        >\n          filter_list\n        </mat-icon>\n      </button>\n    </div>\n  </mat-form-field>\n</div>\n\n\n<!-- Overlay Panel for advanced search -->\n<elder-overlay #searchPanel=\"elderOverlay\">\n  <elder-dialog-panel class=\"elder-search-panel-container\">\n\n    <!-- Project the users search inputs here -->\n    <ng-content select=\"elder-search-panel\"></ng-content>\n\n    <div class=\"layout-row place-between-center\">\n      <button mat-raised-button type=\"button\" name=\"clear\"\n              (click)=\"clearSearch($event)\">{{'context.reset' | translate}}\n      </button>\n\n      <button mat-raised-button type=\"button\" name=\"ok\" color=\"primary\"\n              (click)=\"searchPanel.closeOverlay()\">Ok\n      </button>\n    </div>\n  </elder-dialog-panel>\n</elder-overlay>\n", styles: [".elder-search-box-field{margin-top:4px;margin-bottom:4px}.elder-search-panel-container{min-width:250px}\n"] }]
+            args: [{ selector: 'elder-search-box', exportAs: 'elderSearchBox', host: { 'class': 'elder-form-field-host' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-row place-stretch-center full flex\" style=\"overflow: hidden\">\n  <mat-form-field\n    *ngIf=\"overlayState$ | async as overlayState\"\n    [appearance]=\"appearance\"\n    class=\"elder-search-box-field flex-auto\" subscriptSizing=\"dynamic\"\n    [elderDense]=\"dense\">\n\n    <button matPrefix mat-icon-button type=\"button\"\n            [elderOverlayTrigger]=\"searchPanel\" (click)=\"blurFocus($event)\"\n    >\n      <mat-icon>search</mat-icon>\n    </button>\n\n    <input matInput type=\"text\" [name]=\"name\" [placeholder]=\"placeholder\" #search cdkFocusInitial\n           ngModel\n           elderSearchInput [elderSearchInputKey]=\"queryKey\" #searchInput=\"elderSearchInput\"\n           [autocomplete]=\"(autoPanel && overlayState.hasOverlay) ? 'off' : autocomplete\"\n           [elderOverlayOrigin]=\"searchPanel\"\n           [elderOverlayTrigger]=\"searchPanel\"\n           [elderOverlayTriggerType]=\"'focus'\"\n           [elderOverlayTriggerEnabled]=\"autoPanel && overlayState.hasOverlay && (searchInput?.state$ | async)?.pristine\"\n    >\n    <mat-hint *ngIf=\"hint\">{{hint}}</mat-hint>\n\n    <div class=\"layout-row\" matSuffix *ngIf=\"searchModel.userDefinedAttributes$ | async as userDefinedFilters\">\n\n      <button mat-icon-button type=\"button\"\n              *ngIf=\"userDefinedFilters.length > 0\"\n              (click)=\"clearSearch($event)\"\n              name=\"clear\" aria-label=\"Clear\">\n        <mat-icon>close</mat-icon>\n      </button>\n\n      <button mat-icon-button type=\"button\"\n              *ngIf=\"overlayState.hasOverlay\" name=\"openPanel\"\n              [elderOverlayTrigger]=\"searchPanel\" (click)=\"blurFocus($event)\">\n        <mat-icon\n          [matBadge]=\"userDefinedFilters.length\"\n          matBadgeSize=\"small\"\n          [matBadgeOverlap]=\"true\"\n          [matBadgeHidden]=\"userDefinedFilters.length == 0\"\n          matBadgeColor=\"accent\"\n          [color]=\"userDefinedFilters.length > 0 ? 'accent' : undefined\"\n        >\n          filter_list\n        </mat-icon>\n      </button>\n    </div>\n  </mat-form-field>\n</div>\n\n\n<!-- Overlay Panel for advanced search -->\n<elder-overlay #searchPanel=\"elderOverlay\">\n  <elder-dialog-panel class=\"elder-search-panel-container\">\n\n    <!-- Project the users search inputs here -->\n    <ng-content select=\"elder-search-panel\"></ng-content>\n\n    <div class=\"layout-row place-between-center\">\n      <button mat-raised-button type=\"button\" name=\"clear\"\n              (click)=\"clearSearch($event)\">{{'context.reset' | translate}}\n      </button>\n\n      <button mat-raised-button type=\"button\" name=\"ok\" color=\"primary\"\n              (click)=\"searchPanel.closeOverlay()\">Ok\n      </button>\n    </div>\n  </elder-dialog-panel>\n</elder-overlay>\n", styles: [".elder-search-box-field{margin-top:4px;margin-bottom:4px}.elder-search-panel-container{min-width:250px}\n"] }]
         }], ctorParameters: function () { return [{ type: ElderSearchContextDirective }]; }, propDecorators: { search: [{
                 type: ViewChild,
                 args: ['search']
@@ -26682,8 +26703,7 @@ class ElderSearchContextUrlBindingDirective {
         this.urlBindingService.initialSearchMap$.pipe(first(), takeUntil(this._unsubscribe$), filter(searchMap => searchMap.has(this._urlBinding)), map(searchMap => searchMap.get(this._urlBinding)), map(filterMap => Array.from(filterMap.filters.values()))).subscribe(filters => {
             this.searchContext.registerInitialFilters(filters);
         });
-        this.searchContext.filters$.pipe(takeUntil(this._unsubscribe$), skip(2) //Skip empty and skip initial filter
-        ).subscribe(filters => this.urlBindingService.updateFiltersForContext(this._urlBinding, filters));
+        this.searchContext.filters$.pipe(takeUntil(this._unsubscribe$)).subscribe(filters => this.urlBindingService.updateFiltersForContext(this._urlBinding, filters));
     }
     ngOnDestroy() {
         this._unsubscribe$.next();