@siemens/element-ng 48.0.3 → 48.2.0-rc.1

package/fesm2022/siemens-element-ng-filtered-search.mjs

@@ -6,7 +6,7 @@ import { isRTL } from '@siemens/element-ng/common';
 import { addIcons, elementCancel, SiIconComponent, elementSearch } from '@siemens/element-ng/icon';
 import { SiTypeaheadDirective } from '@siemens/element-ng/typeahead';
 import * as i1$1 from '@siemens/element-translate-ng/translate';
-import { SiTranslatePipe, SiTranslateService, SiTranslateModule, t, injectSiTranslateService } from '@siemens/element-translate-ng/translate';
+import { SiTranslatePipe, injectSiTranslateService, SiTranslateModule, t } from '@siemens/element-translate-ng/translate';
 import { BehaviorSubject, switchMap, of, Subject } from 'rxjs';
 import { debounceTime, map, tap, first, takeUntil } from 'rxjs/operators';
 import { formatDate, DatePipe } from '@angular/common';
@@ -154,13 +154,13 @@ class SiFilteredSearchDateValueComponent extends SiFilteredSearchValueBase {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFilteredSearchDateValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiFilteredSearchDateValueComponent, isStandalone: true, selector: "si-filtered-search-date-value", providers: [
             { provide: SiFilteredSearchValueBase, useExisting: SiFilteredSearchDateValueComponent }
-        ], viewQueries: [{ propertyName: "valueInput", first: true, predicate: ["valueInput"], descendants: true, isSignal: true }, { propertyName: "datepickerOverlay", first: true, predicate: SiDatepickerOverlayDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@let dateValue = criterionValue().dateValue;\n@if (!active()) {\n  <div\n    class=\"criterion-value-text focus-inside px-4\"\n    [tabindex]=\"disabled() ? -1 : 0\"\n    (keydown.enter)=\"editValue.emit()\"\n    (click)=\"editValue.emit()\"\n  >\n    @if (!validFormat()) {\n      <!-- DatePipe throws an error if the date is invalid, so we have to do it on our own. -->\n      <!-- We may should have a better solution here. Ideally we would keep the broken string so that a user can fix it later. -->\n      <!-- eslint-disable-next-line @angular-eslint/template/no-any -->\n      {{ $any(dateValue).toString() }}\n    } @else if (!disableTime() || definition().validationType === 'date-time') {\n      {{ dateValue | date: dateFormat() }}\n    } @else {\n      {{ dateValue | date: shortDateFormat }}\n    }\n  </div>\n} @else {\n  <input\n    #valueInput\n    type=\"text\"\n    siDatepicker\n    class=\"px-4 py-0 border-0 focus-inside\"\n    [attr.aria-label]=\"searchLabel() | translate\"\n    [siDatepickerConfig]=\"dateConfig()\"\n    [ngModel]=\"dateValue\"\n    (keydown.backspace)=\"valueBackspace()\"\n    (keydown.enter)=\"valueEnter()\"\n    (siDatepickerDisabledTime)=\"disableTime.set($event)\"\n    (ngModelChange)=\"valueDateSelect($event)\"\n  />\n}\n", styles: ["input{background:transparent}\n"], dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: SiDatepickerDirective, selector: "[siDatepicker]", inputs: ["autoClose"], exportAs: ["siDatepicker"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "valueInput", first: true, predicate: ["valueInput"], descendants: true, isSignal: true }, { propertyName: "datepickerOverlay", first: true, predicate: SiDatepickerOverlayDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@let dateValue = criterionValue().dateValue;\n@if (!active()) {\n  <div\n    class=\"criterion-value-text focus-inside px-4\"\n    [tabindex]=\"disabled() ? -1 : 0\"\n    (keydown.enter)=\"editValue.emit()\"\n    (click)=\"editValue.emit()\"\n  >\n    @if (!validFormat()) {\n      <!-- DatePipe throws an error if the date is invalid, so we have to do it on our own. -->\n      <!-- We may should have a better solution here. Ideally we would keep the broken string so that a user can fix it later. -->\n\n      {{ $any(dateValue)?.toString() }}\n    } @else if (!disableTime() || definition().validationType === 'date-time') {\n      {{ dateValue | date: dateFormat() }}\n    } @else {\n      {{ dateValue | date: shortDateFormat }}\n    }\n  </div>\n} @else {\n  <input\n    #valueInput\n    type=\"text\"\n    siDatepicker\n    class=\"px-4 py-0 border-0 focus-inside\"\n    [attr.aria-label]=\"searchLabel() | translate\"\n    [siDatepickerConfig]=\"dateConfig()\"\n    [ngModel]=\"dateValue\"\n    (keydown.backspace)=\"valueBackspace()\"\n    (keydown.enter)=\"valueEnter()\"\n    (siDatepickerDisabledTime)=\"disableTime.set($event)\"\n    (ngModelChange)=\"valueDateSelect($event)\"\n  />\n}\n", styles: ["input{background:transparent}\n"], dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: SiDatepickerDirective, selector: "[siDatepicker]", inputs: ["autoClose"], exportAs: ["siDatepicker"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFilteredSearchDateValueComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-filtered-search-date-value', imports: [DatePipe, FormsModule, SiDatepickerDirective, SiTranslatePipe], providers: [
                         { provide: SiFilteredSearchValueBase, useExisting: SiFilteredSearchDateValueComponent }
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let dateValue = criterionValue().dateValue;\n@if (!active()) {\n  <div\n    class=\"criterion-value-text focus-inside px-4\"\n    [tabindex]=\"disabled() ? -1 : 0\"\n    (keydown.enter)=\"editValue.emit()\"\n    (click)=\"editValue.emit()\"\n  >\n    @if (!validFormat()) {\n      <!-- DatePipe throws an error if the date is invalid, so we have to do it on our own. -->\n      <!-- We may should have a better solution here. Ideally we would keep the broken string so that a user can fix it later. -->\n      <!-- eslint-disable-next-line @angular-eslint/template/no-any -->\n      {{ $any(dateValue).toString() }}\n    } @else if (!disableTime() || definition().validationType === 'date-time') {\n      {{ dateValue | date: dateFormat() }}\n    } @else {\n      {{ dateValue | date: shortDateFormat }}\n    }\n  </div>\n} @else {\n  <input\n    #valueInput\n    type=\"text\"\n    siDatepicker\n    class=\"px-4 py-0 border-0 focus-inside\"\n    [attr.aria-label]=\"searchLabel() | translate\"\n    [siDatepickerConfig]=\"dateConfig()\"\n    [ngModel]=\"dateValue\"\n    (keydown.backspace)=\"valueBackspace()\"\n    (keydown.enter)=\"valueEnter()\"\n    (siDatepickerDisabledTime)=\"disableTime.set($event)\"\n    (ngModelChange)=\"valueDateSelect($event)\"\n  />\n}\n", styles: ["input{background:transparent}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let dateValue = criterionValue().dateValue;\n@if (!active()) {\n  <div\n    class=\"criterion-value-text focus-inside px-4\"\n    [tabindex]=\"disabled() ? -1 : 0\"\n    (keydown.enter)=\"editValue.emit()\"\n    (click)=\"editValue.emit()\"\n  >\n    @if (!validFormat()) {\n      <!-- DatePipe throws an error if the date is invalid, so we have to do it on our own. -->\n      <!-- We may should have a better solution here. Ideally we would keep the broken string so that a user can fix it later. -->\n\n      {{ $any(dateValue)?.toString() }}\n    } @else if (!disableTime() || definition().validationType === 'date-time') {\n      {{ dateValue | date: dateFormat() }}\n    } @else {\n      {{ dateValue | date: shortDateFormat }}\n    }\n  </div>\n} @else {\n  <input\n    #valueInput\n    type=\"text\"\n    siDatepicker\n    class=\"px-4 py-0 border-0 focus-inside\"\n    [attr.aria-label]=\"searchLabel() | translate\"\n    [siDatepickerConfig]=\"dateConfig()\"\n    [ngModel]=\"dateValue\"\n    (keydown.backspace)=\"valueBackspace()\"\n    (keydown.enter)=\"valueEnter()\"\n    (siDatepickerDisabledTime)=\"disableTime.set($event)\"\n    (ngModelChange)=\"valueDateSelect($event)\"\n  />\n}\n", styles: ["input{background:transparent}\n"] }]
         }], ctorParameters: () => [] });
 
 /**
@@ -178,7 +178,7 @@ class SiFilteredSearchOptionValueBase extends SiFilteredSearchValueBase {
     isStrictOrOnlySelectValue = input.required();
     inputChange = new BehaviorSubject('');
     destroyRef = inject(DestroyRef);
-    translateService = inject(SiTranslateService);
+    translateService = injectSiTranslateService();
     inputType = computed(() => this.definition().validationType === 'integer' || this.definition().validationType === 'float'
         ? 'number'
         : 'text');
@@ -271,12 +271,9 @@ class SiFilteredSearchMultiSelectComponent extends SiFilteredSearchOptionValueBa
     }
     buildOptions() {
         const translatedOptions = super.buildOptions();
-        if (this.definition().options) {
-            return translatedOptions?.pipe(switchMap(options => this.selectionChange.pipe(tap(value => selectOptions(options, value)), map(() => options))));
-        }
-        else {
-            return translatedOptions;
-        }
+        return translatedOptions?.pipe(switchMap(options => this.selectionChange.pipe(tap(value => {
+            selectOptions(options, value);
+        }), map(() => options))));
     }
     processTypeaheadOptions(options) {
         const value = this.criterionValue().value;
@@ -294,13 +291,13 @@ class SiFilteredSearchMultiSelectComponent extends SiFilteredSearchOptionValueBa
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFilteredSearchMultiSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiFilteredSearchMultiSelectComponent, isStandalone: true, selector: "si-filtered-search-multi-select", inputs: { itemCountText: { classPropertyName: "itemCountText", publicName: "itemCountText", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
             { provide: SiFilteredSearchValueBase, useExisting: SiFilteredSearchMultiSelectComponent }
-        ], viewQueries: [{ propertyName: "valueInput", first: true, predicate: ["valueInput"], descendants: true, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let value = criterionValue().value;\n@if (!active()) {\n  <div\n    class=\"criterion-value-text focus-inside px-4\"\n    [tabindex]=\"disabled() ? -1 : 0\"\n    (keydown.enter)=\"editValue.emit()\"\n    (click)=\"editValue.emit()\"\n  >\n    @if (!!value && hasMultiSelections()) {\n      {{ itemCountText() | translate: { itemCount: value.length } }}\n    } @else if (optionValue()[0]) {\n      {{ optionValue()[0].label ?? optionValue()[0].value | translate }}\n    } @else {\n      {{ value }}\n    }\n  </div>\n} @else {\n  <input\n    #valueInput\n    typeaheadOptionField=\"translatedLabel\"\n    class=\"px-4 py-0 border-0 focus-inside\"\n    typeaheadScrollable\n    typeaheadMultiSelect\n    [type]=\"inputType()\"\n    [step]=\"step()\"\n    [siTypeahead]=\"options() ?? []\"\n    [typeaheadMinLength]=\"0\"\n    [typeaheadOptionsLimit]=\"maxCriteriaOptions()\"\n    [readOnly]=\"readonly() || onlySelectValue()\"\n    [typeaheadOptionsInScrollableView]=\"optionsInScrollableView()\"\n    [attr.aria-label]=\"searchLabel() | translate\"\n    (keydown.backspace)=\"valueBackspace()\"\n    (keydown.enter)=\"valueEnter()\"\n    (typeaheadOnSelect)=\"valueTypeaheadSelect($event)\"\n  />\n}\n", styles: ["input{background:transparent}\n"], dependencies: [{ kind: "ngmodule", type: SiTranslateModule }, { kind: "pipe", type: i1$1.SiTranslatePipe, name: "translate" }, { kind: "directive", type: SiTypeaheadDirective, selector: "[siTypeahead]", inputs: ["siTypeahead", "typeaheadProcess", "typeaheadScrollable", "typeaheadOptionsInScrollableView", "typeaheadOptionsLimit", "typeaheadScrollableAdditionalHeight", "typeaheadAutoSelectIndex", "typeaheadCloseOnEsc", "typeaheadClearValueOnSelect", "typeaheadWaitMs", "typeaheadMinLength", "typeaheadOptionField", "typeaheadMultiSelect", "typeaheadTokenize", "typeaheadMatchAllTokens", "typeaheadItemTemplate", "typeaheadSkipSortingMatches", "typeaheadAutocompleteListLabel", "typeaheadFullWidth"], outputs: ["typeaheadOnInput", "typeaheadOnSelect", "typeaheadOnFullMatch", "typeaheadOpenChange"], exportAs: ["si-typeahead"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "valueInput", first: true, predicate: ["valueInput"], descendants: true, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let value = criterionValue().value;\n@if (!active()) {\n  <div\n    class=\"criterion-value-text focus-inside px-4\"\n    [tabindex]=\"disabled() ? -1 : 0\"\n    (keydown.enter)=\"editValue.emit()\"\n    (click)=\"editValue.emit()\"\n  >\n    @if (!!value && hasMultiSelections()) {\n      {{ itemCountText() | translate: { itemCount: value.length } }}\n    } @else if (optionValue()[0]) {\n      {{ optionValue()[0].label ?? optionValue()[0].value | translate }}\n    } @else {\n      {{ value }}\n    }\n  </div>\n} @else {\n  <input\n    #valueInput\n    typeaheadOptionField=\"translatedLabel\"\n    class=\"px-4 py-0 border-0 focus-inside\"\n    typeaheadScrollable\n    typeaheadMultiSelect\n    [type]=\"inputType()\"\n    [step]=\"step()\"\n    [siTypeahead]=\"options() ?? []\"\n    [typeaheadMinLength]=\"0\"\n    [typeaheadOptionsLimit]=\"maxCriteriaOptions()\"\n    [readOnly]=\"readonly() || onlySelectValue()\"\n    [typeaheadOptionsInScrollableView]=\"optionsInScrollableView()\"\n    [attr.aria-label]=\"searchLabel() | translate\"\n    (keydown.backspace)=\"valueBackspace()\"\n    (keydown.enter)=\"valueEnter()\"\n    (typeaheadOnSelect)=\"valueTypeaheadSelect($event)\"\n    (typeaheadOnInput)=\"inputChange.next($event)\"\n  />\n}\n", styles: ["input{background:transparent}\n"], dependencies: [{ kind: "ngmodule", type: SiTranslateModule }, { kind: "pipe", type: i1$1.SiTranslatePipe, name: "translate" }, { kind: "directive", type: SiTypeaheadDirective, selector: "[siTypeahead]", inputs: ["siTypeahead", "typeaheadProcess", "typeaheadScrollable", "typeaheadOptionsInScrollableView", "typeaheadOptionsLimit", "typeaheadScrollableAdditionalHeight", "typeaheadAutoSelectIndex", "typeaheadCloseOnEsc", "typeaheadClearValueOnSelect", "typeaheadWaitMs", "typeaheadMinLength", "typeaheadOptionField", "typeaheadMultiSelect", "typeaheadTokenize", "typeaheadMatchAllTokens", "typeaheadItemTemplate", "typeaheadSkipSortingMatches", "typeaheadAutocompleteListLabel", "typeaheadFullWidth"], outputs: ["typeaheadOnInput", "typeaheadOnSelect", "typeaheadOnFullMatch", "typeaheadOpenChange"], exportAs: ["si-typeahead"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFilteredSearchMultiSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-filtered-search-multi-select', imports: [SiTranslateModule, SiTypeaheadDirective], providers: [
                         { provide: SiFilteredSearchValueBase, useExisting: SiFilteredSearchMultiSelectComponent }
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let value = criterionValue().value;\n@if (!active()) {\n  <div\n    class=\"criterion-value-text focus-inside px-4\"\n    [tabindex]=\"disabled() ? -1 : 0\"\n    (keydown.enter)=\"editValue.emit()\"\n    (click)=\"editValue.emit()\"\n  >\n    @if (!!value && hasMultiSelections()) {\n      {{ itemCountText() | translate: { itemCount: value.length } }}\n    } @else if (optionValue()[0]) {\n      {{ optionValue()[0].label ?? optionValue()[0].value | translate }}\n    } @else {\n      {{ value }}\n    }\n  </div>\n} @else {\n  <input\n    #valueInput\n    typeaheadOptionField=\"translatedLabel\"\n    class=\"px-4 py-0 border-0 focus-inside\"\n    typeaheadScrollable\n    typeaheadMultiSelect\n    [type]=\"inputType()\"\n    [step]=\"step()\"\n    [siTypeahead]=\"options() ?? []\"\n    [typeaheadMinLength]=\"0\"\n    [typeaheadOptionsLimit]=\"maxCriteriaOptions()\"\n    [readOnly]=\"readonly() || onlySelectValue()\"\n    [typeaheadOptionsInScrollableView]=\"optionsInScrollableView()\"\n    [attr.aria-label]=\"searchLabel() | translate\"\n    (keydown.backspace)=\"valueBackspace()\"\n    (keydown.enter)=\"valueEnter()\"\n    (typeaheadOnSelect)=\"valueTypeaheadSelect($event)\"\n  />\n}\n", styles: ["input{background:transparent}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let value = criterionValue().value;\n@if (!active()) {\n  <div\n    class=\"criterion-value-text focus-inside px-4\"\n    [tabindex]=\"disabled() ? -1 : 0\"\n    (keydown.enter)=\"editValue.emit()\"\n    (click)=\"editValue.emit()\"\n  >\n    @if (!!value && hasMultiSelections()) {\n      {{ itemCountText() | translate: { itemCount: value.length } }}\n    } @else if (optionValue()[0]) {\n      {{ optionValue()[0].label ?? optionValue()[0].value | translate }}\n    } @else {\n      {{ value }}\n    }\n  </div>\n} @else {\n  <input\n    #valueInput\n    typeaheadOptionField=\"translatedLabel\"\n    class=\"px-4 py-0 border-0 focus-inside\"\n    typeaheadScrollable\n    typeaheadMultiSelect\n    [type]=\"inputType()\"\n    [step]=\"step()\"\n    [siTypeahead]=\"options() ?? []\"\n    [typeaheadMinLength]=\"0\"\n    [typeaheadOptionsLimit]=\"maxCriteriaOptions()\"\n    [readOnly]=\"readonly() || onlySelectValue()\"\n    [typeaheadOptionsInScrollableView]=\"optionsInScrollableView()\"\n    [attr.aria-label]=\"searchLabel() | translate\"\n    (keydown.backspace)=\"valueBackspace()\"\n    (keydown.enter)=\"valueEnter()\"\n    (typeaheadOnSelect)=\"valueTypeaheadSelect($event)\"\n    (typeaheadOnInput)=\"inputChange.next($event)\"\n  />\n}\n", styles: ["input{background:transparent}\n"] }]
         }] });
 
 /**
@@ -310,10 +307,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
 class SiFilteredSearchTypeaheadComponent extends SiFilteredSearchOptionValueBase {
     valueInput = viewChild('valueInput');
     optionValue = signal(undefined);
+    // This must be a separate signal as it should only emit when the actual empty state changes.
+    inputEmpty = computed(() => !this.criterionValue().value);
     // This MUST only be updated if the active state changes.
     // Otherwise, user values might be overridden.
     // It is only used to pass the initial input value if the user starts editing the input.
     valueLabel = computed(() => {
+        // This is needed for the clear button.
+        // But we cannot subscribe to the value changes itself, as those would cause to many updates.
+        if (this.inputEmpty()) {
+            return '';
+        }
         if (this.active()) {
             const option = untracked(() => this.optionValue());
             if (option) {
@@ -325,6 +329,11 @@ class SiFilteredSearchTypeaheadComponent extends SiFilteredSearchOptionValueBase
         }
         return '';
     });
+    ngOnChanges(changes) {
+        if (changes.criterionValue && this.criterionValue().value !== this.optionValue()?.value) {
+            this.optionValue.set(undefined);
+        }
+    }
     ngOnInit() {
         this.inputChange.next(this.criterionValue().value ?? '');
         this.buildOptionValue();
@@ -387,7 +396,7 @@ class SiFilteredSearchTypeaheadComponent extends SiFilteredSearchOptionValueBase
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFilteredSearchTypeaheadComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiFilteredSearchTypeaheadComponent, isStandalone: true, selector: "si-filtered-search-typeahead", providers: [
             { provide: SiFilteredSearchValueBase, useExisting: SiFilteredSearchTypeaheadComponent }
-        ], viewQueries: [{ propertyName: "valueInput", first: true, predicate: ["valueInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@let value = criterionValue().value;\n@if (!active()) {\n  <div\n    class=\"criterion-value-text focus-inside px-4\"\n    [tabindex]=\"disabled() ? -1 : 0\"\n    (keydown.enter)=\"editValue.emit()\"\n    (click)=\"editValue.emit()\"\n  >\n    @let optionValue = this.optionValue();\n    @if (optionValue) {\n      {{ optionValue.label ?? optionValue.value | translate }}\n    } @else {\n      {{ value }}\n    }\n  </div>\n} @else {\n  <input\n    #valueInput\n    typeaheadOptionField=\"translatedLabel\"\n    class=\"px-4 py-0 border-0 focus-inside\"\n    typeaheadScrollable\n    [type]=\"inputType()\"\n    [step]=\"step()\"\n    [ngModel]=\"valueLabel()\"\n    [siTypeahead]=\"options() ?? []\"\n    [typeaheadProcess]=\"!onlySelectValue()\"\n    [typeaheadMinLength]=\"0\"\n    [typeaheadOptionsLimit]=\"maxCriteriaOptions()\"\n    [typeaheadAutoSelectIndex]=\"value?.length ? 0 : -1\"\n    [readOnly]=\"readonly() || onlySelectValue() || definition().onlySelectValue\"\n    [typeaheadOptionsInScrollableView]=\"optionsInScrollableView()\"\n    [attr.aria-label]=\"searchLabel() | translate\"\n    (keydown)=\"valueFilterKeys($event)\"\n    (keydown.backspace)=\"valueBackspace()\"\n    (keydown.enter)=\"valueEnter()\"\n    (ngModelChange)=\"valueChange($event)\"\n    (typeaheadOnFullMatch)=\"valueTypeaheadFullMatch($event)\"\n    (typeaheadOnSelect)=\"valueTypeaheadSelect($event)\"\n  />\n}\n", styles: ["input{background:transparent;-moz-appearance:textfield}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}\n"], dependencies: [{ kind: "directive", type: SiTypeaheadDirective, selector: "[siTypeahead]", inputs: ["siTypeahead", "typeaheadProcess", "typeaheadScrollable", "typeaheadOptionsInScrollableView", "typeaheadOptionsLimit", "typeaheadScrollableAdditionalHeight", "typeaheadAutoSelectIndex", "typeaheadCloseOnEsc", "typeaheadClearValueOnSelect", "typeaheadWaitMs", "typeaheadMinLength", "typeaheadOptionField", "typeaheadMultiSelect", "typeaheadTokenize", "typeaheadMatchAllTokens", "typeaheadItemTemplate", "typeaheadSkipSortingMatches", "typeaheadAutocompleteListLabel", "typeaheadFullWidth"], outputs: ["typeaheadOnInput", "typeaheadOnSelect", "typeaheadOnFullMatch", "typeaheadOpenChange"], exportAs: ["si-typeahead"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "valueInput", first: true, predicate: ["valueInput"], descendants: true, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let value = criterionValue().value;\n@if (!active()) {\n  <div\n    class=\"criterion-value-text focus-inside px-4\"\n    [tabindex]=\"disabled() ? -1 : 0\"\n    (keydown.enter)=\"editValue.emit()\"\n    (click)=\"editValue.emit()\"\n  >\n    @let optionValue = this.optionValue();\n    @if (optionValue) {\n      {{ optionValue.label ?? optionValue.value | translate }}\n    } @else {\n      {{ value }}\n    }\n  </div>\n} @else {\n  <input\n    #valueInput\n    typeaheadOptionField=\"translatedLabel\"\n    class=\"px-4 py-0 border-0 focus-inside\"\n    typeaheadScrollable\n    [type]=\"inputType()\"\n    [step]=\"step()\"\n    [ngModel]=\"valueLabel()\"\n    [siTypeahead]=\"options() ?? []\"\n    [typeaheadProcess]=\"!onlySelectValue()\"\n    [typeaheadMinLength]=\"0\"\n    [typeaheadOptionsLimit]=\"maxCriteriaOptions()\"\n    [typeaheadAutoSelectIndex]=\"value?.length ? 0 : -1\"\n    [readOnly]=\"readonly() || onlySelectValue() || definition().onlySelectValue\"\n    [typeaheadOptionsInScrollableView]=\"optionsInScrollableView()\"\n    [attr.aria-label]=\"searchLabel() | translate\"\n    (keydown)=\"valueFilterKeys($event)\"\n    (keydown.backspace)=\"valueBackspace()\"\n    (keydown.enter)=\"valueEnter()\"\n    (ngModelChange)=\"valueChange($event)\"\n    (typeaheadOnFullMatch)=\"valueTypeaheadFullMatch($event)\"\n    (typeaheadOnSelect)=\"valueTypeaheadSelect($event)\"\n  />\n}\n", styles: ["input{background:transparent;-moz-appearance:textfield}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}\n"], dependencies: [{ kind: "directive", type: SiTypeaheadDirective, selector: "[siTypeahead]", inputs: ["siTypeahead", "typeaheadProcess", "typeaheadScrollable", "typeaheadOptionsInScrollableView", "typeaheadOptionsLimit", "typeaheadScrollableAdditionalHeight", "typeaheadAutoSelectIndex", "typeaheadCloseOnEsc", "typeaheadClearValueOnSelect", "typeaheadWaitMs", "typeaheadMinLength", "typeaheadOptionField", "typeaheadMultiSelect", "typeaheadTokenize", "typeaheadMatchAllTokens", "typeaheadItemTemplate", "typeaheadSkipSortingMatches", "typeaheadAutocompleteListLabel", "typeaheadFullWidth"], outputs: ["typeaheadOnInput", "typeaheadOnSelect", "typeaheadOnFullMatch", "typeaheadOpenChange"], exportAs: ["si-typeahead"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFilteredSearchTypeaheadComponent, decorators: [{
             type: Component,
@@ -453,6 +462,11 @@ class SiFilteredSearchValueComponent {
             this.edit();
         }
     }
+    closeOverlay() {
+        if (this.active()) {
+            this.active.set(false);
+        }
+    }
     edit(field) {
         if (this.readonly()) {
             return;
@@ -889,6 +903,13 @@ class SiFilteredSearchComponent {
         if (this.isReadOnly()) {
             return;
         }
+        // Close any active overlays before deleting the criterion
+        // This could happen in case when user has opened a multiselect pill
+        // and then clicks on clear button of other pill.
+        this.valueComponents().forEach(component => {
+            component.closeOverlay();
+        });
+        this.cdRef.detectChanges();
         this.values = this.values.filter(v => v.value !== criterion);
         this.emitChangeEvent();
         this.allowedCriteriaCache = undefined;