@firestitch/filter 18.2.86 → 18.2.89

package/fesm2022/firestitch-filter.mjs

@@ -1048,7 +1048,7 @@ class BaseItem {
             .pipe(map((visible) => !visible));
     }
     get mergedLabel() {
-        return Array.isArray(this.label) ? this.label.join(' / ') : this.label;
+        return this.label;
     }
     get visible$() {
         return this._visible$.asObservable();
@@ -1232,13 +1232,15 @@ class BaseItem {
         this.label = item.label;
         this.primary = item.primary ?? false;
         this.secondary = !this.primary && (item.secondary ?? false);
-        this.chipLabel = item.chipLabel;
         this.visible = !(item.hide ?? !(item.show ?? true));
         this.clearable = item.clear ?? true;
         this.persistanceDisabled = item.disablePersist ?? false;
         this.queryParamsDisabled = item.disableQueryParams ?? false;
         this.defaultValueFn = typeof item.default === 'function' ?
             item.default : () => of(item.default);
+        if (typeof item.chipLabel === 'string') {
+            this.chipLabel = item.chipLabel;
+        }
         if ('placeholder' in item) {
             this.placeholder = item.placeholder;
         }
@@ -1258,6 +1260,25 @@ class BaseItem {
 }
 
 class BaseDateRangeItem extends BaseItem {
+    _filter;
+    fromLabel;
+    toLabel;
+    constructor(itemConfig, _filter) {
+        super(itemConfig, _filter);
+        this._filter = _filter;
+        if (itemConfig.label instanceof Array) {
+            this.fromLabel = itemConfig.label[0];
+            this.toLabel = itemConfig.label[1];
+        }
+        else if (typeof itemConfig.label === 'string') {
+            this.fromLabel = `From ${itemConfig.label}`;
+            this.toLabel = `To ${itemConfig.label}`;
+        }
+        else if (typeof itemConfig.label === 'object') {
+            this.fromLabel = itemConfig.label.from;
+            this.toLabel = itemConfig.label.to;
+        }
+    }
     get isTypeDateRange() {
         return this.type === ItemType.DateRange;
     }
@@ -1310,14 +1331,14 @@ class BaseDateRangeItem extends BaseItem {
             chips.push({
                 name: 'from',
                 value: format(this.value.from, dateFormat),
-                label: this.label[0],
+                label: this.fromLabel,
             });
         }
         if (this.value?.to) {
             chips.push({
                 name: 'to',
                 value: format(this.value.to, dateFormat),
-                label: this.label[1],
+                label: this.toLabel,
             });
         }
         return chips;
@@ -1342,6 +1363,9 @@ class BaseDateRangeItem extends BaseItem {
 }
 
 class DateRangeItem extends BaseDateRangeItem {
+    get mergedLabel() {
+        return `${this.fromLabel} / ${this.toLabel}`;
+    }
     static create(config, filter) {
         return new DateRangeItem(config, filter);
     }
@@ -1355,6 +1379,9 @@ class DateTimeRangeItem extends BaseDateRangeItem {
 
 class RangeItem extends BaseItem {
     _filter;
+    get mergedLabel() {
+        return `${this.label[0]} / ${this.label[1]}`;
+    }
     constructor(itemConfig, _filter) {
         super(itemConfig, _filter);
         this._filter = _filter;
@@ -2729,26 +2756,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }] } });
 
 class AutocompletechipsComponent extends BaseItemComponent {
+    autocompleteChips;
     autofocus = false;
     floatLabel = 'auto';
     _injector = inject(Injector);
-    ngOnDestroy() {
-        if (this.triggerChangeOn === 'close') {
-            this.item.value = this.value;
-        }
-    }
     panelClosed() {
-        if (this.triggerChangeOn === 'change') {
-            this.item.value = this.value;
-        }
+        this.item.value = this.value;
     }
     removed() {
-        if (this.triggerChangeOn === 'change') {
+        if (!this.autocompleteChips.panelOpen) {
             this.item.value = this.value;
         }
     }
     clear() {
         this.item.clear();
+        this.close();
     }
     fetch = (keyword) => {
         return this.item.valuesFn(keyword, this.item.filter);
@@ -2761,7 +2783,7 @@ class AutocompletechipsComponent extends BaseItemComponent {
         action.click(filterComponent);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AutocompletechipsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    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 });
+    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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AutocompletechipsComponent, decorators: [{
             type: Component,
@@ -2771,7 +2793,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         FormsModule,
                         FsFormModule,
                     ], 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"] }]
-        }], propDecorators: { autofocus: [{
+        }], propDecorators: { autocompleteChips: [{
+                type: ViewChild,
+                args: [FsAutocompleteChipsComponent]
+            }], autofocus: [{
                 type: Input
             }], floatLabel: [{
                 type: Input
@@ -2857,7 +2882,7 @@ class DateRangeComponent extends BaseItemComponent {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateRangeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    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      (ngModelChange)=\"change()\"\n      [clear]=\"item.clearable\"\n      [view]=\"viewType\"\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 });
+    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.fromLabel }}\n    </mat-label>\n    <input\n      matInput\n      [fsFilterFocusTrigger]=\"autofocusName === 'from'\"\n      [fsDateRangeFrom]=\"item.name\"\n      [(ngModel)]=\"from\"\n      (ngModelChange)=\"change()\"\n      [clear]=\"item.clearable\"\n      [view]=\"viewType\"\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.toLabel }}\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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateRangeComponent, decorators: [{
             type: Component,
@@ -2869,7 +2894,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         FocusToItemDirective,
                         FsDatePickerModule,
                         FsFormModule,
-                    ], 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      (ngModelChange)=\"change()\"\n      [clear]=\"item.clearable\"\n      [view]=\"viewType\"\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"] }]
+                    ], template: "<div class=\"row\">\n  <mat-form-field\n      [floatLabel]=\"floatLabel\"\n      class=\"form-field-padless\">\n    <mat-label>\n      {{ item.fromLabel }}\n    </mat-label>\n    <input\n      matInput\n      [fsFilterFocusTrigger]=\"autofocusName === 'from'\"\n      [fsDateRangeFrom]=\"item.name\"\n      [(ngModel)]=\"from\"\n      (ngModelChange)=\"change()\"\n      [clear]=\"item.clearable\"\n      [view]=\"viewType\"\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.toLabel }}\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"] }]
         }], propDecorators: { autofocusName: [{
                 type: Input
             }], floatLabel: [{
@@ -3536,7 +3561,6 @@ class KeywordInputComponent {
     autofocus = false;
     searchPlaceholder = 'Search';
     keyword = '';
-    _keyword$ = new Subject();
     _destroyRef = inject(DestroyRef);
     _destroy$ = new Subject();
     _keywordController = inject(KeywordController);
@@ -3546,7 +3570,6 @@ class KeywordInputComponent {
     }
     ngOnInit() {
         this._initAutoFocus();
-        this._listenInputChanges();
         this._initKeyword();
     }
     ngOnDestroy() {
@@ -3569,14 +3592,7 @@ class KeywordInputComponent {
         this.keyword = '';
     }
     keywordChange(keyword) {
-        this._keyword$.next(keyword);
-    }
-    _listenInputChanges() {
-        this._keyword$
-            .pipe(debounceTime(200), distinctUntilChanged(), takeUntil(this._destroy$))
-            .subscribe((value) => {
-            this._keywordController.keywordItem.value = value;
-        });
+        this._keywordController.keywordItem.value = keyword;
     }
     _initKeyword() {
         this._keywordController.keywordItem.value$
@@ -3595,7 +3611,7 @@ class KeywordInputComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KeywordInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    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      (ngModelChange)=\"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: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KeywordInputComponent, decorators: [{
             type: Component,
@@ -3608,8 +3624,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         FormsModule,
                         FsFormModule,
                         FsClearModule,
+                        FsCommonModule,
                         AsyncPipe,
-                    ], 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      (ngModelChange)=\"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"] }]
+                    ], 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"] }]
         }], propDecorators: { keywordMatInput: [{
                 type: ViewChild,
                 args: ['keywordMatInput', { read: MatInput }]
@@ -3811,14 +3828,6 @@ class FilterComponent {
         }
         item.clear();
     }
-    updateItemConfig(name, params) {
-        const item = this.getItem(name);
-        if (!item) {
-            return;
-        }
-        item.label = params.label ?? item.label;
-        item.chipLabel = params.chipLabel ?? item.chipLabel;
-    }
     clear(event = null) {
         if (event) {
             event.stopPropagation();