@elderbyte/ngx-starter 16.4.0 → 16.4.2

package/fesm2022/elderbyte-ngx-starter.mjs

@@ -4603,8 +4603,7 @@ class RequiredFilterEvaluator {
     }
     allRequiredFiltersPresent(requiredFilters, currentFilters) {
         if (requiredFilters) {
-            const validatedFilterGroups = requiredFilters.map(filterGroup => this.hasAllFilters(filterGroup, currentFilters));
-            return validatedFilterGroups.find(validGroup => !!validGroup);
+            return requiredFilters.some(filterGroup => this.hasAllFilters(filterGroup, currentFilters));
         }
         return true;
     }
@@ -25935,8 +25934,9 @@ class SearchContext {
         this.log = LoggerFactory.getLogger(this.constructor.name);
         this.userFilterContext = new FilterContext();
         this.forcedFilterContext = new FilterContext();
+        this.allFilters$ = new BehaviorSubject(undefined);
         this.id = id;
-        this._allFilters$ = this.userFilterContext.filters.pipe(combineLatestWith(this.forcedFilterContext.filters), skip(1), map(([userFilters, forcedFilters]) => FilterUtil.mergeCombine(userFilters, forcedFilters)), tap(x => this.log.debug('allFilters changed: ', x)));
+        this.userFilterContext.filters.pipe(combineLatestWith(this.forcedFilterContext.filters), skip(1), map(([userFilters, forcedFilters]) => FilterUtil.mergeCombine(userFilters, forcedFilters)), tap(x => this.log.debug('allFilters changed: ', x))).subscribe(merged => this.allFilters$.next(merged));
     }
     /***************************************************************************
      *                                                                         *
@@ -25944,7 +25944,7 @@ class SearchContext {
      *                                                                         *
      **************************************************************************/
     get allFiltersChanged() {
-        return this._allFilters$;
+        return this.allFilters$.pipe(filter(filters => !!filters));
     }
     get userFilters() {
         return this.userFilterContext;
@@ -25963,6 +25963,9 @@ class SearchContext {
     replaceUserFilters(filters) {
         this.userFilterContext.replaceFilters(filters);
     }
+    replaceForcedFilters(filters) {
+        this.forcedFilterContext.replaceFilters(filters);
+    }
 }
 
 class SearchContextService {
@@ -26041,11 +26044,10 @@ class ElderSearchContextDirective {
         this.syncSearchContextToBoundFilterContext();
     }
     ngAfterContentInit() {
+        const searchContext = this.searchContext;
+        this.applySearchContextToInputs(searchContext);
         this.syncSearchInputsToSearchContext();
     }
-    ngAfterViewInit() {
-        this.applySearchContextToInputs();
-    }
     ngOnDestroy() {
         this.destroy$.next();
         this.destroy$.complete();
@@ -26093,7 +26095,7 @@ class ElderSearchContextDirective {
      * to also keep the users intent (by merging) them.
      */
     set forcedFilters(filters) {
-        this.searchContext.forcedFilters.replaceFilters(filters);
+        this.searchContext.replaceForcedFilters(filters);
     }
     get forcedFilters() {
         return this.searchContext.forcedFilters.filtersSnapshot;
@@ -26146,7 +26148,8 @@ class ElderSearchContextDirective {
         const searchContext = this.searchContext;
         if (searchContext.userFilters.isEmpty) {
             if (!dcFilters.isEmpty) {
-                searchContext.updateUserFilters(dcFilters.filtersSnapshot);
+                // Consider all filters in DC as defaults, expect for foced filters.
+                searchContext.updateUserFilters(FilterUtil.strip(dcFilters.filtersSnapshot, this.forcedFilters));
             }
         }
         else {
@@ -26174,30 +26177,33 @@ class ElderSearchContextDirective {
             this.log.warn('Failed to apply filters since no FilterContext is available!', filters);
         }
     }
-    applySearchContextToInputs() {
-        const ctx = this.searchContext;
-        this.applyFiltersToInputs(ctx.userFilters.filtersSnapshot // this.filterContext.filtersSnapshot (old)
-        );
+    applySearchContextToInputs(searchContext) {
+        this.applyFiltersToInputs(searchContext.userFilters.filtersSnapshot);
     }
     applyFiltersToInputs(filters) {
-        this.log.warn('applyFiltersToInputs', filters);
-        this._searchInputs$.getValue().forEach(input => {
-            const filter = this.findFilterForInput(input, filters);
-            if (filter) {
-                input.applyInitialValue(filter.value);
-            }
-        });
-    }
-    findFilterForInput(input, filters) {
-        for (const filter of filters) {
-            if (filter.key === input.name) {
-                return filter;
-            }
+        if (filters.length > 0) {
+            const inputsByName = this.searchInputsByName();
+            this.log.warn('applyFiltersToInputs [' + Array.from(inputsByName.keys()) + ']', {
+                filters: filters,
+                inputsByName: inputsByName
+            });
+            filters.forEach(f => {
+                const input = inputsByName.get(f.key);
+                if (input) {
+                    input.applyInitialValue(f.value);
+                }
+            });
         }
-        return null;
+    }
+    searchInputsByName() {
+        const inputs = this._searchInputs$.getValue();
+        const map = new Map();
+        inputs.forEach(input => map.set(input.name, input));
+        return map;
     }
     convertToFilters(states) {
         return states
+            .filter(s => s.userEvent)
             .filter(s => !!s.queryKey)
             .map(s => new Filter(s.queryKey, s.queryValue));
     }
@@ -26224,7 +26230,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  */
 class SearchInputState {
     static unknown() {
-        return new SearchInputState(null, null, null, true);
+        return new SearchInputState(null, null, null, true, false);
     }
     /***************************************************************************
      *                                                                         *
@@ -26247,11 +26253,16 @@ class SearchInputState {
     /**
      * pristine Has the user touched this?
      */
-    pristine) {
+    pristine, 
+    /**
+     * Was the input changed by a user interaction
+     */
+    userEvent) {
         this.attribute = attribute;
         this.queryValue = queryValue;
         this.queryKey = queryKey;
         this.pristine = pristine;
+        this.userEvent = userEvent;
     }
     /***************************************************************************
      *                                                                         *
@@ -26295,7 +26306,7 @@ class SearchInputState {
                 pristineNow = pristine;
             }
         }
-        return new SearchInputState(this.attribute, value, this.queryKey, pristineNow);
+        return new SearchInputState(this.attribute, value, this.queryKey, pristineNow, true);
     }
 }
 
@@ -26321,7 +26332,7 @@ class ElderInitialValueDirective {
         this.initialValue$ = new BehaviorSubject(null);
         this.destroy$ = new Subject();
         this.initialDone$ = new Subject();
-        const ngModelValue$ = of("dummy")
+        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]) => {
@@ -26369,6 +26380,9 @@ class ElderInitialValueDirective {
             .pipe(takeUntil(this.destroy$));
     }
     applyInitialValue(value) {
+        if (value) {
+            this.ngModel.control.setValue(value);
+        }
         this.initialValue$.next(value);
     }
     ngOnDestroy() {
@@ -26381,8 +26395,8 @@ class ElderInitialValueDirective {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElderInitialValueDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: "[elderInitialValue]",
-                    exportAs: "elderInitialValue"
+                    selector: '[elderInitialValue]',
+                    exportAs: 'elderInitialValue'
                 }]
         }], ctorParameters: function () { return [{ type: i3.NgModel, decorators: [{
                     type: Host
@@ -26400,11 +26414,10 @@ class ElderSearchInputDirective {
     constructor(searchContext, ngModel) {
         this.searchContext = searchContext;
         this.ngModel = ngModel;
-        //TODO: In Angular 16, use standalone directives and host component to inject directive to component
-        this.initialValueDirective = new ElderInitialValueDirective(this.ngModel);
         this._state = new BehaviorSubject(SearchInputState.unknown());
         this.destroy$ = new Subject();
         this.log = LoggerFactory.getLogger(this.constructor.name);
+        this.initialValueDirective = new ElderInitialValueDirective(ngModel);
     }
     /***************************************************************************
      *                                                                         *
@@ -26418,8 +26431,9 @@ class ElderSearchInputDirective {
     ngAfterViewInit() {
         this._extractedName = this.extractName();
         this.log.debug(this._extractedName + "|" + this.queryKey + "|" + this.resolvePath);
-        const viewStabilized$ = of('stabilized$').pipe(delay(20), first());
-        this.stateObservable().pipe(skipUntil(viewStabilized$)).subscribe(state => {
+        this.stateObservable()
+            .subscribe(state => {
+            // this.log.error('EMIT SEARCH INPUT STATE [' + state.queryKey + ']: ' + state.queryValue + (state.pristine ? '(pristine)' : ''), state)
             this.emitState(state);
         });
     }
@@ -26474,12 +26488,20 @@ class ElderSearchInputDirective {
      * Private methods                                                         *
      *                                                                         *
      **************************************************************************/
+    get valueChanges$() {
+        return this.ngModel.control.valueChanges
+            .pipe(takeUntil(this.destroy$));
+    }
     stateObservable() {
-        return this.initialValueDirective.valueChanges$.pipe(takeUntil(this.destroy$), map(value => {
-            const queryValue = this.convertRawModelValueToQueryString(value);
-            const pristine = !this.isAttributeValuePresent(value);
-            return new SearchInputState(this.name, queryValue, this.queryKey || this.name, pristine);
-        }));
+        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 startWithAsync$ = of('start').pipe(map(start => this.buildInputState(this.ngModel.control.value, false)));
+        return concat(startWithAsync$, inputStateChanges$);
+    }
+    buildInputState(controlValue, userEvent) {
+        const queryValue = this.convertRawModelValueToQueryString(controlValue);
+        const pristine = !this.isAttributeValuePresent(controlValue);
+        return new SearchInputState(this.name, queryValue, this.queryKey || this.name, pristine, userEvent);
     }
     convertQueryStringToRawModelValue(queryString) {
         if (Objects.nonNull(queryString)) {
@@ -26939,8 +26961,8 @@ class ElderSearchBoxComponent {
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    constructor(searchModel) {
-        this.searchModel = searchModel;
+    constructor(searchContextDirective) {
+        this.searchContextDirective = searchContextDirective;
         /***************************************************************************
          *                                                                         *
          * Fields                                                                  *
@@ -26962,16 +26984,15 @@ class ElderSearchBoxComponent {
         this.queryKey = 'query';
         this._dense = false;
         this.autocomplete = 'off';
+        this.userFilters$ = searchContextDirective.userDefinedAttributes$.pipe(
+        //switchMap(ctx => ctx.userFilters.filters)
+        );
     }
     /***************************************************************************
      *                                                                         *
      * Life Cycle                                                              *
      *                                                                         *
      **************************************************************************/
-    ngOnInit() {
-    }
-    ngAfterViewInit() {
-    }
     ngAfterContentInit() {
         this.overlayState$.next(new OverlayState(!!this.advancedSearch));
     }
@@ -26998,14 +27019,14 @@ class ElderSearchBoxComponent {
      * Occurs when the user clicks the clear search button
      */
     clearSearch(event) {
-        this.searchModel.reset();
+        this.searchContextDirective.reset();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElderSearchBoxComponent, deps: [{ token: ElderSearchContextDirective }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ElderSearchBoxComponent, selector: "elder-search-box", inputs: { autoPanel: "autoPanel", name: "name", queryKey: "queryKey", placeholder: "placeholder", label: "label", hint: "hint", autocomplete: "autocomplete", appearance: "appearance", dense: "dense" }, host: { classAttribute: "elder-form-field-host" }, queries: [{ propertyName: "advancedSearch", first: true, predicate: ElderSearchPanelComponent, descendants: true }], viewQueries: [{ propertyName: "search", first: true, predicate: ["search"], descendants: true }], exportAs: ["elderSearchBox"], ngImport: i0, template: "<div class=\"layout-row place-stretch-center full flex\" style=\"overflow: hidden\">\n  <mat-form-field\n    *ngIf=\"overlayState$ | async as overlayState\"\n    [appearance]=\"appearance\"\n    class=\"elder-search-box-field flex-auto\" subscriptSizing=\"dynamic\"\n    [elderDense]=\"dense\">\n\n    <button matPrefix mat-icon-button type=\"button\"\n            [elderOverlayTrigger]=\"searchPanel\" (click)=\"blurFocus($event)\"\n    >\n      <mat-icon>search</mat-icon>\n    </button>\n\n    <input matInput type=\"text\" [name]=\"name\" [placeholder]=\"placeholder\" #search cdkFocusInitial\n           ngModel\n           elderSearchInput [elderSearchInputKey]=\"queryKey\" #searchInput=\"elderSearchInput\"\n           [autocomplete]=\"(autoPanel && overlayState.hasOverlay) ? 'off' : autocomplete\"\n           [elderOverlayOrigin]=\"searchPanel\"\n           [elderOverlayTrigger]=\"searchPanel\"\n           [elderOverlayTriggerType]=\"'focus'\"\n           [elderOverlayTriggerEnabled]=\"autoPanel && overlayState.hasOverlay && (searchInput?.state$ | async)?.pristine\"\n    >\n    <mat-hint *ngIf=\"hint\">{{hint}}</mat-hint>\n\n    <div class=\"layout-row\" matSuffix *ngIf=\"searchModel.userDefinedAttributes$ | async as userDefinedFilters\">\n\n      <button mat-icon-button type=\"button\"\n              *ngIf=\"userDefinedFilters.length > 0\"\n              (click)=\"clearSearch($event)\"\n              name=\"clear\" aria-label=\"Clear\">\n        <mat-icon>close</mat-icon>\n      </button>\n\n      <button mat-icon-button type=\"button\"\n              *ngIf=\"overlayState.hasOverlay\" name=\"openPanel\"\n              [elderOverlayTrigger]=\"searchPanel\" (click)=\"blurFocus($event)\">\n        <mat-icon\n          [matBadge]=\"userDefinedFilters.length\"\n          matBadgeSize=\"small\"\n          [matBadgeOverlap]=\"true\"\n          [matBadgeHidden]=\"userDefinedFilters.length == 0\"\n          matBadgeColor=\"accent\"\n          [color]=\"userDefinedFilters.length > 0 ? 'accent' : undefined\"\n        >\n          filter_list\n        </mat-icon>\n      </button>\n    </div>\n  </mat-form-field>\n</div>\n\n\n<!-- Overlay Panel for advanced search -->\n<elder-overlay #searchPanel=\"elderOverlay\">\n  <elder-dialog-panel class=\"elder-search-panel-container\">\n\n    <!-- Project the users search inputs here -->\n    <ng-content select=\"elder-search-panel\"></ng-content>\n\n    <div class=\"layout-row place-between-center\">\n      <button mat-raised-button type=\"button\" name=\"clear\"\n              (click)=\"clearSearch($event)\">{{'context.reset' | translate}}\n      </button>\n\n      <button mat-raised-button type=\"button\" name=\"ok\" color=\"primary\"\n              (click)=\"searchPanel.closeOverlay()\">Ok\n      </button>\n    </div>\n  </elder-dialog-panel>\n</elder-overlay>\n", styles: [".elder-search-box-field{margin-top:4px;margin-bottom:4px}.elder-search-panel-container{min-width:250px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2$3.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: ElderOverlayComponent, selector: "elder-overlay", inputs: ["originX", "originY", "overlayX", "overlayY", "offsetY", "offsetX", "backdrop", "backdropVisible", "origin", "positionStrategy", "overlaySize"], outputs: ["keydownEvents", "attachedChange"], exportAs: ["elderOverlay"] }, { kind: "directive", type: ElderOverlayTriggerDirective, selector: "[elderOverlayTrigger]", inputs: ["elderOverlayTrigger", "elderOverlayTriggerType", "elderOverlayTriggerEnabled"] }, { kind: "directive", type: ElderOverlayOriginDirective, selector: "[elderOverlayOrigin]", inputs: ["elderOverlayOrigin"] }, { kind: "component", type: ElderDialogPanelComponent, selector: "elder-dialog-panel" }, { kind: "directive", type: ElderFormFieldDenseDirective, selector: "mat-form-field[elderDense]", inputs: ["elderDense", "subscriptSizing", "floatLabel"] }, { kind: "directive", type: ElderSearchInputDirective, selector: "[elderSearchInput]", inputs: ["elderSearchInputKey", "elderSearchInputTransform", "elderSearchInput", "dataSource", "elderSearchInputFallback", "valueAsId"], exportAs: ["elderSearchInput"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ElderSearchBoxComponent, selector: "elder-search-box", inputs: { autoPanel: "autoPanel", name: "name", queryKey: "queryKey", placeholder: "placeholder", label: "label", hint: "hint", autocomplete: "autocomplete", appearance: "appearance", dense: "dense" }, host: { classAttribute: "elder-form-field-host" }, queries: [{ propertyName: "advancedSearch", first: true, predicate: ElderSearchPanelComponent, descendants: true }], viewQueries: [{ propertyName: "search", first: true, predicate: ["search"], descendants: true }], exportAs: ["elderSearchBox"], ngImport: i0, template: "<div class=\"layout-row place-stretch-center full flex\" style=\"overflow: hidden\">\n  <mat-form-field\n    *ngIf=\"overlayState$ | async as overlayState\"\n    [appearance]=\"appearance\"\n    class=\"elder-search-box-field flex-auto\" subscriptSizing=\"dynamic\"\n    [elderDense]=\"dense\">\n\n    <button matPrefix mat-icon-button type=\"button\"\n            [elderOverlayTrigger]=\"searchPanel\" (click)=\"blurFocus($event)\"\n    >\n      <mat-icon>search</mat-icon>\n    </button>\n\n    <input matInput type=\"text\" [name]=\"name\" [placeholder]=\"placeholder\" #search cdkFocusInitial\n           ngModel\n           elderSearchInput [elderSearchInputKey]=\"queryKey\" #searchInput=\"elderSearchInput\"\n           [autocomplete]=\"(autoPanel && overlayState.hasOverlay) ? 'off' : autocomplete\"\n           [elderOverlayOrigin]=\"searchPanel\"\n           [elderOverlayTrigger]=\"searchPanel\"\n           [elderOverlayTriggerType]=\"'focus'\"\n           [elderOverlayTriggerEnabled]=\"autoPanel && overlayState.hasOverlay && (searchInput?.state$ | async)?.pristine\"\n    >\n    <mat-hint *ngIf=\"hint\">{{hint}}</mat-hint>\n\n    <div class=\"layout-row\" matSuffix *ngIf=\"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: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2$3.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: ElderOverlayComponent, selector: "elder-overlay", inputs: ["originX", "originY", "overlayX", "overlayY", "offsetY", "offsetX", "backdrop", "backdropVisible", "origin", "positionStrategy", "overlaySize"], outputs: ["keydownEvents", "attachedChange"], exportAs: ["elderOverlay"] }, { kind: "directive", type: ElderOverlayTriggerDirective, selector: "[elderOverlayTrigger]", inputs: ["elderOverlayTrigger", "elderOverlayTriggerType", "elderOverlayTriggerEnabled"] }, { kind: "directive", type: ElderOverlayOriginDirective, selector: "[elderOverlayOrigin]", inputs: ["elderOverlayOrigin"] }, { kind: "component", type: ElderDialogPanelComponent, selector: "elder-dialog-panel" }, { kind: "directive", type: ElderFormFieldDenseDirective, selector: "mat-form-field[elderDense]", inputs: ["elderDense", "subscriptSizing", "floatLabel"] }, { kind: "directive", type: ElderSearchInputDirective, selector: "[elderSearchInput]", inputs: ["elderSearchInputKey", "elderSearchInputTransform", "elderSearchInput", "dataSource", "elderSearchInputFallback", "valueAsId"], exportAs: ["elderSearchInput"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElderSearchBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'elder-search-box', exportAs: 'elderSearchBox', host: { 'class': 'elder-form-field-host' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-row place-stretch-center full flex\" style=\"overflow: hidden\">\n  <mat-form-field\n    *ngIf=\"overlayState$ | async as overlayState\"\n    [appearance]=\"appearance\"\n    class=\"elder-search-box-field flex-auto\" subscriptSizing=\"dynamic\"\n    [elderDense]=\"dense\">\n\n    <button matPrefix mat-icon-button type=\"button\"\n            [elderOverlayTrigger]=\"searchPanel\" (click)=\"blurFocus($event)\"\n    >\n      <mat-icon>search</mat-icon>\n    </button>\n\n    <input matInput type=\"text\" [name]=\"name\" [placeholder]=\"placeholder\" #search cdkFocusInitial\n           ngModel\n           elderSearchInput [elderSearchInputKey]=\"queryKey\" #searchInput=\"elderSearchInput\"\n           [autocomplete]=\"(autoPanel && overlayState.hasOverlay) ? 'off' : autocomplete\"\n           [elderOverlayOrigin]=\"searchPanel\"\n           [elderOverlayTrigger]=\"searchPanel\"\n           [elderOverlayTriggerType]=\"'focus'\"\n           [elderOverlayTriggerEnabled]=\"autoPanel && overlayState.hasOverlay && (searchInput?.state$ | async)?.pristine\"\n    >\n    <mat-hint *ngIf=\"hint\">{{hint}}</mat-hint>\n\n    <div class=\"layout-row\" matSuffix *ngIf=\"searchModel.userDefinedAttributes$ | async as userDefinedFilters\">\n\n      <button mat-icon-button type=\"button\"\n              *ngIf=\"userDefinedFilters.length > 0\"\n              (click)=\"clearSearch($event)\"\n              name=\"clear\" aria-label=\"Clear\">\n        <mat-icon>close</mat-icon>\n      </button>\n\n      <button mat-icon-button type=\"button\"\n              *ngIf=\"overlayState.hasOverlay\" name=\"openPanel\"\n              [elderOverlayTrigger]=\"searchPanel\" (click)=\"blurFocus($event)\">\n        <mat-icon\n          [matBadge]=\"userDefinedFilters.length\"\n          matBadgeSize=\"small\"\n          [matBadgeOverlap]=\"true\"\n          [matBadgeHidden]=\"userDefinedFilters.length == 0\"\n          matBadgeColor=\"accent\"\n          [color]=\"userDefinedFilters.length > 0 ? 'accent' : undefined\"\n        >\n          filter_list\n        </mat-icon>\n      </button>\n    </div>\n  </mat-form-field>\n</div>\n\n\n<!-- Overlay Panel for advanced search -->\n<elder-overlay #searchPanel=\"elderOverlay\">\n  <elder-dialog-panel class=\"elder-search-panel-container\">\n\n    <!-- Project the users search inputs here -->\n    <ng-content select=\"elder-search-panel\"></ng-content>\n\n    <div class=\"layout-row place-between-center\">\n      <button mat-raised-button type=\"button\" name=\"clear\"\n              (click)=\"clearSearch($event)\">{{'context.reset' | translate}}\n      </button>\n\n      <button mat-raised-button type=\"button\" name=\"ok\" color=\"primary\"\n              (click)=\"searchPanel.closeOverlay()\">Ok\n      </button>\n    </div>\n  </elder-dialog-panel>\n</elder-overlay>\n", styles: [".elder-search-box-field{margin-top:4px;margin-bottom:4px}.elder-search-panel-container{min-width:250px}\n"] }]
+            args: [{ selector: 'elder-search-box', exportAs: 'elderSearchBox', host: { 'class': 'elder-form-field-host' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-row place-stretch-center full flex\" style=\"overflow: hidden\">\n  <mat-form-field\n    *ngIf=\"overlayState$ | async as overlayState\"\n    [appearance]=\"appearance\"\n    class=\"elder-search-box-field flex-auto\" subscriptSizing=\"dynamic\"\n    [elderDense]=\"dense\">\n\n    <button matPrefix mat-icon-button type=\"button\"\n            [elderOverlayTrigger]=\"searchPanel\" (click)=\"blurFocus($event)\"\n    >\n      <mat-icon>search</mat-icon>\n    </button>\n\n    <input matInput type=\"text\" [name]=\"name\" [placeholder]=\"placeholder\" #search cdkFocusInitial\n           ngModel\n           elderSearchInput [elderSearchInputKey]=\"queryKey\" #searchInput=\"elderSearchInput\"\n           [autocomplete]=\"(autoPanel && overlayState.hasOverlay) ? 'off' : autocomplete\"\n           [elderOverlayOrigin]=\"searchPanel\"\n           [elderOverlayTrigger]=\"searchPanel\"\n           [elderOverlayTriggerType]=\"'focus'\"\n           [elderOverlayTriggerEnabled]=\"autoPanel && overlayState.hasOverlay && (searchInput?.state$ | async)?.pristine\"\n    >\n    <mat-hint *ngIf=\"hint\">{{hint}}</mat-hint>\n\n    <div class=\"layout-row\" matSuffix *ngIf=\"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"] }]
         }], ctorParameters: function () { return [{ type: ElderSearchContextDirective }]; }, propDecorators: { search: [{
                 type: ViewChild,
                 args: ['search']