ngx-st-tables 17.0.60 → 17.0.61
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/material-table/material-table-caption/material-table-filter-dialog/material-table-filter-dialog.component.mjs +3 -3
- package/esm2022/lib/components/material-table/material-table.component.mjs +2 -12
- package/fesm2022/ngx-st-tables.mjs +3 -12
- package/fesm2022/ngx-st-tables.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -287,11 +287,11 @@ class MaterialTableFilterDialogComponent {
|
|
|
287
287
|
}
|
|
288
288
|
}
|
|
289
289
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MaterialTableFilterDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$1.MatDialogRef }, { token: i2.NonNullableFormBuilder }, { token: i0.ChangeDetectorRef }, { token: StTablesTranslationsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
290
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: MaterialTableFilterDialogComponent, selector: "st-material-table-filter-dialog", ngImport: i0, template: "<h3 mat-dialog-title class=\"filters-dialog-title\">\r\n {{ stTableTranslations.getTranslations()().filterTitle }}\r\n <div class=\"filters-show-hide\">\r\n @if (!allVisible) {\r\n <button\r\n mat-icon-button\r\n (click)=\"showAllFilters()\"\r\n [matTooltip]=\"stTableTranslations.getTranslations()().expandAllFilters\"\r\n >\r\n <mat-icon>unfold_more</mat-icon>\r\n </button>\r\n }\r\n @if (allVisible) {\r\n <button\r\n mat-icon-button\r\n (click)=\"hideAllFilters()\"\r\n [matTooltip]=\"\r\n stTableTranslations.getTranslations()().collapseAllFilters\r\n \"\r\n >\r\n <mat-icon>unfold_less</mat-icon>\r\n </button>\r\n }\r\n <button\r\n mat-icon-button\r\n (click)=\"clearAllFilters()\"\r\n [matTooltip]=\"stTableTranslations.getTranslations()().clearFilters\"\r\n >\r\n <mat-icon>filter_alt_off</mat-icon>\r\n </button>\r\n </div>\r\n</h3>\r\n\r\n<mat-dialog-content>\r\n <form [formGroup]=\"formGroup\">\r\n @for (column of filterColumns; track column.field) {\r\n @switch (column.filterType || column.type || 'string') {\r\n @case ('string') {\r\n <div class=\"filter\">\r\n <ng-container\r\n *ngTemplateOutlet=\"filterHeader; context: { $implicit: column }\"\r\n ></ng-container>\r\n <div\r\n class=\"filter-content row\"\r\n [ngClass]=\"{ hide: !column.expanded }\"\r\n >\r\n <div class=\"col-auto\">\r\n <mat-form-field appearance=\"outline\" style=\"width: 100px\">\r\n <mat-label>{{\r\n stTableTranslations.getTranslations()().filter\r\n }}</mat-label>\r\n <input\r\n matInput\r\n type=\"text\"\r\n [disabled]=\"true\"\r\n [formControl]=\"\r\n formGroup.controls[column.field].controls['matchMode']\r\n \"\r\n [value]=\"'Contains'\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"col\">\r\n <mat-form-field appearance=\"outline\">\r\n <mat-label>{{\r\n stTableTranslations.getTranslations()().searchFilter\r\n }}</mat-label>\r\n <input\r\n matInput\r\n type=\"text\"\r\n [disabled]=\"column.visible\"\r\n [formControl]=\"\r\n formGroup.controls[column.field].controls['value']\r\n \"\r\n />\r\n <button\r\n matSuffix\r\n mat-icon-button\r\n aria-label=\"Clear\"\r\n (click)=\"\r\n formGroup.controls[column.field].controls[\r\n 'value'\r\n ].setValue('')\r\n \"\r\n >\r\n <mat-icon style=\"font-size: 22px\">close</mat-icon>\r\n </button>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n @case ('number') {\r\n <div class=\"filter\">\r\n <ng-container\r\n *ngTemplateOutlet=\"filterHeader; context: { $implicit: column }\"\r\n ></ng-container>\r\n <div\r\n class=\"filter-content row\"\r\n [ngClass]=\"{ hide: !column.expanded }\"\r\n >\r\n <div class=\"col-auto\">\r\n <mat-form-field appearance=\"outline\" style=\"width: 100px\">\r\n <mat-label>{{\r\n stTableTranslations.getTranslations()().filter\r\n }}</mat-label>\r\n <input\r\n matInput\r\n type=\"text\"\r\n [disabled]=\"true\"\r\n [formControl]=\"\r\n formGroup.controls[column.field].controls['matchMode']\r\n \"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"col\">\r\n <mat-form-field appearance=\"outline\">\r\n <mat-label>{{\r\n stTableTranslations.getTranslations()().filter\r\n }}</mat-label>\r\n <input\r\n matInput\r\n type=\"number\"\r\n [disabled]=\"column.visible\"\r\n [formControl]=\"\r\n formGroup.controls[column.field].controls['value']\r\n \"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n @case ('date') {\r\n <div class=\"filter\">\r\n <ng-container\r\n *ngTemplateOutlet=\"filterHeader; context: { $implicit: column }\"\r\n ></ng-container>\r\n <div\r\n class=\"filter-content row\"\r\n [ngClass]=\"{ hide: !column.expanded }\"\r\n >\r\n <div class=\"col-auto\">\r\n <mat-form-field appearance=\"outline\" style=\"width: 100px\">\r\n <mat-label>{{\r\n stTableTranslations.getTranslations()().filter\r\n }}</mat-label>\r\n <input\r\n matInput\r\n type=\"text\"\r\n [disabled]=\"true\"\r\n [formControl]=\"\r\n formGroup.controls[column.field].controls['matchMode']\r\n \"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"col\">\r\n <mat-form-field appearance=\"outline\">\r\n <mat-label>{{\r\n stTableTranslations.getTranslations()().filterChooseDate\r\n }}</mat-label>\r\n <input\r\n matInput\r\n [matDatepicker]=\"picker\"\r\n [disabled]=\"column.visible\"\r\n [formControl]=\"\r\n formGroup.controls[column.field].controls['value']\r\n \"\r\n />\r\n <mat-datepicker-toggle\r\n matIconSuffix\r\n [for]=\"picker\"\r\n ></mat-datepicker-toggle>\r\n <mat-datepicker #picker></mat-datepicker>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n @case ('boolean') {\r\n <div class=\"filter\">\r\n <ng-container\r\n *ngTemplateOutlet=\"filterHeader; context: { $implicit: column }\"\r\n ></ng-container>\r\n <div\r\n class=\"filter-content row\"\r\n [ngClass]=\"{ hide: !column.expanded }\"\r\n >\r\n <div class=\"col-auto\">\r\n <mat-form-field appearance=\"outline\" style=\"width: 100px\">\r\n <mat-label>{{\r\n stTableTranslations.getTranslations()().filter\r\n }}</mat-label>\r\n <input\r\n matInput\r\n type=\"text\"\r\n [disabled]=\"true\"\r\n [formControl]=\"\r\n formGroup.controls[column.field].controls['matchMode']\r\n \"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"col\">\r\n <mat-form-field appearance=\"outline\">\r\n <mat-label>{{\r\n stTableTranslations.getTranslations()().booleanPickValue\r\n }}</mat-label>\r\n <mat-select\r\n [formControl]=\"\r\n formGroup.controls[column.field].controls['value']\r\n \"\r\n >\r\n <mat-option value=\"\">{{\r\n stTableTranslations.getTranslations()().booleanNone\r\n }}</mat-option>\r\n <mat-option [value]=\"true\">{{\r\n stTableTranslations.getTranslations()().booleanYes\r\n }}</mat-option>\r\n <mat-option [value]=\"false\">{{\r\n stTableTranslations.getTranslations()().booleanNo\r\n }}</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n @case ('custom') {\r\n @if (column.customFilterOptions) {}\r\n <div class=\"filter\">\r\n <ng-container\r\n *ngTemplateOutlet=\"filterHeader; context: { $implicit: column }\"\r\n ></ng-container>\r\n <div\r\n class=\"filter-content row\"\r\n [ngClass]=\"{ hide: !column.expanded }\"\r\n >\r\n <div class=\"col-auto\">\r\n <mat-form-field appearance=\"outline\" style=\"width: 100px\">\r\n <mat-label>{{\r\n stTableTranslations.getTranslations()().filter\r\n }}</mat-label>\r\n <input\r\n matInput\r\n type=\"text\"\r\n [disabled]=\"true\"\r\n [formControl]=\"\r\n formGroup.controls[column.field].controls['matchMode']\r\n \"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"col\">\r\n <mat-form-field appearance=\"outline\">\r\n <mat-label>{{\r\n stTableTranslations.getTranslations()().customPickValue\r\n }}</mat-label>\r\n <mat-select\r\n [formControl]=\"\r\n formGroup.controls[column.field].controls['value']\r\n \"\r\n >\r\n <mat-option value=\"\">{{\r\n stTableTranslations.getTranslations()().customNone\r\n }}</mat-option>\r\n @for (option of column.customFilterOptions; track option) {\r\n <mat-option [value]=\"option.value\">\r\n {{ option.label }}\r\n </mat-option>\r\n }\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n }\r\n }\r\n </form>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n <div class=\"row justify-content-between\" style=\"width: 100%\">\r\n <button mat-flat-button mat-dialog-close>\r\n {{ stTableTranslations.getTranslations()().cancel }}\r\n </button>\r\n <button mat-flat-button color=\"accent\" (click)=\"saveFilters()\">\r\n {{ stTableTranslations.getTranslations()().save }}\r\n </button>\r\n </div>\r\n</mat-dialog-actions>\r\n\r\n<ng-template #filterHeader let-column>\r\n <div class=\"filter-title row justify-content-between\">\r\n {{ column.header }}\r\n\r\n @if (column.expanded) {\r\n <mat-icon (click)=\"column.expanded = !column.expanded\"\r\n >keyboard_arrow_up</mat-icon\r\n >\r\n } @else {\r\n <mat-icon (click)=\"column.expanded = !column.expanded\"\r\n >keyboard_arrow_down</mat-icon\r\n >\r\n }\r\n </div>\r\n</ng-template>\r\n", styles: [".filters-dialog-title .filters-show-hide{position:absolute;top:6px;right:15px}.filter{width:100%;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid #e0e0e0}.filter .filter-title{padding:.5rem 0;color:#000c;font-size:1rem;font-weight:500}.filter .filter-title mat-icon{cursor:pointer}.filter .filter-content{margin-top:.5rem;gap:.5rem}.filter .filter-content.hide{display:none}.filter .filter-content>div.col-auto,.filter .filter-content>div.col{padding:0!important}.filter .filter-content mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i6.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: "directive", type: i9.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i9$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i11.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i12.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i12.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i12.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
290
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: MaterialTableFilterDialogComponent, selector: "st-material-table-filter-dialog", ngImport: i0, template: "<h3 mat-dialog-title class=\"filters-dialog-title\">\r\n {{ stTableTranslations.getTranslations()().filterTitle }}\r\n <div class=\"filters-show-hide\">\r\n @if (!allVisible) {\r\n <button\r\n mat-icon-button\r\n (click)=\"showAllFilters()\"\r\n [matTooltip]=\"stTableTranslations.getTranslations()().expandAllFilters\"\r\n >\r\n <mat-icon>unfold_more</mat-icon>\r\n </button>\r\n }\r\n @if (allVisible) {\r\n <button\r\n mat-icon-button\r\n (click)=\"hideAllFilters()\"\r\n [matTooltip]=\"\r\n stTableTranslations.getTranslations()().collapseAllFilters\r\n \"\r\n >\r\n <mat-icon>unfold_less</mat-icon>\r\n </button>\r\n }\r\n <button\r\n mat-icon-button\r\n (click)=\"clearAllFilters()\"\r\n [matTooltip]=\"stTableTranslations.getTranslations()().clearFilters\"\r\n >\r\n <mat-icon>filter_alt_off</mat-icon>\r\n </button>\r\n </div>\r\n</h3>\r\n\r\n<mat-dialog-content>\r\n <form [formGroup]=\"formGroup\">\r\n @for (column of filterColumns; track column.field) {\r\n @switch (column.filterType || column.type || 'string') {\r\n @case ('string') {\r\n <div class=\"filter\">\r\n <ng-container\r\n *ngTemplateOutlet=\"filterHeader; context: { $implicit: column }\"\r\n ></ng-container>\r\n <div\r\n class=\"filter-content row\"\r\n [ngClass]=\"{ hide: !column.expanded }\"\r\n >\r\n <div class=\"col-auto\">\r\n <mat-form-field appearance=\"outline\" style=\"width: 100px\">\r\n <mat-label>{{\r\n stTableTranslations.getTranslations()().filter\r\n }}</mat-label>\r\n <input\r\n matInput\r\n type=\"text\"\r\n [disabled]=\"true\"\r\n [formControl]=\"\r\n formGroup.controls[column.field].controls['matchMode']\r\n \"\r\n [value]=\"'Contains'\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"col\">\r\n <mat-form-field appearance=\"outline\">\r\n <mat-label>{{\r\n stTableTranslations.getTranslations()().searchFilter\r\n }}</mat-label>\r\n <input\r\n matInput\r\n type=\"text\"\r\n [disabled]=\"column.visible\"\r\n [formControl]=\"\r\n formGroup.controls[column.field].controls['value']\r\n \"\r\n />\r\n <button\r\n matSuffix\r\n mat-icon-button\r\n aria-label=\"Clear\"\r\n (click)=\"\r\n formGroup.controls[column.field].controls[\r\n 'value'\r\n ].setValue('')\r\n \"\r\n >\r\n <mat-icon style=\"font-size: 22px\">close</mat-icon>\r\n </button>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n @case ('number') {\r\n <div class=\"filter\">\r\n <ng-container\r\n *ngTemplateOutlet=\"filterHeader; context: { $implicit: column }\"\r\n ></ng-container>\r\n <div\r\n class=\"filter-content row\"\r\n [ngClass]=\"{ hide: !column.expanded }\"\r\n >\r\n <div class=\"col-auto\">\r\n <mat-form-field appearance=\"outline\" style=\"width: 100px\">\r\n <mat-label>{{\r\n stTableTranslations.getTranslations()().filter\r\n }}</mat-label>\r\n <input\r\n matInput\r\n type=\"text\"\r\n [disabled]=\"true\"\r\n [formControl]=\"\r\n formGroup.controls[column.field].controls['matchMode']\r\n \"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"col\">\r\n <mat-form-field appearance=\"outline\">\r\n <mat-label>{{\r\n stTableTranslations.getTranslations()().filter\r\n }}</mat-label>\r\n <input\r\n matInput\r\n type=\"number\"\r\n [disabled]=\"column.visible\"\r\n [formControl]=\"\r\n formGroup.controls[column.field].controls['value']\r\n \"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n @case ('date') {\r\n <div class=\"filter\">\r\n <ng-container\r\n *ngTemplateOutlet=\"filterHeader; context: { $implicit: column }\"\r\n ></ng-container>\r\n <div\r\n class=\"filter-content row\"\r\n [ngClass]=\"{ hide: !column.expanded }\"\r\n >\r\n <div class=\"col-auto\">\r\n <mat-form-field appearance=\"outline\" style=\"width: 100px\">\r\n <mat-label>{{\r\n stTableTranslations.getTranslations()().filter\r\n }}</mat-label>\r\n <input\r\n matInput\r\n type=\"text\"\r\n [disabled]=\"true\"\r\n [formControl]=\"\r\n formGroup.controls[column.field].controls['matchMode']\r\n \"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"col\">\r\n <mat-form-field appearance=\"outline\">\r\n <mat-label>{{\r\n stTableTranslations.getTranslations()().filterChooseDate\r\n }}</mat-label>\r\n <input\r\n matInput\r\n [matDatepicker]=\"picker\"\r\n [disabled]=\"column.visible\"\r\n [formControl]=\"\r\n formGroup.controls[column.field].controls['value']\r\n \"\r\n />\r\n <mat-datepicker-toggle\r\n matIconSuffix\r\n [for]=\"picker\"\r\n ></mat-datepicker-toggle>\r\n <mat-datepicker #picker></mat-datepicker>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n @case ('boolean') {\r\n <div class=\"filter\">\r\n <ng-container\r\n *ngTemplateOutlet=\"filterHeader; context: { $implicit: column }\"\r\n ></ng-container>\r\n <div\r\n class=\"filter-content row\"\r\n [ngClass]=\"{ hide: !column.expanded }\"\r\n >\r\n <div class=\"col-auto\">\r\n <mat-form-field appearance=\"outline\" style=\"width: 100px\">\r\n <mat-label>{{\r\n stTableTranslations.getTranslations()().filter\r\n }}</mat-label>\r\n <input\r\n matInput\r\n type=\"text\"\r\n [disabled]=\"true\"\r\n [formControl]=\"\r\n formGroup.controls[column.field].controls['matchMode']\r\n \"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"col\">\r\n <mat-form-field appearance=\"outline\">\r\n <mat-label>{{\r\n stTableTranslations.getTranslations()().booleanPickValue\r\n }}</mat-label>\r\n <mat-select\r\n [formControl]=\"\r\n formGroup.controls[column.field].controls['value']\r\n \"\r\n >\r\n <mat-option value=\"\">{{\r\n stTableTranslations.getTranslations()().booleanNone\r\n }}</mat-option>\r\n <mat-option [value]=\"true\">{{\r\n stTableTranslations.getTranslations()().booleanYes\r\n }}</mat-option>\r\n <mat-option [value]=\"false\">{{\r\n stTableTranslations.getTranslations()().booleanNo\r\n }}</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n @case ('custom') {\r\n @if (column.customFilterOptions) {}\r\n <div class=\"filter\">\r\n <ng-container\r\n *ngTemplateOutlet=\"filterHeader; context: { $implicit: column }\"\r\n ></ng-container>\r\n <div\r\n class=\"filter-content row\"\r\n [ngClass]=\"{ hide: !column.expanded }\"\r\n >\r\n <div class=\"col-auto\">\r\n <mat-form-field appearance=\"outline\" style=\"width: 100px\">\r\n <mat-label>{{\r\n stTableTranslations.getTranslations()().filter\r\n }}</mat-label>\r\n <input\r\n matInput\r\n type=\"text\"\r\n [disabled]=\"true\"\r\n [formControl]=\"\r\n formGroup.controls[column.field].controls['matchMode']\r\n \"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"col\">\r\n <mat-form-field appearance=\"outline\">\r\n <mat-label>{{\r\n stTableTranslations.getTranslations()().customPickValue\r\n }}</mat-label>\r\n <mat-select\r\n [formControl]=\"\r\n formGroup.controls[column.field].controls['value']\r\n \"\r\n >\r\n <mat-option value=\"\">{{\r\n stTableTranslations.getTranslations()().customNone\r\n }}</mat-option>\r\n @for (option of column.customFilterOptions; track option) {\r\n <mat-option [value]=\"option.value\">\r\n {{ option.label }}\r\n </mat-option>\r\n }\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n }\r\n }\r\n </form>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n <div class=\"row justify-content-between\" style=\"width: 100%\">\r\n <button mat-flat-button mat-dialog-close>\r\n {{ stTableTranslations.getTranslations()().cancel }}\r\n </button>\r\n <button mat-flat-button color=\"accent\" (click)=\"saveFilters()\">\r\n {{ stTableTranslations.getTranslations()().save }}\r\n </button>\r\n </div>\r\n</mat-dialog-actions>\r\n\r\n<ng-template #filterHeader let-column>\r\n <div\r\n class=\"filter-title row justify-content-between\"\r\n [ngClass]=\"{\r\n 'value-set': formGroup.controls[column.field].controls['value'].value\r\n }\"\r\n >\r\n <p>\r\n {{ column.header }}\r\n </p>\r\n\r\n @if (column.expanded) {\r\n <mat-icon (click)=\"column.expanded = !column.expanded\"\r\n >keyboard_arrow_up</mat-icon\r\n >\r\n } @else {\r\n <mat-icon (click)=\"column.expanded = !column.expanded\"\r\n >keyboard_arrow_down</mat-icon\r\n >\r\n }\r\n </div>\r\n</ng-template>\r\n", styles: [".filters-dialog-title .filters-show-hide{position:absolute;top:6px;right:15px}.filter{width:100%;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--surface-100, #e0e0e0)}.filter .filter-title{padding:.5rem 0;font-size:1rem;font-weight:500}.filter .filter-title p{margin:0}.filter .filter-title mat-icon{cursor:pointer}.filter .filter-title.value-set p,.filter .filter-title.value-set mat-icon{color:green}.filter .filter-content{margin-top:.5rem;gap:.5rem}.filter .filter-content.hide{display:none}.filter .filter-content>div.col-auto,.filter .filter-content>div.col{padding:0!important}.filter .filter-content mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i6.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: "directive", type: i9.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i9$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i11.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i12.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i12.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i12.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
291
291
|
}
|
|
292
292
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MaterialTableFilterDialogComponent, decorators: [{
|
|
293
293
|
type: Component,
|
|
294
|
-
args: [{ selector: 'st-material-table-filter-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<h3 mat-dialog-title class=\"filters-dialog-title\">\r\n {{ stTableTranslations.getTranslations()().filterTitle }}\r\n <div class=\"filters-show-hide\">\r\n @if (!allVisible) {\r\n <button\r\n mat-icon-button\r\n (click)=\"showAllFilters()\"\r\n [matTooltip]=\"stTableTranslations.getTranslations()().expandAllFilters\"\r\n >\r\n <mat-icon>unfold_more</mat-icon>\r\n </button>\r\n }\r\n @if (allVisible) {\r\n <button\r\n mat-icon-button\r\n (click)=\"hideAllFilters()\"\r\n [matTooltip]=\"\r\n stTableTranslations.getTranslations()().collapseAllFilters\r\n \"\r\n >\r\n <mat-icon>unfold_less</mat-icon>\r\n </button>\r\n }\r\n <button\r\n mat-icon-button\r\n (click)=\"clearAllFilters()\"\r\n [matTooltip]=\"stTableTranslations.getTranslations()().clearFilters\"\r\n >\r\n <mat-icon>filter_alt_off</mat-icon>\r\n </button>\r\n </div>\r\n</h3>\r\n\r\n<mat-dialog-content>\r\n <form [formGroup]=\"formGroup\">\r\n @for (column of filterColumns; track column.field) {\r\n @switch (column.filterType || column.type || 'string') {\r\n @case ('string') {\r\n <div class=\"filter\">\r\n <ng-container\r\n *ngTemplateOutlet=\"filterHeader; context: { $implicit: column }\"\r\n ></ng-container>\r\n <div\r\n class=\"filter-content row\"\r\n [ngClass]=\"{ hide: !column.expanded }\"\r\n >\r\n <div class=\"col-auto\">\r\n <mat-form-field appearance=\"outline\" style=\"width: 100px\">\r\n <mat-label>{{\r\n stTableTranslations.getTranslations()().filter\r\n }}</mat-label>\r\n <input\r\n matInput\r\n type=\"text\"\r\n [disabled]=\"true\"\r\n [formControl]=\"\r\n formGroup.controls[column.field].controls['matchMode']\r\n \"\r\n [value]=\"'Contains'\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"col\">\r\n <mat-form-field appearance=\"outline\">\r\n <mat-label>{{\r\n stTableTranslations.getTranslations()().searchFilter\r\n }}</mat-label>\r\n <input\r\n matInput\r\n type=\"text\"\r\n [disabled]=\"column.visible\"\r\n [formControl]=\"\r\n formGroup.controls[column.field].controls['value']\r\n \"\r\n />\r\n <button\r\n matSuffix\r\n mat-icon-button\r\n aria-label=\"Clear\"\r\n (click)=\"\r\n formGroup.controls[column.field].controls[\r\n 'value'\r\n ].setValue('')\r\n \"\r\n >\r\n <mat-icon style=\"font-size: 22px\">close</mat-icon>\r\n </button>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n @case ('number') {\r\n <div class=\"filter\">\r\n <ng-container\r\n *ngTemplateOutlet=\"filterHeader; context: { $implicit: column }\"\r\n ></ng-container>\r\n <div\r\n class=\"filter-content row\"\r\n [ngClass]=\"{ hide: !column.expanded }\"\r\n >\r\n <div class=\"col-auto\">\r\n <mat-form-field appearance=\"outline\" style=\"width: 100px\">\r\n <mat-label>{{\r\n stTableTranslations.getTranslations()().filter\r\n }}</mat-label>\r\n <input\r\n matInput\r\n type=\"text\"\r\n [disabled]=\"true\"\r\n [formControl]=\"\r\n formGroup.controls[column.field].controls['matchMode']\r\n \"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"col\">\r\n <mat-form-field appearance=\"outline\">\r\n <mat-label>{{\r\n stTableTranslations.getTranslations()().filter\r\n }}</mat-label>\r\n <input\r\n matInput\r\n type=\"number\"\r\n [disabled]=\"column.visible\"\r\n [formControl]=\"\r\n formGroup.controls[column.field].controls['value']\r\n \"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n @case ('date') {\r\n <div class=\"filter\">\r\n <ng-container\r\n *ngTemplateOutlet=\"filterHeader; context: { $implicit: column }\"\r\n ></ng-container>\r\n <div\r\n class=\"filter-content row\"\r\n [ngClass]=\"{ hide: !column.expanded }\"\r\n >\r\n <div class=\"col-auto\">\r\n <mat-form-field appearance=\"outline\" style=\"width: 100px\">\r\n <mat-label>{{\r\n stTableTranslations.getTranslations()().filter\r\n }}</mat-label>\r\n <input\r\n matInput\r\n type=\"text\"\r\n [disabled]=\"true\"\r\n [formControl]=\"\r\n formGroup.controls[column.field].controls['matchMode']\r\n \"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"col\">\r\n <mat-form-field appearance=\"outline\">\r\n <mat-label>{{\r\n stTableTranslations.getTranslations()().filterChooseDate\r\n }}</mat-label>\r\n <input\r\n matInput\r\n [matDatepicker]=\"picker\"\r\n [disabled]=\"column.visible\"\r\n [formControl]=\"\r\n formGroup.controls[column.field].controls['value']\r\n \"\r\n />\r\n <mat-datepicker-toggle\r\n matIconSuffix\r\n [for]=\"picker\"\r\n ></mat-datepicker-toggle>\r\n <mat-datepicker #picker></mat-datepicker>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n @case ('boolean') {\r\n <div class=\"filter\">\r\n <ng-container\r\n *ngTemplateOutlet=\"filterHeader; context: { $implicit: column }\"\r\n ></ng-container>\r\n <div\r\n class=\"filter-content row\"\r\n [ngClass]=\"{ hide: !column.expanded }\"\r\n >\r\n <div class=\"col-auto\">\r\n <mat-form-field appearance=\"outline\" style=\"width: 100px\">\r\n <mat-label>{{\r\n stTableTranslations.getTranslations()().filter\r\n }}</mat-label>\r\n <input\r\n matInput\r\n type=\"text\"\r\n [disabled]=\"true\"\r\n [formControl]=\"\r\n formGroup.controls[column.field].controls['matchMode']\r\n \"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"col\">\r\n <mat-form-field appearance=\"outline\">\r\n <mat-label>{{\r\n stTableTranslations.getTranslations()().booleanPickValue\r\n }}</mat-label>\r\n <mat-select\r\n [formControl]=\"\r\n formGroup.controls[column.field].controls['value']\r\n \"\r\n >\r\n <mat-option value=\"\">{{\r\n stTableTranslations.getTranslations()().booleanNone\r\n }}</mat-option>\r\n <mat-option [value]=\"true\">{{\r\n stTableTranslations.getTranslations()().booleanYes\r\n }}</mat-option>\r\n <mat-option [value]=\"false\">{{\r\n stTableTranslations.getTranslations()().booleanNo\r\n }}</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n @case ('custom') {\r\n @if (column.customFilterOptions) {}\r\n <div class=\"filter\">\r\n <ng-container\r\n *ngTemplateOutlet=\"filterHeader; context: { $implicit: column }\"\r\n ></ng-container>\r\n <div\r\n class=\"filter-content row\"\r\n [ngClass]=\"{ hide: !column.expanded }\"\r\n >\r\n <div class=\"col-auto\">\r\n <mat-form-field appearance=\"outline\" style=\"width: 100px\">\r\n <mat-label>{{\r\n stTableTranslations.getTranslations()().filter\r\n }}</mat-label>\r\n <input\r\n matInput\r\n type=\"text\"\r\n [disabled]=\"true\"\r\n [formControl]=\"\r\n formGroup.controls[column.field].controls['matchMode']\r\n \"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"col\">\r\n <mat-form-field appearance=\"outline\">\r\n <mat-label>{{\r\n stTableTranslations.getTranslations()().customPickValue\r\n }}</mat-label>\r\n <mat-select\r\n [formControl]=\"\r\n formGroup.controls[column.field].controls['value']\r\n \"\r\n >\r\n <mat-option value=\"\">{{\r\n stTableTranslations.getTranslations()().customNone\r\n }}</mat-option>\r\n @for (option of column.customFilterOptions; track option) {\r\n <mat-option [value]=\"option.value\">\r\n {{ option.label }}\r\n </mat-option>\r\n }\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n }\r\n }\r\n </form>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n <div class=\"row justify-content-between\" style=\"width: 100%\">\r\n <button mat-flat-button mat-dialog-close>\r\n {{ stTableTranslations.getTranslations()().cancel }}\r\n </button>\r\n <button mat-flat-button color=\"accent\" (click)=\"saveFilters()\">\r\n {{ stTableTranslations.getTranslations()().save }}\r\n </button>\r\n </div>\r\n</mat-dialog-actions>\r\n\r\n<ng-template #filterHeader let-column>\r\n <div class=\"filter-title row justify-content-between\">\r\n {{ column.header }}\r\n\r\n @if (column.expanded) {\r\n <mat-icon (click)=\"column.expanded = !column.expanded\"\r\n >keyboard_arrow_up</mat-icon\r\n >\r\n } @else {\r\n <mat-icon (click)=\"column.expanded = !column.expanded\"\r\n >keyboard_arrow_down</mat-icon\r\n >\r\n }\r\n </div>\r\n</ng-template>\r\n", styles: [".filters-dialog-title .filters-show-hide{position:absolute;top:6px;right:15px}.filter{width:100%;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid #e0e0e0}.filter .filter-title{padding:.5rem 0;color:#000c;font-size:1rem;font-weight:500}.filter .filter-title mat-icon{cursor:pointer}.filter .filter-content{margin-top:.5rem;gap:.5rem}.filter .filter-content.hide{display:none}.filter .filter-content>div.col-auto,.filter .filter-content>div.col{padding:0!important}.filter .filter-content mat-form-field{width:100%}\n"] }]
|
|
294
|
+
args: [{ selector: 'st-material-table-filter-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<h3 mat-dialog-title class=\"filters-dialog-title\">\r\n {{ stTableTranslations.getTranslations()().filterTitle }}\r\n <div class=\"filters-show-hide\">\r\n @if (!allVisible) {\r\n <button\r\n mat-icon-button\r\n (click)=\"showAllFilters()\"\r\n [matTooltip]=\"stTableTranslations.getTranslations()().expandAllFilters\"\r\n >\r\n <mat-icon>unfold_more</mat-icon>\r\n </button>\r\n }\r\n @if (allVisible) {\r\n <button\r\n mat-icon-button\r\n (click)=\"hideAllFilters()\"\r\n [matTooltip]=\"\r\n stTableTranslations.getTranslations()().collapseAllFilters\r\n \"\r\n >\r\n <mat-icon>unfold_less</mat-icon>\r\n </button>\r\n }\r\n <button\r\n mat-icon-button\r\n (click)=\"clearAllFilters()\"\r\n [matTooltip]=\"stTableTranslations.getTranslations()().clearFilters\"\r\n >\r\n <mat-icon>filter_alt_off</mat-icon>\r\n </button>\r\n </div>\r\n</h3>\r\n\r\n<mat-dialog-content>\r\n <form [formGroup]=\"formGroup\">\r\n @for (column of filterColumns; track column.field) {\r\n @switch (column.filterType || column.type || 'string') {\r\n @case ('string') {\r\n <div class=\"filter\">\r\n <ng-container\r\n *ngTemplateOutlet=\"filterHeader; context: { $implicit: column }\"\r\n ></ng-container>\r\n <div\r\n class=\"filter-content row\"\r\n [ngClass]=\"{ hide: !column.expanded }\"\r\n >\r\n <div class=\"col-auto\">\r\n <mat-form-field appearance=\"outline\" style=\"width: 100px\">\r\n <mat-label>{{\r\n stTableTranslations.getTranslations()().filter\r\n }}</mat-label>\r\n <input\r\n matInput\r\n type=\"text\"\r\n [disabled]=\"true\"\r\n [formControl]=\"\r\n formGroup.controls[column.field].controls['matchMode']\r\n \"\r\n [value]=\"'Contains'\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"col\">\r\n <mat-form-field appearance=\"outline\">\r\n <mat-label>{{\r\n stTableTranslations.getTranslations()().searchFilter\r\n }}</mat-label>\r\n <input\r\n matInput\r\n type=\"text\"\r\n [disabled]=\"column.visible\"\r\n [formControl]=\"\r\n formGroup.controls[column.field].controls['value']\r\n \"\r\n />\r\n <button\r\n matSuffix\r\n mat-icon-button\r\n aria-label=\"Clear\"\r\n (click)=\"\r\n formGroup.controls[column.field].controls[\r\n 'value'\r\n ].setValue('')\r\n \"\r\n >\r\n <mat-icon style=\"font-size: 22px\">close</mat-icon>\r\n </button>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n @case ('number') {\r\n <div class=\"filter\">\r\n <ng-container\r\n *ngTemplateOutlet=\"filterHeader; context: { $implicit: column }\"\r\n ></ng-container>\r\n <div\r\n class=\"filter-content row\"\r\n [ngClass]=\"{ hide: !column.expanded }\"\r\n >\r\n <div class=\"col-auto\">\r\n <mat-form-field appearance=\"outline\" style=\"width: 100px\">\r\n <mat-label>{{\r\n stTableTranslations.getTranslations()().filter\r\n }}</mat-label>\r\n <input\r\n matInput\r\n type=\"text\"\r\n [disabled]=\"true\"\r\n [formControl]=\"\r\n formGroup.controls[column.field].controls['matchMode']\r\n \"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"col\">\r\n <mat-form-field appearance=\"outline\">\r\n <mat-label>{{\r\n stTableTranslations.getTranslations()().filter\r\n }}</mat-label>\r\n <input\r\n matInput\r\n type=\"number\"\r\n [disabled]=\"column.visible\"\r\n [formControl]=\"\r\n formGroup.controls[column.field].controls['value']\r\n \"\r\n />\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n @case ('date') {\r\n <div class=\"filter\">\r\n <ng-container\r\n *ngTemplateOutlet=\"filterHeader; context: { $implicit: column }\"\r\n ></ng-container>\r\n <div\r\n class=\"filter-content row\"\r\n [ngClass]=\"{ hide: !column.expanded }\"\r\n >\r\n <div class=\"col-auto\">\r\n <mat-form-field appearance=\"outline\" style=\"width: 100px\">\r\n <mat-label>{{\r\n stTableTranslations.getTranslations()().filter\r\n }}</mat-label>\r\n <input\r\n matInput\r\n type=\"text\"\r\n [disabled]=\"true\"\r\n [formControl]=\"\r\n formGroup.controls[column.field].controls['matchMode']\r\n \"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"col\">\r\n <mat-form-field appearance=\"outline\">\r\n <mat-label>{{\r\n stTableTranslations.getTranslations()().filterChooseDate\r\n }}</mat-label>\r\n <input\r\n matInput\r\n [matDatepicker]=\"picker\"\r\n [disabled]=\"column.visible\"\r\n [formControl]=\"\r\n formGroup.controls[column.field].controls['value']\r\n \"\r\n />\r\n <mat-datepicker-toggle\r\n matIconSuffix\r\n [for]=\"picker\"\r\n ></mat-datepicker-toggle>\r\n <mat-datepicker #picker></mat-datepicker>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n @case ('boolean') {\r\n <div class=\"filter\">\r\n <ng-container\r\n *ngTemplateOutlet=\"filterHeader; context: { $implicit: column }\"\r\n ></ng-container>\r\n <div\r\n class=\"filter-content row\"\r\n [ngClass]=\"{ hide: !column.expanded }\"\r\n >\r\n <div class=\"col-auto\">\r\n <mat-form-field appearance=\"outline\" style=\"width: 100px\">\r\n <mat-label>{{\r\n stTableTranslations.getTranslations()().filter\r\n }}</mat-label>\r\n <input\r\n matInput\r\n type=\"text\"\r\n [disabled]=\"true\"\r\n [formControl]=\"\r\n formGroup.controls[column.field].controls['matchMode']\r\n \"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"col\">\r\n <mat-form-field appearance=\"outline\">\r\n <mat-label>{{\r\n stTableTranslations.getTranslations()().booleanPickValue\r\n }}</mat-label>\r\n <mat-select\r\n [formControl]=\"\r\n formGroup.controls[column.field].controls['value']\r\n \"\r\n >\r\n <mat-option value=\"\">{{\r\n stTableTranslations.getTranslations()().booleanNone\r\n }}</mat-option>\r\n <mat-option [value]=\"true\">{{\r\n stTableTranslations.getTranslations()().booleanYes\r\n }}</mat-option>\r\n <mat-option [value]=\"false\">{{\r\n stTableTranslations.getTranslations()().booleanNo\r\n }}</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n @case ('custom') {\r\n @if (column.customFilterOptions) {}\r\n <div class=\"filter\">\r\n <ng-container\r\n *ngTemplateOutlet=\"filterHeader; context: { $implicit: column }\"\r\n ></ng-container>\r\n <div\r\n class=\"filter-content row\"\r\n [ngClass]=\"{ hide: !column.expanded }\"\r\n >\r\n <div class=\"col-auto\">\r\n <mat-form-field appearance=\"outline\" style=\"width: 100px\">\r\n <mat-label>{{\r\n stTableTranslations.getTranslations()().filter\r\n }}</mat-label>\r\n <input\r\n matInput\r\n type=\"text\"\r\n [disabled]=\"true\"\r\n [formControl]=\"\r\n formGroup.controls[column.field].controls['matchMode']\r\n \"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"col\">\r\n <mat-form-field appearance=\"outline\">\r\n <mat-label>{{\r\n stTableTranslations.getTranslations()().customPickValue\r\n }}</mat-label>\r\n <mat-select\r\n [formControl]=\"\r\n formGroup.controls[column.field].controls['value']\r\n \"\r\n >\r\n <mat-option value=\"\">{{\r\n stTableTranslations.getTranslations()().customNone\r\n }}</mat-option>\r\n @for (option of column.customFilterOptions; track option) {\r\n <mat-option [value]=\"option.value\">\r\n {{ option.label }}\r\n </mat-option>\r\n }\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n }\r\n }\r\n </form>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n <div class=\"row justify-content-between\" style=\"width: 100%\">\r\n <button mat-flat-button mat-dialog-close>\r\n {{ stTableTranslations.getTranslations()().cancel }}\r\n </button>\r\n <button mat-flat-button color=\"accent\" (click)=\"saveFilters()\">\r\n {{ stTableTranslations.getTranslations()().save }}\r\n </button>\r\n </div>\r\n</mat-dialog-actions>\r\n\r\n<ng-template #filterHeader let-column>\r\n <div\r\n class=\"filter-title row justify-content-between\"\r\n [ngClass]=\"{\r\n 'value-set': formGroup.controls[column.field].controls['value'].value\r\n }\"\r\n >\r\n <p>\r\n {{ column.header }}\r\n </p>\r\n\r\n @if (column.expanded) {\r\n <mat-icon (click)=\"column.expanded = !column.expanded\"\r\n >keyboard_arrow_up</mat-icon\r\n >\r\n } @else {\r\n <mat-icon (click)=\"column.expanded = !column.expanded\"\r\n >keyboard_arrow_down</mat-icon\r\n >\r\n }\r\n </div>\r\n</ng-template>\r\n", styles: [".filters-dialog-title .filters-show-hide{position:absolute;top:6px;right:15px}.filter{width:100%;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--surface-100, #e0e0e0)}.filter .filter-title{padding:.5rem 0;font-size:1rem;font-weight:500}.filter .filter-title p{margin:0}.filter .filter-title mat-icon{cursor:pointer}.filter .filter-title.value-set p,.filter .filter-title.value-set mat-icon{color:green}.filter .filter-content{margin-top:.5rem;gap:.5rem}.filter .filter-content.hide{display:none}.filter .filter-content>div.col-auto,.filter .filter-content>div.col{padding:0!important}.filter .filter-content mat-form-field{width:100%}\n"] }]
|
|
295
295
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
296
296
|
type: Inject,
|
|
297
297
|
args: [MAT_DIALOG_DATA]
|
|
@@ -876,16 +876,7 @@ class MaterialTableComponent extends StSubscribeDestroyComponent {
|
|
|
876
876
|
return newFilters;
|
|
877
877
|
}
|
|
878
878
|
for (const key of keys) {
|
|
879
|
-
if (typeof oldFilters[key]
|
|
880
|
-
const columnDef = this.columns.find(col => col.field === key);
|
|
881
|
-
if (columnDef) {
|
|
882
|
-
newFilters[key] = {
|
|
883
|
-
value: oldFilters[key],
|
|
884
|
-
matchMode: MaterialTableFilterDialogComponent.getBaseMatchModeByType(columnDef.filterType),
|
|
885
|
-
};
|
|
886
|
-
}
|
|
887
|
-
}
|
|
888
|
-
else {
|
|
879
|
+
if (typeof oldFilters[key] === 'object') {
|
|
889
880
|
newFilters[key] = oldFilters[key];
|
|
890
881
|
}
|
|
891
882
|
}
|