@firestitch/filter 18.2.67 → 18.2.69
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/helpers/create-filter-item.d.ts +1 -1
- package/esm2022/app/components/filter/filter.component.mjs +3 -3
- package/esm2022/app/components/filter-chips/filter-chips.component.mjs +3 -3
- package/esm2022/app/components/filters-item/autocompletechips/autocompletechips.component.mjs +3 -3
- package/fesm2022/firestitch-filter.mjs +6 -6
- package/fesm2022/firestitch-filter.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -2689,7 +2689,7 @@ class AutocompletechipsComponent extends BaseItemComponent {
|
|
|
2689
2689
|
action.click(filterComponent);
|
|
2690
2690
|
}
|
|
2691
2691
|
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]=\"'always'\"\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{width:
|
|
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]=\"'always'\"\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
2693
|
}
|
|
2694
2694
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AutocompletechipsComponent, decorators: [{
|
|
2695
2695
|
type: Component,
|
|
@@ -2698,7 +2698,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
2698
2698
|
FocusToItemDirective,
|
|
2699
2699
|
FormsModule,
|
|
2700
2700
|
FsFormModule,
|
|
2701
|
-
], template: "<fs-autocomplete-chips\n [fsFilterFocusTrigger]=\"autofocus\"\n [fetch]=\"fetch\"\n [ngModel]=\"value\"\n [floatLabel]=\"'always'\"\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{width:
|
|
2701
|
+
], template: "<fs-autocomplete-chips\n [fsFilterFocusTrigger]=\"autofocus\"\n [fetch]=\"fetch\"\n [ngModel]=\"value\"\n [floatLabel]=\"'always'\"\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
2702
|
}], propDecorators: { autofocus: [{
|
|
2703
2703
|
type: Input
|
|
2704
2704
|
}] } });
|
|
@@ -3362,7 +3362,7 @@ class FsFilterChipsComponent {
|
|
|
3362
3362
|
});
|
|
3363
3363
|
}
|
|
3364
3364
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FsFilterChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3365
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FsFilterChipsComponent, isStandalone: true, selector: "fs-filter-chips", ngImport: i0, template: "@if (items.length !== 0) {\n @for (item of nonPrimaryItems; track item.name) {\n @if (item.visible$ | async) {\n @if ((item.chips$ | async).length) {\n @for (chip of item.chips$ | async; track chip.label) {\n <fs-chip\n class=\"filter-chip selected\"\n [size]=\"'medium'\"\n (click)=\"click(item, chip.name, $event.target)\">\n @if (chip.value) {\n {{ chip.label + ': ' + chip.value }}\n } @else {\n {{ chip.label }}\n }\n <ng-template\n fsChipSuffix\n [icon]=\"'cancel_circle_outline'\"\n (click)=\"remove(item, chip)\">\n </ng-template>\n </fs-chip>\n }\n } @else {\n <fs-chip\n class=\"filter-chip\"\n [size]=\"'medium'\"\n (click)=\"click(item, null, $event.target)\"\n [outlined]=\"true\">\n {{ item.mergedLabel }}\n <ng-template\n fsChipSuffix\n [icon]=\"'add_circle_outline'\"\n (click)=\"click(item, null, $event.event.target)\">\n </ng-template>\n </fs-chip>\n }\n }\n }\n <a\n class=\"clear\"\n mat-stroked-button\n (click)=\"clear()\">\n Clear filters\n </a>\n <mat-select\n class=\"saved-filters-select mat-mdc-outlined-button\"\n [buttonType]=\"'basic'\"\n fsSelectButton\n [placeholder]=\"(savedFilterController.activeFilter$ | async) ? savedFilterController.singularLabel + ': ' + (savedFilterController.activeFilter$ | async).name : savedFilterController.pluralLabel\"\n [deselectOnChange]=\"true\">\n @if (savedFilterController.activeFilter$ | async) {\n <mat-option (click)=\"saveActiveFilter()\">\n Update filters\n </mat-option>\n <mat-option (click)=\"saveAs()\">\n Save as new\n </mat-option>\n } @else {\n <mat-option (click)=\"createSavedFilter()\">\n Create new\n </mat-option>\n }\n <mat-option (click)=\"manageSavedFilters()\">\n View all\n </mat-option>\n </mat-select>\n}", styles: [":host{display:flex;flex-wrap:wrap;align-items:center;gap:5px;max-width:100
|
|
3365
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FsFilterChipsComponent, isStandalone: true, selector: "fs-filter-chips", ngImport: i0, template: "@if (items.length !== 0) {\n @for (item of nonPrimaryItems; track item.name) {\n @if (item.visible$ | async) {\n @if ((item.chips$ | async).length) {\n @for (chip of item.chips$ | async; track chip.label) {\n <fs-chip\n class=\"filter-chip selected\"\n [size]=\"'medium'\"\n (click)=\"click(item, chip.name, $event.target)\">\n @if (chip.value) {\n {{ chip.label + ': ' + chip.value }}\n } @else {\n {{ chip.label }}\n }\n <ng-template\n fsChipSuffix\n [icon]=\"'cancel_circle_outline'\"\n (click)=\"remove(item, chip)\">\n </ng-template>\n </fs-chip>\n }\n } @else {\n <fs-chip\n class=\"filter-chip\"\n [size]=\"'medium'\"\n (click)=\"click(item, null, $event.target)\"\n [outlined]=\"true\">\n {{ item.mergedLabel }}\n <ng-template\n fsChipSuffix\n [icon]=\"'add_circle_outline'\"\n (click)=\"click(item, null, $event.event.target)\">\n </ng-template>\n </fs-chip>\n }\n }\n }\n <a\n class=\"clear\"\n mat-stroked-button\n (click)=\"clear()\">\n Clear filters\n </a>\n <mat-select\n class=\"saved-filters-select mat-mdc-outlined-button\"\n [buttonType]=\"'basic'\"\n fsSelectButton\n [placeholder]=\"(savedFilterController.activeFilter$ | async) ? savedFilterController.singularLabel + ': ' + (savedFilterController.activeFilter$ | async).name : savedFilterController.pluralLabel\"\n [deselectOnChange]=\"true\">\n @if (savedFilterController.activeFilter$ | async) {\n <mat-option (click)=\"saveActiveFilter()\">\n Update filters\n </mat-option>\n <mat-option (click)=\"saveAs()\">\n Save as new\n </mat-option>\n } @else {\n <mat-option (click)=\"createSavedFilter()\">\n Create new\n </mat-option>\n }\n <mat-option (click)=\"manageSavedFilters()\">\n View all\n </mat-option>\n </mat-select>\n}", styles: [":host{display:flex;flex-wrap:wrap;align-items:center;gap:5px;max-width:100%;margin-top:4px}.saved-filters-select,.clear{display:flex;color:inherit;height:30px}.saved-filters-select.clear,.clear.clear{padding:0 10px}.saved-filters-select ::ng-deep .mat-mdc-select-value,.clear ::ng-deep .mat-mdc-select-value{padding:0 10px}.saved-filters-select ::ng-deep .mat-mdc-select-arrow-wrapper,.clear ::ng-deep .mat-mdc-select-arrow-wrapper{padding-right:10px}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: FsChipModule }, { kind: "component", type: i1$5.FsChipComponent, selector: "fs-chip", inputs: ["selectable", "removable", "value", "maxWidth", "width", "backgroundColor", "borderColor", "color", "shape", "outlined", "outlineDash", "icon", "image", "selected", "padding", "contrastColor", "size"], outputs: ["selectedToggled", "removed", "click"] }, { kind: "directive", type: i1$5.FsChipSuffixDirective, selector: "[fsChipSuffix]", inputs: ["icon", "link", "linkTarget", "color", "data", "tooltip"], outputs: ["click"] }, { 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: "component", type: MatOption$1, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FsSelectButtonModule }, { kind: "directive", type: i3$1.FsSelectButtonDirective, selector: "[fsSelectButton]", inputs: ["color", "minWidth", "maxWidth", "width", "buttonType", "deselectOnChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$2.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: FsButtonDirective, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: ["name", "dirtySubmit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3366
3366
|
}
|
|
3367
3367
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FsFilterChipsComponent, decorators: [{
|
|
3368
3368
|
type: Component,
|
|
@@ -3374,7 +3374,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
3374
3374
|
FsSelectButtonModule,
|
|
3375
3375
|
MatButtonModule,
|
|
3376
3376
|
FsButtonDirective,
|
|
3377
|
-
], template: "@if (items.length !== 0) {\n @for (item of nonPrimaryItems; track item.name) {\n @if (item.visible$ | async) {\n @if ((item.chips$ | async).length) {\n @for (chip of item.chips$ | async; track chip.label) {\n <fs-chip\n class=\"filter-chip selected\"\n [size]=\"'medium'\"\n (click)=\"click(item, chip.name, $event.target)\">\n @if (chip.value) {\n {{ chip.label + ': ' + chip.value }}\n } @else {\n {{ chip.label }}\n }\n <ng-template\n fsChipSuffix\n [icon]=\"'cancel_circle_outline'\"\n (click)=\"remove(item, chip)\">\n </ng-template>\n </fs-chip>\n }\n } @else {\n <fs-chip\n class=\"filter-chip\"\n [size]=\"'medium'\"\n (click)=\"click(item, null, $event.target)\"\n [outlined]=\"true\">\n {{ item.mergedLabel }}\n <ng-template\n fsChipSuffix\n [icon]=\"'add_circle_outline'\"\n (click)=\"click(item, null, $event.event.target)\">\n </ng-template>\n </fs-chip>\n }\n }\n }\n <a\n class=\"clear\"\n mat-stroked-button\n (click)=\"clear()\">\n Clear filters\n </a>\n <mat-select\n class=\"saved-filters-select mat-mdc-outlined-button\"\n [buttonType]=\"'basic'\"\n fsSelectButton\n [placeholder]=\"(savedFilterController.activeFilter$ | async) ? savedFilterController.singularLabel + ': ' + (savedFilterController.activeFilter$ | async).name : savedFilterController.pluralLabel\"\n [deselectOnChange]=\"true\">\n @if (savedFilterController.activeFilter$ | async) {\n <mat-option (click)=\"saveActiveFilter()\">\n Update filters\n </mat-option>\n <mat-option (click)=\"saveAs()\">\n Save as new\n </mat-option>\n } @else {\n <mat-option (click)=\"createSavedFilter()\">\n Create new\n </mat-option>\n }\n <mat-option (click)=\"manageSavedFilters()\">\n View all\n </mat-option>\n </mat-select>\n}", styles: [":host{display:flex;flex-wrap:wrap;align-items:center;gap:5px;max-width:100
|
|
3377
|
+
], template: "@if (items.length !== 0) {\n @for (item of nonPrimaryItems; track item.name) {\n @if (item.visible$ | async) {\n @if ((item.chips$ | async).length) {\n @for (chip of item.chips$ | async; track chip.label) {\n <fs-chip\n class=\"filter-chip selected\"\n [size]=\"'medium'\"\n (click)=\"click(item, chip.name, $event.target)\">\n @if (chip.value) {\n {{ chip.label + ': ' + chip.value }}\n } @else {\n {{ chip.label }}\n }\n <ng-template\n fsChipSuffix\n [icon]=\"'cancel_circle_outline'\"\n (click)=\"remove(item, chip)\">\n </ng-template>\n </fs-chip>\n }\n } @else {\n <fs-chip\n class=\"filter-chip\"\n [size]=\"'medium'\"\n (click)=\"click(item, null, $event.target)\"\n [outlined]=\"true\">\n {{ item.mergedLabel }}\n <ng-template\n fsChipSuffix\n [icon]=\"'add_circle_outline'\"\n (click)=\"click(item, null, $event.event.target)\">\n </ng-template>\n </fs-chip>\n }\n }\n }\n <a\n class=\"clear\"\n mat-stroked-button\n (click)=\"clear()\">\n Clear filters\n </a>\n <mat-select\n class=\"saved-filters-select mat-mdc-outlined-button\"\n [buttonType]=\"'basic'\"\n fsSelectButton\n [placeholder]=\"(savedFilterController.activeFilter$ | async) ? savedFilterController.singularLabel + ': ' + (savedFilterController.activeFilter$ | async).name : savedFilterController.pluralLabel\"\n [deselectOnChange]=\"true\">\n @if (savedFilterController.activeFilter$ | async) {\n <mat-option (click)=\"saveActiveFilter()\">\n Update filters\n </mat-option>\n <mat-option (click)=\"saveAs()\">\n Save as new\n </mat-option>\n } @else {\n <mat-option (click)=\"createSavedFilter()\">\n Create new\n </mat-option>\n }\n <mat-option (click)=\"manageSavedFilters()\">\n View all\n </mat-option>\n </mat-select>\n}", styles: [":host{display:flex;flex-wrap:wrap;align-items:center;gap:5px;max-width:100%;margin-top:4px}.saved-filters-select,.clear{display:flex;color:inherit;height:30px}.saved-filters-select.clear,.clear.clear{padding:0 10px}.saved-filters-select ::ng-deep .mat-mdc-select-value,.clear ::ng-deep .mat-mdc-select-value{padding:0 10px}.saved-filters-select ::ng-deep .mat-mdc-select-arrow-wrapper,.clear ::ng-deep .mat-mdc-select-arrow-wrapper{padding-right:10px}\n"] }]
|
|
3378
3378
|
}] });
|
|
3379
3379
|
|
|
3380
3380
|
class KeywordInputComponent {
|
|
@@ -3796,7 +3796,7 @@ class FilterComponent {
|
|
|
3796
3796
|
ActionsController,
|
|
3797
3797
|
KeywordController,
|
|
3798
3798
|
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
|
|
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 });
|
|
3800
3800
|
}
|
|
3801
3801
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterComponent, decorators: [{
|
|
3802
3802
|
type: Component,
|
|
@@ -3823,7 +3823,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
3823
3823
|
MatSlideToggle,
|
|
3824
3824
|
AsyncPipe,
|
|
3825
3825
|
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
|
|
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"] }]
|
|
3827
3827
|
}], ctorParameters: () => [], propDecorators: { keywordInput: [{
|
|
3828
3828
|
type: ViewChild,
|
|
3829
3829
|
args: [KeywordInputComponent]
|