@enigmatry/entry-components 15.2.1-preview.1 → 16.0.0

package/fesm2022/enigmatry-entry-components-search-filter.mjs

@@ -0,0 +1,387 @@
+import * as i0 from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input, Inject, inject, EventEmitter, Output, NgModule } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { FormControl, UntypedFormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { createInjectionToken, provideConfig, ENTRY_MAT_DATE_TIME, EntryDateTimeAdapter } from '@enigmatry/entry-components/common';
+import * as i1$1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i3$1 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i4$2 from '@enigmatry/entry-components/button';
+import { EntryButtonModule } from '@enigmatry/entry-components/button';
+import * as i2 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i3 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i4 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i5 from '@angular/material/core';
+import { MAT_DATE_FORMATS, DateAdapter } from '@angular/material/core';
+import { of, Subject } from 'rxjs';
+import { takeUntil, tap, filter, debounceTime } from 'rxjs/operators';
+import * as i6 from '@angular/material/autocomplete';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import * as i4$1 from '@angular/material/datepicker';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+
+/**
+ * Used to provide entry search filter configuration on module level.
+ */
+class EntrySearchFilterConfig {
+    constructor(config = {}) {
+        this.applyButtonText = config.applyButtonText ?? 'Apply';
+        this.noneSelectedOptionText = config.noneSelectedOptionText ?? 'None';
+    }
+}
+const ENTRY_SEARCH_FILTER_CONFIG = createInjectionToken(new EntrySearchFilterConfig());
+/**
+ * Can be used to provide entry search filter configuration.
+ */
+function provideEntrySearchFilterConfig(config) {
+    return provideConfig(ENTRY_SEARCH_FILTER_CONFIG, () => new EntrySearchFilterConfig(config));
+}
+
+var ControlType;
+(function (ControlType) {
+    ControlType["text"] = "text-input";
+    ControlType["select"] = "select-input";
+    ControlType["autocomplete"] = "autocomplete-input";
+    ControlType["date"] = "date-input";
+    ControlType["dateTime"] = "date-time-input";
+})(ControlType || (ControlType = {}));
+
+class TextSearchFilterComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextSearchFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TextSearchFilterComponent, selector: "entry-text-search-filter", inputs: { searchFilter: "searchFilter", form: "form" }, ngImport: i0, template: "<mat-form-field [formGroup]=\"form\" subscriptSizing=\"dynamic\">\n    <mat-label [attr.for]=\"searchFilter.key\">{{searchFilter.label}}</mat-label>\n    <input [formControlName]=\"searchFilter.key\" [id]=\"searchFilter.key\" [type]=\"searchFilter.type\" matInput\n        [placeholder]=\"searchFilter.placeholder\" [maxlength]=\"searchFilter.maxLength\">\n</mat-form-field>", dependencies: [{ kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextSearchFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'entry-text-search-filter', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field [formGroup]=\"form\" subscriptSizing=\"dynamic\">\n    <mat-label [attr.for]=\"searchFilter.key\">{{searchFilter.label}}</mat-label>\n    <input [formControlName]=\"searchFilter.key\" [id]=\"searchFilter.key\" [type]=\"searchFilter.type\" matInput\n        [placeholder]=\"searchFilter.placeholder\" [maxlength]=\"searchFilter.maxLength\">\n</mat-form-field>" }]
+        }], propDecorators: { searchFilter: [{
+                type: Input
+            }], form: [{
+                type: Input
+            }] } });
+
+class SelectSearchFilterComponent {
+    constructor(config) {
+        this.config = config;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectSearchFilterComponent, deps: [{ token: ENTRY_SEARCH_FILTER_CONFIG }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SelectSearchFilterComponent, selector: "entry-select-search-filter", inputs: { searchFilter: "searchFilter", form: "form" }, ngImport: i0, template: "<mat-form-field [formGroup]=\"form\" subscriptSizing=\"dynamic\">\n    <mat-label [attr.for]=\"searchFilter.key\">{{searchFilter.label}}</mat-label>\n    <mat-select [formControlName]=\"searchFilter.key\" [id]=\"searchFilter.key\" [multiple]=\"searchFilter.multiSelect\">\n        <mat-option *ngIf=\"!searchFilter.multiSelect\" [value]=\"undefined\">\n            {{config.noneSelectedOptionText}}\n        </mat-option>\n        <ng-container *ngIf=\"searchFilter.options$ !== undefined; else fixedSelectValues\">\n            <mat-option *ngFor=\"let option of searchFilter.options$ | async\"\n                [value]=\"option.key\">{{option.label}}</mat-option>\n        </ng-container>\n        <ng-template #fixedSelectValues>\n            <mat-option *ngFor=\"let option of searchFilter.options\" [value]=\"option.key\">{{option.label}}</mat-option>\n        </ng-template>\n    </mat-select>\n</mat-form-field>", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectSearchFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'entry-select-search-filter', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field [formGroup]=\"form\" subscriptSizing=\"dynamic\">\n    <mat-label [attr.for]=\"searchFilter.key\">{{searchFilter.label}}</mat-label>\n    <mat-select [formControlName]=\"searchFilter.key\" [id]=\"searchFilter.key\" [multiple]=\"searchFilter.multiSelect\">\n        <mat-option *ngIf=\"!searchFilter.multiSelect\" [value]=\"undefined\">\n            {{config.noneSelectedOptionText}}\n        </mat-option>\n        <ng-container *ngIf=\"searchFilter.options$ !== undefined; else fixedSelectValues\">\n            <mat-option *ngFor=\"let option of searchFilter.options$ | async\"\n                [value]=\"option.key\">{{option.label}}</mat-option>\n        </ng-container>\n        <ng-template #fixedSelectValues>\n            <mat-option *ngFor=\"let option of searchFilter.options\" [value]=\"option.key\">{{option.label}}</mat-option>\n        </ng-template>\n    </mat-select>\n</mat-form-field>" }]
+        }], ctorParameters: function () { return [{ type: EntrySearchFilterConfig, decorators: [{
+                    type: Inject,
+                    args: [ENTRY_SEARCH_FILTER_CONFIG]
+                }] }]; }, propDecorators: { searchFilter: [{
+                type: Input
+            }], form: [{
+                type: Input
+            }] } });
+
+class AutocompleteSearchFilterComponent {
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.searchField = new FormControl('');
+        this.options$ = of([]);
+        this.destroy$ = new Subject();
+        this.displayFn = (_selectedValue) => this.searchFilter.formControl.value?.label;
+        this.onSelected = (event) => {
+            this.searchFilter.formControl.patchValue(event.option.value);
+            this.searchField.patchValue(event.option.value.label, { emitEvent: false });
+        };
+    }
+    ngAfterViewInit() {
+        this.searchField
+            .valueChanges
+            .pipe(takeUntil(this.destroy$), tap(value => this.clearFilterIfLabelMismatch(value)), filter(value => value?.length >= this.searchFilter.minimumCharacters), debounceTime(this.searchFilter.debounceTime))
+            .subscribe(searchValue => {
+            // call search and retrieve options
+            this.options$ = this.searchFilter.search(searchValue);
+            // mark for check because of the debounce
+            this.cdr.markForCheck();
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    clearFilterIfLabelMismatch(value) {
+        const label = this.searchFilter.formControl.value?.label;
+        if (label && label !== value) {
+            this.searchFilter.formControl.patchValue(undefined);
+            this.searchField.patchValue(null, { emitEvent: false });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AutocompleteSearchFilterComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AutocompleteSearchFilterComponent, selector: "entry-autocomplete-search-filter", inputs: { searchFilter: "searchFilter" }, ngImport: i0, template: "<mat-form-field subscriptSizing=\"dynamic\">\n    <mat-label>{{searchFilter.label}}</mat-label>\n    <input type=\"text\" matInput [placeholder]=\"searchFilter.placeholder\"\n        [formControl]=\"searchField\" [id]=\"searchFilter.key\" [matAutocomplete]=\"auto\">\n    <mat-autocomplete [displayWith]=\"displayFn\" #auto=\"matAutocomplete\" (optionSelected)=\"onSelected($event)\">\n        <mat-option *ngFor=\"let option of options$ | async\" [value]=\"option\">\n            {{option.label}}\n        </mat-option>\n    </mat-autocomplete>\n</mat-form-field>", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "component", type: i5.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AutocompleteSearchFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'entry-autocomplete-search-filter', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field subscriptSizing=\"dynamic\">\n    <mat-label>{{searchFilter.label}}</mat-label>\n    <input type=\"text\" matInput [placeholder]=\"searchFilter.placeholder\"\n        [formControl]=\"searchField\" [id]=\"searchFilter.key\" [matAutocomplete]=\"auto\">\n    <mat-autocomplete [displayWith]=\"displayFn\" #auto=\"matAutocomplete\" (optionSelected)=\"onSelected($event)\">\n        <mat-option *ngFor=\"let option of options$ | async\" [value]=\"option\">\n            {{option.label}}\n        </mat-option>\n    </mat-autocomplete>\n</mat-form-field>" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { searchFilter: [{
+                type: Input
+            }] } });
+
+class DateTimeSearchFilterComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateTimeSearchFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DateTimeSearchFilterComponent, selector: "entry-date-time-search-filter", inputs: { searchFilter: "searchFilter", form: "form" }, providers: [
+            { provide: MAT_DATE_FORMATS, useFactory: () => inject(ENTRY_MAT_DATE_TIME).matDateFormats },
+            { provide: DateAdapter, useClass: EntryDateTimeAdapter }
+        ], ngImport: i0, template: "<mat-form-field [formGroup]=\"form\" subscriptSizing=\"dynamic\">\n    <mat-label [attr.for]=\"searchFilter.key\">{{searchFilter.label}}</mat-label>\n    <input matInput [formControlName]=\"searchFilter.key\" [matDatepicker]=\"picker\" [id]=\"searchFilter.key\">\n    <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-datepicker #picker></mat-datepicker>\n</mat-form-field>", dependencies: [{ kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i4$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateTimeSearchFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'entry-date-time-search-filter', providers: [
+                        { provide: MAT_DATE_FORMATS, useFactory: () => inject(ENTRY_MAT_DATE_TIME).matDateFormats },
+                        { provide: DateAdapter, useClass: EntryDateTimeAdapter }
+                    ], template: "<mat-form-field [formGroup]=\"form\" subscriptSizing=\"dynamic\">\n    <mat-label [attr.for]=\"searchFilter.key\">{{searchFilter.label}}</mat-label>\n    <input matInput [formControlName]=\"searchFilter.key\" [matDatepicker]=\"picker\" [id]=\"searchFilter.key\">\n    <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-datepicker #picker></mat-datepicker>\n</mat-form-field>" }]
+        }], propDecorators: { searchFilter: [{
+                type: Input
+            }], form: [{
+                type: Input
+            }] } });
+
+class DateSearchFilterComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateSearchFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DateSearchFilterComponent, selector: "entry-date-search-filter", inputs: { searchFilter: "searchFilter", form: "form" }, ngImport: i0, template: "<mat-form-field [formGroup]=\"form\" subscriptSizing=\"dynamic\">\n    <mat-label [attr.for]=\"searchFilter.key\">{{searchFilter.label}}</mat-label>\n    <input matInput [formControlName]=\"searchFilter.key\" [matDatepicker]=\"picker\" [id]=\"searchFilter.key\">\n    <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-datepicker #picker></mat-datepicker>\n</mat-form-field>", dependencies: [{ kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i4$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateSearchFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'entry-date-search-filter', template: "<mat-form-field [formGroup]=\"form\" subscriptSizing=\"dynamic\">\n    <mat-label [attr.for]=\"searchFilter.key\">{{searchFilter.label}}</mat-label>\n    <input matInput [formControlName]=\"searchFilter.key\" [matDatepicker]=\"picker\" [id]=\"searchFilter.key\">\n    <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-datepicker #picker></mat-datepicker>\n</mat-form-field>" }]
+        }], propDecorators: { searchFilter: [{
+                type: Input
+            }], form: [{
+                type: Input
+            }] } });
+
+/**
+ * Entry SearchFilter component.
+ */
+class EntrySearchFilterComponent {
+    constructor(config) {
+        this.config = config;
+        /** Configuration of the search filters inputs that will be displayed in the search-filter component. */
+        this.searchFilters = [];
+        /**
+         * Emits the change in SearchFilterParams so the containing component can apply them and retrieve the filtered results.
+         */
+        this.searchFilterChange = new EventEmitter();
+        this.controlType = ControlType;
+    }
+    ngOnInit() {
+        this.searchFilterForm = this.toFormGroup(this.searchFilters);
+    }
+    onSubmit() {
+        const formValue = this.searchFilterForm.value;
+        this.searchFilterChange.emit(formValue);
+    }
+    toFormGroup(searchFilters) {
+        const group = {};
+        searchFilters.forEach(searchFilter => {
+            const formControl = searchFilter.toFormControl();
+            group[searchFilter.key] = formControl;
+            searchFilter.formControl = formControl;
+        });
+        return new UntypedFormGroup(group);
+    }
+    asTextSearchFilter(searchFilter) {
+        return searchFilter;
+    }
+    asSelectSearchFilter(searchFilter) {
+        return searchFilter;
+    }
+    asAutocompleteSearchFilter(searchFilter) {
+        return searchFilter;
+    }
+    asDateTimeSearchFilter(searchFilter) {
+        return searchFilter;
+    }
+    asDateSearchFilter(searchFilter) {
+        return searchFilter;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EntrySearchFilterComponent, deps: [{ token: ENTRY_SEARCH_FILTER_CONFIG }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EntrySearchFilterComponent, selector: "entry-search-filter", inputs: { searchFilters: "searchFilters" }, outputs: { searchFilterChange: "searchFilterChange" }, ngImport: i0, template: "<form (ngSubmit)=\"onSubmit()\" [formGroup]=\"searchFilterForm\" class=\"search-form-container entry-form\">\r\n    <div *ngFor=\"let searchFilter of searchFilters\" class=\"form-field\">\r\n        <ng-container [ngSwitch]=\"searchFilter.controlType\">\r\n            <entry-text-search-filter *ngSwitchCase=\"controlType.text\" [searchFilter]=\"asTextSearchFilter(searchFilter)\" [form]=\"searchFilterForm\"></entry-text-search-filter>\r\n            <entry-select-search-filter *ngSwitchCase=\"controlType.select\" [searchFilter]=\"asSelectSearchFilter(searchFilter)\" [form]=\"searchFilterForm\"></entry-select-search-filter>\r\n            <entry-autocomplete-search-filter *ngSwitchCase=\"controlType.autocomplete\" [searchFilter]=\"asAutocompleteSearchFilter(searchFilter)\"></entry-autocomplete-search-filter>\r\n            <entry-date-time-search-filter *ngSwitchCase=\"controlType.dateTime\" [searchFilter]=\"asDateTimeSearchFilter(searchFilter)\" [form]=\"searchFilterForm\"></entry-date-time-search-filter>\r\n            <entry-date-search-filter *ngSwitchCase=\"controlType.date\" [searchFilter]=\"asDateSearchFilter(searchFilter)\" [form]=\"searchFilterForm\"></entry-date-search-filter>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"entry-search-filter-actions\">\r\n        <button mat-button entry-submit-button>\r\n            <span>{{config.applyButtonText}}</span>\r\n        </button>\r\n    </div>\r\n</form>", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i3$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: "directive", type: i4$2.EntryButtonDirective, selector: "[mat-button][entry-submit-button],[mat-button][entry-cancel-button]" }, { kind: "component", type: TextSearchFilterComponent, selector: "entry-text-search-filter", inputs: ["searchFilter", "form"] }, { kind: "component", type: SelectSearchFilterComponent, selector: "entry-select-search-filter", inputs: ["searchFilter", "form"] }, { kind: "component", type: AutocompleteSearchFilterComponent, selector: "entry-autocomplete-search-filter", inputs: ["searchFilter"] }, { kind: "component", type: DateTimeSearchFilterComponent, selector: "entry-date-time-search-filter", inputs: ["searchFilter", "form"] }, { kind: "component", type: DateSearchFilterComponent, selector: "entry-date-search-filter", inputs: ["searchFilter", "form"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EntrySearchFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'entry-search-filter', changeDetection: ChangeDetectionStrategy.OnPush, template: "<form (ngSubmit)=\"onSubmit()\" [formGroup]=\"searchFilterForm\" class=\"search-form-container entry-form\">\r\n    <div *ngFor=\"let searchFilter of searchFilters\" class=\"form-field\">\r\n        <ng-container [ngSwitch]=\"searchFilter.controlType\">\r\n            <entry-text-search-filter *ngSwitchCase=\"controlType.text\" [searchFilter]=\"asTextSearchFilter(searchFilter)\" [form]=\"searchFilterForm\"></entry-text-search-filter>\r\n            <entry-select-search-filter *ngSwitchCase=\"controlType.select\" [searchFilter]=\"asSelectSearchFilter(searchFilter)\" [form]=\"searchFilterForm\"></entry-select-search-filter>\r\n            <entry-autocomplete-search-filter *ngSwitchCase=\"controlType.autocomplete\" [searchFilter]=\"asAutocompleteSearchFilter(searchFilter)\"></entry-autocomplete-search-filter>\r\n            <entry-date-time-search-filter *ngSwitchCase=\"controlType.dateTime\" [searchFilter]=\"asDateTimeSearchFilter(searchFilter)\" [form]=\"searchFilterForm\"></entry-date-time-search-filter>\r\n            <entry-date-search-filter *ngSwitchCase=\"controlType.date\" [searchFilter]=\"asDateSearchFilter(searchFilter)\" [form]=\"searchFilterForm\"></entry-date-search-filter>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"entry-search-filter-actions\">\r\n        <button mat-button entry-submit-button>\r\n            <span>{{config.applyButtonText}}</span>\r\n        </button>\r\n    </div>\r\n</form>" }]
+        }], ctorParameters: function () { return [{ type: EntrySearchFilterConfig, decorators: [{
+                    type: Inject,
+                    args: [ENTRY_SEARCH_FILTER_CONFIG]
+                }] }]; }, propDecorators: { searchFilters: [{
+                type: Input
+            }], searchFilterChange: [{
+                type: Output
+            }] } });
+
+/**
+ * Base Entry search filter input component.
+ */
+class SearchFilterBase {
+    constructor(options = {}) {
+        this.value = options.value;
+        this.key = options.key || '';
+        this.label = options.label || '';
+        this.placeholder = options.placeholder || '';
+        this.controlType = options.controlType || ControlType.text;
+        this.type = options.type || ControlType.text;
+        this.maxLength = options.maxLength || 256;
+    }
+    setValue(value) {
+        this.value = value;
+        if (this.formControl) {
+            this.formControl.patchValue(value);
+        }
+    }
+    toFormControl() {
+        return new FormControl(this.value);
+    }
+}
+
+/**
+ * Search filter text input filed configuration.
+ */
+class TextSearchFilter extends SearchFilterBase {
+    constructor() {
+        super(...arguments);
+        this.controlType = ControlType.text;
+    }
+}
+
+/**
+ * Search filter select input field configuration. Select options can be provided as fixed list (`options`)
+ * or observable (dynamic) list (`options$`).
+ */
+class SelectSearchFilter extends SearchFilterBase {
+    constructor(options = {}) {
+        super(options);
+        this.controlType = ControlType.select;
+        /** Fixed list of select filter options (default is empty list) */
+        this.options = [];
+        /**
+         * Enables selection of multiple options (default is true).
+         * If it is set to false, 'none selected' option becomes available as a first option.
+         * */
+        this.multiSelect = true;
+        this.options = options.options;
+        this.options$ = options.options$;
+        this.multiSelect = options.multiSelect;
+    }
+}
+
+/**
+ * Search filter autocomplete field configuration. Options for the autocomplete are provided
+ * indirectly via the search function that takes a string and returns an observable array of
+ * SelectOption<T>
+ */
+class AutocompleteSearchFilter extends SearchFilterBase {
+    constructor(options = {}) {
+        super(options);
+        this.controlType = ControlType.autocomplete;
+        this.search = options.search;
+        this.placeholder = options.placeholder;
+        this.label = options.label;
+        this.debounceTime = options.debounceTime ?? 300;
+        this.minimumCharacters = options.minimumCharacters ?? 3;
+    }
+}
+
+/** Model used to populate select or autocomplete options. */
+class SelectOption {
+    constructor(
+    /** Key used as a value for selected option */
+    key, 
+    /** String value used as display label of select option */
+    label) {
+        this.key = key;
+        this.label = label;
+    }
+}
+
+/**
+ * Search filter date time input filed configuration.
+ */
+class DateTimeSearchFilter extends SearchFilterBase {
+    constructor() {
+        super(...arguments);
+        this.controlType = ControlType.dateTime;
+    }
+}
+
+/**
+ * Search filter date input filed configuration.
+ */
+class DateSearchFilter extends SearchFilterBase {
+    constructor() {
+        super(...arguments);
+        this.controlType = ControlType.date;
+    }
+}
+
+class EntrySearchFilterModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EntrySearchFilterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: EntrySearchFilterModule, declarations: [EntrySearchFilterComponent,
+            TextSearchFilterComponent,
+            SelectSearchFilterComponent,
+            AutocompleteSearchFilterComponent,
+            DateTimeSearchFilterComponent,
+            DateSearchFilterComponent], imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            MatInputModule,
+            MatButtonModule,
+            EntryButtonModule,
+            MatSelectModule,
+            MatAutocompleteModule,
+            MatDatepickerModule,
+            MatFormFieldModule], exports: [EntrySearchFilterComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EntrySearchFilterModule, imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            MatInputModule,
+            MatButtonModule,
+            EntryButtonModule,
+            MatSelectModule,
+            MatAutocompleteModule,
+            MatDatepickerModule,
+            MatFormFieldModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EntrySearchFilterModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        EntrySearchFilterComponent,
+                        TextSearchFilterComponent,
+                        SelectSearchFilterComponent,
+                        AutocompleteSearchFilterComponent,
+                        DateTimeSearchFilterComponent,
+                        DateSearchFilterComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MatInputModule,
+                        MatButtonModule,
+                        EntryButtonModule,
+                        MatSelectModule,
+                        MatAutocompleteModule,
+                        MatDatepickerModule,
+                        MatFormFieldModule
+                    ],
+                    exports: [
+                        EntrySearchFilterComponent
+                    ]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AutocompleteSearchFilter, DateSearchFilter, DateTimeSearchFilter, ENTRY_SEARCH_FILTER_CONFIG, EntrySearchFilterComponent, EntrySearchFilterConfig, EntrySearchFilterModule, SearchFilterBase, SelectOption, SelectSearchFilter, TextSearchFilter, provideEntrySearchFilterConfig };
+//# sourceMappingURL=enigmatry-entry-components-search-filter.mjs.map