@elderbyte/ngx-starter 16.2.2 → 16.2.4
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 +70 -30
- 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 +69 -31
- package/fesm2022/elderbyte-ngx-starter.mjs.map +1 -1
- package/lib/components/forms/search/elder-search-context.directive.d.ts +21 -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;
|
|
@@ -25931,7 +25929,7 @@ class ElderSearchContextDirective {
|
|
|
25931
25929
|
return this.searchInputs.changes.pipe(map(inputs => inputs), map(inputs => inputs.toArray()));
|
|
25932
25930
|
}
|
|
25933
25931
|
get attributesSnapshot() {
|
|
25934
|
-
return this.searchInputs.toArray();
|
|
25932
|
+
return this.zipInputsWithChildInputs(this.searchInputs.toArray(), this.childSearchInputs$.getValue());
|
|
25935
25933
|
}
|
|
25936
25934
|
get states$() {
|
|
25937
25935
|
return this._searchStates.asObservable();
|
|
@@ -25962,22 +25960,58 @@ 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
|
}
|
|
25968
25969
|
reset() {
|
|
25969
|
-
this.
|
|
25970
|
-
.
|
|
25971
|
-
|
|
25972
|
-
|
|
25973
|
-
|
|
25974
|
-
}
|
|
25970
|
+
if (this.isParentContextNull()) {
|
|
25971
|
+
this.resetInputs();
|
|
25972
|
+
}
|
|
25973
|
+
else {
|
|
25974
|
+
this.parentContext.reset();
|
|
25975
|
+
}
|
|
25975
25976
|
}
|
|
25976
25977
|
/***************************************************************************
|
|
25977
25978
|
* *
|
|
25978
25979
|
* Private *
|
|
25979
25980
|
* *
|
|
25980
25981
|
**************************************************************************/
|
|
25982
|
+
resetInputs() {
|
|
25983
|
+
this.attributesSnapshot
|
|
25984
|
+
.filter(attr => !attr.readonly)
|
|
25985
|
+
.forEach(a => {
|
|
25986
|
+
a.reset();
|
|
25987
|
+
});
|
|
25988
|
+
}
|
|
25989
|
+
registerInputsToParentContext() {
|
|
25990
|
+
if (!this.isParentContextNull()) {
|
|
25991
|
+
this.parentContext.registerInput(this.searchInputs.toArray());
|
|
25992
|
+
}
|
|
25993
|
+
}
|
|
25994
|
+
isParentContextNull() {
|
|
25995
|
+
return this.parentContext === null;
|
|
25996
|
+
}
|
|
25997
|
+
subscribeSearchInputs() {
|
|
25998
|
+
this.searchInputs.changes
|
|
25999
|
+
.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]) => {
|
|
26000
|
+
this._searchStates.next(states);
|
|
26001
|
+
const userFilters = this.convertToFilters(states);
|
|
26002
|
+
this._filters$.next(userFilters);
|
|
26003
|
+
this.applyFilters(userFilters, forcedFilters);
|
|
26004
|
+
});
|
|
26005
|
+
}
|
|
26006
|
+
zipInputsWithChildInputs(inputs, childInputs) {
|
|
26007
|
+
return [...inputs, ...childInputs];
|
|
26008
|
+
}
|
|
26009
|
+
subscribeInitialFilters() {
|
|
26010
|
+
this.initialFilters$.pipe(takeUntil(this._unsubscribe$), combineLatestWith(this.childSearchInputs$), skip(1)).subscribe(([initialFilters, childSearchInputs]) => {
|
|
26011
|
+
var searchInputs = this.zipInputsWithChildInputs(this.searchInputs.toArray(), childSearchInputs);
|
|
26012
|
+
searchInputs.forEach(input => input.setInitialFilter(initialFilters));
|
|
26013
|
+
});
|
|
26014
|
+
}
|
|
25981
26015
|
convertToFilters(states) {
|
|
25982
26016
|
return states
|
|
25983
26017
|
.map(s => new Filter(s.queryKey, s.queryValue));
|
|
@@ -25990,7 +26024,7 @@ class ElderSearchContextDirective {
|
|
|
25990
26024
|
this.log.trace("Search-Model filters updated:", Array.from(context.filtersSnapshot));
|
|
25991
26025
|
}
|
|
25992
26026
|
}
|
|
25993
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ElderSearchContextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
26027
|
+
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
26028
|
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
26029
|
}
|
|
25996
26030
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ElderSearchContextDirective, decorators: [{
|
|
@@ -25999,7 +26033,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
|
|
|
25999
26033
|
selector: "[elderSearchContext]",
|
|
26000
26034
|
exportAs: "elderSearchContext"
|
|
26001
26035
|
}]
|
|
26002
|
-
}],
|
|
26036
|
+
}], ctorParameters: function () { return [{ type: ElderSearchContextDirective, decorators: [{
|
|
26037
|
+
type: SkipSelf
|
|
26038
|
+
}, {
|
|
26039
|
+
type: Optional
|
|
26040
|
+
}] }]; }, propDecorators: { searchInputs: [{
|
|
26003
26041
|
type: ContentChildren,
|
|
26004
26042
|
args: [ElderSearchInputDirective, { descendants: true }]
|
|
26005
26043
|
}], filterContext: [{
|
|
@@ -26402,11 +26440,11 @@ class ElderSearchBoxComponent {
|
|
|
26402
26440
|
this.searchModel.reset();
|
|
26403
26441
|
}
|
|
26404
26442
|
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 }); }
|
|
26443
|
+
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
26444
|
}
|
|
26407
26445
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ElderSearchBoxComponent, decorators: [{
|
|
26408
26446
|
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"] }]
|
|
26447
|
+
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
26448
|
}], ctorParameters: function () { return [{ type: ElderSearchContextDirective }]; }, propDecorators: { search: [{
|
|
26411
26449
|
type: ViewChild,
|
|
26412
26450
|
args: ['search']
|