@elderbyte/ngx-starter 17.11.0-beta5 → 17.11.0-beta6

package/fesm2022/elderbyte-ngx-starter.mjs

@@ -5,7 +5,7 @@ import { Pipe, LOCALE_ID, Inject, NgModule, Optional, SkipSelf, Directive, Outpu
 import * as i1 from '@angular/platform-browser';
 import { Duration, Period, TemporalQueries, LocalTime, Instant, LocalDate, nativeJs, ZoneId, DateTimeFormatter, convert, ZonedDateTime, Temporal } from '@js-joda/core';
 import { LoggerFactory } from '@elderbyte/ts-logger';
-import { timer, ReplaySubject, finalize, exhaustMap, concat, defer, BehaviorSubject, Subject, of, switchMap, combineLatest, EMPTY, merge, throwError, forkJoin, mergeWith, Observable, zip, mergeMap as mergeMap$1, fromEvent, combineLatestWith as combineLatestWith$1, skipUntil, NEVER } from 'rxjs';
+import { timer, ReplaySubject, finalize, exhaustMap, concat, defer, BehaviorSubject, Subject, of, switchMap, combineLatest, EMPTY, merge, throwError, forkJoin, mergeWith, Observable, zip, mergeMap as mergeMap$1, fromEvent, skipUntil, combineLatestWith as combineLatestWith$1, NEVER } from 'rxjs';
 import { tap, takeUntil, takeWhile, map, filter, distinctUntilChanged, debounceTime, catchError, first, take, switchMap as switchMap$1, mergeMap, expand, reduce, startWith, skip, delay, share, combineLatestWith, skipWhile, timeout } from 'rxjs/operators';
 import * as i1$2 from '@angular/common/http';
 import { HttpParams, HttpEventType, HttpRequest, HttpClient, HttpErrorResponse, HTTP_INTERCEPTORS } from '@angular/common/http';
@@ -22393,6 +22393,7 @@ class ElderMultiSelectChipsComponent extends ElderMultiSelectBase {
         this.chipTemplate$ = new BehaviorSubject(null);
         this.chipAvatarTemplate$ = new BehaviorSubject(null);
         this.customInputTemplate$ = new BehaviorSubject(null);
+        this.refresh$ = new BehaviorSubject(true);
         this.log = LoggerFactory.getLogger(this.constructor.name);
         this.placeholder = '...';
         this.selectChips$ = combineLatest([
@@ -22401,7 +22402,8 @@ class ElderMultiSelectChipsComponent extends ElderMultiSelectBase {
             this.state$,
             this.displayPropertyResolver$,
             this.readonly$,
-            this.disabled$
+            this.disabled$,
+            this.refresh$
         ]).pipe(map(([entities, entityIds, state, dPR]) => this.buildChipModelsOrFallback(entities, entityIds, state, dPR)));
         this.templates$ = combineLatest([
             this.chipTemplate$,
@@ -22489,6 +22491,9 @@ class ElderMultiSelectChipsComponent extends ElderMultiSelectBase {
         // TODO this.inputControl?.blur();
         // this.customInputTemplate.blur()
     }
+    refresh() {
+        this.refresh$.next(true);
+    }
     /***************************************************************************
      *                                                                         *
      * Private methods                                                         *
@@ -23287,15 +23292,29 @@ class ElderFilterChipTemplateComponent {
     get avatarRef$() {
         return this._avatarRef$.asObservable();
     }
+    /***************************************************************************
+     *                                                                         *
+     * Public API                                                              *
+     *                                                                         *
+     **************************************************************************/
+    currentIcon(id) {
+        const fun = this.avatarResolverFn();
+        if (id != null || id != undefined) {
+            return fun ? fun(id) : 'help_outline';
+        }
+        else {
+            return 'help_outline';
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ElderFilterChipTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: ElderFilterChipTemplateComponent, isStandalone: true, selector: "elder-filter-chip-template", inputs: { avatarResolverFn: { classPropertyName: "avatarResolverFn", publicName: "avatarResolverFn", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "avatarRef", first: true, predicate: ["avatar"], descendants: true }], ngImport: i0, template: "<ng-template #avatar let-chipModel>\n  @if(avatarResolverFn(); as resolveAvatar) {\n    <mat-icon class=\"material-icons-outlined\">{{resolveAvatar(chipModel?.value?.id)}}</mat-icon>\n  }\n</ng-template>\n", styles: [".elder-chip-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.elder-trailing-icon{color:var(--mdc-chip-with-trailing-icon-trailing-icon-color);opacity:.54}.cdk-drag-preview{box-sizing:border-box;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.11", type: ElderFilterChipTemplateComponent, isStandalone: true, selector: "elder-filter-chip-template", inputs: { avatarResolverFn: { classPropertyName: "avatarResolverFn", publicName: "avatarResolverFn", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "avatarRef", first: true, predicate: ElderSelectChipAvatarDirective, descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<mat-icon\n  *elderSelectChipAvatar=\"let chipModel\"\n  class=\"material-icons-outlined\">\n  {{currentIcon(chipModel?.value?.id)}}\n</mat-icon>\n", styles: [".elder-chip-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.elder-trailing-icon{color:var(--mdc-chip-with-trailing-icon-trailing-icon-color);opacity:.54}.cdk-drag-preview{box-sizing:border-box;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: ElderSelectChipAvatarDirective, selector: "[elderSelectChipAvatar]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ElderFilterChipTemplateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'elder-filter-chip-template', standalone: true, imports: [AsyncPipe, MatIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #avatar let-chipModel>\n  @if(avatarResolverFn(); as resolveAvatar) {\n    <mat-icon class=\"material-icons-outlined\">{{resolveAvatar(chipModel?.value?.id)}}</mat-icon>\n  }\n</ng-template>\n", styles: [".elder-chip-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.elder-trailing-icon{color:var(--mdc-chip-with-trailing-icon-trailing-icon-color);opacity:.54}.cdk-drag-preview{box-sizing:border-box;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
+            args: [{ selector: 'elder-filter-chip-template', standalone: true, imports: [MatIcon, ElderSelectChipAvatarDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-icon\n  *elderSelectChipAvatar=\"let chipModel\"\n  class=\"material-icons-outlined\">\n  {{currentIcon(chipModel?.value?.id)}}\n</mat-icon>\n", styles: [".elder-chip-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.elder-trailing-icon{color:var(--mdc-chip-with-trailing-icon-trailing-icon-color);opacity:.54}.cdk-drag-preview{box-sizing:border-box;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
         }], propDecorators: { avatarRef: [{
                 type: ViewChild,
-                args: ['avatar']
+                args: [ElderSelectChipAvatarDirective, { read: TemplateRef, static: true }]
             }] } });
 
 class IncludeExcludeState {
@@ -23323,6 +23342,7 @@ class IncludeExcludeSelectionModel {
          *                                                                         *
          **************************************************************************/
         this.log = LoggerFactory.getLogger(this.constructor.name);
+        this._defaultInitialValue = IncludeExcludeValue.INCLUDE;
         this.stateById$ = new BehaviorSubject(new Map());
         if (!strategy)
             throw new Error('strategy is required!');
@@ -23345,11 +23365,27 @@ class IncludeExcludeSelectionModel {
     set strategy(strategy) {
         this._strategy = strategy;
     }
+    get defaultInitialValue() {
+        return this._defaultInitialValue;
+    }
+    set defaultInitialValue(strategy) {
+        this._defaultInitialValue = strategy;
+    }
     /***************************************************************************
      *                                                                         *
      * Public API                                                              *
      *                                                                         *
      **************************************************************************/
+    findIncluded() {
+        return this.selection
+            .filter(s => s.mode === IncludeExcludeValue.INCLUDE)
+            .map(s => s.id);
+    }
+    findExcluded() {
+        return this.selection
+            .filter(s => s.mode === IncludeExcludeValue.EXCLUDE)
+            .map(s => s.id);
+    }
     cycleExisting(id) {
         const existingState = this.findStateById(id);
         if (existingState) {
@@ -23367,11 +23403,14 @@ class IncludeExcludeSelectionModel {
                 newStates.set(id, current.get(id));
             }
             else {
-                newStates.set(id, new IncludeExcludeState(id, initialValueOverride ?? this.initialValueByStrategy()));
+                newStates.set(id, new IncludeExcludeState(id, initialValueOverride ?? this.defaultInitialValue));
             }
         });
         this.stateById$.next(newStates);
     }
+    clear() {
+        this.replaceSelection([]);
+    }
     replaceSelection(newStates) {
         this.stateById$.next(this.toStateMap(newStates));
     }
@@ -23400,16 +23439,6 @@ class IncludeExcludeSelectionModel {
      * Private methods                                                         *
      *                                                                         *
      **************************************************************************/
-    initialValueByStrategy() {
-        switch (this._strategy) {
-            case 'FULL_CYCLE':
-                return IncludeExcludeValue.NEUTRAL;
-            case 'TOGGLE':
-                return IncludeExcludeValue.INCLUDE;
-            default:
-                throw new Error('Unsupported cycle strategy: ' + this._strategy);
-        }
-    }
     nextValueByStrategy(current) {
         switch (this._strategy) {
             case 'FULL_CYCLE':
@@ -23503,27 +23532,165 @@ class ElderChipFilterStyleResolver {
                     return this.neutralChipSpec;
             }
         }
+        return this.neutralChipSpec;
     }
-    resolveAvatar(filterEntity) {
-        switch (filterEntity.mode) {
-            case IncludeExcludeValue.NEUTRAL:
-                return 'radio_button_unchecked';
-            case IncludeExcludeValue.INCLUDE:
-                return 'task_alt';
-            case IncludeExcludeValue.EXCLUDE:
-                return 'block';
-            default:
-                return 'circle';
+    resolveAvatarIcon(filterEntity) {
+        if (filterEntity) {
+            switch (filterEntity.mode) {
+                case IncludeExcludeValue.NEUTRAL:
+                    return 'radio_button_unchecked';
+                case IncludeExcludeValue.INCLUDE:
+                    return 'task_alt';
+                case IncludeExcludeValue.EXCLUDE:
+                    return 'block';
+                default:
+                    return 'circle';
+            }
         }
+        return 'help_outline';
     }
 }
 
+/**
+ * Adds the ability to toggle select chips of a ElderMultiSelectChipsComponent by
+ * binding it to a IncludeExcludeSelectionModel.
+ */
+class ElderChipsIncludeExcludeDirective {
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+    constructor(elderMultiSelectChips, selectionModel, vcr, destroyRef) {
+        this.elderMultiSelectChips = elderMultiSelectChips;
+        this.selectionModel = selectionModel;
+        this.vcr = vcr;
+        this.destroyRef = destroyRef;
+        /***************************************************************************
+         *                                                                         *
+         * Fields                                                                  *
+         *                                                                         *
+         **************************************************************************/
+        this.log = LoggerFactory.getLogger(this.constructor.name);
+        this.chipStyleResolver = new ElderChipFilterStyleResolver();
+        this.setupFilterChips();
+        this.setupElderMultiSelectChipsListeners();
+        selectionModel.selection$.pipe(takeUntilDestroyed(), debounceTime(10)).subscribe({
+            next: states => this.refreshChips(states)
+        });
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Properties                                                              *
+     *                                                                         *
+     **************************************************************************/
+    set cycleStrategy(strategy) {
+        this.selectionModel.strategy = strategy;
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Private methods                                                         *
+     *                                                                         *
+     **************************************************************************/
+    setupFilterChips() {
+        const chipTemplate = this.createFilterChipTemplate();
+        this.elderMultiSelectChips.chipSpecFn = (entity) => this.resolveChipSpec(entity);
+        chipTemplate.avatarRef$.pipe(takeUntilDestroyed(this.destroyRef), filter((avatarRef) => !!avatarRef), first()).subscribe((avatarRef) => {
+            this.elderMultiSelectChips.chipAvatarTemplate = avatarRef;
+        });
+    }
+    createFilterChipTemplate() {
+        const ref = this.vcr.createComponent(ElderFilterChipTemplateComponent);
+        ref.setInput('avatarResolverFn', (id) => this.resolveAvatarIcon(id));
+        return ref.instance;
+    }
+    setupElderMultiSelectChipsListeners() {
+        this.elderMultiSelectChips.currentClicked
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((entity) => this.handleChipClick(entity));
+        this.elderMultiSelectChips.entityIdsUpdated.pipe(// Updated is a user event when entries are modified
+        takeUntilDestroyed(this.destroyRef), filter(entityIds => !!entityIds)).subscribe(entityIds => {
+            this.selectionModel.initTo(entityIds);
+        });
+    }
+    resolveChipSpec(entity) {
+        return this.chipStyleResolver.resolveChipSpec(this.findFilterEntityByEntity(entity));
+    }
+    resolveAvatarIcon(id) {
+        return this.chipStyleResolver.resolveAvatarIcon(this.findFilterEntityById(id));
+    }
+    handleChipClick(entity) {
+        const entityId = this.elderMultiSelectChips.getEntityId(entity);
+        const newState = this.selectionModel.cycleExisting(entityId);
+        if (!newState) {
+            this.log.warn('The entity id "' + entityId + '" is not in the selection');
+        }
+    }
+    refreshChips(selected) {
+        if (this.ensureChipsNoChanges(selected)) {
+            this.elderMultiSelectChips.refresh();
+        }
+    }
+    ensureChipsNoChanges(selected) {
+        const requiredIds = selected
+            .filter(s => s.mode != IncludeExcludeValue.NEUTRAL)
+            .map(s => s.id);
+        const currentIds = this.elderMultiSelectChips.entityIds ?? [];
+        const currentIdSet = new Set(currentIds);
+        const missingIds = requiredIds
+            .filter(required => !currentIdSet.has(required));
+        if (missingIds.length > 0) {
+            this.elderMultiSelectChips.entityIds = [...currentIds, ...missingIds];
+            return false;
+        }
+        else {
+            return true;
+        }
+    }
+    findFilterEntityByEntity(entity) {
+        const searchedId = this.elderMultiSelectChips.getEntityId(entity);
+        return this.findFilterEntityById(searchedId);
+    }
+    findFilterEntityById(id) {
+        return this.selectionModel.findStateById(id);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ElderChipsIncludeExcludeDirective, deps: [{ token: ElderMultiSelectChipsComponent }, { token: IncludeExcludeSelectionModel }, { token: i0.ViewContainerRef }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.11", type: ElderChipsIncludeExcludeDirective, isStandalone: true, selector: "[elderChipsIncludeExclude]", inputs: { cycleStrategy: "cycleStrategy" }, providers: [
+            {
+                provide: IncludeExcludeSelectionModel,
+                useFactory: (existing) => {
+                    return existing ?? new IncludeExcludeSelectionModel('FULL_CYCLE');
+                },
+                deps: [[new Optional(), new SkipSelf(), IncludeExcludeSelectionModel]]
+            }
+        ], exportAs: ["elderChipsIncludeExclude"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ElderChipsIncludeExcludeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[elderChipsIncludeExclude]',
+                    exportAs: 'elderChipsIncludeExclude',
+                    standalone: true,
+                    providers: [
+                        {
+                            provide: IncludeExcludeSelectionModel,
+                            useFactory: (existing) => {
+                                return existing ?? new IncludeExcludeSelectionModel('FULL_CYCLE');
+                            },
+                            deps: [[new Optional(), new SkipSelf(), IncludeExcludeSelectionModel]]
+                        }
+                    ]
+                }]
+        }], ctorParameters: () => [{ type: ElderMultiSelectChipsComponent }, { type: IncludeExcludeSelectionModel }, { type: i0.ViewContainerRef }, { type: i0.DestroyRef }], propDecorators: { cycleStrategy: [{
+                type: Input
+            }] } });
+
 /**
  * Immutable representation of the state of an search input
  */
 class SearchInputState {
-    static of(attribute, filters, pristine, userEvent) {
-        return new SearchInputState(attribute, filters, pristine, userEvent);
+    static of(queryKey, filters, pristine, userEvent) {
+        return new SearchInputState(queryKey, filters, pristine, userEvent);
     }
     static unknown() {
         return new SearchInputState(null, [], true, false);
@@ -23537,7 +23704,7 @@ class SearchInputState {
     /**
      * attribute The name
      */
-    attribute, 
+    queryKey, 
     /**
      * value of the input
      */
@@ -23550,7 +23717,7 @@ class SearchInputState {
      * Was the input changed by a user interaction
      */
     userEvent) {
-        this.attribute = attribute;
+        this.queryKey = queryKey;
         this.filters = filters;
         this.pristine = pristine;
         this.userEvent = userEvent;
@@ -23601,127 +23768,90 @@ class SearchInputState {
                 pristineNow = pristine;
             }
         }
-        return SearchInputState.of(this.attribute, [filter], pristineNow, true);
+        return SearchInputState.of(this.queryKey, [filter], pristineNow, true);
     }
 }
 
-/**
- * Search name adapter for input controls.
- */
-class ElderInitialValueDirective {
-    /***************************************************************************
-     *                                                                         *
-     * Constructor                                                             *
-     *                                                                         *
-     **************************************************************************/
-    constructor(ngModel) {
-        //TODO: The debounce time is a hacky workaround, find a proper way to set initial value.
-        // ngModel regular and two way binding differ in initial value, which led to this solution
-        this.ngModel = ngModel;
-        /***************************************************************************
-         *                                                                         *
-         * Fields                                                                  *
-         *                                                                         *
-         **************************************************************************/
-        this.log = LoggerFactory.getLogger(this.constructor.name);
-        this.initialValue$ = new BehaviorSubject(null);
-        this.destroy$ = new Subject();
-        this._initialDone$ = new Subject();
-        const ngModelValue$ = of('dummy')
-            .pipe(delay(10), map(() => this.ngModel.model));
-        ngModelValue$
-            .pipe(combineLatestWith$1(this.initialValue$), takeUntil(this._initialDone$), takeUntil(this.destroy$)).subscribe(([ngModelValue, initialValue]) => {
-            if (initialValue) {
-                ngModel.control.setValue(initialValue);
-            }
-            this._initialDone$.next();
-            this._initialDone$.complete();
-        });
+/***************************************************************************
+ *                                                                         *
+ * Common functions                                                        *
+ *                                                                         *
+ **************************************************************************/
+class FilterCommons {
+    static isArrayAndNotEmpty(value) {
+        return this.isArray(value) && this.isNotEmptyArray(value);
     }
-    /***************************************************************************
-     *                                                                         *
-     * Life Cycle                                                              *
-     *                                                                         *
-     **************************************************************************/
-    /***************************************************************************
-     *                                                                         *
-     * Properties                                                              *
-     *                                                                         *
-     **************************************************************************/
-    get initialDone$() {
-        return this._initialDone$.asObservable();
+    static isArray(value) {
+        return value !== null && Array.isArray(value);
     }
-    get valueChanges$() {
-        return this.ngModel.control.valueChanges
-            .pipe(takeUntil(this.destroy$));
+    static isNotEmptyArray(value) {
+        return value.length > 0;
     }
-    setValue(value) {
-        if (value) {
-            this.ngModel.control.setValue(value);
+    static getValuesIfArrayElseEmpty(value) {
+        if (this.isArray(value)) {
+            return value;
         }
-        this.initialValue$.next(value);
-    }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
+        return [];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ElderInitialValueDirective, deps: [{ token: i3.NgModel, host: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.11", type: ElderInitialValueDirective, isStandalone: true, selector: "[elderInitialValue]", exportAs: ["elderInitialValue"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ElderInitialValueDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[elderInitialValue]',
-                    exportAs: 'elderInitialValue',
-                    standalone: true
-                }]
-        }], ctorParameters: () => [{ type: i3.NgModel, decorators: [{
-                    type: Host
-                }] }] });
 
-class DefaultInputFilterConverter {
-    /***************************************************************************
-     *                                                                         *
-     * Static Builders                                                         *
-     *                                                                         *
-     **************************************************************************/
-    static of(queryKeyProviderFn) {
-        return new DefaultInputFilterConverter(queryKeyProviderFn);
-    }
+class IncludeExcludeModelFilterAdapter {
     /***************************************************************************
      *                                                                         *
      * Constructors                                                            *
      *                                                                         *
      **************************************************************************/
-    constructor(queryKeyProviderFn) {
-        this.queryKeyProviderFn = queryKeyProviderFn;
+    constructor(includeExcludeModel, includeQueryKey, excludeQueryKey) {
+        this.includeExcludeModel = includeExcludeModel;
+        this.includeQueryKey = includeQueryKey;
+        this.excludeQueryKey = excludeQueryKey;
     }
     /***************************************************************************
      *                                                                         *
      * Public API                                                              *
      *                                                                         *
      **************************************************************************/
-    convertToFilters(inputValue) {
+    applyFilters(filters) {
+        const filterMap = this.convertFiltersToMap(filters);
+        const includeIds = this.findArrayOrNull(filterMap, this.includeQueryKey);
+        const excludeIds = this.findArrayOrNull(filterMap, this.excludeQueryKey);
+        this.includeExcludeModel.updateStates([
+            ...this.buildStates(includeIds, IncludeExcludeValue.INCLUDE),
+            ...this.buildStates(excludeIds, IncludeExcludeValue.EXCLUDE)
+        ]);
+    }
+    toFilters() {
+        const includedIds = this.includeExcludeModel.findIncluded();
+        const excludedIds = this.includeExcludeModel.findExcluded();
         return [
-            new Filter(this.queryKey(), inputValue)
+            new Filter(this.includeQueryKey, this.nonEmptyArrayOrNull(includedIds)),
+            new Filter(this.excludeQueryKey, this.nonEmptyArrayOrNull(excludedIds))
         ];
     }
-    convertToValue(filters) {
-        const queryKey = this.queryKey();
-        for (const filter of filters) {
-            if (filter.key === queryKey) {
-                return filter.value;
-            }
-        }
-        return null;
-    }
     /***************************************************************************
      *                                                                         *
      * Private methods                                                         *
      *                                                                         *
      **************************************************************************/
-    queryKey() {
-        return this.queryKeyProviderFn();
+    nonEmptyArrayOrNull(value) {
+        if (FilterCommons.isArrayAndNotEmpty(value)) {
+            return value;
+        }
+        return null;
+    }
+    buildStates(ids, value) {
+        return ids
+            ? ids.map(id => new IncludeExcludeState(id, value))
+            : [];
+    }
+    convertFiltersToMap(filters) {
+        const map = new Map();
+        filters.forEach(filter => map.set(filter.key, filter.value));
+        return map;
+    }
+    findArrayOrNull(values, key) {
+        const value = this.nonEmptyArrayOrNull(values.get(key));
+        return value ? value : null;
     }
 }
 
@@ -23936,7 +24066,7 @@ class ElderSearchContextDirective {
     /**
      * Returns the current user touched attributes. (ignoring fallbacks)
      */
-    get userDefinedAttributes$() {
+    get touchedSearchInputs$() {
         return this.states$.pipe(map(states => states
             .filter(s => !s.pristine)
             .filter(s => !s.hasFallbackValue)));
@@ -23953,7 +24083,7 @@ class ElderSearchContextDirective {
         if (this.initialFiltersRegistered) {
             searchInput.applyFilters(this.initialFilters);
         }
-        this.log.debug('Registering search input [' + searchInput.name + '].');
+        this.log.debug('Registering search input [' + searchInput.queryKey + '].');
         this._searchInputs$.next([
             ...this.searchInputs(),
             searchInput
@@ -24019,17 +24149,17 @@ class ElderSearchContextDirective {
         this.applyFiltersToInputs(mergedFilters);
     }
     applyFiltersToInputs(filters) {
-        this.saveInitialFitlers(filters);
+        this.saveInitialFilters(filters);
         if (filters.length > 0) {
-            const inputsByName = this.searchInputsByName();
-            this.log.warn('applyFiltersToInputs [' + Array.from(inputsByName.keys()) + ']', {
+            const inputsByKey = this.searchInputsByQueryKey();
+            this.log.warn('applyFiltersToInputs [' + Array.from(inputsByKey.keys()) + ']', {
                 filters: filters,
-                inputsByName: inputsByName
+                inputsByQueryKey: inputsByKey
             });
             this.searchInputs().forEach(searchInput => searchInput.applyFilters(filters));
         }
     }
-    saveInitialFitlers(filters) {
+    saveInitialFilters(filters) {
         this.initialFiltersRegistered = true;
         this.initialFilters.push(...filters);
     }
@@ -24038,10 +24168,10 @@ class ElderSearchContextDirective {
         filters.forEach(filter => map.set(filter.key, filter));
         return map;
     }
-    searchInputsByName() {
+    searchInputsByQueryKey() {
         const inputs = this._searchInputs$.getValue();
         const map = new Map();
-        inputs.forEach(input => map.set(input.name, input));
+        inputs.forEach(input => map.set(input.queryKey, input));
         return map;
     }
     convertToFilters(states) {
@@ -24070,16 +24200,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
             }] } });
 
 /**
- * Search name adapter for input controls.
+ * Binds a IncludeExcludeModel to a SearchContexts Filter.
  */
-class ElderSearchInputDirective {
+class ElderSearchIncludeExcludeDirective {
     /***************************************************************************
      *                                                                         *
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    constructor(searchContext, ngModel) {
+    constructor(searchContext, destroyRef, selectionModel, ngModel) {
         this.searchContext = searchContext;
+        this.destroyRef = destroyRef;
+        this.selectionModel = selectionModel;
         this.ngModel = ngModel;
         /***************************************************************************
          *                                                                         *
@@ -24088,9 +24220,8 @@ class ElderSearchInputDirective {
          **************************************************************************/
         this.log = LoggerFactory.getLogger(this.constructor.name);
         this._queryKey$ = new BehaviorSubject(null);
-        this._inputConverter = DefaultInputFilterConverter.of(() => this.name);
-        this.destroy$ = new Subject();
-        this._initialValueDirective = new ElderInitialValueDirective(ngModel);
+        this.includeSuffix = '';
+        this.initialDone$ = new Subject();
         this._state$ = this.buildInputStateObservable().pipe(
         // tap(state => this.log.error('EMIT SEARCH INPUT STATE [' + state.queryKey + ']: ' + state.queryValue + (state.pristine ? '(pristine)' : ''), state))
         );
@@ -24103,17 +24234,9 @@ class ElderSearchInputDirective {
     ngOnInit() {
         this._extractedName = this.extractName();
         this.updateQueryKey();
+        this.includeExcludeAdapter = new IncludeExcludeModelFilterAdapter(this.selectionModel, this.queryKey + this.includeSuffix, this.queryKey + this.excludeSuffix);
         this.searchContext.register(this);
     }
-    ngAfterViewInit() {
-        this._extractedName = this.extractName();
-        this.updateQueryKey();
-        this.log.debug(this.queryKey + ' | ' + this.resolvePath);
-    }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
-    }
     /***************************************************************************
      *                                                                         *
      * Properties                                                              *
@@ -24132,33 +24255,11 @@ class ElderSearchInputDirective {
     get queryKey$() {
         return this._queryKey$;
     }
-    set inputConverter(inputConverter) {
-        this._inputConverter = inputConverter;
-    }
-    get initialDone$() {
-        return this._initialValueDirective.initialDone$;
-    }
     get state$() {
         return this._state$;
     }
-    get name() {
-        if (this.queryKey) {
-            return this.queryKey;
-        }
-        if (this._extractedName) {
-            return this._extractedName;
-        }
-        throw new Error('Could not determine the search name key name.' +
-            ' Either specify the name property or explicitly set [elderSearchInputKey].');
-    }
-    get value() {
-        return this.ngModel.value;
-    }
     get readonly() {
-        return this.ngModel.isDisabled;
-    }
-    get hasFallback() {
-        return SearchInputState.isValueDefined(this.fallbackValue);
+        return this.ngModel?.isDisabled;
     }
     /***************************************************************************
      *                                                                         *
@@ -24166,10 +24267,10 @@ class ElderSearchInputDirective {
      *                                                                         *
      **************************************************************************/
     applyFilters(filters) {
-        this.setInputValue(this._inputConverter.convertToValue(filters));
+        this.includeExcludeAdapter.applyFilters(filters);
     }
     reset() {
-        this.ngModel.reset();
+        this.selectionModel.replaceSelection([]);
     }
     /***************************************************************************
      *                                                                         *
@@ -24182,472 +24283,57 @@ class ElderSearchInputDirective {
             this._queryKey$.next(newKey);
         }
     }
-    setInputValue(queryString) {
-        const value = this.convertQueryStringToRawModelValue(queryString);
-        this._initialValueDirective.setValue(value);
-    }
-    get valueChanges$() {
-        return this.ngModel.control.valueChanges
-            .pipe(takeUntil(this.destroy$));
-    }
     buildInputStateObservable() {
         const viewStabilized$ = of('stabilized$').pipe(delay(20), first());
-        const inputStateChanges$ = this.valueChanges$.pipe(takeUntil(this.destroy$), map(value => this.buildInputState(value, true)), skipUntil(viewStabilized$), debounceTime(20));
+        const inputStateChanges$ = this.selectionModel.selection$.pipe(takeUntilDestroyed(this.destroyRef), map(value => this.buildInputState(true)), skipUntil(viewStabilized$), tap(() => this.initialDone$.next()), debounceTime(20));
         const startDelayed$ = of('start').pipe(delay(15), map(start => {
-            const state = this.buildInputState(this.ngModel.control.value, false);
-            return state;
+            return this.buildInputState(false);
         }));
         return concat(startDelayed$, inputStateChanges$);
     }
-    buildInputState(controlValue, userEvent) {
-        const queryValue = this.convertRawModelValueToQueryString(controlValue);
-        const filters = this._inputConverter.convertToFilters(queryValue);
-        return new SearchInputState(this.name, filters, this.areAllPristine(filters) || this.isFallbackValue(queryValue), userEvent);
-    }
-    isFallbackValue(queryValue) {
-        if (this.hasFallback) {
-            return (this.fallbackValue === queryValue);
-        }
-        return false;
+    buildInputState(userEvent) {
+        const filters = this.includeExcludeAdapter.toFilters();
+        return new SearchInputState(this.queryKey, filters, this.areAllPristine(filters), userEvent);
     }
     areAllPristine(filters) {
-        return filters.every(f => this.isPristine(f));
-    }
-    isPristine(filter) {
-        return !this.isAttributeValuePresent(filter.value);
-    }
-    convertQueryStringToRawModelValue(queryString) {
-        if (Objects.nonNull(queryString)) {
-            return queryString;
-        }
-        return null;
-    }
-    convertRawModelValueToQueryString(model) {
-        let queryValue = null;
-        if (this.valueAsId != undefined) {
-            queryValue = this.checkAndConvertFaultyValuesToNull(model);
-        }
-        else if (this.isAttributeValuePresent(model)) {
-            // Attribute value is present
-            queryValue = this.resolveValue(model);
+        if (filters.length > 0) {
+            return filters.every(f => this.isPristine(f));
         }
         else {
-            if (this.hasFallback) {
-                queryValue = this.fallbackValue;
-            }
-        }
-        return queryValue;
-    }
-    checkAndConvertFaultyValuesToNull(value) {
-        let fixedValue = value;
-        fixedValue = this.convertEmptyArrayToNull(fixedValue);
-        fixedValue = this.convertEmptyStringToNull(fixedValue);
-        return fixedValue;
-    }
-    convertEmptyArrayToNull(value) {
-        if (value instanceof Array && value.length === 0) {
-            return null;
+            return true;
         }
-        return value;
     }
-    convertEmptyStringToNull(value) {
-        if (typeof value === 'string' && value.length === 0) {
-            return null;
-        }
-        return value;
+    isPristine(filter) {
+        return !this.isAttributeValuePresent(filter.value);
     }
     isAttributeValuePresent(value) {
         return SearchInputState.isValueDefined(value)
             && (value + '').length !== 0;
     }
-    resolveValue(value) {
-        if (Objects.nonNull(value)) {
-            if (value instanceof Array) {
-                const resolvedValues = value
-                    .map(v => this.resolveSingleValue(v))
-                    .filter(v => Objects.nonNull(v));
-                return this.concatIfNecessary(resolvedValues);
-            }
-            else {
-                return this.resolveSingleValue(value);
-            }
-        }
-        else {
-            return null;
-        }
-    }
-    resolveSingleValue(value) {
-        value = PropertyPathUtil.resolveValue(value, this.resolvePath);
-        value = this.valueTransform ? this.valueTransform(value) : value;
-        if (Objects.nonNull(value)) {
-            if (value instanceof Array) {
-                return value
-                    .filter(i => Objects.nonNull(i))
-                    .map(i => i.toString());
-            }
-            else {
-                return value.toString();
-            }
-        }
-        else {
-            return null;
-        }
-    }
     extractName() {
-        return this.ngModel.name;
-    }
-    concatIfNecessary(values) {
-        const arrays = values.map(v => {
-            if (v instanceof Array) {
-                return v;
-            }
-            else {
-                return [v];
-            }
-        });
-        return CollectionUtil.flatten(arrays);
+        return this.ngModel?.name;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", 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: "17.3.11", type: ElderSearchInputDirective, isStandalone: true, selector: "[elderSearchInput]", inputs: { valueTransform: ["elderSearchInputTransform", "valueTransform"], resolvePath: ["elderSearchInput", "resolvePath"], dataSource: "dataSource", fallbackValue: ["elderSearchInputFallback", "fallbackValue"], valueAsId: "valueAsId", queryKey: ["elderSearchInputKey", "queryKey"] }, exportAs: ["elderSearchInput"], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ElderSearchInputDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[elderSearchInput]',
-                    exportAs: 'elderSearchInput',
-                    standalone: true
-                }]
-        }], ctorParameters: () => [{ type: ElderSearchContextDirective }, { type: i3.NgModel, decorators: [{
-                    type: Host
-                }] }], propDecorators: { valueTransform: [{
-                type: Input,
-                args: ['elderSearchInputTransform']
-            }], resolvePath: [{
-                type: Input,
-                args: ['elderSearchInput']
-            }], dataSource: [{
-                type: Input
-            }], fallbackValue: [{
-                type: Input,
-                args: ['elderSearchInputFallback']
-            }], valueAsId: [{
-                type: Input
-            }], queryKey: [{
-                type: Input,
-                args: ['elderSearchInputKey']
-            }] } });
-
-class ElderChipsFilterDirective {
-    /***************************************************************************
-     *                                                                         *
-     * Constructor                                                             *
-     *                                                                         *
-     **************************************************************************/
-    constructor(elderMultiSelectChips, elderSearchInput, vcr, destroyRef) {
-        this.elderMultiSelectChips = elderMultiSelectChips;
-        this.elderSearchInput = elderSearchInput;
-        this.vcr = vcr;
-        this.destroyRef = destroyRef;
-        /***************************************************************************
-         *                                                                         *
-         * Fields                                                                  *
-         *                                                                         *
-         **************************************************************************/
-        this.log = LoggerFactory.getLogger(this.constructor.name);
-        this.selectionModel = new IncludeExcludeSelectionModel('FULL_CYCLE');
-        this.chipStyleResolver = new ElderChipFilterStyleResolver();
-        this.setupFilterChips();
-        this.setupElderMultiSelectChipsListeners();
-    }
-    /***************************************************************************
-     *                                                                         *
-     * Properties                                                              *
-     *                                                                         *
-     **************************************************************************/
-    set cycleStrategy(strategy) {
-        this.selectionModel.strategy = strategy;
-    }
-    /***************************************************************************
-     *                                                                         *
-     * Private methods                                                         *
-     *                                                                         *
-     **************************************************************************/
-    setupFilterChips() {
-        const chipTemplate = this.createFilterChipTemplate();
-        this.elderMultiSelectChips.chipSpecFn = (entity) => this.resolveChipSpec(entity);
-        chipTemplate.avatarRef$.pipe(takeUntilDestroyed(this.destroyRef), filter((avatarRef) => !!avatarRef), first()).subscribe((avatarRef) => {
-            this.elderMultiSelectChips.chipAvatarTemplate = avatarRef;
-        });
-    }
-    createFilterChipTemplate() {
-        const ref = this.vcr.createComponent(ElderFilterChipTemplateComponent);
-        ref.setInput('avatarResolverFn', (id) => this.resolveAvatar(id));
-        return ref.instance;
-    }
-    setupElderMultiSelectChipsListeners() {
-        this.elderMultiSelectChips.currentClicked
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe((entity) => this.handleChipClick(entity));
-        this.elderMultiSelectChips.entityIds$.pipe(takeUntilDestroyed(this.destroyRef), skipUntil(this.elderSearchInput.initialDone$), startWith(this.elderMultiSelectChips.entityIds), filter(entityIds => !!entityIds)).subscribe(entityIds => {
-            this.selectionModel.initTo(entityIds);
-        });
-    }
-    resolveChipSpec(entity) {
-        return this.chipStyleResolver.resolveChipSpec(this.findFilterEntityByEntity(entity));
-    }
-    resolveAvatar(id) {
-        return this.chipStyleResolver.resolveAvatar(this.findFilterEntityById(id));
-    }
-    handleChipClick(entity) {
-        const entityId = this.elderMultiSelectChips.getEntityId(entity);
-        const newState = this.selectionModel.cycleExisting(entityId);
-        if (newState) {
-            this.elderMultiSelectChips.appendEntities([]); // TODO Why??
-        }
-        else {
-            this.log.warn('The entity id "' + entityId + '" is not in the selection');
-        }
-    }
-    findFilterEntityByEntity(entity) {
-        const searchedId = this.elderMultiSelectChips.getEntityId(entity);
-        return this.findFilterEntityById(searchedId);
-    }
-    findFilterEntityById(id) {
-        return this.selectionModel.findStateById(id);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ElderChipsFilterDirective, deps: [{ token: ElderMultiSelectChipsComponent }, { token: ElderSearchInputDirective }, { token: i0.ViewContainerRef }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.11", type: ElderChipsFilterDirective, isStandalone: true, selector: "[elderChipsFilter]", inputs: { cycleStrategy: "cycleStrategy" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ElderChipsFilterDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[elderChipsFilter]',
-                    standalone: true
-                }]
-        }], ctorParameters: () => [{ type: ElderMultiSelectChipsComponent }, { type: ElderSearchInputDirective }, { type: i0.ViewContainerRef }, { type: i0.DestroyRef }], propDecorators: { cycleStrategy: [{
-                type: Input
-            }] } });
-
-/***************************************************************************
- *                                                                         *
- * Common functions                                                        *
- *                                                                         *
- **************************************************************************/
-class FilterCommons {
-    static isArrayAndNotEmpty(value) {
-        return this.isArray(value) && this.isNotEmptyArray(value);
-    }
-    static isArray(value) {
-        return value !== null && Array.isArray(value);
-    }
-    static isNotEmptyArray(value) {
-        return value.length > 0;
-    }
-    static getValuesIfArrayElseEmpty(value) {
-        if (this.isArray(value)) {
-            return value;
-        }
-        return [];
-    }
-}
-
-class IncludeExcludeInputConverter {
-    /***************************************************************************
-     *                                                                         *
-     * Constructors                                                            *
-     *                                                                         *
-     **************************************************************************/
-    constructor(selectionModel, queryKey, includeSuffix, excludeSuffix) {
-        this.selectionModel = selectionModel;
-        this.queryKey = queryKey;
-        this.includeSuffix = includeSuffix;
-        this.excludeSuffix = excludeSuffix;
-    }
-    /***************************************************************************
-     *                                                                         *
-     * Public API                                                              *
-     *                                                                         *
-     **************************************************************************/
-    convertToValue(filters) {
-        const values = this.convertFiltersToMap(filters);
-        const includes = this.buildMergeIncludeValues(values);
-        const excludes = this.buildMergeExcludeValues(values);
-        this.updateSelectionModel(includes, excludes);
-        return this.mergeValues(includes, excludes);
-    }
-    convertToFilters(inputValue) {
-        return this.buildFilters(this.buildSplitIncludeValues(inputValue), this.buildSplitExcludeValues(inputValue));
-    }
-    /***************************************************************************
-     *                                                                         *
-     * Private Properties                                                      *
-     *                                                                         *
-     **************************************************************************/
-    get includeQueryKey() {
-        return this.queryKey + this.includeSuffix;
-    }
-    get excludeQueryKey() {
-        return this.queryKey + this.excludeSuffix;
-    }
-    /***************************************************************************
-     *                                                                         *
-     * Private Methods                                                         *
-     *                                                                         *
-     **************************************************************************/
-    findValueOrDefault(values, key) {
-        const value = values.get(key);
-        return value ? value : null;
-    }
-    convertFiltersToMap(filters) {
-        const map = new Map();
-        filters.forEach(filter => map.set(filter.key, filter.value));
-        return map;
-    }
-    flattenFilterValues(values) {
-        const nonNullValues = values.filter(value => !!value);
-        if (nonNullValues.length > 0) {
-            return nonNullValues.flatMap(value => value);
-        }
-        return null;
-    }
-    replaceEmptyArrayWithNull(value) {
-        return FilterCommons.isArrayAndNotEmpty(value) ? value : null;
-    }
-    validateArrayAndReturn(value) {
-        if (FilterCommons.isArrayAndNotEmpty(value)) {
-            return value;
-        }
-        return null;
-    }
-    /***************************************************************************
-     *                                                                         *
-     * Split                                                                   *
-     *                                                                         *
-     **************************************************************************/
-    /**
-     * If the filter before split is an empty array, include will be set to empty and exclude to null
-     * Else, an empty array will always be set to null
-     */
-    buildFilters(includeValue, excludeValue) {
-        let newIncludeValue = includeValue;
-        const newExcludeValue = this.replaceEmptyArrayWithNull(excludeValue);
-        if (FilterCommons.isArrayAndNotEmpty(newExcludeValue)) {
-            newIncludeValue = this.replaceEmptyArrayWithNull(includeValue);
-        }
-        return [
-            new Filter(this.includeQueryKey, newIncludeValue),
-            new Filter(this.excludeQueryKey, newExcludeValue),
-        ];
-    }
-    buildSplitIncludeValues(value) {
-        let splitValues = null;
-        if (FilterCommons.isArrayAndNotEmpty(value)) {
-            const values = FilterCommons.getValuesIfArrayElseEmpty(value);
-            splitValues = values.filter(value => this.selectionModel.isInMode(value, IncludeExcludeValue.INCLUDE));
-        }
-        return this.validateArrayAndReturn(splitValues);
-    }
-    buildSplitExcludeValues(value) {
-        let splitValues = null;
-        if (FilterCommons.isArrayAndNotEmpty(value)) {
-            const values = FilterCommons.getValuesIfArrayElseEmpty(value);
-            splitValues = values
-                .filter(value => this.selectionModel.isInMode(value, IncludeExcludeValue.EXCLUDE));
-        }
-        return this.validateArrayAndReturn(splitValues);
-    }
-    /***************************************************************************
-     *                                                                         *
-     * Merge                                                                   *
-     *                                                                         *
-     **************************************************************************/
-    mergeValues(includeValue, excludeValue) {
-        return this.flattenFilterValues([includeValue, excludeValue]);
-    }
-    updateSelectionModel(includeValue, excludeValue) {
-        const updates = [
-            ...this.buildNewSelectionStates(includeValue, IncludeExcludeValue.INCLUDE),
-            ...this.buildNewSelectionStates(excludeValue, IncludeExcludeValue.EXCLUDE),
-        ];
-        this.selectionModel.updateStates(updates);
-    }
-    buildNewSelectionStates(values, selection) {
-        if (FilterCommons.isArray(values)) {
-            return values.map(value => new IncludeExcludeState(value, selection));
-        }
-        return [];
-    }
-    buildMergeIncludeValues(values) {
-        return this.validateArrayAndReturn(this.findValueOrDefault(values, this.includeQueryKey));
-    }
-    buildMergeExcludeValues(values) {
-        return this.validateArrayAndReturn(this.findValueOrDefault(values, this.excludeQueryKey));
-    }
-}
-
-class ElderSearchIncludeExcludeDirective {
-    /***************************************************************************
-     *                                                                         *
-     * Properties                                                              *
-     *                                                                         *
-     **************************************************************************/
-    set includeSuffix(suffix) {
-        this._includeSuffix$.next(suffix);
-    }
-    set excludeSuffix(suffix) {
-        this._excludeSuffix$.next(suffix);
-    }
-    /***************************************************************************
-     *                                                                         *
-     * Constructor                                                             *
-     *                                                                         *
-     **************************************************************************/
-    constructor(elderSearchInput, elderChipsFilter, destroyRef) {
-        this.elderSearchInput = elderSearchInput;
-        this.elderChipsFilter = elderChipsFilter;
-        this.destroyRef = destroyRef;
-        /***************************************************************************
-         *                                                                         *
-         * Fields                                                                  *
-         *                                                                         *
-         **************************************************************************/
-        this._includeSuffix$ = new BehaviorSubject('');
-        this._excludeSuffix$ = new BehaviorSubject(null);
-        this.setupSearchQueryTransforms();
-    }
-    /***************************************************************************
-     *                                                                         *
-     * Private Methods                                                         *
-     *                                                                         *
-     **************************************************************************/
-    setupSearchQueryTransforms() {
-        combineLatest([
-            this.elderSearchInput.queryKey$,
-            this._includeSuffix$,
-            this._excludeSuffix$
-        ])
-            .pipe(takeUntilDestroyed(this.destroyRef), filter(([queryKey, includeSuffix, excludeSuffix]) => !!queryKey && Objects.nonNull(includeSuffix) && Objects.nonNull(excludeSuffix)))
-            .subscribe(([queryKey, includeSuffix, excludeSuffix]) => {
-            this.elderSearchInput.inputConverter = this.buildConverter(queryKey, includeSuffix, excludeSuffix);
-        });
-    }
-    buildConverter(queryKey, includeSuffix, excludeSuffix) {
-        return new IncludeExcludeInputConverter(this.elderChipsFilter.selectionModel, queryKey, includeSuffix, excludeSuffix);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ElderSearchIncludeExcludeDirective, deps: [{ token: ElderSearchInputDirective }, { token: ElderChipsFilterDirective }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.11", type: ElderSearchIncludeExcludeDirective, isStandalone: true, selector: "[elderSearchIncludeExclude]", inputs: { includeSuffix: "includeSuffix", excludeSuffix: "excludeSuffix" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ElderSearchIncludeExcludeDirective, deps: [{ token: ElderSearchContextDirective }, { token: i0.DestroyRef }, { token: IncludeExcludeSelectionModel }, { token: i3.NgModel, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.11", type: ElderSearchIncludeExcludeDirective, isStandalone: true, selector: "[elderSearchIncludeExclude]", inputs: { includeSuffix: "includeSuffix", excludeSuffix: "excludeSuffix", queryKey: "queryKey" }, exportAs: ["elderSearchInput"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ElderSearchIncludeExcludeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[elderSearchIncludeExclude]',
+                    exportAs: 'elderSearchInput',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: ElderSearchInputDirective }, { type: ElderChipsFilterDirective }, { type: i0.DestroyRef }], propDecorators: { includeSuffix: [{
+        }], ctorParameters: () => [{ type: ElderSearchContextDirective }, { type: i0.DestroyRef }, { type: IncludeExcludeSelectionModel }, { type: i3.NgModel, decorators: [{
+                    type: Optional
+                }, {
+                    type: Host
+                }] }], propDecorators: { includeSuffix: [{
                 type: Input
             }], excludeSuffix: [{
                 type: Input,
                 args: [{ required: true }]
+            }], queryKey: [{
+                type: Input
             }] } });
 
 class ElderSelectModule {
@@ -24682,7 +24368,7 @@ class ElderSelectModule {
             ElderSelectOptionComponent,
             ElderMultiSelectAllInitialDirective,
             ElderAutoSelectSuggestFirstDirective,
-            ElderChipsFilterDirective,
+            ElderChipsIncludeExcludeDirective,
             ElderFilterChipTemplateComponent,
             ElderSearchIncludeExcludeDirective], exports: [ElderSelectComponent,
             ElderSelectValueDirective,
@@ -24699,7 +24385,7 @@ class ElderSelectModule {
             ElderSelectOptionComponent,
             ElderMultiSelectAllInitialDirective,
             ElderAutoSelectSuggestFirstDirective,
-            ElderChipsFilterDirective,
+            ElderChipsIncludeExcludeDirective,
             ElderFilterChipTemplateComponent,
             ElderSearchIncludeExcludeDirective] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ElderSelectModule, imports: [CommonModule, FormsModule, ReactiveFormsModule,
@@ -24755,7 +24441,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                         ElderSelectOptionComponent,
                         ElderMultiSelectAllInitialDirective,
                         ElderAutoSelectSuggestFirstDirective,
-                        ElderChipsFilterDirective,
+                        ElderChipsIncludeExcludeDirective,
                         ElderFilterChipTemplateComponent,
                         ElderSearchIncludeExcludeDirective
                     ],
@@ -24775,9 +24461,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                         ElderSelectOptionComponent,
                         ElderMultiSelectAllInitialDirective,
                         ElderAutoSelectSuggestFirstDirective,
-                        ElderChipsFilterDirective,
+                        ElderChipsIncludeExcludeDirective,
                         ElderFilterChipTemplateComponent,
-                        ElderSearchIncludeExcludeDirective,
+                        ElderSearchIncludeExcludeDirective
                     ]
                 }]
         }] });
@@ -28228,6 +27914,378 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                 type: Input
             }] } });
 
+/**
+ * Search name adapter for input controls.
+ */
+class ElderInitialValueDirective {
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+    constructor(ngModel) {
+        //TODO: The debounce time is a hacky workaround, find a proper way to set initial value.
+        // ngModel regular and two way binding differ in initial value, which led to this solution
+        this.ngModel = ngModel;
+        /***************************************************************************
+         *                                                                         *
+         * Fields                                                                  *
+         *                                                                         *
+         **************************************************************************/
+        this.log = LoggerFactory.getLogger(this.constructor.name);
+        this.initialValue$ = new BehaviorSubject(null);
+        this.destroy$ = new Subject();
+        this._initialDone$ = new Subject();
+        const ngModelValue$ = of('dummy')
+            .pipe(delay(10), map(() => this.ngModel.model));
+        ngModelValue$
+            .pipe(combineLatestWith$1(this.initialValue$), takeUntil(this._initialDone$), takeUntil(this.destroy$)).subscribe(([ngModelValue, initialValue]) => {
+            if (initialValue) {
+                ngModel.control.setValue(initialValue);
+            }
+            this._initialDone$.next();
+            this._initialDone$.complete();
+        });
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Life Cycle                                                              *
+     *                                                                         *
+     **************************************************************************/
+    /***************************************************************************
+     *                                                                         *
+     * Properties                                                              *
+     *                                                                         *
+     **************************************************************************/
+    get initialDone$() {
+        return this._initialDone$.asObservable();
+    }
+    get valueChanges$() {
+        return this.ngModel.control.valueChanges
+            .pipe(takeUntil(this.destroy$));
+    }
+    setValue(value) {
+        if (value) {
+            this.ngModel.control.setValue(value);
+        }
+        this.initialValue$.next(value);
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ElderInitialValueDirective, deps: [{ token: i3.NgModel, host: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.11", type: ElderInitialValueDirective, isStandalone: true, selector: "[elderInitialValue]", exportAs: ["elderInitialValue"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ElderInitialValueDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[elderInitialValue]',
+                    exportAs: 'elderInitialValue',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i3.NgModel, decorators: [{
+                    type: Host
+                }] }] });
+
+class DefaultInputFilterConverter {
+    /***************************************************************************
+     *                                                                         *
+     * Static Builders                                                         *
+     *                                                                         *
+     **************************************************************************/
+    static of(queryKeyProviderFn) {
+        return new DefaultInputFilterConverter(queryKeyProviderFn);
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Constructors                                                            *
+     *                                                                         *
+     **************************************************************************/
+    constructor(queryKeyProviderFn) {
+        this.queryKeyProviderFn = queryKeyProviderFn;
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Public API                                                              *
+     *                                                                         *
+     **************************************************************************/
+    convertToFilters(inputValue) {
+        return [
+            new Filter(this.queryKey(), inputValue)
+        ];
+    }
+    convertToValue(filters) {
+        const queryKey = this.queryKey();
+        for (const filter of filters) {
+            if (filter.key === queryKey) {
+                return filter.value;
+            }
+        }
+        return null;
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Private methods                                                         *
+     *                                                                         *
+     **************************************************************************/
+    queryKey() {
+        return this.queryKeyProviderFn();
+    }
+}
+
+/**
+ * Binds the control value (ngModel) to a SearchContexts Filter.
+ */
+class ElderSearchInputDirective {
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+    constructor(searchContext, ngModel, destroyRef) {
+        this.searchContext = searchContext;
+        this.ngModel = ngModel;
+        this.destroyRef = destroyRef;
+        /***************************************************************************
+         *                                                                         *
+         * Fields                                                                  *
+         *                                                                         *
+         **************************************************************************/
+        this.log = LoggerFactory.getLogger(this.constructor.name);
+        this._queryKey$ = new BehaviorSubject(null);
+        this._inputConverter = DefaultInputFilterConverter.of(() => this.queryKey);
+        this._initialValueDirective = new ElderInitialValueDirective(ngModel);
+        this._state$ = this.buildInputStateObservable().pipe(
+        // tap(state => this.log.error('EMIT SEARCH INPUT STATE [' + state.queryKey + ']: ' + state.queryValue + (state.pristine ? '(pristine)' : ''), state))
+        );
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Life Cycle                                                              *
+     *                                                                         *
+     **************************************************************************/
+    ngOnInit() {
+        this._extractedName = this.extractName();
+        this.updateQueryKey();
+        this.searchContext.register(this);
+    }
+    ngAfterViewInit() {
+        this._extractedName = this.extractName();
+        this.updateQueryKey();
+        this.log.debug(this.queryKey + ' | ' + this.resolvePath);
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Properties                                                              *
+     *                                                                         *
+     **************************************************************************/
+    /**
+     * (Optional) Usually the control name is used, this allows a custom query key
+     */
+    set queryKey(value) {
+        this._userQueryKey = value;
+        this.updateQueryKey();
+    }
+    get queryKey() {
+        return this._queryKey$.getValue();
+    }
+    get queryKey$() {
+        return this._queryKey$;
+    }
+    set inputConverter(inputConverter) {
+        this._inputConverter = inputConverter;
+    }
+    get initialDone$() {
+        return this._initialValueDirective.initialDone$;
+    }
+    get state$() {
+        return this._state$;
+    }
+    get value() {
+        return this.ngModel.value;
+    }
+    get readonly() {
+        return this.ngModel.isDisabled;
+    }
+    get hasFallback() {
+        return SearchInputState.isValueDefined(this.fallbackValue);
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Public API                                                              *
+     *                                                                         *
+     **************************************************************************/
+    applyFilters(filters) {
+        this.setInputValue(this._inputConverter.convertToValue(filters));
+    }
+    reset() {
+        this.ngModel.reset();
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Private methods                                                         *
+     *                                                                         *
+     **************************************************************************/
+    updateQueryKey() {
+        const newKey = this._userQueryKey ?? this._extractedName;
+        if (this._queryKey$.getValue() !== newKey) {
+            this._queryKey$.next(newKey);
+        }
+    }
+    setInputValue(queryString) {
+        const value = this.convertQueryStringToRawModelValue(queryString);
+        this._initialValueDirective.setValue(value);
+    }
+    get valueChanges$() {
+        return this.ngModel.control.valueChanges
+            .pipe(takeUntilDestroyed(this.destroyRef));
+    }
+    buildInputStateObservable() {
+        const viewStabilized$ = of('stabilized$').pipe(delay(20), first());
+        const inputStateChanges$ = this.valueChanges$.pipe(takeUntilDestroyed(this.destroyRef), map(value => this.buildInputState(value, true)), skipUntil(viewStabilized$), debounceTime(20));
+        const startDelayed$ = of('start').pipe(delay(15), map(start => {
+            const state = this.buildInputState(this.ngModel.control.value, false);
+            return state;
+        }));
+        return concat(startDelayed$, inputStateChanges$);
+    }
+    buildInputState(controlValue, userEvent) {
+        const queryValue = this.convertRawModelValueToQueryString(controlValue);
+        const filters = this._inputConverter.convertToFilters(queryValue);
+        return new SearchInputState(this.queryKey, filters, this.areAllPristine(filters) || this.isFallbackValue(queryValue), userEvent);
+    }
+    isFallbackValue(queryValue) {
+        if (this.hasFallback) {
+            return (this.fallbackValue === queryValue);
+        }
+        return false;
+    }
+    areAllPristine(filters) {
+        return filters.every(f => this.isPristine(f));
+    }
+    isPristine(filter) {
+        return !this.isAttributeValuePresent(filter.value);
+    }
+    convertQueryStringToRawModelValue(queryString) {
+        if (Objects.nonNull(queryString)) {
+            return queryString;
+        }
+        return null;
+    }
+    convertRawModelValueToQueryString(model) {
+        let queryValue = null;
+        if (this.valueAsId != undefined) {
+            queryValue = this.checkAndConvertFaultyValuesToNull(model);
+        }
+        else if (this.isAttributeValuePresent(model)) {
+            // Attribute value is present
+            queryValue = this.resolveValue(model);
+        }
+        else {
+            if (this.hasFallback) {
+                queryValue = this.fallbackValue;
+            }
+        }
+        return queryValue;
+    }
+    checkAndConvertFaultyValuesToNull(value) {
+        let fixedValue = value;
+        fixedValue = this.convertEmptyArrayToNull(fixedValue);
+        fixedValue = this.convertEmptyStringToNull(fixedValue);
+        return fixedValue;
+    }
+    convertEmptyArrayToNull(value) {
+        if (value instanceof Array && value.length === 0) {
+            return null;
+        }
+        return value;
+    }
+    convertEmptyStringToNull(value) {
+        if (typeof value === 'string' && value.length === 0) {
+            return null;
+        }
+        return value;
+    }
+    isAttributeValuePresent(value) {
+        return SearchInputState.isValueDefined(value)
+            && (value + '').length !== 0;
+    }
+    resolveValue(value) {
+        if (Objects.nonNull(value)) {
+            if (value instanceof Array) {
+                const resolvedValues = value
+                    .map(v => this.resolveSingleValue(v))
+                    .filter(v => Objects.nonNull(v));
+                return this.concatIfNecessary(resolvedValues);
+            }
+            else {
+                return this.resolveSingleValue(value);
+            }
+        }
+        else {
+            return null;
+        }
+    }
+    resolveSingleValue(value) {
+        value = PropertyPathUtil.resolveValue(value, this.resolvePath);
+        value = this.valueTransform ? this.valueTransform(value) : value;
+        if (Objects.nonNull(value)) {
+            if (value instanceof Array) {
+                return value
+                    .filter(i => Objects.nonNull(i))
+                    .map(i => i.toString());
+            }
+            else {
+                return value.toString();
+            }
+        }
+        else {
+            return null;
+        }
+    }
+    extractName() {
+        return this.ngModel.name;
+    }
+    concatIfNecessary(values) {
+        const arrays = values.map(v => {
+            if (v instanceof Array) {
+                return v;
+            }
+            else {
+                return [v];
+            }
+        });
+        return CollectionUtil.flatten(arrays);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ElderSearchInputDirective, deps: [{ token: ElderSearchContextDirective }, { token: i3.NgModel, host: true }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.11", type: ElderSearchInputDirective, isStandalone: true, selector: "[elderSearchInput]", inputs: { valueTransform: ["elderSearchInputTransform", "valueTransform"], resolvePath: ["elderSearchInput", "resolvePath"], fallbackValue: ["elderSearchInputFallback", "fallbackValue"], valueAsId: "valueAsId", queryKey: ["elderSearchInputKey", "queryKey"] }, exportAs: ["elderSearchInput"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ElderSearchInputDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[elderSearchInput]',
+                    exportAs: 'elderSearchInput',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: ElderSearchContextDirective }, { type: i3.NgModel, decorators: [{
+                    type: Host
+                }] }, { type: i0.DestroyRef }], propDecorators: { valueTransform: [{
+                type: Input,
+                args: ['elderSearchInputTransform']
+            }], resolvePath: [{
+                type: Input,
+                args: ['elderSearchInput']
+            }], fallbackValue: [{
+                type: Input,
+                args: ['elderSearchInputFallback']
+            }], valueAsId: [{
+                type: Input
+            }], queryKey: [{
+                type: Input,
+                args: ['elderSearchInputKey']
+            }] } });
+
 class ElderSearchPanelComponent {
     constructor() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ElderSearchPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -28641,7 +28699,7 @@ class ElderSearchBoxComponent {
         this.queryKey = 'query';
         this._dense = false;
         this.autocomplete = 'off';
-        this.userFilters$ = searchContextDirective.userDefinedAttributes$.pipe(
+        this.touchedSearchInputs$ = searchContextDirective.touchedSearchInputs$.pipe(
         // tap(attrs => this.logger.error('Attrs', attrs))
         );
     }
@@ -28679,11 +28737,11 @@ class ElderSearchBoxComponent {
         this.searchContextDirective.reset();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ElderSearchBoxComponent, deps: [{ token: ElderSearchContextDirective }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: ElderSearchBoxComponent, isStandalone: true, 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\">\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=\"userFilters$ | 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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: ElderOverlayTriggerDirective, selector: "[elderOverlayTrigger]", inputs: ["elderOverlayTrigger", "elderOverlayTriggerType", "elderOverlayTriggerEnabled"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { 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: ElderSearchInputDirective, selector: "[elderSearchInput]", inputs: ["elderSearchInputTransform", "elderSearchInput", "dataSource", "elderSearchInputFallback", "valueAsId", "elderSearchInputKey"], exportAs: ["elderSearchInput"] }, { kind: "directive", type: ElderOverlayOriginDirective, selector: "[elderOverlayOrigin]", inputs: ["elderOverlayOrigin"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "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: "component", type: ElderDialogPanelComponent, selector: "elder-dialog-panel" }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: ElderSearchBoxComponent, isStandalone: true, 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\">\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=\"touchedSearchInputs$ | async as touchedInputs\">\n\n      <button mat-icon-button type=\"button\"\n              *ngIf=\"touchedInputs.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]=\"touchedInputs.length\"\n          matBadgeSize=\"small\"\n          [matBadgeOverlap]=\"true\"\n          [matBadgeHidden]=\"touchedInputs.length === 0\"\n          matBadgeColor=\"accent\"\n          [color]=\"touchedInputs.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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: ElderOverlayTriggerDirective, selector: "[elderOverlayTrigger]", inputs: ["elderOverlayTrigger", "elderOverlayTriggerType", "elderOverlayTriggerEnabled"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { 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: ElderSearchInputDirective, selector: "[elderSearchInput]", inputs: ["elderSearchInputTransform", "elderSearchInput", "elderSearchInputFallback", "valueAsId", "elderSearchInputKey"], exportAs: ["elderSearchInput"] }, { kind: "directive", type: ElderOverlayOriginDirective, selector: "[elderOverlayOrigin]", inputs: ["elderOverlayOrigin"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "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: "component", type: ElderDialogPanelComponent, selector: "elder-dialog-panel" }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ElderSearchBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'elder-search-box', exportAs: 'elderSearchBox', host: { 'class': 'elder-form-field-host' }, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf, MatFormField, ElderFormFieldDenseDirective, MatIconButton, MatPrefix, ElderOverlayTriggerDirective, MatIcon, MatInput, FormsModule, ElderSearchInputDirective, ElderOverlayOriginDirective, MatHint, MatSuffix, MatBadge, ElderOverlayComponent, ElderDialogPanelComponent, MatButton, AsyncPipe, TranslateModule], template: "<div class=\"layout-row place-stretch-center full flex\">\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=\"userFilters$ | 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, standalone: true, imports: [NgIf, MatFormField, ElderFormFieldDenseDirective, MatIconButton, MatPrefix, ElderOverlayTriggerDirective, MatIcon, MatInput, FormsModule, ElderSearchInputDirective, ElderOverlayOriginDirective, MatHint, MatSuffix, MatBadge, ElderOverlayComponent, ElderDialogPanelComponent, MatButton, AsyncPipe, TranslateModule], template: "<div class=\"layout-row place-stretch-center full flex\">\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=\"touchedSearchInputs$ | async as touchedInputs\">\n\n      <button mat-icon-button type=\"button\"\n              *ngIf=\"touchedInputs.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]=\"touchedInputs.length\"\n          matBadgeSize=\"small\"\n          [matBadgeOverlap]=\"true\"\n          [matBadgeHidden]=\"touchedInputs.length === 0\"\n          matBadgeColor=\"accent\"\n          [color]=\"touchedInputs.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: () => [{ type: ElderSearchContextDirective }], propDecorators: { search: [{
                 type: ViewChild,
                 args: ['search']
@@ -33359,5 +33417,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ActivationEventSource, Arrays, AuditedEntity, AutoStartSpec, BlobUrl, BytesFormat, BytesPerSecondFormat, BytesPipe, CardDropEvent, CardOrganizerData, CardStack, CollectionUtil, ComparatorBuilder, ConfirmDialogConfig, ContinuableListing, CsvColumnSpec, CsvSerializer, CsvSpec, CsvStreamExporter, CsvStreamExporterBuilder, CsvStreamExporterBuilderService, Currency, CurrencyCode, CurrencyFormatUtil, CurrencyUnit, CurrencyUnitRegistry, CustomDateAdapter, DataContextActivePage, DataContextAutoStarter, DataContextBase, DataContextBuilder, DataContextContinuableBase, DataContextContinuablePaged, DataContextContinuableToken, DataContextLifeCycleBinding, DataContextSelectionDirective, DataContextSimple, DataContextSnapshot, DataContextSourceEventBinding, DataContextStateIndicatorComponent, DataContextStatus, DataSourceAdapter, DataSourceBase, DataSourceChangeEvent, DataSourceChangeType, DataSourceProcessor, DataTransferFactory, DataTransferProgress, DataTransferProgressAggregate, DataTransferState, DataTransferStatus, DataViewIframeAdapterDirective, DataViewIframeComponent, DataViewMessage, DataViewMessageTypeValues, DataViewOptionsProviderBinding, DataViewSelection, DataViewSelectionInit, DateUtil, DelegateContinuableDataSource, DelegateDataSource, DelegateListDataSource, DelegatePagedDataSource, Dimensions, DrawerOutletBinding, DurationBucket, DurationFormat, DurationFormatUtil, ELDER_DATA_VIEW, ELDER_SELECT_BASE, ElderAccessDeniedComponent, ElderAccessDeniedModule, ElderAppHeaderComponent, ElderAuditModule, ElderAuditedEntityComponent, ElderAutoSelectFirstDirective, ElderAutoSelectSuggestFirstDirective, ElderAutocompleteDirective, ElderAutocompleteManyDirective, ElderAutocompleteModule, ElderBadgeChipAvatarDirective, ElderBadgeChipDirective, ElderBadgeComponent, ElderBadgeDirective, ElderBadgeModule, ElderBlobViewerComponent, ElderBreadCrumbsComponent, ElderBreadCrumbsModule, ElderButtonGroupComponent, ElderButtonGroupModule, ElderCardComponent, ElderCardContentDirective, ElderCardHeaderActionsDirective, ElderCardHeaderComponent, ElderCardModule, ElderCardOrganizerComponent, ElderCardOrganizerModule, ElderCardPanelComponent, ElderCardStackComponent, ElderCardSubtitleDirective, ElderCardTitleDirective, ElderCheckboxState, ElderChipLabelDirective, ElderChipListSelectComponent, ElderChipListSelectModule, ElderChipsFilterDirective, ElderChipsModule, ElderClearSelectDirective, ElderClipboardPutDirective, ElderClipboardService, ElderConfirmDialogComponent, ElderConnectivityModule, ElderConnectivityService, ElderContainersModule, ElderCsvExportBtnComponent, ElderCsvModule, ElderCurrencyModule, ElderCurrencyPipe, ElderDataCommonModule, ElderDataToolbarComponent, ElderDataTransferModule, ElderDataTransferService, ElderDataViewBaseComponent, ElderDataViewOptions, ElderDataViewOptionsProvider, ElderDateSwitcherComponent, ElderDateTimeInputComponent, ElderDelayedFocusDirective, ElderDeleteActiveDirective, ElderDetailDialogComponent, ElderDetailDirective, ElderDialogConfig, ElderDialogModule, ElderDialogPanelComponent, ElderDialogService, ElderDimensionsInputComponent, ElderDropZoneComponent, ElderDurationInputComponent, ElderEntityValueAccessorUtil, ElderEnumTranslationService, ElderErrorModule, ElderEventSourceService, ElderExceptionDetailComponent, ElderExpandToggleButtonComponent, ElderExpandToggleButtonModule, ElderFileDropZoneDirective, ElderFileModule, ElderFileSelectComponent, ElderFileSelectDirective, ElderFileUploadComponent, ElderFilterChipTemplateComponent, ElderFormFieldControlBase, ElderFormFieldDenseDirective, ElderFormFieldLabelDirective, ElderFormFieldNoHintDirective, ElderFormFieldNoSpinnerDirective, ElderFormsDirectivesModule, ElderFormsModule, ElderFromFieldBase, ElderFromFieldEntityBase, ElderFromFieldMultiEntityBase, ElderGlobalSearchComponent, ElderGlobalSearchModule, ElderGlobalSearchService, ElderGridComponent, ElderGridModule, ElderGridTileDirective, ElderGridToolbarDirective, ElderHeaderComponent, ElderHeaderModule, ElderHttpClient, ElderI18nEntitiesModule, ElderIFrameModule, ElderInfiniteAutocompleteDirective, ElderInfiniteScrollDirective, ElderInfiniteScrollModule, ElderInputPatternDirective, ElderIntervalInputComponent, ElderKeyEventDirective, ElderLabelInputComponent, ElderLabelsModule, ElderLanguageConfig, ElderLanguageInterceptor, ElderLanguageModule, ElderLanguageService, ElderLanguageSwitcherComponent, ElderLocalDateInputComponent, ElderLocalTimeInputComponent, ElderLocalesDeChModule, ElderLocalizedInputComponent, ElderLocalizedInputDialogComponent, ElderLocalizedInputDialogService, ElderLocalizedInputTableComponent, ElderLocalizedTextColumnDirective, ElderLocalizedTextsDirective, ElderMasterActivationDirective, ElderMasterDetailComponent, ElderMasterDetailModule, ElderMasterDetailService, ElderMasterDirective, ElderMaxValidator, ElderMeasuresModule, ElderMinValidator, ElderMultiEntityValueAccessorUtil, ElderMultiSelectAllInitialDirective, ElderMultiSelectBase, ElderMultiSelectChipOptionsComponent, ElderMultiSelectChipsComponent, ElderMultiSelectFormField, ElderMultipleOfUtil, ElderMultipleOfValidator, ElderNavGroupComponent, ElderNavLinkComponent, ElderNavListComponent, ElderNavModule, ElderNextFocusableDirective, ElderNumberCellDirective, ElderOfflineIndicatorComponent, ElderOverlayComponent, ElderOverlayModule, ElderOverlayOriginDirective, ElderOverlayRef, ElderOverlayTriggerDirective, ElderPaddingDirective, ElderPanelComponent, ElderPanelModule, ElderPeriodInputComponent, ElderPipesModule, ElderPlugParentFormDirective, ElderProgressBarComponent, ElderProgressBarModule, ElderQuantityFormFieldComponent, ElderQuantityInputControlComponent, ElderQuantityModule, ElderQuantityPipe, ElderQuantityRangeValidator, ElderQuantityService, ElderQuantityTransformPipe, ElderQuestionDialogComponent, ElderRepeatPipe, ElderRepeatPipeLegacy, ElderRequiredDimensionsValidator, ElderRequiredIgnoreZeroValidator, ElderRequiredQuantityValidator, ElderRoundPipe, ElderRouteOutletDrawerService, ElderRouterOutletService, ElderRouterService, ElderSafeUrlPipe, ElderScrollContainerComponent, ElderScrollbarDirective, ElderScrollbarModule, ElderSearchBoxComponent, ElderSearchContextDirective, ElderSearchIncludeExcludeDirective, ElderSearchInputDirective, ElderSearchModule, ElderSearchPanelComponent, ElderSearchUrlDirective, ElderSelectBase, ElderSelectChipAvatarDirective, ElderSelectChipDirective, ElderSelectComponent, ElderSelectComponentState, ElderSelectCustomInputDirective, ElderSelectFormField, ElderSelectModule, ElderSelectOnTabDirective, ElderSelectOptionComponent, ElderSelectValueDirective, ElderSelectionDialogComponent, ElderSelectionDialogDirective, ElderSelectionMasterCheckboxComponent, ElderSelectionPopupTriggerAdapterDirective, ElderShellCenterDirective, ElderShellComponent, ElderShellModule, ElderShellNavigationToggleComponent, ElderShellService, ElderShellSideLeftDirective, ElderShellSideRightDirective, ElderShellSlotDirective, ElderSimpleSelectionViewComponent, ElderSimpleSelectionViewModule, ElderSingleSortComponent, ElderStackCardDirective, ElderStopEventPropagationDirective, ElderSuggestionPanelComponent, ElderSvgViewerComponent, ElderTabDirective, ElderTabFocusTrapDirective, ElderTabGroupRoutingDirective, ElderTabModule, ElderTableActivationDirective, ElderTableComponent, ElderTableExtensionDirective, ElderTableGroup, ElderTableModel, ElderTableModelCdkTableBinding, ElderTableModelQueryGroup, ElderTableModule, ElderTableProviders, ElderTableRootDirective, ElderTableSortDirective, ElderTableToolbarDirective, ElderThemeApplierDirective, ElderThemeDirective, ElderThemeModule, ElderThemePreferenceService, ElderThemeService, ElderThemeToggleComponent, ElderTimeModule, ElderToastModule, ElderToastService, ElderTogglePanelComponent, ElderTogglePanelPrimaryDirective, ElderTogglePanelSecondaryDirective, ElderTogglePanelTriggerDirective, ElderToolbarColumnDirective, ElderToolbarComponent, ElderToolbarContentDirective, ElderToolbarModule, ElderToolbarService, ElderToolbarTitleComponent, ElderToolbarTitleService, ElderTouchedDirective, ElderTrimPipe, ElderTripleStateCheckboxDirective, ElderTruncatePipe, ElderUnitSelectDirective, ElderUnitService, ElderUrlFragment, ElderUrlFragmentModule, ElderUrlFragmentParamsService, ElderUrlFragmentSwitcherComponent, ElderValidationErrorDirective, ElderViewersModule, EntitySetPatch, ErrorUtil, ExceptionDetailCtx, FileEntry, FileListingRx, FileUploadClient, Filter, FilterContext, FilterUtil, FocusUtil, FormFieldBaseComponent, GlobalDragDropService, HttpClientBuilder, HttpClientPristine, HttpDataTransfer, HttpDataTransferAggregateComponent, HttpDataTransferComponent, HttpDataTransferIndicatorComponent, HttpDataTransferOverviewComponent, HttpParamsBuilder, I18nBase, I18nPickAsyncPipe, I18nPickPipe, I18nText, IFrameState, IframeCloseDirective, IframeDialogComponent, IframeHostComponent, IframeService, IframeSideContentComponent, IncludeExcludeSelectionModel, IncludeExcludeState, IncludeExcludeValue, IndexedEntities, InternalRestClientConfig, Interval, IsoDurationPipe, IsoIntervalFormatUtil, IsoIntervalParsePipe, IsoIntervalPipe, ItemActivationEvent, ItemActivationOptions, JsonMapUtil, KafentConfig, KafentEvent, KafentEventService, KafentEventStream, KafentEventStreamDisabled, KafentEventStreamSse, KafentEventTransport, KafentModule, KafentSseEventChannel, KafentTokenProvider, KafentTokenProviderSessionStorage, KafentTopicSse, KnownElderThemes, KnownLocaleTags, LocalListDataSource, LocalPagedDataSource, LocalisationPickerService, MasterDetailActivationEvent, MasterSelectionState, MatTableDataContextBinding, MatTableDataContextBindingBuilder, MultiModelBaseComponent, NextNumberUtil, Objects, OnlineStatus, Page, PageRequest, Pageable, ParseUtil, Path, PathNode, PeriodBucket, PeriodDuration, PeriodFormat, ProcessIterationContext, ProcessState, PropertyPathUtil, Quantity, QueryListBinding, QuestionDialogConfig, ReactiveEventSource, ReactiveEventSourceState, ReactiveFetchEventSource, ReactiveFetchEventSourceService, ReactiveMap, ReactiveSSeMessage, RefreshingEntity, RestClient, RestClientConfig, RestClientContinuable, RestClientList, RestClientPaged, SearchQuery, SelectChipSpecUtil, SelectOptionChipSpecUtil, SelectionModel, SelectionModelPopupDirective, Sets, SimpleLocalisationPicker, Sort, SortOption, SortUtil, StandardToastComponent, SubBar, SuggestionProvider, TemplateCompositeControl, TemplatedSelectionDialogComponent, ThemeSpec, TimeAgoPipe, TimeDurationPipe, TimeUtil, ToIsoDateStringPipe, ToastType, TokenChunkRequest, ToolbarHeader, Translated, TranslatedConverter, TranslatedEnumValue, TranslatedText, TypedEventMessage, Unit, UnitDimension, UnitDimensionInfo, UnitInfo, UnitRegistry, UrlBuilder, UrlQueryParams, UuidUtil, ValueAccessorBase, ValueWrapper, ViewProviders, WeightPipe, alphaNumStringComparator, buildFormIntegrationProviders, coerceInterval, coerceIntervalIsoStr, createDataOptionsProvider, createSelectionModel, existingOrNewElderTableModel, initSearchUrlService, isActivePagedDataContext, isContinuableDataContext, isContinuableDataSource, isDataContext, isDataSource, isDataViewMessageType, isElderEntityValueAccessor, isElderMultiEntityValueAccessor, isListDataSource, isPagedDataSource, lazySample, lazySampleTime, naturalValueComparator, newElderTableModel, proxyControlContainer, registerLocale, runInZone, themeInit };
+export { ActivationEventSource, Arrays, AuditedEntity, AutoStartSpec, BlobUrl, BytesFormat, BytesPerSecondFormat, BytesPipe, CardDropEvent, CardOrganizerData, CardStack, CollectionUtil, ComparatorBuilder, ConfirmDialogConfig, ContinuableListing, CsvColumnSpec, CsvSerializer, CsvSpec, CsvStreamExporter, CsvStreamExporterBuilder, CsvStreamExporterBuilderService, Currency, CurrencyCode, CurrencyFormatUtil, CurrencyUnit, CurrencyUnitRegistry, CustomDateAdapter, DataContextActivePage, DataContextAutoStarter, DataContextBase, DataContextBuilder, DataContextContinuableBase, DataContextContinuablePaged, DataContextContinuableToken, DataContextLifeCycleBinding, DataContextSelectionDirective, DataContextSimple, DataContextSnapshot, DataContextSourceEventBinding, DataContextStateIndicatorComponent, DataContextStatus, DataSourceAdapter, DataSourceBase, DataSourceChangeEvent, DataSourceChangeType, DataSourceProcessor, DataTransferFactory, DataTransferProgress, DataTransferProgressAggregate, DataTransferState, DataTransferStatus, DataViewIframeAdapterDirective, DataViewIframeComponent, DataViewMessage, DataViewMessageTypeValues, DataViewOptionsProviderBinding, DataViewSelection, DataViewSelectionInit, DateUtil, DelegateContinuableDataSource, DelegateDataSource, DelegateListDataSource, DelegatePagedDataSource, Dimensions, DrawerOutletBinding, DurationBucket, DurationFormat, DurationFormatUtil, ELDER_DATA_VIEW, ELDER_SELECT_BASE, ElderAccessDeniedComponent, ElderAccessDeniedModule, ElderAppHeaderComponent, ElderAuditModule, ElderAuditedEntityComponent, ElderAutoSelectFirstDirective, ElderAutoSelectSuggestFirstDirective, ElderAutocompleteDirective, ElderAutocompleteManyDirective, ElderAutocompleteModule, ElderBadgeChipAvatarDirective, ElderBadgeChipDirective, ElderBadgeComponent, ElderBadgeDirective, ElderBadgeModule, ElderBlobViewerComponent, ElderBreadCrumbsComponent, ElderBreadCrumbsModule, ElderButtonGroupComponent, ElderButtonGroupModule, ElderCardComponent, ElderCardContentDirective, ElderCardHeaderActionsDirective, ElderCardHeaderComponent, ElderCardModule, ElderCardOrganizerComponent, ElderCardOrganizerModule, ElderCardPanelComponent, ElderCardStackComponent, ElderCardSubtitleDirective, ElderCardTitleDirective, ElderCheckboxState, ElderChipLabelDirective, ElderChipListSelectComponent, ElderChipListSelectModule, ElderChipsIncludeExcludeDirective, ElderChipsModule, ElderClearSelectDirective, ElderClipboardPutDirective, ElderClipboardService, ElderConfirmDialogComponent, ElderConnectivityModule, ElderConnectivityService, ElderContainersModule, ElderCsvExportBtnComponent, ElderCsvModule, ElderCurrencyModule, ElderCurrencyPipe, ElderDataCommonModule, ElderDataToolbarComponent, ElderDataTransferModule, ElderDataTransferService, ElderDataViewBaseComponent, ElderDataViewOptions, ElderDataViewOptionsProvider, ElderDateSwitcherComponent, ElderDateTimeInputComponent, ElderDelayedFocusDirective, ElderDeleteActiveDirective, ElderDetailDialogComponent, ElderDetailDirective, ElderDialogConfig, ElderDialogModule, ElderDialogPanelComponent, ElderDialogService, ElderDimensionsInputComponent, ElderDropZoneComponent, ElderDurationInputComponent, ElderEntityValueAccessorUtil, ElderEnumTranslationService, ElderErrorModule, ElderEventSourceService, ElderExceptionDetailComponent, ElderExpandToggleButtonComponent, ElderExpandToggleButtonModule, ElderFileDropZoneDirective, ElderFileModule, ElderFileSelectComponent, ElderFileSelectDirective, ElderFileUploadComponent, ElderFilterChipTemplateComponent, ElderFormFieldControlBase, ElderFormFieldDenseDirective, ElderFormFieldLabelDirective, ElderFormFieldNoHintDirective, ElderFormFieldNoSpinnerDirective, ElderFormsDirectivesModule, ElderFormsModule, ElderFromFieldBase, ElderFromFieldEntityBase, ElderFromFieldMultiEntityBase, ElderGlobalSearchComponent, ElderGlobalSearchModule, ElderGlobalSearchService, ElderGridComponent, ElderGridModule, ElderGridTileDirective, ElderGridToolbarDirective, ElderHeaderComponent, ElderHeaderModule, ElderHttpClient, ElderI18nEntitiesModule, ElderIFrameModule, ElderInfiniteAutocompleteDirective, ElderInfiniteScrollDirective, ElderInfiniteScrollModule, ElderInputPatternDirective, ElderIntervalInputComponent, ElderKeyEventDirective, ElderLabelInputComponent, ElderLabelsModule, ElderLanguageConfig, ElderLanguageInterceptor, ElderLanguageModule, ElderLanguageService, ElderLanguageSwitcherComponent, ElderLocalDateInputComponent, ElderLocalTimeInputComponent, ElderLocalesDeChModule, ElderLocalizedInputComponent, ElderLocalizedInputDialogComponent, ElderLocalizedInputDialogService, ElderLocalizedInputTableComponent, ElderLocalizedTextColumnDirective, ElderLocalizedTextsDirective, ElderMasterActivationDirective, ElderMasterDetailComponent, ElderMasterDetailModule, ElderMasterDetailService, ElderMasterDirective, ElderMaxValidator, ElderMeasuresModule, ElderMinValidator, ElderMultiEntityValueAccessorUtil, ElderMultiSelectAllInitialDirective, ElderMultiSelectBase, ElderMultiSelectChipOptionsComponent, ElderMultiSelectChipsComponent, ElderMultiSelectFormField, ElderMultipleOfUtil, ElderMultipleOfValidator, ElderNavGroupComponent, ElderNavLinkComponent, ElderNavListComponent, ElderNavModule, ElderNextFocusableDirective, ElderNumberCellDirective, ElderOfflineIndicatorComponent, ElderOverlayComponent, ElderOverlayModule, ElderOverlayOriginDirective, ElderOverlayRef, ElderOverlayTriggerDirective, ElderPaddingDirective, ElderPanelComponent, ElderPanelModule, ElderPeriodInputComponent, ElderPipesModule, ElderPlugParentFormDirective, ElderProgressBarComponent, ElderProgressBarModule, ElderQuantityFormFieldComponent, ElderQuantityInputControlComponent, ElderQuantityModule, ElderQuantityPipe, ElderQuantityRangeValidator, ElderQuantityService, ElderQuantityTransformPipe, ElderQuestionDialogComponent, ElderRepeatPipe, ElderRepeatPipeLegacy, ElderRequiredDimensionsValidator, ElderRequiredIgnoreZeroValidator, ElderRequiredQuantityValidator, ElderRoundPipe, ElderRouteOutletDrawerService, ElderRouterOutletService, ElderRouterService, ElderSafeUrlPipe, ElderScrollContainerComponent, ElderScrollbarDirective, ElderScrollbarModule, ElderSearchBoxComponent, ElderSearchContextDirective, ElderSearchIncludeExcludeDirective, ElderSearchInputDirective, ElderSearchModule, ElderSearchPanelComponent, ElderSearchUrlDirective, ElderSelectBase, ElderSelectChipAvatarDirective, ElderSelectChipDirective, ElderSelectComponent, ElderSelectComponentState, ElderSelectCustomInputDirective, ElderSelectFormField, ElderSelectModule, ElderSelectOnTabDirective, ElderSelectOptionComponent, ElderSelectValueDirective, ElderSelectionDialogComponent, ElderSelectionDialogDirective, ElderSelectionMasterCheckboxComponent, ElderSelectionPopupTriggerAdapterDirective, ElderShellCenterDirective, ElderShellComponent, ElderShellModule, ElderShellNavigationToggleComponent, ElderShellService, ElderShellSideLeftDirective, ElderShellSideRightDirective, ElderShellSlotDirective, ElderSimpleSelectionViewComponent, ElderSimpleSelectionViewModule, ElderSingleSortComponent, ElderStackCardDirective, ElderStopEventPropagationDirective, ElderSuggestionPanelComponent, ElderSvgViewerComponent, ElderTabDirective, ElderTabFocusTrapDirective, ElderTabGroupRoutingDirective, ElderTabModule, ElderTableActivationDirective, ElderTableComponent, ElderTableExtensionDirective, ElderTableGroup, ElderTableModel, ElderTableModelCdkTableBinding, ElderTableModelQueryGroup, ElderTableModule, ElderTableProviders, ElderTableRootDirective, ElderTableSortDirective, ElderTableToolbarDirective, ElderThemeApplierDirective, ElderThemeDirective, ElderThemeModule, ElderThemePreferenceService, ElderThemeService, ElderThemeToggleComponent, ElderTimeModule, ElderToastModule, ElderToastService, ElderTogglePanelComponent, ElderTogglePanelPrimaryDirective, ElderTogglePanelSecondaryDirective, ElderTogglePanelTriggerDirective, ElderToolbarColumnDirective, ElderToolbarComponent, ElderToolbarContentDirective, ElderToolbarModule, ElderToolbarService, ElderToolbarTitleComponent, ElderToolbarTitleService, ElderTouchedDirective, ElderTrimPipe, ElderTripleStateCheckboxDirective, ElderTruncatePipe, ElderUnitSelectDirective, ElderUnitService, ElderUrlFragment, ElderUrlFragmentModule, ElderUrlFragmentParamsService, ElderUrlFragmentSwitcherComponent, ElderValidationErrorDirective, ElderViewersModule, EntitySetPatch, ErrorUtil, ExceptionDetailCtx, FileEntry, FileListingRx, FileUploadClient, Filter, FilterContext, FilterUtil, FocusUtil, FormFieldBaseComponent, GlobalDragDropService, HttpClientBuilder, HttpClientPristine, HttpDataTransfer, HttpDataTransferAggregateComponent, HttpDataTransferComponent, HttpDataTransferIndicatorComponent, HttpDataTransferOverviewComponent, HttpParamsBuilder, I18nBase, I18nPickAsyncPipe, I18nPickPipe, I18nText, IFrameState, IframeCloseDirective, IframeDialogComponent, IframeHostComponent, IframeService, IframeSideContentComponent, IncludeExcludeSelectionModel, IncludeExcludeState, IncludeExcludeValue, IndexedEntities, InternalRestClientConfig, Interval, IsoDurationPipe, IsoIntervalFormatUtil, IsoIntervalParsePipe, IsoIntervalPipe, ItemActivationEvent, ItemActivationOptions, JsonMapUtil, KafentConfig, KafentEvent, KafentEventService, KafentEventStream, KafentEventStreamDisabled, KafentEventStreamSse, KafentEventTransport, KafentModule, KafentSseEventChannel, KafentTokenProvider, KafentTokenProviderSessionStorage, KafentTopicSse, KnownElderThemes, KnownLocaleTags, LocalListDataSource, LocalPagedDataSource, LocalisationPickerService, MasterDetailActivationEvent, MasterSelectionState, MatTableDataContextBinding, MatTableDataContextBindingBuilder, MultiModelBaseComponent, NextNumberUtil, Objects, OnlineStatus, Page, PageRequest, Pageable, ParseUtil, Path, PathNode, PeriodBucket, PeriodDuration, PeriodFormat, ProcessIterationContext, ProcessState, PropertyPathUtil, Quantity, QueryListBinding, QuestionDialogConfig, ReactiveEventSource, ReactiveEventSourceState, ReactiveFetchEventSource, ReactiveFetchEventSourceService, ReactiveMap, ReactiveSSeMessage, RefreshingEntity, RestClient, RestClientConfig, RestClientContinuable, RestClientList, RestClientPaged, SearchQuery, SelectChipSpecUtil, SelectOptionChipSpecUtil, SelectionModel, SelectionModelPopupDirective, Sets, SimpleLocalisationPicker, Sort, SortOption, SortUtil, StandardToastComponent, SubBar, SuggestionProvider, TemplateCompositeControl, TemplatedSelectionDialogComponent, ThemeSpec, TimeAgoPipe, TimeDurationPipe, TimeUtil, ToIsoDateStringPipe, ToastType, TokenChunkRequest, ToolbarHeader, Translated, TranslatedConverter, TranslatedEnumValue, TranslatedText, TypedEventMessage, Unit, UnitDimension, UnitDimensionInfo, UnitInfo, UnitRegistry, UrlBuilder, UrlQueryParams, UuidUtil, ValueAccessorBase, ValueWrapper, ViewProviders, WeightPipe, alphaNumStringComparator, buildFormIntegrationProviders, coerceInterval, coerceIntervalIsoStr, createDataOptionsProvider, createSelectionModel, existingOrNewElderTableModel, initSearchUrlService, isActivePagedDataContext, isContinuableDataContext, isContinuableDataSource, isDataContext, isDataSource, isDataViewMessageType, isElderEntityValueAccessor, isElderMultiEntityValueAccessor, isListDataSource, isPagedDataSource, lazySample, lazySampleTime, naturalValueComparator, newElderTableModel, proxyControlContainer, registerLocale, runInZone, themeInit };
 //# sourceMappingURL=elderbyte-ngx-starter.mjs.map