@firestitch/filter 18.2.69 → 18.2.71
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/app/components/filters-item/autocomplete/autocomplete.component.d.ts +2 -1
- package/app/components/filters-item/autocompletechips/autocompletechips.component.d.ts +2 -1
- package/app/components/filters-item/date/date.component.d.ts +2 -1
- package/app/components/filters-item/date-range/date-range.component.d.ts +2 -1
- package/app/components/filters-item/filter-item.component.d.ts +2 -1
- package/app/components/filters-item/range/range.component.d.ts +2 -1
- package/app/components/filters-item/select/select.component.d.ts +2 -1
- package/app/components/filters-item/text/text.component.d.ts +2 -1
- package/app/components/filters-item/week/week.component.d.ts +2 -1
- package/app/helpers/create-filter-item.d.ts +1 -1
- package/esm2022/app/components/filter/filter.component.mjs +4 -4
- package/esm2022/app/components/filter-item-dialog/filter-item-dialog.component.mjs +3 -3
- package/esm2022/app/components/filters-item/autocomplete/autocomplete.component.mjs +5 -2
- package/esm2022/app/components/filters-item/autocompletechips/autocompletechips.component.mjs +6 -3
- package/esm2022/app/components/filters-item/date/date.component.mjs +6 -3
- package/esm2022/app/components/filters-item/date-range/date-range.component.mjs +6 -3
- package/esm2022/app/components/filters-item/filter-item.component.mjs +6 -3
- package/esm2022/app/components/filters-item/range/range.component.mjs +6 -3
- package/esm2022/app/components/filters-item/select/select.component.mjs +6 -3
- package/esm2022/app/components/filters-item/text/text.component.mjs +6 -3
- package/esm2022/app/components/filters-item/week/week.component.mjs +6 -3
- package/fesm2022/firestitch-filter.mjs +49 -22
- package/fesm2022/firestitch-filter.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -2629,6 +2629,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
2629
2629
|
|
|
2630
2630
|
class AutocompleteComponent extends BaseItemComponent {
|
|
2631
2631
|
autofocus = false;
|
|
2632
|
+
floatLabel = 'auto';
|
|
2632
2633
|
displayWith = (data) => {
|
|
2633
2634
|
return data ? data.name : data;
|
|
2634
2635
|
};
|
|
@@ -2636,7 +2637,7 @@ class AutocompleteComponent extends BaseItemComponent {
|
|
|
2636
2637
|
return this.item.valuesFn(keyword, this.item.filter);
|
|
2637
2638
|
};
|
|
2638
2639
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AutocompleteComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2639
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AutocompleteComponent, isStandalone: true, selector: "filter-item-autocomplete", inputs: { autofocus: "autofocus" }, usesInheritance: true, ngImport: i0, template: "<fs-autocomplete\n [fsFilterFocusTrigger]=\"autofocus\"\n [fetch]=\"fetch\"\n [displayWith]=\"displayWith\"\n [(ngModel)]=\"item.value\"\n [placeholder]=\"label\"\n [fetchOnFocus]=\"item.fetchOnFocus\"\n [showClear]=\"item.clearable\"\n name=\"item.name\">\n <ng-template\n fsAutocompleteTemplate\n let-data=\"data\">\n {{ data.name }}\n </ng-template>\n</fs-autocomplete>", dependencies: [{ kind: "ngmodule", type: FsAutocompleteModule }, { kind: "component", type: i1$2.FsAutocompleteComponent, selector: "fs-autocomplete", inputs: ["fetch", "displayWith", "placeholder", "fetchOnFocus", "readonly", "required", "disabled", "formFieldClass", "appearance", "hint", "panelWidth", "panelClass", "showClear"], outputs: ["cleared", "opened", "closed"] }, { kind: "directive", type: i1$2.FsAutocompleteTemplateDirective, selector: "[fsAutocompleteTemplate]" }, { kind: "directive", type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i3.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2640
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AutocompleteComponent, isStandalone: true, selector: "filter-item-autocomplete", inputs: { autofocus: "autofocus", floatLabel: "floatLabel" }, usesInheritance: true, ngImport: i0, template: "<fs-autocomplete\n [fsFilterFocusTrigger]=\"autofocus\"\n [fetch]=\"fetch\"\n [displayWith]=\"displayWith\"\n [(ngModel)]=\"item.value\"\n [placeholder]=\"label\"\n [fetchOnFocus]=\"item.fetchOnFocus\"\n [showClear]=\"item.clearable\"\n name=\"item.name\">\n <ng-template\n fsAutocompleteTemplate\n let-data=\"data\">\n {{ data.name }}\n </ng-template>\n</fs-autocomplete>", dependencies: [{ kind: "ngmodule", type: FsAutocompleteModule }, { kind: "component", type: i1$2.FsAutocompleteComponent, selector: "fs-autocomplete", inputs: ["fetch", "displayWith", "placeholder", "fetchOnFocus", "readonly", "required", "disabled", "formFieldClass", "appearance", "hint", "panelWidth", "panelClass", "showClear"], outputs: ["cleared", "opened", "closed"] }, { kind: "directive", type: i1$2.FsAutocompleteTemplateDirective, selector: "[fsAutocompleteTemplate]" }, { kind: "directive", type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i3.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2640
2641
|
}
|
|
2641
2642
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AutocompleteComponent, decorators: [{
|
|
2642
2643
|
type: Component,
|
|
@@ -2648,10 +2649,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
2648
2649
|
], template: "<fs-autocomplete\n [fsFilterFocusTrigger]=\"autofocus\"\n [fetch]=\"fetch\"\n [displayWith]=\"displayWith\"\n [(ngModel)]=\"item.value\"\n [placeholder]=\"label\"\n [fetchOnFocus]=\"item.fetchOnFocus\"\n [showClear]=\"item.clearable\"\n name=\"item.name\">\n <ng-template\n fsAutocompleteTemplate\n let-data=\"data\">\n {{ data.name }}\n </ng-template>\n</fs-autocomplete>" }]
|
|
2649
2650
|
}], propDecorators: { autofocus: [{
|
|
2650
2651
|
type: Input
|
|
2652
|
+
}], floatLabel: [{
|
|
2653
|
+
type: Input
|
|
2651
2654
|
}] } });
|
|
2652
2655
|
|
|
2653
2656
|
class AutocompletechipsComponent extends BaseItemComponent {
|
|
2654
2657
|
autofocus = false;
|
|
2658
|
+
floatLabel = 'auto';
|
|
2655
2659
|
value;
|
|
2656
2660
|
_injector = inject(Injector);
|
|
2657
2661
|
_cdRef = inject(ChangeDetectorRef);
|
|
@@ -2689,7 +2693,7 @@ class AutocompletechipsComponent extends BaseItemComponent {
|
|
|
2689
2693
|
action.click(filterComponent);
|
|
2690
2694
|
}
|
|
2691
2695
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AutocompletechipsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2692
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AutocompletechipsComponent, isStandalone: true, selector: "filter-item-autocompletechips", inputs: { autofocus: "autofocus" }, usesInheritance: true, ngImport: i0, template: "<fs-autocomplete-chips\n [fsFilterFocusTrigger]=\"autofocus\"\n [fetch]=\"fetch\"\n [ngModel]=\"value\"\n [floatLabel]=\"
|
|
2696
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AutocompletechipsComponent, isStandalone: true, selector: "filter-item-autocompletechips", inputs: { autofocus: "autofocus", floatLabel: "floatLabel" }, usesInheritance: true, ngImport: i0, template: "<fs-autocomplete-chips\n [fsFilterFocusTrigger]=\"autofocus\"\n [fetch]=\"fetch\"\n [ngModel]=\"value\"\n [floatLabel]=\"floatLabel\"\n (selected)=\"selected($event)\"\n (removed)=\"removed($event)\"\n (clear)=\"clear()\"\n [allowText]=\"false\"\n [padless]=\"true\"\n [label]=\"label\"\n [size]=\"'small'\"\n [chipImage]=\"item.chipImage\"\n [chipColor]=\"item.chipColor\"\n [chipIconColor]=\"item.chipIcon\"\n [chipBackground]=\"item.chipBackground\"\n [chipIcon]=\"item.chipIcon\"\n [chipClass]=\"item.chipClass\"\n [allowClear]=\"item.clearable\"\n [removable]=\"item.clearable\"\n [compareWith]=\"compareItems\"\n name=\"model\">\n <ng-template\n fsAutocompleteObject\n let-object=\"object\">\n {{ object.name }}\n </ng-template>\n @for (action of item.panelActions; track action.label) {\n <ng-template\n fsAutocompleteChipsStatic\n (click)=\"actionClick(action)\">\n {{ action.label }}\n </ng-template>\n }\n</fs-autocomplete-chips>", styles: ["fs-autocomplete-chips{min-width:200px;display:block;max-width:100%}\n"], dependencies: [{ kind: "ngmodule", type: FsAutocompleteChipsModule }, { kind: "component", type: i1$3.FsAutocompleteChipsComponent, selector: "fs-autocomplete-chips", inputs: ["fetch", "appearance", "floatLabel", "readonly", "size", "label", "placeholder", "chipMargin", "chipImage", "chipBackground", "chipColor", "chipIcon", "chipIconColor", "chipClass", "chipPadding", "shape", "hint", "allowText", "allowObject", "delay", "minPanelWidth", "maxPanelHeight", "validateText", "removable", "allowClear", "color", "background", "orderable", "padless", "initOnClick", "fetchOnFocus", "multiple", "multipleAdd", "confirm", "disabled", "groupBy", "panelWidth", "panelClass", "compareWith"], outputs: ["selected", "removed", "reordered", "clear"] }, { kind: "directive", type: i1$3.FsAutocompleteObjectDirective, selector: "[fsAutocompleteObject],[fsAutocompleteChipsTemplate]" }, { kind: "directive", type: i1$3.FsAutocompleteChipsStaticDirective, selector: "[fsAutocompleteChipsStatic]", inputs: ["show", "disable"], outputs: ["click", "selected"] }, { kind: "directive", type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i3.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2693
2697
|
}
|
|
2694
2698
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AutocompletechipsComponent, decorators: [{
|
|
2695
2699
|
type: Component,
|
|
@@ -2698,9 +2702,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
2698
2702
|
FocusToItemDirective,
|
|
2699
2703
|
FormsModule,
|
|
2700
2704
|
FsFormModule,
|
|
2701
|
-
], template: "<fs-autocomplete-chips\n [fsFilterFocusTrigger]=\"autofocus\"\n [fetch]=\"fetch\"\n [ngModel]=\"value\"\n [floatLabel]=\"
|
|
2705
|
+
], template: "<fs-autocomplete-chips\n [fsFilterFocusTrigger]=\"autofocus\"\n [fetch]=\"fetch\"\n [ngModel]=\"value\"\n [floatLabel]=\"floatLabel\"\n (selected)=\"selected($event)\"\n (removed)=\"removed($event)\"\n (clear)=\"clear()\"\n [allowText]=\"false\"\n [padless]=\"true\"\n [label]=\"label\"\n [size]=\"'small'\"\n [chipImage]=\"item.chipImage\"\n [chipColor]=\"item.chipColor\"\n [chipIconColor]=\"item.chipIcon\"\n [chipBackground]=\"item.chipBackground\"\n [chipIcon]=\"item.chipIcon\"\n [chipClass]=\"item.chipClass\"\n [allowClear]=\"item.clearable\"\n [removable]=\"item.clearable\"\n [compareWith]=\"compareItems\"\n name=\"model\">\n <ng-template\n fsAutocompleteObject\n let-object=\"object\">\n {{ object.name }}\n </ng-template>\n @for (action of item.panelActions; track action.label) {\n <ng-template\n fsAutocompleteChipsStatic\n (click)=\"actionClick(action)\">\n {{ action.label }}\n </ng-template>\n }\n</fs-autocomplete-chips>", styles: ["fs-autocomplete-chips{min-width:200px;display:block;max-width:100%}\n"] }]
|
|
2702
2706
|
}], propDecorators: { autofocus: [{
|
|
2703
2707
|
type: Input
|
|
2708
|
+
}], floatLabel: [{
|
|
2709
|
+
type: Input
|
|
2704
2710
|
}] } });
|
|
2705
2711
|
|
|
2706
2712
|
class CheckboxComponent extends BaseItemComponent {
|
|
@@ -2761,6 +2767,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
2761
2767
|
|
|
2762
2768
|
class DateRangeComponent extends BaseItemComponent {
|
|
2763
2769
|
autofocusName;
|
|
2770
|
+
floatLabel = 'auto';
|
|
2764
2771
|
viewType = PickerViewType.Date;
|
|
2765
2772
|
from;
|
|
2766
2773
|
to;
|
|
@@ -2782,7 +2789,7 @@ class DateRangeComponent extends BaseItemComponent {
|
|
|
2782
2789
|
};
|
|
2783
2790
|
}
|
|
2784
2791
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateRangeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2785
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DateRangeComponent, isStandalone: true, selector: "filter-item-date-range", inputs: { autofocusName: "autofocusName" }, usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <mat-form-field\n [floatLabel]=\"
|
|
2792
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DateRangeComponent, isStandalone: true, selector: "filter-item-date-range", inputs: { autofocusName: "autofocusName", floatLabel: "floatLabel" }, usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <mat-form-field\n [floatLabel]=\"floatLabel\"\n class=\"form-field-padless\">\n <mat-label>\n {{ item.label[0] }}\n </mat-label>\n <input\n matInput\n [fsFilterFocusTrigger]=\"autofocusName === 'from'\"\n [fsDateRangeFrom]=\"item.name\"\n [(ngModel)]=\"from\"\n [clear]=\"item.clearable\"\n [view]=\"viewType\"\n (ngModelChange)=\"change()\"\n name=\"dateFrom\">\n </mat-form-field>\n <div class=\"to\">\n to\n </div>\n <mat-form-field\n [floatLabel]=\"floatLabel\"\n class=\"form-field-padless\">\n <mat-label>\n {{ item.label[1] }}\n </mat-label>\n <input\n matInput\n [fsFilterFocusTrigger]=\"autofocusName === 'to'\"\n [fsDateRangeTo]=\"item.name\"\n [(ngModel)]=\"to\"\n (ngModelChange)=\"change()\"\n [clear]=\"item.clearable\"\n [view]=\"viewType\"\n name=\"dateTo\">\n </mat-form-field>\n</div>", styles: [".row{display:flex;flex-direction:row;align-items:center;gap:10px}.row mat-form-field{width:200px}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger"] }, { kind: "ngmodule", type: FsDatePickerModule }, { kind: "component", type: i2$1.DateRangePickerFromComponent, selector: "[fsDateRangeFrom],[fsDateRangeFromPicker]", inputs: ["fsDateRangeFrom", "fsDateRangeFromPicker"] }, { kind: "component", type: i2$1.DateRangePickerToComponent, selector: "[fsDateRangeTo],[fsDateRangeToPicker]", inputs: ["fsDateRangeTo", "fsDateRangeToPicker"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i3.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2786
2793
|
}
|
|
2787
2794
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateRangeComponent, decorators: [{
|
|
2788
2795
|
type: Component,
|
|
@@ -2794,13 +2801,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
2794
2801
|
FocusToItemDirective,
|
|
2795
2802
|
FsDatePickerModule,
|
|
2796
2803
|
FsFormModule,
|
|
2797
|
-
], template: "<div class=\"row\">\n <mat-form-field\n [floatLabel]=\"
|
|
2804
|
+
], template: "<div class=\"row\">\n <mat-form-field\n [floatLabel]=\"floatLabel\"\n class=\"form-field-padless\">\n <mat-label>\n {{ item.label[0] }}\n </mat-label>\n <input\n matInput\n [fsFilterFocusTrigger]=\"autofocusName === 'from'\"\n [fsDateRangeFrom]=\"item.name\"\n [(ngModel)]=\"from\"\n [clear]=\"item.clearable\"\n [view]=\"viewType\"\n (ngModelChange)=\"change()\"\n name=\"dateFrom\">\n </mat-form-field>\n <div class=\"to\">\n to\n </div>\n <mat-form-field\n [floatLabel]=\"floatLabel\"\n class=\"form-field-padless\">\n <mat-label>\n {{ item.label[1] }}\n </mat-label>\n <input\n matInput\n [fsFilterFocusTrigger]=\"autofocusName === 'to'\"\n [fsDateRangeTo]=\"item.name\"\n [(ngModel)]=\"to\"\n (ngModelChange)=\"change()\"\n [clear]=\"item.clearable\"\n [view]=\"viewType\"\n name=\"dateTo\">\n </mat-form-field>\n</div>", styles: [".row{display:flex;flex-direction:row;align-items:center;gap:10px}.row mat-form-field{width:200px}\n"] }]
|
|
2798
2805
|
}], propDecorators: { autofocusName: [{
|
|
2799
2806
|
type: Input
|
|
2807
|
+
}], floatLabel: [{
|
|
2808
|
+
type: Input
|
|
2800
2809
|
}] } });
|
|
2801
2810
|
|
|
2802
2811
|
class DateComponent extends BaseItemComponent {
|
|
2803
2812
|
autofocus = false;
|
|
2813
|
+
floatLabel = 'auto';
|
|
2804
2814
|
viewType = PickerViewType.Date;
|
|
2805
2815
|
itemDateMode = ItemDateMode;
|
|
2806
2816
|
showYear = true;
|
|
@@ -2823,7 +2833,7 @@ class DateComponent extends BaseItemComponent {
|
|
|
2823
2833
|
});
|
|
2824
2834
|
}
|
|
2825
2835
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2826
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DateComponent, isStandalone: true, selector: "filter-item-date", inputs: { autofocus: "autofocus" }, usesInheritance: true, ngImport: i0, template: "@if (item.mode === itemDateMode.ScrollMonthDayYear || item.mode === itemDateMode.ScrollMonthYear) {\n <mat-form-field\n [floatLabel]=\"
|
|
2836
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DateComponent, isStandalone: true, selector: "filter-item-date", inputs: { autofocus: "autofocus", floatLabel: "floatLabel" }, usesInheritance: true, ngImport: i0, template: "@if (item.mode === itemDateMode.ScrollMonthDayYear || item.mode === itemDateMode.ScrollMonthYear) {\n <mat-form-field\n [floatLabel]=\"floatLabel\"\n class=\"form-field-padless\">\n <mat-label>\n {{ item.label }}\n </mat-label>\n <input\n matInput\n fsDateScrollPicker\n [placeholder]=\"item.label\"\n [fsFilterFocusTrigger]=\"autofocus\"\n [(ngModel)]=\"value\"\n (ngModelChange)=\"item.value = value\"\n [maxYear]=\"item.maxYear\"\n [showMonth]=\"showMonth\"\n [showDay]=\"showDay\"\n [showYear]=\"showYear\"\n [placeholder]=\"item.placeholder\"\n [clear]=\"item.clearable\"\n [name]=\"item.name\">\n </mat-form-field>\n} @else if (item.mode === itemDateMode.Calendar) {\n <mat-form-field\n [floatLabel]=\"floatLabel\"\n class=\"form-field-padless\">\n <mat-label>\n {{ item.label }}\n </mat-label>\n <input\n matInput\n fsDatePicker\n [fsFilterFocusTrigger]=\"autofocus\"\n [(ngModel)]=\"value\"\n (ngModelChange)=\"item.value = value\"\n [maxYear]=\"item.maxYear\"\n [view]=\"viewType\"\n [placeholder]=\"item.label\"\n [clear]=\"item.clearable\"\n [name]=\"item.name\">\n </mat-form-field>\n}", dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsDatePickerModule }, { kind: "component", type: i2$1.FsDatePickerComponent, selector: "[fsDatePicker]", inputs: ["minYear", "maxYear", "minDate", "maxDate", "startOfDay", "view", "format", "minutes"], outputs: ["change"] }, { kind: "component", type: i2$1.FsDateScrollPickerComponent, selector: "[fsDateScrollPicker]", inputs: ["minYear", "maxYear", "minDate", "maxDate", "showMonth", "showYear", "showDay"] }, { kind: "directive", type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i3.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2827
2837
|
}
|
|
2828
2838
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateComponent, decorators: [{
|
|
2829
2839
|
type: Component,
|
|
@@ -2835,13 +2845,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
2835
2845
|
FsDatePickerModule,
|
|
2836
2846
|
FocusToItemDirective,
|
|
2837
2847
|
FsFormModule,
|
|
2838
|
-
], template: "@if (item.mode === itemDateMode.ScrollMonthDayYear || item.mode === itemDateMode.ScrollMonthYear) {\n <mat-form-field\n [floatLabel]=\"
|
|
2848
|
+
], template: "@if (item.mode === itemDateMode.ScrollMonthDayYear || item.mode === itemDateMode.ScrollMonthYear) {\n <mat-form-field\n [floatLabel]=\"floatLabel\"\n class=\"form-field-padless\">\n <mat-label>\n {{ item.label }}\n </mat-label>\n <input\n matInput\n fsDateScrollPicker\n [placeholder]=\"item.label\"\n [fsFilterFocusTrigger]=\"autofocus\"\n [(ngModel)]=\"value\"\n (ngModelChange)=\"item.value = value\"\n [maxYear]=\"item.maxYear\"\n [showMonth]=\"showMonth\"\n [showDay]=\"showDay\"\n [showYear]=\"showYear\"\n [placeholder]=\"item.placeholder\"\n [clear]=\"item.clearable\"\n [name]=\"item.name\">\n </mat-form-field>\n} @else if (item.mode === itemDateMode.Calendar) {\n <mat-form-field\n [floatLabel]=\"floatLabel\"\n class=\"form-field-padless\">\n <mat-label>\n {{ item.label }}\n </mat-label>\n <input\n matInput\n fsDatePicker\n [fsFilterFocusTrigger]=\"autofocus\"\n [(ngModel)]=\"value\"\n (ngModelChange)=\"item.value = value\"\n [maxYear]=\"item.maxYear\"\n [view]=\"viewType\"\n [placeholder]=\"item.label\"\n [clear]=\"item.clearable\"\n [name]=\"item.name\">\n </mat-form-field>\n}" }]
|
|
2839
2849
|
}], propDecorators: { autofocus: [{
|
|
2840
2850
|
type: Input
|
|
2851
|
+
}], floatLabel: [{
|
|
2852
|
+
type: Input
|
|
2841
2853
|
}] } });
|
|
2842
2854
|
|
|
2843
2855
|
class RangeComponent extends BaseItemComponent {
|
|
2844
2856
|
autofocusName;
|
|
2857
|
+
floatLabel = 'auto';
|
|
2845
2858
|
min;
|
|
2846
2859
|
max;
|
|
2847
2860
|
_change$ = new Subject();
|
|
@@ -2869,7 +2882,7 @@ class RangeComponent extends BaseItemComponent {
|
|
|
2869
2882
|
this._change$.next();
|
|
2870
2883
|
}
|
|
2871
2884
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RangeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2872
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: RangeComponent, isStandalone: true, selector: "filter-item-range", inputs: { autofocusName: "autofocusName" }, usesInheritance: true, ngImport: i0, template: "<div class=\"form-field\">\n <mat-form-field\n class=\"filter-range-min\"\n [floatLabel]=\"
|
|
2885
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: RangeComponent, isStandalone: true, selector: "filter-item-range", inputs: { autofocusName: "autofocusName", floatLabel: "floatLabel" }, usesInheritance: true, ngImport: i0, template: "<div class=\"form-field\">\n <mat-form-field\n class=\"filter-range-min\"\n [floatLabel]=\"floatLabel\"\n class=\"form-field-padless\">\n <mat-label>\n {{ item.label[0] }}\n </mat-label>\n @if (item.prefix) {\n <span\n matTextPrefix\n class=\"text-prefix\"\n [innerHtml]=\"item.prefix\">\n </span>\n }\n <input\n matInput\n [fsFilterFocusTrigger]=\"autofocusName === 'min'\"\n type=\"number\"\n [(ngModel)]=\"min\"\n (ngModelChange)=\"change()\"\n #from>\n @if (item.suffix) {\n <span\n matSuffix\n class=\"text-suffix\"\n [innerHtml]=\"item.suffix\">\n </span>\n }\n </mat-form-field>\n <mat-form-field\n class=\"filter-range-max\"\n [floatLabel]=\"floatLabel\"\n class=\"form-field-padless\">\n <mat-label>\n {{ item.label[1] }}\n </mat-label>\n @if (item.prefix) {\n <span\n matTextPrefix\n class=\"text-prefix\"\n [innerHtml]=\"item.prefix\">\n </span>\n }\n <input\n matInput\n [fsFilterFocusTrigger]=\"autofocusName === 'max'\"\n type=\"number\"\n [(ngModel)]=\"max\"\n (ngModelChange)=\"change()\"\n #to>\n @if (item.suffix) {\n <span\n matSuffix\n class=\"text-suffix\"\n [innerHtml]=\"item.suffix\">\n </span>\n }\n </mat-form-field>\n</div>", styles: [".form-field{display:flex}.form-field mat-form-field{min-width:0}.form-field mat-form-field+mat-form-field{margin-left:10px}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i3.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2873
2886
|
}
|
|
2874
2887
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RangeComponent, decorators: [{
|
|
2875
2888
|
type: Component,
|
|
@@ -2882,13 +2895,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
2882
2895
|
FocusToItemDirective,
|
|
2883
2896
|
FsFormModule,
|
|
2884
2897
|
MatSuffix,
|
|
2885
|
-
], template: "<div class=\"form-field\">\n <mat-form-field\n class=\"filter-range-min\"\n [floatLabel]=\"
|
|
2898
|
+
], template: "<div class=\"form-field\">\n <mat-form-field\n class=\"filter-range-min\"\n [floatLabel]=\"floatLabel\"\n class=\"form-field-padless\">\n <mat-label>\n {{ item.label[0] }}\n </mat-label>\n @if (item.prefix) {\n <span\n matTextPrefix\n class=\"text-prefix\"\n [innerHtml]=\"item.prefix\">\n </span>\n }\n <input\n matInput\n [fsFilterFocusTrigger]=\"autofocusName === 'min'\"\n type=\"number\"\n [(ngModel)]=\"min\"\n (ngModelChange)=\"change()\"\n #from>\n @if (item.suffix) {\n <span\n matSuffix\n class=\"text-suffix\"\n [innerHtml]=\"item.suffix\">\n </span>\n }\n </mat-form-field>\n <mat-form-field\n class=\"filter-range-max\"\n [floatLabel]=\"floatLabel\"\n class=\"form-field-padless\">\n <mat-label>\n {{ item.label[1] }}\n </mat-label>\n @if (item.prefix) {\n <span\n matTextPrefix\n class=\"text-prefix\"\n [innerHtml]=\"item.prefix\">\n </span>\n }\n <input\n matInput\n [fsFilterFocusTrigger]=\"autofocusName === 'max'\"\n type=\"number\"\n [(ngModel)]=\"max\"\n (ngModelChange)=\"change()\"\n #to>\n @if (item.suffix) {\n <span\n matSuffix\n class=\"text-suffix\"\n [innerHtml]=\"item.suffix\">\n </span>\n }\n </mat-form-field>\n</div>", styles: [".form-field{display:flex}.form-field mat-form-field{min-width:0}.form-field mat-form-field+mat-form-field{margin-left:10px}\n"] }]
|
|
2886
2899
|
}], propDecorators: { autofocusName: [{
|
|
2887
2900
|
type: Input
|
|
2901
|
+
}], floatLabel: [{
|
|
2902
|
+
type: Input
|
|
2888
2903
|
}] } });
|
|
2889
2904
|
|
|
2890
2905
|
class SelectComponent {
|
|
2891
2906
|
autofocus = false;
|
|
2907
|
+
floatLabel = 'auto';
|
|
2892
2908
|
item;
|
|
2893
2909
|
select;
|
|
2894
2910
|
value;
|
|
@@ -2932,7 +2948,7 @@ class SelectComponent {
|
|
|
2932
2948
|
}
|
|
2933
2949
|
}
|
|
2934
2950
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2935
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SelectComponent, isStandalone: true, selector: "filter-item-select", inputs: { autofocus: "autofocus", item: "item" }, viewQueries: [{ propertyName: "select", first: true, predicate: MatSelect, descendants: true, static: true }], ngImport: i0, template: "<mat-form-field\n [ngClass]=\"{ isolate: item.isolate }\"\n [floatLabel]=\"
|
|
2951
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SelectComponent, isStandalone: true, selector: "filter-item-select", inputs: { autofocus: "autofocus", floatLabel: "floatLabel", item: "item" }, viewQueries: [{ propertyName: "select", first: true, predicate: MatSelect, descendants: true, static: true }], ngImport: i0, template: "<mat-form-field\n [ngClass]=\"{ isolate: item.isolate }\"\n [floatLabel]=\"floatLabel\"\n class=\"form-field-padless\">\n <mat-label>\n {{ item.label }}\n </mat-label>\n <mat-select\n [fsFilterFocusTrigger]=\"autofocus\"\n [(ngModel)]=\"value\"\n (ngModelChange)=\"changed()\"\n [multiple]=\"item.multiple\">\n @if (item.children) {\n @for (option of item.values$ | async; track option) {\n @if (option[item.children]) {\n <mat-optgroup [label]=\"option.name\">\n @for (childOption of option[item.children]; track childOption.value) {\n <mat-option [value]=\"childOption.value\">\n {{ childOption.name }}\n </mat-option>\n }\n </mat-optgroup>\n } @else {\n <mat-option [value]=\"option.value\">\n {{ option.name }}\n </mat-option>\n }\n }\n } @else {\n @for (option of item.values$ | async; track option) {\n <mat-option [value]=\"option.value\">\n {{ option.name }}\n </mat-option>\n }\n }\n </mat-select>\n <mat-hint>\n @if (item.isolate) {\n <mat-checkbox\n (change)=\"isolateChange($event)\"\n [(ngModel)]=\"item.isolated\">\n <span class=\"checkbox-label\">\n {{ item.isolateLabel }}\n </span>\n </mat-checkbox>\n }\n </mat-hint>\n</mat-form-field>", styles: [":host ::ng-deep .isolate .mat-mdc-form-field-hint-wrapper{padding-left:0;padding-right:0;padding-top:8px}:host ::ng-deep .isolate .mat-mdc-form-field-hint-wrapper mat-hint .mat-internal-form-field{position:relative}:host ::ng-deep .isolate .mat-mdc-form-field-hint-wrapper mat-hint .mat-internal-form-field .mdc-checkbox{position:absolute}:host ::ng-deep .isolate .mat-mdc-form-field-hint-wrapper mat-hint .mat-internal-form-field .mdc-label{margin-left:32px;font-size:smaller;line-height:normal}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: 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: "directive", type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i3.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2936
2952
|
}
|
|
2937
2953
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectComponent, decorators: [{
|
|
2938
2954
|
type: Component,
|
|
@@ -2949,9 +2965,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
2949
2965
|
MatHint,
|
|
2950
2966
|
MatCheckbox,
|
|
2951
2967
|
AsyncPipe,
|
|
2952
|
-
], template: "<mat-form-field\n [ngClass]=\"{ isolate: item.isolate }\"\n [floatLabel]=\"
|
|
2968
|
+
], template: "<mat-form-field\n [ngClass]=\"{ isolate: item.isolate }\"\n [floatLabel]=\"floatLabel\"\n class=\"form-field-padless\">\n <mat-label>\n {{ item.label }}\n </mat-label>\n <mat-select\n [fsFilterFocusTrigger]=\"autofocus\"\n [(ngModel)]=\"value\"\n (ngModelChange)=\"changed()\"\n [multiple]=\"item.multiple\">\n @if (item.children) {\n @for (option of item.values$ | async; track option) {\n @if (option[item.children]) {\n <mat-optgroup [label]=\"option.name\">\n @for (childOption of option[item.children]; track childOption.value) {\n <mat-option [value]=\"childOption.value\">\n {{ childOption.name }}\n </mat-option>\n }\n </mat-optgroup>\n } @else {\n <mat-option [value]=\"option.value\">\n {{ option.name }}\n </mat-option>\n }\n }\n } @else {\n @for (option of item.values$ | async; track option) {\n <mat-option [value]=\"option.value\">\n {{ option.name }}\n </mat-option>\n }\n }\n </mat-select>\n <mat-hint>\n @if (item.isolate) {\n <mat-checkbox\n (change)=\"isolateChange($event)\"\n [(ngModel)]=\"item.isolated\">\n <span class=\"checkbox-label\">\n {{ item.isolateLabel }}\n </span>\n </mat-checkbox>\n }\n </mat-hint>\n</mat-form-field>", styles: [":host ::ng-deep .isolate .mat-mdc-form-field-hint-wrapper{padding-left:0;padding-right:0;padding-top:8px}:host ::ng-deep .isolate .mat-mdc-form-field-hint-wrapper mat-hint .mat-internal-form-field{position:relative}:host ::ng-deep .isolate .mat-mdc-form-field-hint-wrapper mat-hint .mat-internal-form-field .mdc-checkbox{position:absolute}:host ::ng-deep .isolate .mat-mdc-form-field-hint-wrapper mat-hint .mat-internal-form-field .mdc-label{margin-left:32px;font-size:smaller;line-height:normal}\n"] }]
|
|
2953
2969
|
}], propDecorators: { autofocus: [{
|
|
2954
2970
|
type: Input
|
|
2971
|
+
}], floatLabel: [{
|
|
2972
|
+
type: Input
|
|
2955
2973
|
}], item: [{
|
|
2956
2974
|
type: Input
|
|
2957
2975
|
}], select: [{
|
|
@@ -2961,6 +2979,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
2961
2979
|
|
|
2962
2980
|
class TextComponent extends BaseItemComponent {
|
|
2963
2981
|
autofocus = false;
|
|
2982
|
+
floatLabel = 'auto';
|
|
2964
2983
|
value;
|
|
2965
2984
|
_change$ = new Subject();
|
|
2966
2985
|
_cdRef = inject(ChangeDetectorRef);
|
|
@@ -2987,7 +3006,7 @@ class TextComponent extends BaseItemComponent {
|
|
|
2987
3006
|
});
|
|
2988
3007
|
}
|
|
2989
3008
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2990
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: TextComponent, isStandalone: true, selector: "filter-item-text", inputs: { autofocus: "autofocus" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field\n [floatLabel]=\"
|
|
3009
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: TextComponent, isStandalone: true, selector: "filter-item-text", inputs: { autofocus: "autofocus", floatLabel: "floatLabel" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field\n [floatLabel]=\"floatLabel\"\n class=\"form-field-padless\">\n <mat-label>\n {{ item.label }}\n </mat-label>\n @if (item.prefix) {\n <span\n matTextPrefix\n [innerHtml]=\"item.prefix\">\n </span>\n }\n <input\n matInput\n [(ngModel)]=\"value\"\n (ngModelChange)=\"change()\"\n [placeholder]=\"item.placeholder\"\n [fsFilterFocusTrigger]=\"autofocus\">\n @if (item.suffix) {\n <span\n matTextSuffix\n [innerHtml]=\"item.suffix\">\n </span>\n }\n</mat-form-field>", styles: [""], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2991
3010
|
}
|
|
2992
3011
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextComponent, decorators: [{
|
|
2993
3012
|
type: Component,
|
|
@@ -3000,13 +3019,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
3000
3019
|
ReactiveFormsModule,
|
|
3001
3020
|
FocusToItemDirective,
|
|
3002
3021
|
MatSuffix,
|
|
3003
|
-
], template: "<mat-form-field\n [floatLabel]=\"
|
|
3022
|
+
], template: "<mat-form-field\n [floatLabel]=\"floatLabel\"\n class=\"form-field-padless\">\n <mat-label>\n {{ item.label }}\n </mat-label>\n @if (item.prefix) {\n <span\n matTextPrefix\n [innerHtml]=\"item.prefix\">\n </span>\n }\n <input\n matInput\n [(ngModel)]=\"value\"\n (ngModelChange)=\"change()\"\n [placeholder]=\"item.placeholder\"\n [fsFilterFocusTrigger]=\"autofocus\">\n @if (item.suffix) {\n <span\n matTextSuffix\n [innerHtml]=\"item.suffix\">\n </span>\n }\n</mat-form-field>" }]
|
|
3004
3023
|
}], propDecorators: { autofocus: [{
|
|
3005
3024
|
type: Input
|
|
3025
|
+
}], floatLabel: [{
|
|
3026
|
+
type: Input
|
|
3006
3027
|
}] } });
|
|
3007
3028
|
|
|
3008
3029
|
class WeekComponent extends BaseItemComponent {
|
|
3009
3030
|
autofocus = false;
|
|
3031
|
+
floatLabel = 'auto';
|
|
3010
3032
|
value;
|
|
3011
3033
|
_cdRef = inject(ChangeDetectorRef);
|
|
3012
3034
|
ngOnInit() {
|
|
@@ -3018,7 +3040,7 @@ class WeekComponent extends BaseItemComponent {
|
|
|
3018
3040
|
});
|
|
3019
3041
|
}
|
|
3020
3042
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WeekComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3021
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: WeekComponent, isStandalone: true, selector: "filter-item-week", inputs: { autofocus: "autofocus" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field\n [floatLabel]=\"
|
|
3043
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: WeekComponent, isStandalone: true, selector: "filter-item-week", inputs: { autofocus: "autofocus", floatLabel: "floatLabel" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field\n [floatLabel]=\"floatLabel\"\n class=\"form-field-padless\">\n <mat-label>\n {{ item.label }}\n </mat-label>\n <input\n matInput\n fsDateWeekPicker\n [placeholder]=\"item.label\"\n [fsFilterFocusTrigger]=\"autofocus\"\n [(ngModel)]=\"value\"\n (ngModelChange)=\"item.value = value\"\n [seedDate]=\"item.seedDate\"\n [clear]=\"item.clearable\"\n [name]=\"item.name\">\n</mat-form-field>", dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsDatePickerModule }, { kind: "component", type: i2$1.FsDateWeekPickerComponent, selector: "[fsDateWeekPicker]", inputs: ["minYear", "maxYear", "minDate", "maxDate", "seedDate", "period", "view"], outputs: ["change"] }, { kind: "directive", type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i3.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3022
3044
|
}
|
|
3023
3045
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WeekComponent, decorators: [{
|
|
3024
3046
|
type: Component,
|
|
@@ -3030,13 +3052,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
3030
3052
|
FsDatePickerModule,
|
|
3031
3053
|
FocusToItemDirective,
|
|
3032
3054
|
FsFormModule,
|
|
3033
|
-
], template: "<mat-form-field\n [floatLabel]=\"
|
|
3055
|
+
], template: "<mat-form-field\n [floatLabel]=\"floatLabel\"\n class=\"form-field-padless\">\n <mat-label>\n {{ item.label }}\n </mat-label>\n <input\n matInput\n fsDateWeekPicker\n [placeholder]=\"item.label\"\n [fsFilterFocusTrigger]=\"autofocus\"\n [(ngModel)]=\"value\"\n (ngModelChange)=\"item.value = value\"\n [seedDate]=\"item.seedDate\"\n [clear]=\"item.clearable\"\n [name]=\"item.name\">\n</mat-form-field>" }]
|
|
3034
3056
|
}], propDecorators: { autofocus: [{
|
|
3035
3057
|
type: Input
|
|
3058
|
+
}], floatLabel: [{
|
|
3059
|
+
type: Input
|
|
3036
3060
|
}] } });
|
|
3037
3061
|
|
|
3038
3062
|
class FilterItemComponent {
|
|
3039
3063
|
autofocus = false;
|
|
3064
|
+
floatLabel = 'auto';
|
|
3040
3065
|
autofocusName;
|
|
3041
3066
|
item;
|
|
3042
3067
|
name;
|
|
@@ -3091,7 +3116,7 @@ class FilterItemComponent {
|
|
|
3091
3116
|
this._destroy$.complete();
|
|
3092
3117
|
}
|
|
3093
3118
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3094
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FilterItemComponent, isStandalone: true, selector: "filter-item", inputs: { autofocus: "autofocus", autofocusName: "autofocusName", item: "item", name: "name" }, ngImport: i0, template: "@if (item.visible$ | async) {\n <div class=\"filter filter-{{ item.type }}\">\n @switch (item.type) {\n @case (itemType.Text) {\n <filter-item-text\n class=\"interface\"\n [item]=\"textItem\"\n [autofocus]=\"autofocus\">\n </filter-item-text>\n }\n @case (itemType.Select) {\n <filter-item-select\n class=\"interface\"\n [item]=\"selectItem\"\n [autofocus]=\"autofocus\">\n </filter-item-select>\n }\n @case (itemType.Chips) {\n <filter-item-chips\n class=\"interface\"\n [item]=\"chipsItem\">\n </filter-item-chips>\n }\n @case (itemType.Range) {\n <filter-item-range\n class=\"interface interface-range\"\n [item]=\"rangeItem\"\n [autofocusName]=\"autofocusName\">\n </filter-item-range>\n }\n @case (itemType.AutoComplete) {\n <filter-item-autocomplete\n class=\"interface\"\n [item]=\"autocompleteItem\"\n [autofocus]=\"autofocus\">\n </filter-item-autocomplete>\n }\n @case (itemType.AutoCompleteChips) {\n <filter-item-autocompletechips\n class=\"interface\"\n [item]=\"autocompleteChipsItem\"\n [autofocus]=\"autofocus\">\n </filter-item-autocompletechips>\n }\n @case (itemType.Date) {\n <filter-item-date\n class=\"interface interface-date\"\n [item]=\"dateItem\"\n [autofocus]=\"autofocus\">\n </filter-item-date>\n }\n @case (itemType.DateTime) {\n <filter-item-date\n class=\"interface interface-date\"\n [item]=\"dateTimeItem\"\n [autofocus]=\"autofocus\">\n </filter-item-date>\n }\n @case (itemType.DateRange) {\n <filter-item-date-range\n class=\"interface interface-date\"\n [item]=\"dateRangeItem\"\n [autofocusName]=\"autofocusName\">\n [name]=\"name\">\n </filter-item-date-range>\n }\n @case (itemType.DateTimeRange) {\n <filter-item-date-range\n class=\"interface interface-date\"\n [item]=\"dateTimeRangeItem\"\n [autofocusName]=\"autofocusName\">\n </filter-item-date-range>\n }\n @case (itemType.Week) {\n <filter-item-week\n class=\"interface\"\n [item]=\"weekItem\"\n [autofocus]=\"autofocus\">\n </filter-item-week>\n }\n @case (itemType.Checkbox) {\n <filter-item-checkbox\n class=\"interface interface-checkbox\"\n [item]=\"checkboxItem\"\n [autofocus]=\"autofocus\">\n </filter-item-checkbox>\n }\n }\n </div>\n}", styles: [":host ::ng-deep mat-form-field{margin-top:0!important}:host ::ng-deep mat-form-field .mat-form-field-prefix .text-prefix,:host ::ng-deep mat-form-field .mat-form-field-prefix .text-suffix,:host ::ng-deep mat-form-field .mat-form-field-suffix .text-prefix,:host ::ng-deep mat-form-field .mat-form-field-suffix .text-suffix{top:-.25em;position:relative}:host ::ng-deep mat-form-field:not(.mat-form-field-should-float) .mat-form-field-prefix .text-prefix,:host ::ng-deep mat-form-field:not(.mat-form-field-should-float) .mat-form-field-suffix .text-suffix{display:none}\n"], dependencies: [{ kind: "component", type: TextComponent, selector: "filter-item-text", inputs: ["autofocus"] }, { kind: "component", type: SelectComponent, selector: "filter-item-select", inputs: ["autofocus", "item"] }, { kind: "component", type: ChipsComponent, selector: "filter-item-chips" }, { kind: "component", type: RangeComponent, selector: "filter-item-range", inputs: ["autofocusName"] }, { kind: "component", type: AutocompleteComponent, selector: "filter-item-autocomplete", inputs: ["autofocus"] }, { kind: "component", type: AutocompletechipsComponent, selector: "filter-item-autocompletechips", inputs: ["autofocus"] }, { kind: "component", type: DateComponent, selector: "filter-item-date", inputs: ["autofocus"] }, { kind: "component", type: DateRangeComponent, selector: "filter-item-date-range", inputs: ["autofocusName"] }, { kind: "component", type: WeekComponent, selector: "filter-item-week", inputs: ["autofocus"] }, { kind: "component", type: CheckboxComponent, selector: "filter-item-checkbox" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3119
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FilterItemComponent, isStandalone: true, selector: "filter-item", inputs: { autofocus: "autofocus", floatLabel: "floatLabel", autofocusName: "autofocusName", item: "item", name: "name" }, ngImport: i0, template: "@if (item.visible$ | async) {\n <div class=\"filter filter-{{ item.type }}\">\n @switch (item.type) {\n @case (itemType.Text) {\n <filter-item-text\n [floatLabel]=\"floatLabel\"\n class=\"interface\"\n [item]=\"textItem\"\n [autofocus]=\"autofocus\">\n </filter-item-text>\n }\n @case (itemType.Select) {\n <filter-item-select\n [floatLabel]=\"floatLabel\"\n class=\"interface\"\n [item]=\"selectItem\"\n [autofocus]=\"autofocus\">\n </filter-item-select>\n }\n @case (itemType.Chips) {\n <filter-item-chips\n class=\"interface\"\n [item]=\"chipsItem\">\n </filter-item-chips>\n }\n @case (itemType.Range) {\n <filter-item-range\n [floatLabel]=\"floatLabel\"\n class=\"interface interface-range\"\n [item]=\"rangeItem\"\n [autofocusName]=\"autofocusName\">\n </filter-item-range>\n }\n @case (itemType.AutoComplete) {\n <filter-item-autocomplete\n [floatLabel]=\"floatLabel\"\n class=\"interface\"\n [item]=\"autocompleteItem\"\n [autofocus]=\"autofocus\">\n </filter-item-autocomplete>\n }\n @case (itemType.AutoCompleteChips) {\n <filter-item-autocompletechips\n [floatLabel]=\"floatLabel\"\n class=\"interface\"\n [item]=\"autocompleteChipsItem\"\n [autofocus]=\"autofocus\">\n </filter-item-autocompletechips>\n }\n @case (itemType.Date) {\n <filter-item-date\n [floatLabel]=\"floatLabel\"\n class=\"interface interface-date\"\n [item]=\"dateItem\"\n [autofocus]=\"autofocus\">\n </filter-item-date>\n }\n @case (itemType.DateTime) {\n <filter-item-date\n [floatLabel]=\"floatLabel\"\n class=\"interface interface-date\"\n [item]=\"dateTimeItem\"\n [autofocus]=\"autofocus\">\n </filter-item-date>\n }\n @case (itemType.DateRange) {\n <filter-item-date-range\n [floatLabel]=\"floatLabel\"\n class=\"interface interface-date\"\n [item]=\"dateRangeItem\"\n [autofocusName]=\"autofocusName\">\n [name]=\"name\">\n </filter-item-date-range>\n }\n @case (itemType.DateTimeRange) {\n <filter-item-date-range\n [floatLabel]=\"floatLabel\"\n class=\"interface interface-date\"\n [item]=\"dateTimeRangeItem\"\n [autofocusName]=\"autofocusName\">\n </filter-item-date-range>\n }\n @case (itemType.Week) {\n <filter-item-week\n [floatLabel]=\"floatLabel\"\n class=\"interface\"\n [item]=\"weekItem\"\n [autofocus]=\"autofocus\">\n </filter-item-week>\n }\n @case (itemType.Checkbox) {\n <filter-item-checkbox\n class=\"interface interface-checkbox\"\n [item]=\"checkboxItem\"\n [autofocus]=\"autofocus\">\n </filter-item-checkbox>\n }\n }\n </div>\n}", styles: [":host ::ng-deep mat-form-field{margin-top:0!important}:host ::ng-deep mat-form-field .mat-form-field-prefix .text-prefix,:host ::ng-deep mat-form-field .mat-form-field-prefix .text-suffix,:host ::ng-deep mat-form-field .mat-form-field-suffix .text-prefix,:host ::ng-deep mat-form-field .mat-form-field-suffix .text-suffix{top:-.25em;position:relative}:host ::ng-deep mat-form-field:not(.mat-form-field-should-float) .mat-form-field-prefix .text-prefix,:host ::ng-deep mat-form-field:not(.mat-form-field-should-float) .mat-form-field-suffix .text-suffix{display:none}\n"], dependencies: [{ kind: "component", type: TextComponent, selector: "filter-item-text", inputs: ["autofocus", "floatLabel"] }, { kind: "component", type: SelectComponent, selector: "filter-item-select", inputs: ["autofocus", "floatLabel", "item"] }, { kind: "component", type: ChipsComponent, selector: "filter-item-chips" }, { kind: "component", type: RangeComponent, selector: "filter-item-range", inputs: ["autofocusName", "floatLabel"] }, { kind: "component", type: AutocompleteComponent, selector: "filter-item-autocomplete", inputs: ["autofocus", "floatLabel"] }, { kind: "component", type: AutocompletechipsComponent, selector: "filter-item-autocompletechips", inputs: ["autofocus", "floatLabel"] }, { kind: "component", type: DateComponent, selector: "filter-item-date", inputs: ["autofocus", "floatLabel"] }, { kind: "component", type: DateRangeComponent, selector: "filter-item-date-range", inputs: ["autofocusName", "floatLabel"] }, { kind: "component", type: WeekComponent, selector: "filter-item-week", inputs: ["autofocus", "floatLabel"] }, { kind: "component", type: CheckboxComponent, selector: "filter-item-checkbox" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3095
3120
|
}
|
|
3096
3121
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterItemComponent, decorators: [{
|
|
3097
3122
|
type: Component,
|
|
@@ -3107,9 +3132,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
3107
3132
|
WeekComponent,
|
|
3108
3133
|
CheckboxComponent,
|
|
3109
3134
|
AsyncPipe,
|
|
3110
|
-
], template: "@if (item.visible$ | async) {\n <div class=\"filter filter-{{ item.type }}\">\n @switch (item.type) {\n @case (itemType.Text) {\n <filter-item-text\n class=\"interface\"\n [item]=\"textItem\"\n [autofocus]=\"autofocus\">\n </filter-item-text>\n }\n @case (itemType.Select) {\n <filter-item-select\n class=\"interface\"\n [item]=\"selectItem\"\n [autofocus]=\"autofocus\">\n </filter-item-select>\n }\n @case (itemType.Chips) {\n <filter-item-chips\n class=\"interface\"\n [item]=\"chipsItem\">\n </filter-item-chips>\n }\n @case (itemType.Range) {\n <filter-item-range\n class=\"interface interface-range\"\n [item]=\"rangeItem\"\n [autofocusName]=\"autofocusName\">\n </filter-item-range>\n }\n @case (itemType.AutoComplete) {\n <filter-item-autocomplete\n class=\"interface\"\n [item]=\"autocompleteItem\"\n [autofocus]=\"autofocus\">\n </filter-item-autocomplete>\n }\n @case (itemType.AutoCompleteChips) {\n <filter-item-autocompletechips\n class=\"interface\"\n [item]=\"autocompleteChipsItem\"\n [autofocus]=\"autofocus\">\n </filter-item-autocompletechips>\n }\n @case (itemType.Date) {\n <filter-item-date\n class=\"interface interface-date\"\n [item]=\"dateItem\"\n [autofocus]=\"autofocus\">\n </filter-item-date>\n }\n @case (itemType.DateTime) {\n <filter-item-date\n class=\"interface interface-date\"\n [item]=\"dateTimeItem\"\n [autofocus]=\"autofocus\">\n </filter-item-date>\n }\n @case (itemType.DateRange) {\n <filter-item-date-range\n class=\"interface interface-date\"\n [item]=\"dateRangeItem\"\n [autofocusName]=\"autofocusName\">\n [name]=\"name\">\n </filter-item-date-range>\n }\n @case (itemType.DateTimeRange) {\n <filter-item-date-range\n class=\"interface interface-date\"\n [item]=\"dateTimeRangeItem\"\n [autofocusName]=\"autofocusName\">\n </filter-item-date-range>\n }\n @case (itemType.Week) {\n <filter-item-week\n class=\"interface\"\n [item]=\"weekItem\"\n [autofocus]=\"autofocus\">\n </filter-item-week>\n }\n @case (itemType.Checkbox) {\n <filter-item-checkbox\n class=\"interface interface-checkbox\"\n [item]=\"checkboxItem\"\n [autofocus]=\"autofocus\">\n </filter-item-checkbox>\n }\n }\n </div>\n}", styles: [":host ::ng-deep mat-form-field{margin-top:0!important}:host ::ng-deep mat-form-field .mat-form-field-prefix .text-prefix,:host ::ng-deep mat-form-field .mat-form-field-prefix .text-suffix,:host ::ng-deep mat-form-field .mat-form-field-suffix .text-prefix,:host ::ng-deep mat-form-field .mat-form-field-suffix .text-suffix{top:-.25em;position:relative}:host ::ng-deep mat-form-field:not(.mat-form-field-should-float) .mat-form-field-prefix .text-prefix,:host ::ng-deep mat-form-field:not(.mat-form-field-should-float) .mat-form-field-suffix .text-suffix{display:none}\n"] }]
|
|
3135
|
+
], template: "@if (item.visible$ | async) {\n <div class=\"filter filter-{{ item.type }}\">\n @switch (item.type) {\n @case (itemType.Text) {\n <filter-item-text\n [floatLabel]=\"floatLabel\"\n class=\"interface\"\n [item]=\"textItem\"\n [autofocus]=\"autofocus\">\n </filter-item-text>\n }\n @case (itemType.Select) {\n <filter-item-select\n [floatLabel]=\"floatLabel\"\n class=\"interface\"\n [item]=\"selectItem\"\n [autofocus]=\"autofocus\">\n </filter-item-select>\n }\n @case (itemType.Chips) {\n <filter-item-chips\n class=\"interface\"\n [item]=\"chipsItem\">\n </filter-item-chips>\n }\n @case (itemType.Range) {\n <filter-item-range\n [floatLabel]=\"floatLabel\"\n class=\"interface interface-range\"\n [item]=\"rangeItem\"\n [autofocusName]=\"autofocusName\">\n </filter-item-range>\n }\n @case (itemType.AutoComplete) {\n <filter-item-autocomplete\n [floatLabel]=\"floatLabel\"\n class=\"interface\"\n [item]=\"autocompleteItem\"\n [autofocus]=\"autofocus\">\n </filter-item-autocomplete>\n }\n @case (itemType.AutoCompleteChips) {\n <filter-item-autocompletechips\n [floatLabel]=\"floatLabel\"\n class=\"interface\"\n [item]=\"autocompleteChipsItem\"\n [autofocus]=\"autofocus\">\n </filter-item-autocompletechips>\n }\n @case (itemType.Date) {\n <filter-item-date\n [floatLabel]=\"floatLabel\"\n class=\"interface interface-date\"\n [item]=\"dateItem\"\n [autofocus]=\"autofocus\">\n </filter-item-date>\n }\n @case (itemType.DateTime) {\n <filter-item-date\n [floatLabel]=\"floatLabel\"\n class=\"interface interface-date\"\n [item]=\"dateTimeItem\"\n [autofocus]=\"autofocus\">\n </filter-item-date>\n }\n @case (itemType.DateRange) {\n <filter-item-date-range\n [floatLabel]=\"floatLabel\"\n class=\"interface interface-date\"\n [item]=\"dateRangeItem\"\n [autofocusName]=\"autofocusName\">\n [name]=\"name\">\n </filter-item-date-range>\n }\n @case (itemType.DateTimeRange) {\n <filter-item-date-range\n [floatLabel]=\"floatLabel\"\n class=\"interface interface-date\"\n [item]=\"dateTimeRangeItem\"\n [autofocusName]=\"autofocusName\">\n </filter-item-date-range>\n }\n @case (itemType.Week) {\n <filter-item-week\n [floatLabel]=\"floatLabel\"\n class=\"interface\"\n [item]=\"weekItem\"\n [autofocus]=\"autofocus\">\n </filter-item-week>\n }\n @case (itemType.Checkbox) {\n <filter-item-checkbox\n class=\"interface interface-checkbox\"\n [item]=\"checkboxItem\"\n [autofocus]=\"autofocus\">\n </filter-item-checkbox>\n }\n }\n </div>\n}", styles: [":host ::ng-deep mat-form-field{margin-top:0!important}:host ::ng-deep mat-form-field .mat-form-field-prefix .text-prefix,:host ::ng-deep mat-form-field .mat-form-field-prefix .text-suffix,:host ::ng-deep mat-form-field .mat-form-field-suffix .text-prefix,:host ::ng-deep mat-form-field .mat-form-field-suffix .text-suffix{top:-.25em;position:relative}:host ::ng-deep mat-form-field:not(.mat-form-field-should-float) .mat-form-field-prefix .text-prefix,:host ::ng-deep mat-form-field:not(.mat-form-field-should-float) .mat-form-field-suffix .text-suffix{display:none}\n"] }]
|
|
3111
3136
|
}], propDecorators: { autofocus: [{
|
|
3112
3137
|
type: Input
|
|
3138
|
+
}], floatLabel: [{
|
|
3139
|
+
type: Input
|
|
3113
3140
|
}], autofocusName: [{
|
|
3114
3141
|
type: Input
|
|
3115
3142
|
}], item: [{
|
|
@@ -3122,7 +3149,7 @@ class FilterItemDialogComponent {
|
|
|
3122
3149
|
item = inject(FILTER_DRAWER_DATA)?.item;
|
|
3123
3150
|
autofocusName = inject(FILTER_DRAWER_DATA)?.autofocusName;
|
|
3124
3151
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterItemDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3125
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FilterItemDialogComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<div class=\"filter-item-dialog\">\n <filter-item\n class=\"filter-group\"\n [autofocus]=\"true\"\n [autofocusName]=\"autofocusName\"\n [item]=\"item\">\n </filter-item>\n</div>", styles: [".filter-item-dialog{background-color:#fff;padding:12px;box-shadow:var(--mat-autocomplete-container-elevation-shadow);border-radius:5px}.filter-item-dialog ::ng-deep mat-form-field{margin-top:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: FsFormModule }, { kind: "ngmodule", type: FsSkeletonModule }, { kind: "component", type: FilterItemComponent, selector: "filter-item", inputs: ["autofocus", "autofocusName", "item", "name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3152
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FilterItemDialogComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<div class=\"filter-item-dialog\">\n <filter-item\n class=\"filter-group\"\n [floatLabel]=\"'always'\"\n [autofocus]=\"true\"\n [autofocusName]=\"autofocusName\"\n [item]=\"item\">\n </filter-item>\n</div>", styles: [".filter-item-dialog{background-color:#fff;padding:12px;box-shadow:var(--mat-autocomplete-container-elevation-shadow);border-radius:5px}.filter-item-dialog ::ng-deep mat-form-field{margin-top:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: FsFormModule }, { kind: "ngmodule", type: FsSkeletonModule }, { kind: "component", type: FilterItemComponent, selector: "filter-item", inputs: ["autofocus", "floatLabel", "autofocusName", "item", "name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3126
3153
|
}
|
|
3127
3154
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterItemDialogComponent, decorators: [{
|
|
3128
3155
|
type: Component,
|
|
@@ -3131,7 +3158,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
3131
3158
|
FsFormModule,
|
|
3132
3159
|
FsSkeletonModule,
|
|
3133
3160
|
FilterItemComponent,
|
|
3134
|
-
], template: "<div class=\"filter-item-dialog\">\n <filter-item\n class=\"filter-group\"\n [autofocus]=\"true\"\n [autofocusName]=\"autofocusName\"\n [item]=\"item\">\n </filter-item>\n</div>", styles: [".filter-item-dialog{background-color:#fff;padding:12px;box-shadow:var(--mat-autocomplete-container-elevation-shadow);border-radius:5px}.filter-item-dialog ::ng-deep mat-form-field{margin-top:0}\n"] }]
|
|
3161
|
+
], template: "<div class=\"filter-item-dialog\">\n <filter-item\n class=\"filter-group\"\n [floatLabel]=\"'always'\"\n [autofocus]=\"true\"\n [autofocusName]=\"autofocusName\"\n [item]=\"item\">\n </filter-item>\n</div>", styles: [".filter-item-dialog{background-color:#fff;padding:12px;box-shadow:var(--mat-autocomplete-container-elevation-shadow);border-radius:5px}.filter-item-dialog ::ng-deep mat-form-field{margin-top:0}\n"] }]
|
|
3135
3162
|
}] });
|
|
3136
3163
|
|
|
3137
3164
|
class FsFilterSavedFilterChipsComponent {
|
|
@@ -3570,7 +3597,7 @@ class FilterComponent {
|
|
|
3570
3597
|
return this._filterController.items;
|
|
3571
3598
|
}
|
|
3572
3599
|
get primaryItems() {
|
|
3573
|
-
return this.items.filter((item) => item.
|
|
3600
|
+
return this.items.filter((item) => item.primary);
|
|
3574
3601
|
}
|
|
3575
3602
|
change() {
|
|
3576
3603
|
this._filterController.change();
|
|
@@ -3796,7 +3823,7 @@ class FilterComponent {
|
|
|
3796
3823
|
ActionsController,
|
|
3797
3824
|
KeywordController,
|
|
3798
3825
|
SortController,
|
|
3799
|
-
], queries: [{ propertyName: "statusBar", first: true, predicate: FilterStatusBarDirective, descendants: true }, { propertyName: "headingTemplate", first: true, predicate: FilterHeadingDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "keywordInput", first: true, predicate: KeywordInputComponent, descendants: true }, { propertyName: "reloadEl", first: true, predicate: ["reloadEl"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n class=\"filter-container\"\n [ngClass]=\"{ 'has-primary-filter': primaryFilterVisible$ | async }\"\n [ngClass]=\"{ 'keyword-full-width': keywordFullWidth$ | async }\">\n @if (primaryFilterVisible$ | async) {\n <ng-container *ngTemplateOutlet=\"headingTmpl\"></ng-container>\n }\n <div class=\"filter-bar-container\">\n @if (primaryFilterVisible$ | async) {\n <div class=\"filter-input-container\">\n @if (keywordVisible$ | async) {\n <fs-keyword-input [autofocus]=\"config.autofocus\"></fs-keyword-input>\n }\n @for (item of primaryItems; track item.name) {\n <filter-item [item]=\"item\"></filter-item>\n }\n </div>\n } @else if (hasHeading) {\n <div class=\"filter-heading-container\">\n <ng-container *ngTemplateOutlet=\"headingTmpl\"></ng-container>\n </div>\n } @else {\n <ng-container *ngTemplateOutlet=\"chipsTmpl\"></ng-container>\n }\n <ng-container [ngTemplateOutlet]=\"filterActionsTmpl\"></ng-container>\n </div>\n @if ((primaryFilterVisible$ | async) === true || hasHeading) {\n <ng-container\n [ngTemplateOutlet]=\"chipsTmpl\"\n [ngTemplateOutletContext]=\"{ topMargin: true }\">\n </ng-container>\n }\n <ng-container *ngTemplateOutlet=\"statusBarTmpl\"></ng-container>\n</div>\n<ng-template\n #chipsTmpl\n let-topMargin=\"topMargin\">\n <fs-filter-chips\n class=\"filter-chips\"\n [ngClass]=\"{ 'top-margin': topMargin }\">\n </fs-filter-chips>\n</ng-template>\n<ng-template #statusBarTmpl>\n @if (statusBar) {\n <div\n class=\"filter-status-container\"\n [ngClass]=\"{ 'has-status': !!filterStatus.textContent }\">\n <div\n class=\"filter-status\"\n #filterStatus>\n <ng-container *ngTemplateOutlet=\"statusBar.templateRef\"></ng-container>\n </div>\n </div>\n }\n</ng-template>\n<ng-template #filterActionsTmpl>\n @if ((actionsVisible$ | async)) {\n <div class=\"filter-actions\">\n <ng-container [ngTemplateOutlet]=\"filterToolbarTmpl\"></ng-container>\n <fs-filter-actions\n [actions]=\"actions$ | async\"\n [kebabActions]=\"menuActions$ | async\">\n </fs-filter-actions>\n </div>\n }\n</ng-template>\n<ng-template #filterToolbarTmpl>\n @if (config.reload || config.autoReload || (filtersVisible$ | async)) {\n <div class=\"filter-toolbar\">\n @if (config.reload) {\n <a\n mat-icon-button\n (click)=\"reload($event)\"\n class=\"button-reload\">\n <mat-icon #reloadEl>\n refresh\n </mat-icon>\n </a>\n }\n @if (config.autoReload) {\n <div class=\"filter-reload\">\n <mat-slide-toggle\n name=\"autoReload\"\n class=\"auto-reload\"\n [ngModel]=\"config.autoReload.enabled\"\n (ngModelChange)=\"config.autoReload.enabled = $event\">\n <span>\n Auto refresh\n </span>\n </mat-slide-toggle>\n </div>\n }\n </div>\n }\n</ng-template>\n<ng-template #headingTmpl>\n @if (headingTemplate) {\n <ng-container *ngTemplateOutlet=\"headingTemplate\"></ng-container>\n } @else if (config.heading) {\n <div class=\"heading\">\n <h2>\n {{ config.heading }}\n </h2>\n <div class=\"subheading\">\n {{ config.subheading }}\n </div>\n </div>\n }\n</ng-template>", styles: [":host{margin-bottom:20px;display:block}.filter-status-container{flex-grow:1;display:flex;justify-content:center;flex-direction:column;align-self:flex-end;margin-top:4px}.filter-status-container .filter-status{overflow:hidden;text-overflow:ellipsis}.filter-container{width:100%}.filter-container.has-primary-filter .heading{margin-bottom:10px}.filter-container.has-primary-filter .filter-bar-container{margin-bottom:4px}.filter-container.keyword-full-width .filter-input-container{flex:1}.filter-container.keyword-full-width .filter-input-container fs-keyword-input{flex:1}.filter-container.keyword-full-width .filter-input-container fs-keyword-input ::ng-deep mat-form-field{width:100%}.filter-container .filter-bar-container{flex-direction:row;box-sizing:border-box;display:flex;position:relative;align-items:flex-start}.filter-container .filter-bar-container .filter-input-container{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0;gap:5px;flex-wrap:wrap}.filter-container .filter-bar-container .filter-heading-container{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0}.filter-container .filter-bar-container .filter-heading-container fs-keyword-input+fs-saved-filter-autocomplete-chips{margin-left:5px}.filter-actions{display:flex;align-items:center;flex:1;justify-content:flex-end}.filter-toolbar{white-space:nowrap;display:flex;align-items:center}.filter-toolbar .button-filters,.filter-toolbar .button-reload{display:flex;--mdc-icon-button-state-layer-size: 40px;padding:8px}.filter-toolbar .button-filters ::ng-deep svg,.filter-toolbar .button-reload ::ng-deep svg{display:flex}.filter-toolbar .button-reload{display:flex;align-items:center}.filter-toolbar .button-reload .auto-reload{margin-right:5px}.filter-toolbar .button-reload .auto-reload span{font-size:80%}.heading{margin-right:8px}.heading h2{margin:0}.heading h2+.subheading{margin:0}@media screen and (min-width: 1200px){html.fs-filter-open body{margin-right:350px}}html.fs-filter-open{scrollbar-width:none}:host ::ng-deep .auto-reload.mat-checked .mat-slide-toggle-thumb-container{transform:translate3d(12px,0,0)}:host ::ng-deep .auto-reload:not(.mat-checked) .mat-slide-toggle-content{color:#ccc}:host ::ng-deep .auto-reload .mat-slide-toggle-thumb,:host ::ng-deep .auto-reload .mat-slide-toggle-thumb-container{height:15px;width:15px}:host ::ng-deep .auto-reload .mat-slide-toggle-content{font-size:90%}:host ::ng-deep .auto-reload .mat-slide-toggle-bar{width:26px;height:10px;border-radius:10px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FilterItemComponent, selector: "filter-item", inputs: ["autofocus", "autofocusName", "item", "name"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i3.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "ngmodule", type: FsClearModule }, { kind: "component", type: FsFilterChipsComponent, selector: "fs-filter-chips" }, { kind: "component", type: FsFilterActionsComponent, selector: "fs-filter-actions", inputs: ["kebabActions", "actions"] }, { kind: "component", type: MatIconAnchor, selector: "a[mat-icon-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: KeywordInputComponent, selector: "fs-keyword-input", inputs: ["autofocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3826
|
+
], queries: [{ propertyName: "statusBar", first: true, predicate: FilterStatusBarDirective, descendants: true }, { propertyName: "headingTemplate", first: true, predicate: FilterHeadingDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "keywordInput", first: true, predicate: KeywordInputComponent, descendants: true }, { propertyName: "reloadEl", first: true, predicate: ["reloadEl"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n class=\"filter-container\"\n [ngClass]=\"{ 'has-primary-filter': primaryFilterVisible$ | async }\"\n [ngClass]=\"{ 'keyword-full-width': keywordFullWidth$ | async }\">\n @if (primaryFilterVisible$ | async) {\n <ng-container *ngTemplateOutlet=\"headingTmpl\"></ng-container>\n }\n <div class=\"filter-bar-container\">\n @if (primaryFilterVisible$ | async) {\n <div class=\"filter-input-container\">\n @if (keywordVisible$ | async) {\n <fs-keyword-input [autofocus]=\"config.autofocus\"></fs-keyword-input>\n }\n @for (item of primaryItems; track item.name) {\n @if (item.visible$ | async) {\n <filter-item [item]=\"item\"></filter-item>\n }\n }\n </div>\n } @else if (hasHeading) {\n <div class=\"filter-heading-container\">\n <ng-container *ngTemplateOutlet=\"headingTmpl\"></ng-container>\n </div>\n } @else {\n <ng-container *ngTemplateOutlet=\"chipsTmpl\"></ng-container>\n }\n <ng-container [ngTemplateOutlet]=\"filterActionsTmpl\"></ng-container>\n </div>\n @if ((primaryFilterVisible$ | async) === true || hasHeading) {\n <ng-container\n [ngTemplateOutlet]=\"chipsTmpl\"\n [ngTemplateOutletContext]=\"{ topMargin: true }\">\n </ng-container>\n }\n <ng-container *ngTemplateOutlet=\"statusBarTmpl\"></ng-container>\n</div>\n<ng-template\n #chipsTmpl\n let-topMargin=\"topMargin\">\n <fs-filter-chips\n class=\"filter-chips\"\n [ngClass]=\"{ 'top-margin': topMargin }\">\n </fs-filter-chips>\n</ng-template>\n<ng-template #statusBarTmpl>\n @if (statusBar) {\n <div\n class=\"filter-status-container\"\n [ngClass]=\"{ 'has-status': !!filterStatus.textContent }\">\n <div\n class=\"filter-status\"\n #filterStatus>\n <ng-container *ngTemplateOutlet=\"statusBar.templateRef\"></ng-container>\n </div>\n </div>\n }\n</ng-template>\n<ng-template #filterActionsTmpl>\n @if ((actionsVisible$ | async)) {\n <div class=\"filter-actions\">\n <ng-container [ngTemplateOutlet]=\"filterToolbarTmpl\"></ng-container>\n <fs-filter-actions\n [actions]=\"actions$ | async\"\n [kebabActions]=\"menuActions$ | async\">\n </fs-filter-actions>\n </div>\n }\n</ng-template>\n<ng-template #filterToolbarTmpl>\n @if (config.reload || config.autoReload || (filtersVisible$ | async)) {\n <div class=\"filter-toolbar\">\n @if (config.reload) {\n <a\n mat-icon-button\n (click)=\"reload($event)\"\n class=\"button-reload\">\n <mat-icon #reloadEl>\n refresh\n </mat-icon>\n </a>\n }\n @if (config.autoReload) {\n <div class=\"filter-reload\">\n <mat-slide-toggle\n name=\"autoReload\"\n class=\"auto-reload\"\n [ngModel]=\"config.autoReload.enabled\"\n (ngModelChange)=\"config.autoReload.enabled = $event\">\n <span>\n Auto refresh\n </span>\n </mat-slide-toggle>\n </div>\n }\n </div>\n }\n</ng-template>\n<ng-template #headingTmpl>\n @if (headingTemplate) {\n <ng-container *ngTemplateOutlet=\"headingTemplate\"></ng-container>\n } @else if (config.heading) {\n <div class=\"heading\">\n <h2>\n {{ config.heading }}\n </h2>\n <div class=\"subheading\">\n {{ config.subheading }}\n </div>\n </div>\n }\n</ng-template>", styles: [":host{margin-bottom:20px;display:block}.filter-status-container{flex-grow:1;display:flex;justify-content:center;flex-direction:column;align-self:flex-end;margin-top:4px}.filter-status-container .filter-status{overflow:hidden;text-overflow:ellipsis}.filter-container{width:100%}.filter-container.has-primary-filter .heading{margin-bottom:10px}.filter-container.has-primary-filter .filter-bar-container{margin-bottom:4px}.filter-container.keyword-full-width .filter-input-container{flex:1}.filter-container.keyword-full-width .filter-input-container fs-keyword-input{flex:1}.filter-container.keyword-full-width .filter-input-container fs-keyword-input ::ng-deep mat-form-field{width:100%}.filter-container .filter-bar-container{flex-direction:row;box-sizing:border-box;display:flex;position:relative;align-items:flex-start}.filter-container .filter-bar-container .filter-input-container{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0;gap:5px;flex-wrap:wrap}.filter-container .filter-bar-container .filter-heading-container{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0}.filter-container .filter-bar-container .filter-heading-container fs-keyword-input+fs-saved-filter-autocomplete-chips{margin-left:5px}.filter-actions{display:flex;align-items:center;flex:1;justify-content:flex-end}.filter-toolbar{white-space:nowrap;display:flex;align-items:center}.filter-toolbar .button-filters,.filter-toolbar .button-reload{display:flex;--mdc-icon-button-state-layer-size: 40px;padding:8px}.filter-toolbar .button-filters ::ng-deep svg,.filter-toolbar .button-reload ::ng-deep svg{display:flex}.filter-toolbar .button-reload{display:flex;align-items:center}.filter-toolbar .button-reload .auto-reload{margin-right:5px}.filter-toolbar .button-reload .auto-reload span{font-size:80%}.heading{margin-right:8px}.heading h2{margin:0}.heading h2+.subheading{margin:0}@media screen and (min-width: 1200px){html.fs-filter-open body{margin-right:350px}}html.fs-filter-open{scrollbar-width:none}:host ::ng-deep .auto-reload.mat-checked .mat-slide-toggle-thumb-container{transform:translate3d(12px,0,0)}:host ::ng-deep .auto-reload:not(.mat-checked) .mat-slide-toggle-content{color:#ccc}:host ::ng-deep .auto-reload .mat-slide-toggle-thumb,:host ::ng-deep .auto-reload .mat-slide-toggle-thumb-container{height:15px;width:15px}:host ::ng-deep .auto-reload .mat-slide-toggle-content{font-size:90%}:host ::ng-deep .auto-reload .mat-slide-toggle-bar{width:26px;height:10px;border-radius:10px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FilterItemComponent, selector: "filter-item", inputs: ["autofocus", "floatLabel", "autofocusName", "item", "name"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i3.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "ngmodule", type: FsClearModule }, { kind: "component", type: FsFilterChipsComponent, selector: "fs-filter-chips" }, { kind: "component", type: FsFilterActionsComponent, selector: "fs-filter-actions", inputs: ["kebabActions", "actions"] }, { kind: "component", type: MatIconAnchor, selector: "a[mat-icon-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: KeywordInputComponent, selector: "fs-keyword-input", inputs: ["autofocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3800
3827
|
}
|
|
3801
3828
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterComponent, decorators: [{
|
|
3802
3829
|
type: Component,
|
|
@@ -3823,7 +3850,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
3823
3850
|
MatSlideToggle,
|
|
3824
3851
|
AsyncPipe,
|
|
3825
3852
|
KeywordInputComponent,
|
|
3826
|
-
], template: "<div\n class=\"filter-container\"\n [ngClass]=\"{ 'has-primary-filter': primaryFilterVisible$ | async }\"\n [ngClass]=\"{ 'keyword-full-width': keywordFullWidth$ | async }\">\n @if (primaryFilterVisible$ | async) {\n <ng-container *ngTemplateOutlet=\"headingTmpl\"></ng-container>\n }\n <div class=\"filter-bar-container\">\n @if (primaryFilterVisible$ | async) {\n <div class=\"filter-input-container\">\n @if (keywordVisible$ | async) {\n <fs-keyword-input [autofocus]=\"config.autofocus\"></fs-keyword-input>\n }\n @for (item of primaryItems; track item.name) {\n <filter-item [item]=\"item\"></filter-item>\n }\n </div>\n } @else if (hasHeading) {\n <div class=\"filter-heading-container\">\n <ng-container *ngTemplateOutlet=\"headingTmpl\"></ng-container>\n </div>\n } @else {\n <ng-container *ngTemplateOutlet=\"chipsTmpl\"></ng-container>\n }\n <ng-container [ngTemplateOutlet]=\"filterActionsTmpl\"></ng-container>\n </div>\n @if ((primaryFilterVisible$ | async) === true || hasHeading) {\n <ng-container\n [ngTemplateOutlet]=\"chipsTmpl\"\n [ngTemplateOutletContext]=\"{ topMargin: true }\">\n </ng-container>\n }\n <ng-container *ngTemplateOutlet=\"statusBarTmpl\"></ng-container>\n</div>\n<ng-template\n #chipsTmpl\n let-topMargin=\"topMargin\">\n <fs-filter-chips\n class=\"filter-chips\"\n [ngClass]=\"{ 'top-margin': topMargin }\">\n </fs-filter-chips>\n</ng-template>\n<ng-template #statusBarTmpl>\n @if (statusBar) {\n <div\n class=\"filter-status-container\"\n [ngClass]=\"{ 'has-status': !!filterStatus.textContent }\">\n <div\n class=\"filter-status\"\n #filterStatus>\n <ng-container *ngTemplateOutlet=\"statusBar.templateRef\"></ng-container>\n </div>\n </div>\n }\n</ng-template>\n<ng-template #filterActionsTmpl>\n @if ((actionsVisible$ | async)) {\n <div class=\"filter-actions\">\n <ng-container [ngTemplateOutlet]=\"filterToolbarTmpl\"></ng-container>\n <fs-filter-actions\n [actions]=\"actions$ | async\"\n [kebabActions]=\"menuActions$ | async\">\n </fs-filter-actions>\n </div>\n }\n</ng-template>\n<ng-template #filterToolbarTmpl>\n @if (config.reload || config.autoReload || (filtersVisible$ | async)) {\n <div class=\"filter-toolbar\">\n @if (config.reload) {\n <a\n mat-icon-button\n (click)=\"reload($event)\"\n class=\"button-reload\">\n <mat-icon #reloadEl>\n refresh\n </mat-icon>\n </a>\n }\n @if (config.autoReload) {\n <div class=\"filter-reload\">\n <mat-slide-toggle\n name=\"autoReload\"\n class=\"auto-reload\"\n [ngModel]=\"config.autoReload.enabled\"\n (ngModelChange)=\"config.autoReload.enabled = $event\">\n <span>\n Auto refresh\n </span>\n </mat-slide-toggle>\n </div>\n }\n </div>\n }\n</ng-template>\n<ng-template #headingTmpl>\n @if (headingTemplate) {\n <ng-container *ngTemplateOutlet=\"headingTemplate\"></ng-container>\n } @else if (config.heading) {\n <div class=\"heading\">\n <h2>\n {{ config.heading }}\n </h2>\n <div class=\"subheading\">\n {{ config.subheading }}\n </div>\n </div>\n }\n</ng-template>", styles: [":host{margin-bottom:20px;display:block}.filter-status-container{flex-grow:1;display:flex;justify-content:center;flex-direction:column;align-self:flex-end;margin-top:4px}.filter-status-container .filter-status{overflow:hidden;text-overflow:ellipsis}.filter-container{width:100%}.filter-container.has-primary-filter .heading{margin-bottom:10px}.filter-container.has-primary-filter .filter-bar-container{margin-bottom:4px}.filter-container.keyword-full-width .filter-input-container{flex:1}.filter-container.keyword-full-width .filter-input-container fs-keyword-input{flex:1}.filter-container.keyword-full-width .filter-input-container fs-keyword-input ::ng-deep mat-form-field{width:100%}.filter-container .filter-bar-container{flex-direction:row;box-sizing:border-box;display:flex;position:relative;align-items:flex-start}.filter-container .filter-bar-container .filter-input-container{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0;gap:5px;flex-wrap:wrap}.filter-container .filter-bar-container .filter-heading-container{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0}.filter-container .filter-bar-container .filter-heading-container fs-keyword-input+fs-saved-filter-autocomplete-chips{margin-left:5px}.filter-actions{display:flex;align-items:center;flex:1;justify-content:flex-end}.filter-toolbar{white-space:nowrap;display:flex;align-items:center}.filter-toolbar .button-filters,.filter-toolbar .button-reload{display:flex;--mdc-icon-button-state-layer-size: 40px;padding:8px}.filter-toolbar .button-filters ::ng-deep svg,.filter-toolbar .button-reload ::ng-deep svg{display:flex}.filter-toolbar .button-reload{display:flex;align-items:center}.filter-toolbar .button-reload .auto-reload{margin-right:5px}.filter-toolbar .button-reload .auto-reload span{font-size:80%}.heading{margin-right:8px}.heading h2{margin:0}.heading h2+.subheading{margin:0}@media screen and (min-width: 1200px){html.fs-filter-open body{margin-right:350px}}html.fs-filter-open{scrollbar-width:none}:host ::ng-deep .auto-reload.mat-checked .mat-slide-toggle-thumb-container{transform:translate3d(12px,0,0)}:host ::ng-deep .auto-reload:not(.mat-checked) .mat-slide-toggle-content{color:#ccc}:host ::ng-deep .auto-reload .mat-slide-toggle-thumb,:host ::ng-deep .auto-reload .mat-slide-toggle-thumb-container{height:15px;width:15px}:host ::ng-deep .auto-reload .mat-slide-toggle-content{font-size:90%}:host ::ng-deep .auto-reload .mat-slide-toggle-bar{width:26px;height:10px;border-radius:10px}\n"] }]
|
|
3853
|
+
], template: "<div\n class=\"filter-container\"\n [ngClass]=\"{ 'has-primary-filter': primaryFilterVisible$ | async }\"\n [ngClass]=\"{ 'keyword-full-width': keywordFullWidth$ | async }\">\n @if (primaryFilterVisible$ | async) {\n <ng-container *ngTemplateOutlet=\"headingTmpl\"></ng-container>\n }\n <div class=\"filter-bar-container\">\n @if (primaryFilterVisible$ | async) {\n <div class=\"filter-input-container\">\n @if (keywordVisible$ | async) {\n <fs-keyword-input [autofocus]=\"config.autofocus\"></fs-keyword-input>\n }\n @for (item of primaryItems; track item.name) {\n @if (item.visible$ | async) {\n <filter-item [item]=\"item\"></filter-item>\n }\n }\n </div>\n } @else if (hasHeading) {\n <div class=\"filter-heading-container\">\n <ng-container *ngTemplateOutlet=\"headingTmpl\"></ng-container>\n </div>\n } @else {\n <ng-container *ngTemplateOutlet=\"chipsTmpl\"></ng-container>\n }\n <ng-container [ngTemplateOutlet]=\"filterActionsTmpl\"></ng-container>\n </div>\n @if ((primaryFilterVisible$ | async) === true || hasHeading) {\n <ng-container\n [ngTemplateOutlet]=\"chipsTmpl\"\n [ngTemplateOutletContext]=\"{ topMargin: true }\">\n </ng-container>\n }\n <ng-container *ngTemplateOutlet=\"statusBarTmpl\"></ng-container>\n</div>\n<ng-template\n #chipsTmpl\n let-topMargin=\"topMargin\">\n <fs-filter-chips\n class=\"filter-chips\"\n [ngClass]=\"{ 'top-margin': topMargin }\">\n </fs-filter-chips>\n</ng-template>\n<ng-template #statusBarTmpl>\n @if (statusBar) {\n <div\n class=\"filter-status-container\"\n [ngClass]=\"{ 'has-status': !!filterStatus.textContent }\">\n <div\n class=\"filter-status\"\n #filterStatus>\n <ng-container *ngTemplateOutlet=\"statusBar.templateRef\"></ng-container>\n </div>\n </div>\n }\n</ng-template>\n<ng-template #filterActionsTmpl>\n @if ((actionsVisible$ | async)) {\n <div class=\"filter-actions\">\n <ng-container [ngTemplateOutlet]=\"filterToolbarTmpl\"></ng-container>\n <fs-filter-actions\n [actions]=\"actions$ | async\"\n [kebabActions]=\"menuActions$ | async\">\n </fs-filter-actions>\n </div>\n }\n</ng-template>\n<ng-template #filterToolbarTmpl>\n @if (config.reload || config.autoReload || (filtersVisible$ | async)) {\n <div class=\"filter-toolbar\">\n @if (config.reload) {\n <a\n mat-icon-button\n (click)=\"reload($event)\"\n class=\"button-reload\">\n <mat-icon #reloadEl>\n refresh\n </mat-icon>\n </a>\n }\n @if (config.autoReload) {\n <div class=\"filter-reload\">\n <mat-slide-toggle\n name=\"autoReload\"\n class=\"auto-reload\"\n [ngModel]=\"config.autoReload.enabled\"\n (ngModelChange)=\"config.autoReload.enabled = $event\">\n <span>\n Auto refresh\n </span>\n </mat-slide-toggle>\n </div>\n }\n </div>\n }\n</ng-template>\n<ng-template #headingTmpl>\n @if (headingTemplate) {\n <ng-container *ngTemplateOutlet=\"headingTemplate\"></ng-container>\n } @else if (config.heading) {\n <div class=\"heading\">\n <h2>\n {{ config.heading }}\n </h2>\n <div class=\"subheading\">\n {{ config.subheading }}\n </div>\n </div>\n }\n</ng-template>", styles: [":host{margin-bottom:20px;display:block}.filter-status-container{flex-grow:1;display:flex;justify-content:center;flex-direction:column;align-self:flex-end;margin-top:4px}.filter-status-container .filter-status{overflow:hidden;text-overflow:ellipsis}.filter-container{width:100%}.filter-container.has-primary-filter .heading{margin-bottom:10px}.filter-container.has-primary-filter .filter-bar-container{margin-bottom:4px}.filter-container.keyword-full-width .filter-input-container{flex:1}.filter-container.keyword-full-width .filter-input-container fs-keyword-input{flex:1}.filter-container.keyword-full-width .filter-input-container fs-keyword-input ::ng-deep mat-form-field{width:100%}.filter-container .filter-bar-container{flex-direction:row;box-sizing:border-box;display:flex;position:relative;align-items:flex-start}.filter-container .filter-bar-container .filter-input-container{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0;gap:5px;flex-wrap:wrap}.filter-container .filter-bar-container .filter-heading-container{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0}.filter-container .filter-bar-container .filter-heading-container fs-keyword-input+fs-saved-filter-autocomplete-chips{margin-left:5px}.filter-actions{display:flex;align-items:center;flex:1;justify-content:flex-end}.filter-toolbar{white-space:nowrap;display:flex;align-items:center}.filter-toolbar .button-filters,.filter-toolbar .button-reload{display:flex;--mdc-icon-button-state-layer-size: 40px;padding:8px}.filter-toolbar .button-filters ::ng-deep svg,.filter-toolbar .button-reload ::ng-deep svg{display:flex}.filter-toolbar .button-reload{display:flex;align-items:center}.filter-toolbar .button-reload .auto-reload{margin-right:5px}.filter-toolbar .button-reload .auto-reload span{font-size:80%}.heading{margin-right:8px}.heading h2{margin:0}.heading h2+.subheading{margin:0}@media screen and (min-width: 1200px){html.fs-filter-open body{margin-right:350px}}html.fs-filter-open{scrollbar-width:none}:host ::ng-deep .auto-reload.mat-checked .mat-slide-toggle-thumb-container{transform:translate3d(12px,0,0)}:host ::ng-deep .auto-reload:not(.mat-checked) .mat-slide-toggle-content{color:#ccc}:host ::ng-deep .auto-reload .mat-slide-toggle-thumb,:host ::ng-deep .auto-reload .mat-slide-toggle-thumb-container{height:15px;width:15px}:host ::ng-deep .auto-reload .mat-slide-toggle-content{font-size:90%}:host ::ng-deep .auto-reload .mat-slide-toggle-bar{width:26px;height:10px;border-radius:10px}\n"] }]
|
|
3827
3854
|
}], ctorParameters: () => [], propDecorators: { keywordInput: [{
|
|
3828
3855
|
type: ViewChild,
|
|
3829
3856
|
args: [KeywordInputComponent]
|