@firestitch/filter 18.2.85 → 18.2.87
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/autocompletechips/autocompletechips.component.d.ts +4 -3
- package/app/components/keyword-input/keyword-input.component.d.ts +0 -2
- package/app/helpers/create-filter-item.d.ts +1 -1
- package/esm2022/app/components/filter-chips/filter-chips.component.mjs +3 -3
- package/esm2022/app/components/filters-item/autocompletechips/autocompletechips.component.mjs +12 -14
- package/esm2022/app/components/keyword-input/keyword-input.component.mjs +7 -14
- package/fesm2022/firestitch-filter.mjs +15 -25
- package/fesm2022/firestitch-filter.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -2729,26 +2729,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
2729
2729
|
}] } });
|
|
2730
2730
|
|
|
2731
2731
|
class AutocompletechipsComponent extends BaseItemComponent {
|
|
2732
|
+
autocompleteChips;
|
|
2732
2733
|
autofocus = false;
|
|
2733
2734
|
floatLabel = 'auto';
|
|
2734
2735
|
_injector = inject(Injector);
|
|
2735
|
-
ngOnDestroy() {
|
|
2736
|
-
if (this.triggerChangeOn === 'close') {
|
|
2737
|
-
this.item.value = this.value;
|
|
2738
|
-
}
|
|
2739
|
-
}
|
|
2740
2736
|
panelClosed() {
|
|
2741
|
-
|
|
2742
|
-
this.item.value = this.value;
|
|
2743
|
-
}
|
|
2737
|
+
this.item.value = this.value;
|
|
2744
2738
|
}
|
|
2745
2739
|
removed() {
|
|
2746
|
-
if (this.
|
|
2740
|
+
if (!this.autocompleteChips.panelOpen) {
|
|
2747
2741
|
this.item.value = this.value;
|
|
2748
2742
|
}
|
|
2749
2743
|
}
|
|
2750
2744
|
clear() {
|
|
2751
2745
|
this.item.clear();
|
|
2746
|
+
this.close();
|
|
2752
2747
|
}
|
|
2753
2748
|
fetch = (keyword) => {
|
|
2754
2749
|
return this.item.valuesFn(keyword, this.item.filter);
|
|
@@ -2761,7 +2756,7 @@ class AutocompletechipsComponent extends BaseItemComponent {
|
|
|
2761
2756
|
action.click(filterComponent);
|
|
2762
2757
|
}
|
|
2763
2758
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AutocompletechipsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2764
|
-
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 (clear)=\"clear()\"\n [allowText]=\"false\"\n [padless]=\"true\"\n [label]=\"item.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 (panelClosed)=\"panelClosed()\"\n (removed)=\"removed()\"\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", "panelOpened", "panelClosed"] }, { 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 });
|
|
2759
|
+
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" }, viewQueries: [{ propertyName: "autocompleteChips", first: true, predicate: FsAutocompleteChipsComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<fs-autocomplete-chips\n [fsFilterFocusTrigger]=\"autofocus\"\n [fetch]=\"fetch\"\n [(ngModel)]=\"value\"\n [floatLabel]=\"floatLabel\"\n (clear)=\"clear()\"\n [allowText]=\"false\"\n [padless]=\"true\"\n [label]=\"item.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 (panelClosed)=\"panelClosed()\"\n (removed)=\"removed()\"\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", "panelOpened", "panelClosed"] }, { 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 });
|
|
2765
2760
|
}
|
|
2766
2761
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AutocompletechipsComponent, decorators: [{
|
|
2767
2762
|
type: Component,
|
|
@@ -2771,7 +2766,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
2771
2766
|
FormsModule,
|
|
2772
2767
|
FsFormModule,
|
|
2773
2768
|
], template: "<fs-autocomplete-chips\n [fsFilterFocusTrigger]=\"autofocus\"\n [fetch]=\"fetch\"\n [(ngModel)]=\"value\"\n [floatLabel]=\"floatLabel\"\n (clear)=\"clear()\"\n [allowText]=\"false\"\n [padless]=\"true\"\n [label]=\"item.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 (panelClosed)=\"panelClosed()\"\n (removed)=\"removed()\"\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"] }]
|
|
2774
|
-
}], propDecorators: {
|
|
2769
|
+
}], propDecorators: { autocompleteChips: [{
|
|
2770
|
+
type: ViewChild,
|
|
2771
|
+
args: [FsAutocompleteChipsComponent]
|
|
2772
|
+
}], autofocus: [{
|
|
2775
2773
|
type: Input
|
|
2776
2774
|
}], floatLabel: [{
|
|
2777
2775
|
type: Input
|
|
@@ -3512,7 +3510,7 @@ class FsFilterChipsComponent {
|
|
|
3512
3510
|
.subscribe();
|
|
3513
3511
|
}
|
|
3514
3512
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FsFilterChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3515
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FsFilterChipsComponent, isStandalone: true, selector: "fs-filter-chips", viewQueries: [{ propertyName: "chips", predicate: FsChipComponent, descendants: true }], ngImport: i0, template: "@if (items.length !== 0) {\n @for (item of secondaryItems; track item.name) {\n @if ((item.visible$ | async)) {\n @if ((item.hasValue$ | async)) {\n @for (chip of item.chips$ | async; track chip.label) {\n <fs-chip\n class=\"filter-chip selected\"\n [size]=\"'medium'\"\n [borderColor]=\"'#ddd'\"\n [attr.data-filter-item]=\"item.name\"\n [outlined]=\"true\"\n (click)=\"openChip(item, chip.name)\">\n @if (chip.value) {\n {{ chip.label }}:\n <a>\n {{ chip.value }}\n </a>\n } @else {\n {{ chip.label }}\n }\n <ng-template\n fsChipSuffix\n [icon]=\"'cancel_circle_outline'\"\n (click)=\"removeChip(item, chip)\">\n </ng-template>\n </fs-chip>\n }\n }\n @if ((item.notValue$ | async) && (item.secondaryVisible$ | async)) {\n <fs-chip\n class=\"filter-chip\"\n [attr.data-filter-item]=\"item.name\"\n [size]=\"'medium'\"\n [borderColor]=\"'#ddd'\"\n (click)=\"openChip(item)\"\n [outlined]=\"true\">\n {{ item.mergedLabel }}\n <ng-template\n fsChipSuffix\n [icon]=\"'
|
|
3513
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FsFilterChipsComponent, isStandalone: true, selector: "fs-filter-chips", viewQueries: [{ propertyName: "chips", predicate: FsChipComponent, descendants: true }], ngImport: i0, template: "@if (items.length !== 0) {\n @for (item of secondaryItems; track item.name) {\n @if ((item.visible$ | async)) {\n @if ((item.hasValue$ | async)) {\n @for (chip of item.chips$ | async; track chip.label) {\n <fs-chip\n class=\"filter-chip selected\"\n [size]=\"'medium'\"\n [borderColor]=\"'#ddd'\"\n [attr.data-filter-item]=\"item.name\"\n [outlined]=\"true\"\n (click)=\"openChip(item, chip.name)\">\n @if (chip.value) {\n {{ chip.label }}:\n <a>\n {{ chip.value }}\n </a>\n } @else {\n {{ chip.label }}\n }\n <ng-template\n fsChipSuffix\n [icon]=\"'cancel_circle_outline'\"\n (click)=\"removeChip(item, chip)\">\n </ng-template>\n </fs-chip>\n }\n }\n @if ((item.notValue$ | async) && (item.secondaryVisible$ | async)) {\n <fs-chip\n class=\"filter-chip\"\n [attr.data-filter-item]=\"item.name\"\n [size]=\"'medium'\"\n [borderColor]=\"'#ddd'\"\n (click)=\"openChip(item)\"\n [outlined]=\"true\">\n {{ item.mergedLabel }}\n <ng-template\n fsChipSuffix\n [icon]=\"'add_circle_outline'\"\n (click)=\"openChip(item)\">\n </ng-template>\n </fs-chip>\n }\n }\n }\n @if (moreFilterItems().length > 0) {\n <mat-select\n class=\"more-filters-select mat-mdc-button-base\"\n [buttonType]=\"'basic'\"\n fsSelectButton\n [disableOptionCentering]=\"true\"\n [panelClass]=\"'fs-filter-no-initial-focus'\"\n [placeholder]=\"'More filters'\"\n (selectionChange)=\"addFilter($event)\"\n [deselectOnChange]=\"true\">\n @for (item of moreFilterItems(); track item.name) {\n <mat-option [value]=\"item\">\n {{ item.mergedLabel }}\n </mat-option>\n }\n </mat-select>\n }\n @if (savedFilterController.enabled) {\n <mat-select\n class=\"saved-filters-select mat-mdc-button-base\"\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 }\n @if (clearFiltersVisible()) {\n <a\n class=\"clear\"\n mat-button\n color=\"primary\"\n (click)=\"clear()\">\n Clear filters\n </a>\n }\n}", styles: [":host{display:flex;flex-wrap:wrap;align-items:center;gap:5px;max-width:100%;margin-top:4px;z-index:999}.saved-filters-select,.more-filters-select,.clear{display:flex;height:30px;font-size:90%}.saved-filters-select.clear,.more-filters-select.clear,.clear.clear{padding:0 10px}.saved-filters-select ::ng-deep .mat-mdc-select-value,.more-filters-select ::ng-deep .mat-mdc-select-value,.clear ::ng-deep .mat-mdc-select-value{padding:0 5px}.saved-filters-select ::ng-deep .mat-mdc-select-arrow-wrapper,.more-filters-select ::ng-deep .mat-mdc-select-arrow-wrapper,.clear ::ng-deep .mat-mdc-select-arrow-wrapper{padding-right:10px}::ng-deep .mat-mdc-select-panel.fs-filter-no-initial-focus .mat-mdc-option-active:not(:hover){background:transparent!important}\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$3.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"] }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3516
3514
|
}
|
|
3517
3515
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FsFilterChipsComponent, decorators: [{
|
|
3518
3516
|
type: Component,
|
|
@@ -3525,7 +3523,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
3525
3523
|
MatButtonModule,
|
|
3526
3524
|
FsButtonDirective,
|
|
3527
3525
|
FormsModule,
|
|
3528
|
-
], template: "@if (items.length !== 0) {\n @for (item of secondaryItems; track item.name) {\n @if ((item.visible$ | async)) {\n @if ((item.hasValue$ | async)) {\n @for (chip of item.chips$ | async; track chip.label) {\n <fs-chip\n class=\"filter-chip selected\"\n [size]=\"'medium'\"\n [borderColor]=\"'#ddd'\"\n [attr.data-filter-item]=\"item.name\"\n [outlined]=\"true\"\n (click)=\"openChip(item, chip.name)\">\n @if (chip.value) {\n {{ chip.label }}:\n <a>\n {{ chip.value }}\n </a>\n } @else {\n {{ chip.label }}\n }\n <ng-template\n fsChipSuffix\n [icon]=\"'cancel_circle_outline'\"\n (click)=\"removeChip(item, chip)\">\n </ng-template>\n </fs-chip>\n }\n }\n @if ((item.notValue$ | async) && (item.secondaryVisible$ | async)) {\n <fs-chip\n class=\"filter-chip\"\n [attr.data-filter-item]=\"item.name\"\n [size]=\"'medium'\"\n [borderColor]=\"'#ddd'\"\n (click)=\"openChip(item)\"\n [outlined]=\"true\">\n {{ item.mergedLabel }}\n <ng-template\n fsChipSuffix\n [icon]=\"'
|
|
3526
|
+
], template: "@if (items.length !== 0) {\n @for (item of secondaryItems; track item.name) {\n @if ((item.visible$ | async)) {\n @if ((item.hasValue$ | async)) {\n @for (chip of item.chips$ | async; track chip.label) {\n <fs-chip\n class=\"filter-chip selected\"\n [size]=\"'medium'\"\n [borderColor]=\"'#ddd'\"\n [attr.data-filter-item]=\"item.name\"\n [outlined]=\"true\"\n (click)=\"openChip(item, chip.name)\">\n @if (chip.value) {\n {{ chip.label }}:\n <a>\n {{ chip.value }}\n </a>\n } @else {\n {{ chip.label }}\n }\n <ng-template\n fsChipSuffix\n [icon]=\"'cancel_circle_outline'\"\n (click)=\"removeChip(item, chip)\">\n </ng-template>\n </fs-chip>\n }\n }\n @if ((item.notValue$ | async) && (item.secondaryVisible$ | async)) {\n <fs-chip\n class=\"filter-chip\"\n [attr.data-filter-item]=\"item.name\"\n [size]=\"'medium'\"\n [borderColor]=\"'#ddd'\"\n (click)=\"openChip(item)\"\n [outlined]=\"true\">\n {{ item.mergedLabel }}\n <ng-template\n fsChipSuffix\n [icon]=\"'add_circle_outline'\"\n (click)=\"openChip(item)\">\n </ng-template>\n </fs-chip>\n }\n }\n }\n @if (moreFilterItems().length > 0) {\n <mat-select\n class=\"more-filters-select mat-mdc-button-base\"\n [buttonType]=\"'basic'\"\n fsSelectButton\n [disableOptionCentering]=\"true\"\n [panelClass]=\"'fs-filter-no-initial-focus'\"\n [placeholder]=\"'More filters'\"\n (selectionChange)=\"addFilter($event)\"\n [deselectOnChange]=\"true\">\n @for (item of moreFilterItems(); track item.name) {\n <mat-option [value]=\"item\">\n {{ item.mergedLabel }}\n </mat-option>\n }\n </mat-select>\n }\n @if (savedFilterController.enabled) {\n <mat-select\n class=\"saved-filters-select mat-mdc-button-base\"\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 }\n @if (clearFiltersVisible()) {\n <a\n class=\"clear\"\n mat-button\n color=\"primary\"\n (click)=\"clear()\">\n Clear filters\n </a>\n }\n}", styles: [":host{display:flex;flex-wrap:wrap;align-items:center;gap:5px;max-width:100%;margin-top:4px;z-index:999}.saved-filters-select,.more-filters-select,.clear{display:flex;height:30px;font-size:90%}.saved-filters-select.clear,.more-filters-select.clear,.clear.clear{padding:0 10px}.saved-filters-select ::ng-deep .mat-mdc-select-value,.more-filters-select ::ng-deep .mat-mdc-select-value,.clear ::ng-deep .mat-mdc-select-value{padding:0 5px}.saved-filters-select ::ng-deep .mat-mdc-select-arrow-wrapper,.more-filters-select ::ng-deep .mat-mdc-select-arrow-wrapper,.clear ::ng-deep .mat-mdc-select-arrow-wrapper{padding-right:10px}::ng-deep .mat-mdc-select-panel.fs-filter-no-initial-focus .mat-mdc-option-active:not(:hover){background:transparent!important}\n"] }]
|
|
3529
3527
|
}], propDecorators: { chips: [{
|
|
3530
3528
|
type: ViewChildren,
|
|
3531
3529
|
args: [FsChipComponent]
|
|
@@ -3536,7 +3534,6 @@ class KeywordInputComponent {
|
|
|
3536
3534
|
autofocus = false;
|
|
3537
3535
|
searchPlaceholder = 'Search';
|
|
3538
3536
|
keyword = '';
|
|
3539
|
-
_keyword$ = new Subject();
|
|
3540
3537
|
_destroyRef = inject(DestroyRef);
|
|
3541
3538
|
_destroy$ = new Subject();
|
|
3542
3539
|
_keywordController = inject(KeywordController);
|
|
@@ -3546,7 +3543,6 @@ class KeywordInputComponent {
|
|
|
3546
3543
|
}
|
|
3547
3544
|
ngOnInit() {
|
|
3548
3545
|
this._initAutoFocus();
|
|
3549
|
-
this._listenInputChanges();
|
|
3550
3546
|
this._initKeyword();
|
|
3551
3547
|
}
|
|
3552
3548
|
ngOnDestroy() {
|
|
@@ -3569,14 +3565,7 @@ class KeywordInputComponent {
|
|
|
3569
3565
|
this.keyword = '';
|
|
3570
3566
|
}
|
|
3571
3567
|
keywordChange(keyword) {
|
|
3572
|
-
this.
|
|
3573
|
-
}
|
|
3574
|
-
_listenInputChanges() {
|
|
3575
|
-
this._keyword$
|
|
3576
|
-
.pipe(debounceTime(200), distinctUntilChanged(), takeUntil(this._destroy$))
|
|
3577
|
-
.subscribe((value) => {
|
|
3578
|
-
this._keywordController.keywordItem.value = value;
|
|
3579
|
-
});
|
|
3568
|
+
this._keywordController.keywordItem.value = keyword;
|
|
3580
3569
|
}
|
|
3581
3570
|
_initKeyword() {
|
|
3582
3571
|
this._keywordController.keywordItem.value$
|
|
@@ -3595,7 +3584,7 @@ class KeywordInputComponent {
|
|
|
3595
3584
|
});
|
|
3596
3585
|
}
|
|
3597
3586
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KeywordInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3598
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: KeywordInputComponent, isStandalone: true, selector: "fs-keyword-input", inputs: { autofocus: "autofocus" }, viewQueries: [{ propertyName: "keywordMatInput", first: true, predicate: ["keywordMatInput"], descendants: true, read: MatInput }], ngImport: i0, template: "@if (keywordVisible$ | async) {\n <mat-form-field\n class=\"search-form-field form-field-padless\"\n [ngClass]=\"{ 'has-keyword': !!keyword }\">\n <span\n matPrefix\n class=\"icon\">\n <mat-icon matPrefix>\n search\n </mat-icon>\n </span>\n <input\n #keywordMatInput\n matInput\n [(ngModel)]=\"keyword\"\n (
|
|
3587
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: KeywordInputComponent, isStandalone: true, selector: "fs-keyword-input", inputs: { autofocus: "autofocus" }, viewQueries: [{ propertyName: "keywordMatInput", first: true, predicate: ["keywordMatInput"], descendants: true, read: MatInput }], ngImport: i0, template: "@if (keywordVisible$ | async) {\n <mat-form-field\n class=\"search-form-field form-field-padless\"\n [ngClass]=\"{ 'has-keyword': !!keyword }\">\n <span\n matPrefix\n class=\"icon\">\n <mat-icon matPrefix>\n search\n </mat-icon>\n </span>\n <input\n #keywordMatInput\n matInput\n [(ngModel)]=\"keyword\"\n (fsModelChange)=\"keywordChange($event)\"\n name=\"filter-input\"\n [fsClear]=\"true\"\n [placeholder]=\"searchPlaceholder\">\n </mat-form-field>\n}", styles: [".search-form-field{max-width:100%;width:250px;margin-top:0}.search-form-field .icon{margin-left:10px;color:#626262}.search-form-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}\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: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: 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: i3$4.FsClearComponent, selector: "[fsClear]", inputs: ["ngModel", "visible", "fsClear"], outputs: ["ngModelChange", "cleared"] }, { kind: "ngmodule", type: FsCommonModule }, { kind: "directive", type: i3$2.FsModelChangeDirective, selector: "[fsModelChange]", inputs: ["fsModelChangeOptions"], outputs: ["fsModelChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3599
3588
|
}
|
|
3600
3589
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KeywordInputComponent, decorators: [{
|
|
3601
3590
|
type: Component,
|
|
@@ -3608,8 +3597,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
3608
3597
|
FormsModule,
|
|
3609
3598
|
FsFormModule,
|
|
3610
3599
|
FsClearModule,
|
|
3600
|
+
FsCommonModule,
|
|
3611
3601
|
AsyncPipe,
|
|
3612
|
-
], template: "@if (keywordVisible$ | async) {\n <mat-form-field\n class=\"search-form-field form-field-padless\"\n [ngClass]=\"{ 'has-keyword': !!keyword }\">\n <span\n matPrefix\n class=\"icon\">\n <mat-icon matPrefix>\n search\n </mat-icon>\n </span>\n <input\n #keywordMatInput\n matInput\n [(ngModel)]=\"keyword\"\n (
|
|
3602
|
+
], template: "@if (keywordVisible$ | async) {\n <mat-form-field\n class=\"search-form-field form-field-padless\"\n [ngClass]=\"{ 'has-keyword': !!keyword }\">\n <span\n matPrefix\n class=\"icon\">\n <mat-icon matPrefix>\n search\n </mat-icon>\n </span>\n <input\n #keywordMatInput\n matInput\n [(ngModel)]=\"keyword\"\n (fsModelChange)=\"keywordChange($event)\"\n name=\"filter-input\"\n [fsClear]=\"true\"\n [placeholder]=\"searchPlaceholder\">\n </mat-form-field>\n}", styles: [".search-form-field{max-width:100%;width:250px;margin-top:0}.search-form-field .icon{margin-left:10px;color:#626262}.search-form-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}\n"] }]
|
|
3613
3603
|
}], propDecorators: { keywordMatInput: [{
|
|
3614
3604
|
type: ViewChild,
|
|
3615
3605
|
args: ['keywordMatInput', { read: MatInput }]
|