@elderbyte/ngx-starter 14.4.0-beta.15 → 14.4.0-beta.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -19726,7 +19726,7 @@ class ElderSearchBoxComponent {
19726
19726
  this.autoPanel = true;
19727
19727
  this.name = 'searchExpression';
19728
19728
  this.queryKey = 'query';
19729
- this._dense = false;
19729
+ this._dense = true;
19730
19730
  this.autocomplete = 'off';
19731
19731
  }
19732
19732
  /***************************************************************************
@@ -19768,10 +19768,10 @@ class ElderSearchBoxComponent {
19768
19768
  }
19769
19769
  }
19770
19770
  ElderSearchBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderSearchBoxComponent, deps: [{ token: ElderSearchContextDirective }], target: i0.ɵɵFactoryTarget.Component });
19771
- ElderSearchBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderSearchBoxComponent, selector: "elder-search-box", inputs: { autoPanel: "autoPanel", name: "name", queryKey: "queryKey", placeholder: "placeholder", hint: "hint", autocomplete: "autocomplete", dense: "dense" }, queries: [{ propertyName: "advancedSearch", first: true, predicate: ElderSearchPanelComponent, descendants: true }], viewQueries: [{ propertyName: "search", first: true, predicate: ["search"], descendants: true }], exportAs: ["elderSearchBox"], ngImport: i0, template: "<div fxLayout=\"row\" fxFlex>\n\n <!-- Main search input -->\n <mat-form-field\n *ngIf=\"overlayState$ | async as overlayState\"\n fxFlex=\"grow\" fxFlexAlign=\"center\"\n [elderDense]=\"dense\">\n\n <div fxLayout=\"row\" matPrefix>\n <button mat-icon-button type=\"button\"\n [elderOverlayTrigger]=\"searchPanel\" (click)=\"blurFocus($event)\"\n >\n <mat-icon>search</mat-icon>\n </button>\n </div>\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 fxLayout=\"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 [matBadge]=\"userDefinedFilters.length\"\n [matBadgeHidden]=\"userDefinedFilters.length == 0\"\n matBadgeColor=\"accent\"\n [elderOverlayTrigger]=\"searchPanel\" (click)=\"blurFocus($event)\">\n\n <mat-icon [color]=\"userDefinedFilters.length > 0 ? 'accent' : 'default'\">filter_list</mat-icon>\n </button>\n\n </div>\n </mat-form-field>\n</div>\n\n\n<!-- Overlay Panel for advanced search -->\n<elder-overlay #searchPanel=\"elderOverlay\">\n <elder-card-panel class=\"elder-search-panel\">\n\n <!-- Project the users search inputs here -->\n <ng-content select=\"elder-search-panel\"></ng-content>\n\n <div fxLayout=\"row\" fxLayoutAlign=\"space-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-card-panel>\n</elder-overlay>\n", styles: [".elder-search-panel{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: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4$1.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i4$1.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i5$1.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.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-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: i4$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: ElderCardPanelComponent, selector: "elder-card-panel" }, { kind: "directive", type: ElderFormFieldDenseDirective, selector: "mat-form-field[elderDense]", inputs: ["elderDense"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: " [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md], [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md], [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm], [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexAlignDirective, selector: " [fxFlexAlign], [fxFlexAlign.xs], [fxFlexAlign.sm], [fxFlexAlign.md], [fxFlexAlign.lg], [fxFlexAlign.xl], [fxFlexAlign.lt-sm], [fxFlexAlign.lt-md], [fxFlexAlign.lt-lg], [fxFlexAlign.lt-xl], [fxFlexAlign.gt-xs], [fxFlexAlign.gt-sm], [fxFlexAlign.gt-md], [fxFlexAlign.gt-lg]", inputs: ["fxFlexAlign", "fxFlexAlign.xs", "fxFlexAlign.sm", "fxFlexAlign.md", "fxFlexAlign.lg", "fxFlexAlign.xl", "fxFlexAlign.lt-sm", "fxFlexAlign.lt-md", "fxFlexAlign.lt-lg", "fxFlexAlign.lt-xl", "fxFlexAlign.gt-xs", "fxFlexAlign.gt-sm", "fxFlexAlign.gt-md", "fxFlexAlign.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: ElderSearchInputDirective, selector: "[elderSearchInput]", inputs: ["elderSearchInputKey", "elderSearchInputTransform", "elderSearchInput", "elderSearchInputFallback"], exportAs: ["elderSearchInput"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
19771
+ ElderSearchBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderSearchBoxComponent, selector: "elder-search-box", inputs: { autoPanel: "autoPanel", name: "name", queryKey: "queryKey", placeholder: "placeholder", label: "label", hint: "hint", autocomplete: "autocomplete", dense: "dense" }, queries: [{ propertyName: "advancedSearch", first: true, predicate: ElderSearchPanelComponent, descendants: true }], viewQueries: [{ propertyName: "search", first: true, predicate: ["search"], descendants: true }], exportAs: ["elderSearchBox"], ngImport: i0, template: "<div fxLayout=\"row\" fxFlex>\n\n <!-- Main search input -->\n <mat-form-field\n *ngIf=\"overlayState$ | async as overlayState\"\n fxFlex=\"grow\" fxFlexAlign=\"center\"\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 fxLayout=\"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 [matBadge]=\"userDefinedFilters.length\"\n [matBadgeHidden]=\"userDefinedFilters.length == 0\"\n matBadgeColor=\"accent\"\n [elderOverlayTrigger]=\"searchPanel\" (click)=\"blurFocus($event)\">\n <mat-icon [color]=\"userDefinedFilters.length > 0 ? 'accent' : undefined\">filter_list</mat-icon>\n </button>\n\n </div>\n </mat-form-field>\n</div>\n\n\n<!-- Overlay Panel for advanced search -->\n<elder-overlay #searchPanel=\"elderOverlay\">\n <elder-card-panel class=\"elder-search-panel\">\n\n <!-- Project the users search inputs here -->\n <ng-content select=\"elder-search-panel\"></ng-content>\n\n <div fxLayout=\"row\" fxLayoutAlign=\"space-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-card-panel>\n</elder-overlay>\n", styles: [".elder-search-panel{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: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4$1.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i4$1.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i5$1.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.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-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: i4$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: ElderCardPanelComponent, selector: "elder-card-panel" }, { kind: "directive", type: ElderFormFieldDenseDirective, selector: "mat-form-field[elderDense]", inputs: ["elderDense"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: " [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md], [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md], [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm], [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexAlignDirective, selector: " [fxFlexAlign], [fxFlexAlign.xs], [fxFlexAlign.sm], [fxFlexAlign.md], [fxFlexAlign.lg], [fxFlexAlign.xl], [fxFlexAlign.lt-sm], [fxFlexAlign.lt-md], [fxFlexAlign.lt-lg], [fxFlexAlign.lt-xl], [fxFlexAlign.gt-xs], [fxFlexAlign.gt-sm], [fxFlexAlign.gt-md], [fxFlexAlign.gt-lg]", inputs: ["fxFlexAlign", "fxFlexAlign.xs", "fxFlexAlign.sm", "fxFlexAlign.md", "fxFlexAlign.lg", "fxFlexAlign.xl", "fxFlexAlign.lt-sm", "fxFlexAlign.lt-md", "fxFlexAlign.lt-lg", "fxFlexAlign.lt-xl", "fxFlexAlign.gt-xs", "fxFlexAlign.gt-sm", "fxFlexAlign.gt-md", "fxFlexAlign.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: ElderSearchInputDirective, selector: "[elderSearchInput]", inputs: ["elderSearchInputKey", "elderSearchInputTransform", "elderSearchInput", "elderSearchInputFallback"], exportAs: ["elderSearchInput"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
19772
19772
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderSearchBoxComponent, decorators: [{
19773
19773
  type: Component,
19774
- args: [{ selector: 'elder-search-box', exportAs: 'elderSearchBox', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div fxLayout=\"row\" fxFlex>\n\n <!-- Main search input -->\n <mat-form-field\n *ngIf=\"overlayState$ | async as overlayState\"\n fxFlex=\"grow\" fxFlexAlign=\"center\"\n [elderDense]=\"dense\">\n\n <div fxLayout=\"row\" matPrefix>\n <button mat-icon-button type=\"button\"\n [elderOverlayTrigger]=\"searchPanel\" (click)=\"blurFocus($event)\"\n >\n <mat-icon>search</mat-icon>\n </button>\n </div>\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 fxLayout=\"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 [matBadge]=\"userDefinedFilters.length\"\n [matBadgeHidden]=\"userDefinedFilters.length == 0\"\n matBadgeColor=\"accent\"\n [elderOverlayTrigger]=\"searchPanel\" (click)=\"blurFocus($event)\">\n\n <mat-icon [color]=\"userDefinedFilters.length > 0 ? 'accent' : 'default'\">filter_list</mat-icon>\n </button>\n\n </div>\n </mat-form-field>\n</div>\n\n\n<!-- Overlay Panel for advanced search -->\n<elder-overlay #searchPanel=\"elderOverlay\">\n <elder-card-panel class=\"elder-search-panel\">\n\n <!-- Project the users search inputs here -->\n <ng-content select=\"elder-search-panel\"></ng-content>\n\n <div fxLayout=\"row\" fxLayoutAlign=\"space-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-card-panel>\n</elder-overlay>\n", styles: [".elder-search-panel{min-width:250px}\n"] }]
19774
+ args: [{ selector: 'elder-search-box', exportAs: 'elderSearchBox', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div fxLayout=\"row\" fxFlex>\n\n <!-- Main search input -->\n <mat-form-field\n *ngIf=\"overlayState$ | async as overlayState\"\n fxFlex=\"grow\" fxFlexAlign=\"center\"\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 fxLayout=\"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 [matBadge]=\"userDefinedFilters.length\"\n [matBadgeHidden]=\"userDefinedFilters.length == 0\"\n matBadgeColor=\"accent\"\n [elderOverlayTrigger]=\"searchPanel\" (click)=\"blurFocus($event)\">\n <mat-icon [color]=\"userDefinedFilters.length > 0 ? 'accent' : undefined\">filter_list</mat-icon>\n </button>\n\n </div>\n </mat-form-field>\n</div>\n\n\n<!-- Overlay Panel for advanced search -->\n<elder-overlay #searchPanel=\"elderOverlay\">\n <elder-card-panel class=\"elder-search-panel\">\n\n <!-- Project the users search inputs here -->\n <ng-content select=\"elder-search-panel\"></ng-content>\n\n <div fxLayout=\"row\" fxLayoutAlign=\"space-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-card-panel>\n</elder-overlay>\n", styles: [".elder-search-panel{min-width:250px}\n"] }]
19775
19775
  }], ctorParameters: function () { return [{ type: ElderSearchContextDirective }]; }, propDecorators: { search: [{
19776
19776
  type: ViewChild,
19777
19777
  args: ['search']
@@ -19786,6 +19786,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
19786
19786
  type: Input
19787
19787
  }], placeholder: [{
19788
19788
  type: Input
19789
+ }], label: [{
19790
+ type: Input
19789
19791
  }], hint: [{
19790
19792
  type: Input
19791
19793
  }], autocomplete: [{