@elderbyte/ngx-starter 16.2.2 → 16.2.3
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.
- package/esm2022/lib/components/forms/search/elder-search-context.directive.mjs +56 -24
- package/esm2022/lib/components/forms/search/elder-search-input.directive.mjs +1 -2
- package/esm2022/lib/components/forms/search/search-box/elder-search-box.component.mjs +3 -3
- package/fesm2022/elderbyte-ngx-starter.mjs +55 -25
- package/fesm2022/elderbyte-ngx-starter.mjs.map +1 -1
- package/lib/components/forms/search/elder-search-context.directive.d.ts +20 -6
- package/package.json +1 -1
|
@@ -25730,7 +25730,6 @@ class ElderSearchInputDirective {
|
|
|
25730
25730
|
}
|
|
25731
25731
|
stateObservable() {
|
|
25732
25732
|
return this.initialValueDirective.valueChanges$.pipe(takeUntil(this._unsubscribe$), map(value => {
|
|
25733
|
-
console.warn(value + "|" + this.name);
|
|
25734
25733
|
const queryValue = this.convertRawModelValueToQueryString(value);
|
|
25735
25734
|
const pristine = !this.isAttributeValuePresent(value);
|
|
25736
25735
|
return new SearchInputState(this.name, queryValue, this.queryKey || this.name, pristine);
|
|
@@ -25868,16 +25867,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
|
|
|
25868
25867
|
* and holds their values in a central search model.
|
|
25869
25868
|
*/
|
|
25870
25869
|
class ElderSearchContextDirective {
|
|
25871
|
-
|
|
25872
|
-
|
|
25873
|
-
|
|
25874
|
-
|
|
25875
|
-
|
|
25876
|
-
|
|
25870
|
+
/***************************************************************************
|
|
25871
|
+
* *
|
|
25872
|
+
* Constructor *
|
|
25873
|
+
* *
|
|
25874
|
+
**************************************************************************/
|
|
25875
|
+
constructor(parentContext) {
|
|
25876
|
+
this.parentContext = parentContext;
|
|
25877
|
+
this.childSearchInputs$ = new BehaviorSubject$1([]);
|
|
25877
25878
|
this.forcedFilters$ = new BehaviorSubject$1([]);
|
|
25878
25879
|
this.log = LoggerFactory.getLogger(this.constructor.name);
|
|
25879
25880
|
this._unsubscribe$ = new Subject$1();
|
|
25880
|
-
this._searchInputs = new BehaviorSubject$1([]);
|
|
25881
25881
|
this._searchStates = new BehaviorSubject$1([]);
|
|
25882
25882
|
this._filters$ = new BehaviorSubject$1([]);
|
|
25883
25883
|
this._initialFilters$ = new BehaviorSubject$1([]);
|
|
@@ -25887,18 +25887,16 @@ class ElderSearchContextDirective {
|
|
|
25887
25887
|
* Life Cycle *
|
|
25888
25888
|
* *
|
|
25889
25889
|
**************************************************************************/
|
|
25890
|
+
ngAfterContentInit() {
|
|
25891
|
+
if (!this.isParentContextNull()) {
|
|
25892
|
+
this.registerInputsToParentContext();
|
|
25893
|
+
}
|
|
25894
|
+
}
|
|
25890
25895
|
ngAfterViewInit() {
|
|
25891
|
-
|
|
25892
|
-
|
|
25893
|
-
|
|
25894
|
-
|
|
25895
|
-
const userFilters = this.convertToFilters(states);
|
|
25896
|
-
this._filters$.next(userFilters);
|
|
25897
|
-
this.applyFilters(userFilters, forcedFilters);
|
|
25898
|
-
});
|
|
25899
|
-
this.initialFilters$.pipe(takeUntil(this._unsubscribe$), skip(1)).subscribe((initialFilters) => {
|
|
25900
|
-
this.searchInputs.forEach(input => input.setInitialFilter(initialFilters));
|
|
25901
|
-
});
|
|
25896
|
+
if (this.isParentContextNull()) {
|
|
25897
|
+
this.subscribeSearchInputs();
|
|
25898
|
+
this.subscribeInitialFilters();
|
|
25899
|
+
}
|
|
25902
25900
|
}
|
|
25903
25901
|
ngOnDestroy() {
|
|
25904
25902
|
this._unsubscribe$.next();
|
|
@@ -25910,7 +25908,7 @@ class ElderSearchContextDirective {
|
|
|
25910
25908
|
* *
|
|
25911
25909
|
**************************************************************************/
|
|
25912
25910
|
set filterContext(value) {
|
|
25913
|
-
this._filterContext = value;
|
|
25911
|
+
this._filterContext = value instanceof FilterContext ? value : null;
|
|
25914
25912
|
}
|
|
25915
25913
|
get filterContext() {
|
|
25916
25914
|
return this._filterContext;
|
|
@@ -25962,6 +25960,9 @@ class ElderSearchContextDirective {
|
|
|
25962
25960
|
* Public API *
|
|
25963
25961
|
* *
|
|
25964
25962
|
**************************************************************************/
|
|
25963
|
+
registerInput(searchInputs) {
|
|
25964
|
+
this.childSearchInputs$.next([...this.childSearchInputs$.getValue(), ...searchInputs]);
|
|
25965
|
+
}
|
|
25965
25966
|
registerInitialFilters(filters) {
|
|
25966
25967
|
this._initialFilters$.next(filters);
|
|
25967
25968
|
}
|
|
@@ -25969,7 +25970,6 @@ class ElderSearchContextDirective {
|
|
|
25969
25970
|
this.attributesSnapshot
|
|
25970
25971
|
.filter(attr => !attr.readonly)
|
|
25971
25972
|
.forEach(a => {
|
|
25972
|
-
console.log(a.name);
|
|
25973
25973
|
a.reset();
|
|
25974
25974
|
});
|
|
25975
25975
|
}
|
|
@@ -25978,6 +25978,32 @@ class ElderSearchContextDirective {
|
|
|
25978
25978
|
* Private *
|
|
25979
25979
|
* *
|
|
25980
25980
|
**************************************************************************/
|
|
25981
|
+
registerInputsToParentContext() {
|
|
25982
|
+
if (!this.isParentContextNull()) {
|
|
25983
|
+
this.parentContext.registerInput(this.searchInputs.toArray());
|
|
25984
|
+
}
|
|
25985
|
+
}
|
|
25986
|
+
isParentContextNull() {
|
|
25987
|
+
return this.parentContext === null;
|
|
25988
|
+
}
|
|
25989
|
+
subscribeSearchInputs() {
|
|
25990
|
+
this.searchInputs.changes
|
|
25991
|
+
.pipe(startWith(this.searchInputs), takeUntil(this._unsubscribe$), map(input => input), combineLatestWith(this.childSearchInputs$), map(([inputs, childInputs]) => this.zipInputsWithChildInputs(inputs.toArray(), childInputs)), switchMap(inputs => combineLatest(inputs.map(i => i.state$))), combineLatestWith(this.forcedFilters$), debounceTime(5)).subscribe(([states, forcedFilters]) => {
|
|
25992
|
+
this._searchStates.next(states);
|
|
25993
|
+
const userFilters = this.convertToFilters(states);
|
|
25994
|
+
this._filters$.next(userFilters);
|
|
25995
|
+
this.applyFilters(userFilters, forcedFilters);
|
|
25996
|
+
});
|
|
25997
|
+
}
|
|
25998
|
+
zipInputsWithChildInputs(inputs, childInputs) {
|
|
25999
|
+
return [...inputs, ...childInputs];
|
|
26000
|
+
}
|
|
26001
|
+
subscribeInitialFilters() {
|
|
26002
|
+
this.initialFilters$.pipe(takeUntil(this._unsubscribe$), combineLatestWith(this.childSearchInputs$), skip(1)).subscribe(([initialFilters, childSearchInputs]) => {
|
|
26003
|
+
var searchInputs = this.zipInputsWithChildInputs(this.searchInputs.toArray(), childSearchInputs);
|
|
26004
|
+
searchInputs.forEach(input => input.setInitialFilter(initialFilters));
|
|
26005
|
+
});
|
|
26006
|
+
}
|
|
25981
26007
|
convertToFilters(states) {
|
|
25982
26008
|
return states
|
|
25983
26009
|
.map(s => new Filter(s.queryKey, s.queryValue));
|
|
@@ -25990,7 +26016,7 @@ class ElderSearchContextDirective {
|
|
|
25990
26016
|
this.log.trace("Search-Model filters updated:", Array.from(context.filtersSnapshot));
|
|
25991
26017
|
}
|
|
25992
26018
|
}
|
|
25993
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ElderSearchContextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
26019
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ElderSearchContextDirective, deps: [{ token: ElderSearchContextDirective, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
25994
26020
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.9", type: ElderSearchContextDirective, selector: "[elderSearchContext]", inputs: { filterContext: ["elderSearchContext", "filterContext"], forcedFilters: "forcedFilters" }, queries: [{ propertyName: "searchInputs", predicate: ElderSearchInputDirective, descendants: true }], exportAs: ["elderSearchContext"], ngImport: i0 }); }
|
|
25995
26021
|
}
|
|
25996
26022
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ElderSearchContextDirective, decorators: [{
|
|
@@ -25999,7 +26025,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
|
|
|
25999
26025
|
selector: "[elderSearchContext]",
|
|
26000
26026
|
exportAs: "elderSearchContext"
|
|
26001
26027
|
}]
|
|
26002
|
-
}],
|
|
26028
|
+
}], ctorParameters: function () { return [{ type: ElderSearchContextDirective, decorators: [{
|
|
26029
|
+
type: SkipSelf
|
|
26030
|
+
}, {
|
|
26031
|
+
type: Optional
|
|
26032
|
+
}] }]; }, propDecorators: { searchInputs: [{
|
|
26003
26033
|
type: ContentChildren,
|
|
26004
26034
|
args: [ElderSearchInputDirective, { descendants: true }]
|
|
26005
26035
|
}], filterContext: [{
|
|
@@ -26402,11 +26432,11 @@ class ElderSearchBoxComponent {
|
|
|
26402
26432
|
this.searchModel.reset();
|
|
26403
26433
|
}
|
|
26404
26434
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ElderSearchBoxComponent, deps: [{ token: ElderSearchContextDirective }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
26405
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: ElderSearchBoxComponent, selector: "elder-search-box", inputs: { autoPanel: "autoPanel", name: "name", queryKey: "queryKey", placeholder: "placeholder", label: "label", hint: "hint", autocomplete: "autocomplete", appearance: "appearance", dense: "dense" }, host: { classAttribute: "elder-form-field-host" }, queries: [{ propertyName: "advancedSearch", first: true, predicate: ElderSearchPanelComponent, descendants: true }], viewQueries: [{ propertyName: "search", first: true, predicate: ["search"], descendants: true }], exportAs: ["elderSearchBox"], ngImport: i0, template: "<div class=\"layout-row place-stretch-center full flex\" style=\"overflow: hidden\">\n <mat-form-field\n *ngIf=\"overlayState$ | async as overlayState\"\n [appearance]=\"appearance\"\n class=\"elder-search-box-field flex-auto\" subscriptSizing=\"dynamic\"\n [elderDense]=\"dense\">\n\n <button matPrefix mat-icon-button type=\"button\"\n [elderOverlayTrigger]=\"searchPanel\" (click)=\"blurFocus($event)\"\n >\n <mat-icon>search</mat-icon>\n </button>\n\n <input matInput type=\"text\" [name]=\"name\" [placeholder]=\"placeholder\" #search cdkFocusInitial\n ngModel\n elderSearchInput [elderSearchInputKey]=\"queryKey\" #searchInput=\"elderSearchInput\"\n [autocomplete]=\"(autoPanel && overlayState.hasOverlay) ? 'off' : autocomplete\"\n [elderOverlayOrigin]=\"searchPanel\"\n [elderOverlayTrigger]=\"searchPanel\"\n [elderOverlayTriggerType]=\"'focus'\"\n [elderOverlayTriggerEnabled]=\"autoPanel && overlayState.hasOverlay && (searchInput?.state$ | async)?.pristine\"\n >\n <mat-hint *ngIf=\"hint\">{{hint}}</mat-hint>\n\n <div class=\"layout-row\" matSuffix *ngIf=\"searchModel.userDefinedAttributes$ | async as userDefinedFilters\">\n\n <button mat-icon-button type=\"button\"\n *ngIf=\"userDefinedFilters.length > 0\"\n (click)=\"clearSearch($event)\"\n name=\"clear\" aria-label=\"Clear\">\n <mat-icon>close</mat-icon>\n </button>\n\n <button mat-icon-button type=\"button\"\n *ngIf=\"overlayState.hasOverlay\" name=\"openPanel\"\n [elderOverlayTrigger]=\"searchPanel\" (click)=\"blurFocus($event)\">\n <mat-icon\n [matBadge]=\"userDefinedFilters.length\"\n matBadgeSize=\"small\"\n [matBadgeOverlap]=\"true\"\n [matBadgeHidden]=\"userDefinedFilters.length == 0\"\n matBadgeColor=\"accent\"\n [color]=\"userDefinedFilters.length > 0 ? 'accent' : undefined\"\n >\n filter_list\n </mat-icon>\n </button>\n </div>\n </mat-form-field>\n</div>\n\n\n<!-- Overlay Panel for advanced search -->\n<elder-overlay #searchPanel=\"elderOverlay\">\n <elder-dialog-panel class=\"elder-search-panel-container\">\n\n <!-- Project the users search inputs here -->\n <ng-content select=\"elder-search-panel\"></ng-content>\n\n <div class=\"layout-row place-between-center\">\n <button mat-raised-button type=\"button\" name=\"clear\"\n (click)=\"clearSearch($event)\">{{'context.reset' | translate}}\n </button>\n\n <button mat-raised-button type=\"button\" name=\"ok\" color=\"primary\"\n (click)=\"searchPanel.closeOverlay()\">Ok\n </button>\n </div>\n </elder-dialog-panel>\n</elder-overlay>\n", styles: [".elder-search-box-field{margin-top:4px;margin-bottom:4px}.elder-search-panel-container{min-width:250px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2$3.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: ElderOverlayComponent, selector: "elder-overlay", inputs: ["originX", "originY", "overlayX", "overlayY", "offsetY", "offsetX", "backdrop", "backdropVisible", "origin", "positionStrategy", "overlaySize"], outputs: ["keydownEvents", "attachedChange"], exportAs: ["elderOverlay"] }, { kind: "directive", type: ElderOverlayTriggerDirective, selector: "[elderOverlayTrigger]", inputs: ["elderOverlayTrigger", "elderOverlayTriggerType", "elderOverlayTriggerEnabled"] }, { kind: "directive", type: ElderOverlayOriginDirective, selector: "[elderOverlayOrigin]", inputs: ["elderOverlayOrigin"] }, { kind: "component", type: ElderDialogPanelComponent, selector: "elder-dialog-panel" }, { kind: "directive", type: ElderFormFieldDenseDirective, selector: "mat-form-field[elderDense]", inputs: ["elderDense", "subscriptSizing", "floatLabel"] }, { kind: "directive", type: ElderSearchInputDirective, selector: "[elderSearchInput]", inputs: ["elderSearchInputKey", "elderSearchInputTransform", "elderSearchInput", "dataSource", "elderSearchInputFallback", "valueAsId"], exportAs: ["elderSearchInput"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
26435
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: ElderSearchBoxComponent, selector: "elder-search-box", inputs: { autoPanel: "autoPanel", name: "name", queryKey: "queryKey", placeholder: "placeholder", label: "label", hint: "hint", autocomplete: "autocomplete", appearance: "appearance", dense: "dense" }, host: { classAttribute: "elder-form-field-host" }, queries: [{ propertyName: "advancedSearch", first: true, predicate: ElderSearchPanelComponent, descendants: true }], viewQueries: [{ propertyName: "search", first: true, predicate: ["search"], descendants: true }], exportAs: ["elderSearchBox"], ngImport: i0, template: "<div class=\"layout-row place-stretch-center full flex\" style=\"overflow: hidden\" elderSearchContext>\n <mat-form-field\n *ngIf=\"overlayState$ | async as overlayState\"\n [appearance]=\"appearance\"\n class=\"elder-search-box-field flex-auto\" subscriptSizing=\"dynamic\"\n [elderDense]=\"dense\">\n\n <button matPrefix mat-icon-button type=\"button\"\n [elderOverlayTrigger]=\"searchPanel\" (click)=\"blurFocus($event)\"\n >\n <mat-icon>search</mat-icon>\n </button>\n\n <input matInput type=\"text\" [name]=\"name\" [placeholder]=\"placeholder\" #search cdkFocusInitial\n ngModel\n elderSearchInput [elderSearchInputKey]=\"queryKey\" #searchInput=\"elderSearchInput\"\n [autocomplete]=\"(autoPanel && overlayState.hasOverlay) ? 'off' : autocomplete\"\n [elderOverlayOrigin]=\"searchPanel\"\n [elderOverlayTrigger]=\"searchPanel\"\n [elderOverlayTriggerType]=\"'focus'\"\n [elderOverlayTriggerEnabled]=\"autoPanel && overlayState.hasOverlay && (searchInput?.state$ | async)?.pristine\"\n >\n <mat-hint *ngIf=\"hint\">{{hint}}</mat-hint>\n\n <div class=\"layout-row\" matSuffix *ngIf=\"searchModel.userDefinedAttributes$ | async as userDefinedFilters\">\n\n <button mat-icon-button type=\"button\"\n *ngIf=\"userDefinedFilters.length > 0\"\n (click)=\"clearSearch($event)\"\n name=\"clear\" aria-label=\"Clear\">\n <mat-icon>close</mat-icon>\n </button>\n\n <button mat-icon-button type=\"button\"\n *ngIf=\"overlayState.hasOverlay\" name=\"openPanel\"\n [elderOverlayTrigger]=\"searchPanel\" (click)=\"blurFocus($event)\">\n <mat-icon\n [matBadge]=\"userDefinedFilters.length\"\n matBadgeSize=\"small\"\n [matBadgeOverlap]=\"true\"\n [matBadgeHidden]=\"userDefinedFilters.length == 0\"\n matBadgeColor=\"accent\"\n [color]=\"userDefinedFilters.length > 0 ? 'accent' : undefined\"\n >\n filter_list\n </mat-icon>\n </button>\n </div>\n </mat-form-field>\n</div>\n\n\n<!-- Overlay Panel for advanced search -->\n<elder-overlay #searchPanel=\"elderOverlay\">\n <elder-dialog-panel class=\"elder-search-panel-container\">\n\n <!-- Project the users search inputs here -->\n <ng-content select=\"elder-search-panel\"></ng-content>\n\n <div class=\"layout-row place-between-center\">\n <button mat-raised-button type=\"button\" name=\"clear\"\n (click)=\"clearSearch($event)\">{{'context.reset' | translate}}\n </button>\n\n <button mat-raised-button type=\"button\" name=\"ok\" color=\"primary\"\n (click)=\"searchPanel.closeOverlay()\">Ok\n </button>\n </div>\n </elder-dialog-panel>\n</elder-overlay>\n", styles: [".elder-search-box-field{margin-top:4px;margin-bottom:4px}.elder-search-panel-container{min-width:250px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2$3.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: ElderOverlayComponent, selector: "elder-overlay", inputs: ["originX", "originY", "overlayX", "overlayY", "offsetY", "offsetX", "backdrop", "backdropVisible", "origin", "positionStrategy", "overlaySize"], outputs: ["keydownEvents", "attachedChange"], exportAs: ["elderOverlay"] }, { kind: "directive", type: ElderOverlayTriggerDirective, selector: "[elderOverlayTrigger]", inputs: ["elderOverlayTrigger", "elderOverlayTriggerType", "elderOverlayTriggerEnabled"] }, { kind: "directive", type: ElderOverlayOriginDirective, selector: "[elderOverlayOrigin]", inputs: ["elderOverlayOrigin"] }, { kind: "component", type: ElderDialogPanelComponent, selector: "elder-dialog-panel" }, { kind: "directive", type: ElderFormFieldDenseDirective, selector: "mat-form-field[elderDense]", inputs: ["elderDense", "subscriptSizing", "floatLabel"] }, { kind: "directive", type: ElderSearchContextDirective, selector: "[elderSearchContext]", inputs: ["elderSearchContext", "forcedFilters"], exportAs: ["elderSearchContext"] }, { kind: "directive", type: ElderSearchInputDirective, selector: "[elderSearchInput]", inputs: ["elderSearchInputKey", "elderSearchInputTransform", "elderSearchInput", "dataSource", "elderSearchInputFallback", "valueAsId"], exportAs: ["elderSearchInput"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
26406
26436
|
}
|
|
26407
26437
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ElderSearchBoxComponent, decorators: [{
|
|
26408
26438
|
type: Component,
|
|
26409
|
-
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"] }]
|
|
26439
|
+
args: [{ selector: 'elder-search-box', exportAs: 'elderSearchBox', host: { 'class': 'elder-form-field-host' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-row place-stretch-center full flex\" style=\"overflow: hidden\" elderSearchContext>\n <mat-form-field\n *ngIf=\"overlayState$ | async as overlayState\"\n [appearance]=\"appearance\"\n class=\"elder-search-box-field flex-auto\" subscriptSizing=\"dynamic\"\n [elderDense]=\"dense\">\n\n <button matPrefix mat-icon-button type=\"button\"\n [elderOverlayTrigger]=\"searchPanel\" (click)=\"blurFocus($event)\"\n >\n <mat-icon>search</mat-icon>\n </button>\n\n <input matInput type=\"text\" [name]=\"name\" [placeholder]=\"placeholder\" #search cdkFocusInitial\n ngModel\n elderSearchInput [elderSearchInputKey]=\"queryKey\" #searchInput=\"elderSearchInput\"\n [autocomplete]=\"(autoPanel && overlayState.hasOverlay) ? 'off' : autocomplete\"\n [elderOverlayOrigin]=\"searchPanel\"\n [elderOverlayTrigger]=\"searchPanel\"\n [elderOverlayTriggerType]=\"'focus'\"\n [elderOverlayTriggerEnabled]=\"autoPanel && overlayState.hasOverlay && (searchInput?.state$ | async)?.pristine\"\n >\n <mat-hint *ngIf=\"hint\">{{hint}}</mat-hint>\n\n <div class=\"layout-row\" matSuffix *ngIf=\"searchModel.userDefinedAttributes$ | async as userDefinedFilters\">\n\n <button mat-icon-button type=\"button\"\n *ngIf=\"userDefinedFilters.length > 0\"\n (click)=\"clearSearch($event)\"\n name=\"clear\" aria-label=\"Clear\">\n <mat-icon>close</mat-icon>\n </button>\n\n <button mat-icon-button type=\"button\"\n *ngIf=\"overlayState.hasOverlay\" name=\"openPanel\"\n [elderOverlayTrigger]=\"searchPanel\" (click)=\"blurFocus($event)\">\n <mat-icon\n [matBadge]=\"userDefinedFilters.length\"\n matBadgeSize=\"small\"\n [matBadgeOverlap]=\"true\"\n [matBadgeHidden]=\"userDefinedFilters.length == 0\"\n matBadgeColor=\"accent\"\n [color]=\"userDefinedFilters.length > 0 ? 'accent' : undefined\"\n >\n filter_list\n </mat-icon>\n </button>\n </div>\n </mat-form-field>\n</div>\n\n\n<!-- Overlay Panel for advanced search -->\n<elder-overlay #searchPanel=\"elderOverlay\">\n <elder-dialog-panel class=\"elder-search-panel-container\">\n\n <!-- Project the users search inputs here -->\n <ng-content select=\"elder-search-panel\"></ng-content>\n\n <div class=\"layout-row place-between-center\">\n <button mat-raised-button type=\"button\" name=\"clear\"\n (click)=\"clearSearch($event)\">{{'context.reset' | translate}}\n </button>\n\n <button mat-raised-button type=\"button\" name=\"ok\" color=\"primary\"\n (click)=\"searchPanel.closeOverlay()\">Ok\n </button>\n </div>\n </elder-dialog-panel>\n</elder-overlay>\n", styles: [".elder-search-box-field{margin-top:4px;margin-bottom:4px}.elder-search-panel-container{min-width:250px}\n"] }]
|
|
26410
26440
|
}], ctorParameters: function () { return [{ type: ElderSearchContextDirective }]; }, propDecorators: { search: [{
|
|
26411
26441
|
type: ViewChild,
|
|
26412
26442
|
args: ['search']
|