@siemens/element-ng 51.2.0 → 51.4.0

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

@@ -1,18 +1,18 @@
+import { formatDate, DatePipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, model, output, viewChild, computed, Component, signal, Directive, inject, LOCALE_ID, DestroyRef, untracked, Injector, afterNextRender, booleanAttribute, ElementRef, viewChildren, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { input, model, output, viewChild, inject, Injector, afterNextRender, computed, Component, signal, Directive, LOCALE_ID, DestroyRef, untracked, booleanAttribute, ElementRef, viewChildren, ChangeDetectionStrategy, NgModule } from '@angular/core';
 import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 import { elementCancel, elementSearch } from '@siemens/element-icons';
 import { defaultConnectedOverlayScrollStrategyFactory, isRTL } from '@siemens/element-ng/common';
+import { isValid, SiDatepickerOverlayDirective, getDatepickerFormat, getNamedFormat, SiDatepickerDirective, parseDate } from '@siemens/element-ng/datepicker';
 import { addIcons, SiIconComponent } from '@siemens/element-ng/icon';
 import { SiTranslatePipe, injectSiTranslateService, t } from '@siemens/element-translate-ng/translate';
-import { BehaviorSubject, switchMap, of, Subject, merge } from 'rxjs';
-import { debounceTime, map, tap, first } from 'rxjs/operators';
-import { formatDate, DatePipe } from '@angular/common';
-import { isValid, SiDatepickerOverlayDirective, getDatepickerFormat, getNamedFormat, SiDatepickerDirective } from '@siemens/element-ng/datepicker';
-import * as i1 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
+import { BehaviorSubject, switchMap, of, timer, asapScheduler, Subject, merge } from 'rxjs';
+import { catchError, map, tap, shareReplay, take, observeOn, debounceTime } from 'rxjs/operators';
 import { SiTypeaheadDirective } from '@siemens/element-ng/typeahead';
 import { CdkMonitorFocus } from '@angular/cdk/a11y';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
 
 /**
  * Copyright (c) Siemens 2016 - 2026
@@ -22,6 +22,17 @@ import { CdkMonitorFocus } from '@angular/cdk/a11y';
 const toOptionCriteria = (values) => values?.map(v => typeof v === 'string'
     ? { value: v }
     : { label: v.label, value: v.value, iconClass: v.iconClass }) ?? [];
+const findOption = (value, options, preferLabel = false) => {
+    const normalizedValue = value.toLocaleLowerCase();
+    const labelMatch = options.find(option => option.translatedLabel.toLocaleLowerCase() === normalizedValue);
+    const valueMatch = options.find(option => option.value === value);
+    return preferLabel ? (labelMatch ?? valueMatch) : (valueMatch ?? labelMatch);
+};
+/** Build the display labels used for both pasted values and typeahead options. */
+const toTranslatedOptions = (values, translate) => toOptionCriteria(values).map(option => ({
+    ...option,
+    translatedLabel: (option.label ? translate(option.label) : undefined) ?? option.value
+}));
 /*
  * Update selected state the matching is based on value since plain
  * string options will automatically fill the value attribute with the
@@ -111,9 +122,13 @@ class SiFilteredSearchInputComponent {
     enterSubmit = output();
     inputElement = viewChild.required('freeTextInputElement', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "inputElement" }] : /* istanbul ignore next */ []));
+    typeahead = viewChild.required(SiTypeaheadDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "typeahead" }] : /* istanbul ignore next */ []));
+    injector = inject(Injector);
     /** Public method to focus the input element */
     focus() {
         this.inputElement().nativeElement.focus();
+        afterNextRender(() => this.typeahead().updateOverlayPosition(), { injector: this.injector });
     }
     typeaheadCreateOption = computed(() => this.freeTextCriterion() && !this.maxCriteriaReached() && this.allowFreeText()
         ? this.searchForFreeTextLabel()
@@ -127,45 +142,83 @@ class SiFilteredSearchInputComponent {
         }
     }
     freeTextInputHandler(event) {
-        const value = event.target.value;
-        const match = value.match(SiFilteredSearchInputComponent.criterionRegex);
-        if (!this.disableSelectionByColonAndSemicolon() && !this.onlySelectValue() && match) {
-            const criterionName = match[1];
-            this.inputElement().nativeElement.value = '';
-            this.searchValue.set('');
-            this.createCriterionByName.emit({ criterionName: criterionName, value: match[2] });
+        const inputElement = event.target;
+        if (this.disableSelectionByColonAndSemicolon()) {
+            this.searchValue.set(inputElement.value);
+            return;
         }
-        else {
-            this.searchValue.set(value);
+        const tokens = inputElement.value.split(';');
+        let consumedTokenCount = 0;
+        for (const [index, token] of tokens.entries()) {
+            const isLastToken = index === tokens.length - 1;
+            const criterionMatch = token.match(SiFilteredSearchInputComponent.criterionRegex);
+            if (isLastToken && !criterionMatch) {
+                if (!token) {
+                    consumedTokenCount++;
+                }
+                break;
+            }
+            let accepted = false;
+            if (!this.onlySelectValue() && criterionMatch) {
+                accepted = this.requestCriterionByName(criterionMatch, isLastToken);
+            }
+            else if (token && this.freeTextCriterion()) {
+                accepted = this.requestFreeTextPill(token);
+            }
+            if (!accepted) {
+                break;
+            }
+            consumedTokenCount++;
         }
+        inputElement.value = tokens.slice(consumedTokenCount).join(';');
+        this.searchValue.set(inputElement.value);
     }
     freeTextBlurHandler() {
         queueMicrotask(() => {
             if (this.freeTextCriterion() && this.searchValue().length > 0) {
-                this.createFreeTextPill.emit(this.searchValue());
+                this.createFreeTextPillHandler(this.searchValue());
             }
         });
     }
     typeaheadOnSelectCriterionHandler(event) {
         const criterion = event;
+        const inputElement = this.inputElement().nativeElement;
         // Removes the focus border before creating a new criterion to prevent the impression of jumping content.
-        this.inputElement().nativeElement.blur();
-        this.createCriterion.emit({ criterion });
-        this.searchValue.set('');
+        inputElement.blur();
+        let accepted = false;
+        this.createCriterion.emit({ criterion, accept: () => (accepted = true) });
+        inputElement.value = accepted ? '' : this.typeahead().query();
+        this.searchValue.set(inputElement.value);
     }
     createFreeTextPillHandler(query) {
-        this.createFreeTextPill.emit(query);
-        this.searchValue.set('');
+        if (this.requestFreeTextPill(query)) {
+            this.searchValue.set('');
+        }
+    }
+    requestCriterionByName(criterionMatch, editOnCreation) {
+        let accepted = false;
+        this.createCriterionByName.emit({
+            criterionName: criterionMatch[1].trim(),
+            value: criterionMatch[2].trim(),
+            editOnCreation,
+            accept: () => (accepted = true)
+        });
+        return accepted;
+    }
+    requestFreeTextPill(query) {
+        let accepted = false;
+        this.createFreeTextPill.emit({ query, accept: () => (accepted = true) });
+        return accepted;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFilteredSearchInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.8", type: SiFilteredSearchInputComponent, isStandalone: true, selector: "si-filtered-search-input", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, typeaheadOptionsLimit: { classPropertyName: "typeaheadOptionsLimit", publicName: "typeaheadOptionsLimit", isSignal: true, isRequired: true, transformFunction: null }, optionsInScrollableView: { classPropertyName: "optionsInScrollableView", publicName: "optionsInScrollableView", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: true, transformFunction: null }, searchLabel: { classPropertyName: "searchLabel", publicName: "searchLabel", isSignal: true, isRequired: true, transformFunction: null }, scrollStrategyFactory: { classPropertyName: "scrollStrategyFactory", publicName: "scrollStrategyFactory", isSignal: true, isRequired: true, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: true, transformFunction: null }, freeTextCriterion: { classPropertyName: "freeTextCriterion", publicName: "freeTextCriterion", isSignal: true, isRequired: true, transformFunction: null }, maxCriteriaReached: { classPropertyName: "maxCriteriaReached", publicName: "maxCriteriaReached", isSignal: true, isRequired: true, transformFunction: null }, allowFreeText: { classPropertyName: "allowFreeText", publicName: "allowFreeText", isSignal: true, isRequired: true, transformFunction: null }, searchForFreeTextLabel: { classPropertyName: "searchForFreeTextLabel", publicName: "searchForFreeTextLabel", isSignal: true, isRequired: true, transformFunction: null }, disableSelectionByColonAndSemicolon: { classPropertyName: "disableSelectionByColonAndSemicolon", publicName: "disableSelectionByColonAndSemicolon", isSignal: true, isRequired: true, transformFunction: null }, onlySelectValue: { classPropertyName: "onlySelectValue", publicName: "onlySelectValue", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { searchValue: "searchValueChange", createCriterion: "createCriterion", createCriterionByName: "createCriterionByName", backspaceOverflow: "backspaceOverflow", createFreeTextPill: "createFreeTextPill", inputFocus: "inputFocus", enterSubmit: "enterSubmit" }, host: { classAttribute: "w-100" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["freeTextInputElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<input\n  #freeTextInputElement\n  type=\"text\"\n  class=\"value-input ps-2 me-2 w-100\"\n  typeaheadOptionField=\"translatedLabel\"\n  typeaheadClearValueOnSelect\n  [siTypeahead]=\"dataSource()\"\n  [typeaheadScrollStrategy]=\"typeaheadScrollStrategy()\"\n  [typeaheadMinLength]=\"0\"\n  [typeaheadOptionsLimit]=\"typeaheadOptionsLimit()\"\n  [typeaheadScrollable]=\"true\"\n  [typeaheadOptionsInScrollableView]=\"optionsInScrollableView()\"\n  [typeaheadAutoSelectIndex]=\"searchValue() ? 0 : -1\"\n  [typeaheadCreateOption]=\"typeaheadCreateOption()\"\n  [disabled]=\"disabled()\"\n  [placeholder]=\"placeholder()\"\n  [attr.aria-label]=\"searchLabel() | translate\"\n  [value]=\"searchValue()\"\n  (focus)=\"inputFocus.emit()\"\n  (input)=\"freeTextInputHandler($event)\"\n  (blur)=\"freeTextBlurHandler()\"\n  (keydown.backspace)=\"freeTextBackspaceHandler($event)\"\n  (keydown.enter)=\"enterSubmit.emit()\"\n  (typeaheadOnSelect)=\"typeaheadOnSelectCriterionHandler($event.option)\"\n  (typeaheadOnCreateOption)=\"createFreeTextPillHandler($event)\"\n/>\n", styles: ["input{background:transparent;border:0;padding-block:0}input:focus{min-inline-size:20ch}input:hover::placeholder{opacity:1}:host-context(si-filtered-search-value + :host) input::placeholder{color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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", "typeaheadScrollStrategy", "typeaheadCreateOption"], outputs: ["typeaheadOnInput", "typeaheadOnSelect", "typeaheadOnFullMatch", "typeaheadOpenChange", "typeaheadOnCreateOption"], exportAs: ["si-typeahead"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.8", type: SiFilteredSearchInputComponent, isStandalone: true, selector: "si-filtered-search-input", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, typeaheadOptionsLimit: { classPropertyName: "typeaheadOptionsLimit", publicName: "typeaheadOptionsLimit", isSignal: true, isRequired: true, transformFunction: null }, optionsInScrollableView: { classPropertyName: "optionsInScrollableView", publicName: "optionsInScrollableView", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: true, transformFunction: null }, searchLabel: { classPropertyName: "searchLabel", publicName: "searchLabel", isSignal: true, isRequired: true, transformFunction: null }, scrollStrategyFactory: { classPropertyName: "scrollStrategyFactory", publicName: "scrollStrategyFactory", isSignal: true, isRequired: true, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: true, transformFunction: null }, freeTextCriterion: { classPropertyName: "freeTextCriterion", publicName: "freeTextCriterion", isSignal: true, isRequired: true, transformFunction: null }, maxCriteriaReached: { classPropertyName: "maxCriteriaReached", publicName: "maxCriteriaReached", isSignal: true, isRequired: true, transformFunction: null }, allowFreeText: { classPropertyName: "allowFreeText", publicName: "allowFreeText", isSignal: true, isRequired: true, transformFunction: null }, searchForFreeTextLabel: { classPropertyName: "searchForFreeTextLabel", publicName: "searchForFreeTextLabel", isSignal: true, isRequired: true, transformFunction: null }, disableSelectionByColonAndSemicolon: { classPropertyName: "disableSelectionByColonAndSemicolon", publicName: "disableSelectionByColonAndSemicolon", isSignal: true, isRequired: true, transformFunction: null }, onlySelectValue: { classPropertyName: "onlySelectValue", publicName: "onlySelectValue", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { searchValue: "searchValueChange", createCriterion: "createCriterion", createCriterionByName: "createCriterionByName", backspaceOverflow: "backspaceOverflow", createFreeTextPill: "createFreeTextPill", inputFocus: "inputFocus", enterSubmit: "enterSubmit" }, host: { classAttribute: "w-100" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["freeTextInputElement"], descendants: true, isSignal: true }, { propertyName: "typeahead", first: true, predicate: SiTypeaheadDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<input\n  #freeTextInputElement\n  type=\"text\"\n  class=\"value-input ps-2 me-2 w-100\"\n  typeaheadOptionField=\"translatedLabel\"\n  typeaheadClearValueOnSelect\n  [siTypeahead]=\"dataSource()\"\n  [typeaheadScrollStrategy]=\"typeaheadScrollStrategy()\"\n  [typeaheadMinLength]=\"0\"\n  [typeaheadOptionsLimit]=\"typeaheadOptionsLimit()\"\n  [typeaheadScrollable]=\"true\"\n  [typeaheadOptionsInScrollableView]=\"optionsInScrollableView()\"\n  [typeaheadAutoSelectIndex]=\"searchValue() ? 0 : -1\"\n  [typeaheadCreateOption]=\"typeaheadCreateOption()\"\n  [disabled]=\"disabled()\"\n  [placeholder]=\"placeholder()\"\n  [attr.aria-label]=\"searchLabel() | translate\"\n  [value]=\"searchValue()\"\n  (focus)=\"inputFocus.emit()\"\n  (input)=\"freeTextInputHandler($event)\"\n  (blur)=\"freeTextBlurHandler()\"\n  (keydown.backspace)=\"freeTextBackspaceHandler($event)\"\n  (keydown.enter)=\"enterSubmit.emit()\"\n  (typeaheadOnSelect)=\"typeaheadOnSelectCriterionHandler($event.option)\"\n  (typeaheadOnCreateOption)=\"createFreeTextPillHandler($event)\"\n/>\n", styles: ["input{background:transparent;border:0;padding-block:0}input:focus{min-inline-size:20ch}input:hover::placeholder{opacity:1}:host-context(si-filtered-search-value + :host) input::placeholder{color:transparent}\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", "typeaheadScrollStrategy", "typeaheadCreateOption"], outputs: ["typeaheadOnInput", "typeaheadOnSelect", "typeaheadOnFullMatch", "typeaheadOpenChange", "typeaheadOnCreateOption"], exportAs: ["si-typeahead"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFilteredSearchInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-filtered-search-input', imports: [FormsModule, SiTypeaheadDirective, SiTranslatePipe], host: {
+            args: [{ selector: 'si-filtered-search-input', imports: [SiTypeaheadDirective, SiTranslatePipe], host: {
                         class: 'w-100'
                     }, template: "<input\n  #freeTextInputElement\n  type=\"text\"\n  class=\"value-input ps-2 me-2 w-100\"\n  typeaheadOptionField=\"translatedLabel\"\n  typeaheadClearValueOnSelect\n  [siTypeahead]=\"dataSource()\"\n  [typeaheadScrollStrategy]=\"typeaheadScrollStrategy()\"\n  [typeaheadMinLength]=\"0\"\n  [typeaheadOptionsLimit]=\"typeaheadOptionsLimit()\"\n  [typeaheadScrollable]=\"true\"\n  [typeaheadOptionsInScrollableView]=\"optionsInScrollableView()\"\n  [typeaheadAutoSelectIndex]=\"searchValue() ? 0 : -1\"\n  [typeaheadCreateOption]=\"typeaheadCreateOption()\"\n  [disabled]=\"disabled()\"\n  [placeholder]=\"placeholder()\"\n  [attr.aria-label]=\"searchLabel() | translate\"\n  [value]=\"searchValue()\"\n  (focus)=\"inputFocus.emit()\"\n  (input)=\"freeTextInputHandler($event)\"\n  (blur)=\"freeTextBlurHandler()\"\n  (keydown.backspace)=\"freeTextBackspaceHandler($event)\"\n  (keydown.enter)=\"enterSubmit.emit()\"\n  (typeaheadOnSelect)=\"typeaheadOnSelectCriterionHandler($event.option)\"\n  (typeaheadOnCreateOption)=\"createFreeTextPillHandler($event)\"\n/>\n", styles: ["input{background:transparent;border:0;padding-block:0}input:focus{min-inline-size:20ch}input:hover::placeholder{opacity:1}:host-context(si-filtered-search-value + :host) input::placeholder{color:transparent}\n"] }]
-        }], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], typeaheadOptionsLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeaheadOptionsLimit", required: true }] }], optionsInScrollableView: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsInScrollableView", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: true }] }], searchLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchLabel", required: true }] }], scrollStrategyFactory: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollStrategyFactory", required: true }] }], searchValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchValue", required: true }] }, { type: i0.Output, args: ["searchValueChange"] }], freeTextCriterion: [{ type: i0.Input, args: [{ isSignal: true, alias: "freeTextCriterion", required: true }] }], maxCriteriaReached: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxCriteriaReached", required: true }] }], allowFreeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowFreeText", required: true }] }], searchForFreeTextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchForFreeTextLabel", required: true }] }], disableSelectionByColonAndSemicolon: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableSelectionByColonAndSemicolon", required: true }] }], onlySelectValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "onlySelectValue", required: true }] }], createCriterion: [{ type: i0.Output, args: ["createCriterion"] }], createCriterionByName: [{ type: i0.Output, args: ["createCriterionByName"] }], backspaceOverflow: [{ type: i0.Output, args: ["backspaceOverflow"] }], createFreeTextPill: [{ type: i0.Output, args: ["createFreeTextPill"] }], inputFocus: [{ type: i0.Output, args: ["inputFocus"] }], enterSubmit: [{ type: i0.Output, args: ["enterSubmit"] }], inputElement: [{ type: i0.ViewChild, args: ['freeTextInputElement', { isSignal: true }] }] } });
+        }], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], typeaheadOptionsLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeaheadOptionsLimit", required: true }] }], optionsInScrollableView: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsInScrollableView", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: true }] }], searchLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchLabel", required: true }] }], scrollStrategyFactory: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollStrategyFactory", required: true }] }], searchValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchValue", required: true }] }, { type: i0.Output, args: ["searchValueChange"] }], freeTextCriterion: [{ type: i0.Input, args: [{ isSignal: true, alias: "freeTextCriterion", required: true }] }], maxCriteriaReached: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxCriteriaReached", required: true }] }], allowFreeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowFreeText", required: true }] }], searchForFreeTextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchForFreeTextLabel", required: true }] }], disableSelectionByColonAndSemicolon: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableSelectionByColonAndSemicolon", required: true }] }], onlySelectValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "onlySelectValue", required: true }] }], createCriterion: [{ type: i0.Output, args: ["createCriterion"] }], createCriterionByName: [{ type: i0.Output, args: ["createCriterionByName"] }], backspaceOverflow: [{ type: i0.Output, args: ["backspaceOverflow"] }], createFreeTextPill: [{ type: i0.Output, args: ["createFreeTextPill"] }], inputFocus: [{ type: i0.Output, args: ["inputFocus"] }], enterSubmit: [{ type: i0.Output, args: ["enterSubmit"] }], inputElement: [{ type: i0.ViewChild, args: ['freeTextInputElement', { isSignal: true }] }], typeahead: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SiTypeaheadDirective), { isSignal: true }] }] } });
 
 /**
  * Copyright (c) Siemens 2016 - 2026
@@ -330,6 +383,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * SPDX-License-Identifier: MIT
  */
 class SiFilteredSearchOptionValueBase extends SiFilteredSearchValueBase {
+    /** Original text used to resolve a newly entered criterion value. */
+    initialValueText = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "initialValueText" }] : /* istanbul ignore next */ []));
     /** Loads value options for the current criterion on demand. */
     lazyValueProvider = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "lazyValueProvider" }] : /* istanbul ignore next */ []));
@@ -352,6 +408,8 @@ class SiFilteredSearchOptionValueBase extends SiFilteredSearchValueBase {
     isStrictOrOnlySelectValue = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isStrictOrOnlySelectValue" }] : /* istanbul ignore next */ []));
     inputChange = new BehaviorSubject('');
+    loadedOptions = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loadedOptions" }] : /* istanbul ignore next */ []));
     destroyRef = inject(DestroyRef);
     translateService = injectSiTranslateService();
     inputType = computed(() => this.definition().validationType === 'integer' || this.definition().validationType === 'float'
@@ -367,46 +425,51 @@ class SiFilteredSearchOptionValueBase extends SiFilteredSearchValueBase {
         if (!this.isStrictOrOnlySelectValue() && !config.strictValue && !config.onlySelectValue) {
             return true;
         }
-        // TODO: this never worked with lazy options. We should fix that.
         // TODO: checking if options are empty is also questionable. Should be changed v47.
-        return ((config.options?.length && this.hasOptionValue()) ||
-            (!config.options?.length && !!this.criterionValue().value));
+        const options = this.loadedOptions() ?? config.options;
+        return ((options?.length && this.hasOptionValue()) ||
+            (!options?.length && !!this.criterionValue().value));
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "validValue" }] : /* istanbul ignore next */ []));
     buildOptions() {
+        const provider = this.lazyValueProvider();
         let optionsStream;
-        if (this.lazyValueProvider()) {
-            optionsStream = this.inputChange.pipe(debounceTime(this.searchDebounceTime()), takeUntilDestroyed(this.destroyRef), switchMap(value => {
-                return this.lazyValueProvider()(this.definition().name, 
-                // TODO: fix lazy loading for multi-select. Seems to be not needed, but it should work.
-                this.definition().multiSelect ? '' : (value ?? '')).pipe(map(options => toOptionCriteria(options)), tap(options => ((this.definition() ?? {}).options = options)));
-            }));
+        if (provider) {
+            optionsStream = this.inputChange.pipe(switchMap((value, index) => (index === 0 ? of(0) : timer(this.searchDebounceTime())).pipe(switchMap(() => provider(this.definition().name, value)), catchError(() => of(this.definition().options ?? [])))));
         }
-        else if (this.definition()) {
-            optionsStream = of(toOptionCriteria(this.definition().options));
+        else {
+            optionsStream = of(this.definition().options ?? []);
         }
-        return optionsStream?.pipe(switchMap(options => {
-            const keys = options.map(option => option.label).filter(label => !!label);
-            return this.translateService.translateAsync(keys).pipe(map(translations => options.map(option => ({
-                ...option,
-                translatedLabel: translations[option.label] ?? option.label ?? option.value
-            }))));
-        }));
+        return optionsStream.pipe(switchMap(options => {
+            const keys = options.flatMap(option => typeof option !== 'string' && option.label ? [option.label] : []);
+            return this.translateService
+                .translateAsync(keys)
+                .pipe(map(translations => toTranslatedOptions(options, label => translations[label])));
+        }), tap(options => this.loadedOptions.set(options)), takeUntilDestroyed(this.destroyRef), shareReplay({ bufferSize: 1, refCount: true }));
     }
     buildOptionValue() {
-        if (this.criterionValue().value?.length) {
-            // resolve options for initial values
+        const initialValue = this.criterionValue();
+        if (initialValue.value?.length) {
+            // Emit normalization after initialization, not during change detection.
             this.options()
-                .pipe(first())
-                .subscribe(options => this.processTypeaheadOptions(options));
+                .pipe(take(1), observeOn(asapScheduler), takeUntilDestroyed(this.destroyRef))
+                .subscribe(options => {
+                if (this.criterionValue() !== initialValue) {
+                    return;
+                }
+                const value = this.processTypeaheadOptions(options);
+                if (value !== undefined) {
+                    this.criterionValue.set({ ...initialValue, value });
+                }
+            });
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFilteredSearchOptionValueBase, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: SiFilteredSearchOptionValueBase, isStandalone: true, inputs: { lazyValueProvider: { classPropertyName: "lazyValueProvider", publicName: "lazyValueProvider", isSignal: true, isRequired: false, transformFunction: null }, searchDebounceTime: { classPropertyName: "searchDebounceTime", publicName: "searchDebounceTime", isSignal: true, isRequired: true, transformFunction: null }, onlySelectValue: { classPropertyName: "onlySelectValue", publicName: "onlySelectValue", isSignal: true, isRequired: true, transformFunction: null }, maxCriteriaOptions: { classPropertyName: "maxCriteriaOptions", publicName: "maxCriteriaOptions", isSignal: true, isRequired: true, transformFunction: null }, optionsInScrollableView: { classPropertyName: "optionsInScrollableView", publicName: "optionsInScrollableView", isSignal: true, isRequired: true, transformFunction: null }, disableSelectionByColonAndSemicolon: { classPropertyName: "disableSelectionByColonAndSemicolon", publicName: "disableSelectionByColonAndSemicolon", isSignal: true, isRequired: true, transformFunction: null }, isStrictOrOnlySelectValue: { classPropertyName: "isStrictOrOnlySelectValue", publicName: "isStrictOrOnlySelectValue", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: SiFilteredSearchOptionValueBase, isStandalone: true, inputs: { initialValueText: { classPropertyName: "initialValueText", publicName: "initialValueText", isSignal: true, isRequired: false, transformFunction: null }, lazyValueProvider: { classPropertyName: "lazyValueProvider", publicName: "lazyValueProvider", isSignal: true, isRequired: false, transformFunction: null }, searchDebounceTime: { classPropertyName: "searchDebounceTime", publicName: "searchDebounceTime", isSignal: true, isRequired: true, transformFunction: null }, onlySelectValue: { classPropertyName: "onlySelectValue", publicName: "onlySelectValue", isSignal: true, isRequired: true, transformFunction: null }, maxCriteriaOptions: { classPropertyName: "maxCriteriaOptions", publicName: "maxCriteriaOptions", isSignal: true, isRequired: true, transformFunction: null }, optionsInScrollableView: { classPropertyName: "optionsInScrollableView", publicName: "optionsInScrollableView", isSignal: true, isRequired: true, transformFunction: null }, disableSelectionByColonAndSemicolon: { classPropertyName: "disableSelectionByColonAndSemicolon", publicName: "disableSelectionByColonAndSemicolon", isSignal: true, isRequired: true, transformFunction: null }, isStrictOrOnlySelectValue: { classPropertyName: "isStrictOrOnlySelectValue", publicName: "isStrictOrOnlySelectValue", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFilteredSearchOptionValueBase, decorators: [{
             type: Directive
-        }], propDecorators: { lazyValueProvider: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazyValueProvider", required: false }] }], searchDebounceTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchDebounceTime", required: true }] }], onlySelectValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "onlySelectValue", required: true }] }], maxCriteriaOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxCriteriaOptions", required: true }] }], optionsInScrollableView: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsInScrollableView", required: true }] }], disableSelectionByColonAndSemicolon: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableSelectionByColonAndSemicolon", required: true }] }], isStrictOrOnlySelectValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "isStrictOrOnlySelectValue", required: true }] }] } });
+        }], propDecorators: { initialValueText: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialValueText", required: false }] }], lazyValueProvider: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazyValueProvider", required: false }] }], searchDebounceTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchDebounceTime", required: true }] }], onlySelectValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "onlySelectValue", required: true }] }], maxCriteriaOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxCriteriaOptions", required: true }] }], optionsInScrollableView: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsInScrollableView", required: true }] }], disableSelectionByColonAndSemicolon: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableSelectionByColonAndSemicolon", required: true }] }], isStrictOrOnlySelectValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "isStrictOrOnlySelectValue", required: true }] }] } });
 
 class SiFilteredSearchMultiSelectComponent extends SiFilteredSearchOptionValueBase {
     /** Text used to summarize multiple selected values. */
@@ -423,6 +486,9 @@ class SiFilteredSearchMultiSelectComponent extends SiFilteredSearchOptionValueBa
     hasMultiSelections = computed(() => Array.isArray(this.criterionValue().value) && this.criterionValue().value.length > 1, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hasMultiSelections" }] : /* istanbul ignore next */ []));
     ngOnChanges(changes) {
+        if (changes.active && this.active() && !changes.active.firstChange) {
+            this.inputChange.next('');
+        }
         if (changes.criterionValue &&
             this.criterionValue().value?.length !== this.optionValue().length) {
             this.optionValue.set([]);
@@ -430,7 +496,7 @@ class SiFilteredSearchMultiSelectComponent extends SiFilteredSearchOptionValueBa
         }
     }
     ngOnInit() {
-        this.inputChange.next('');
+        this.inputChange.next(this.initialValueText() ?? '');
         this.selectionChange.next(this.criterionValue().value);
         this.buildOptionValue();
     }
@@ -454,19 +520,23 @@ class SiFilteredSearchMultiSelectComponent extends SiFilteredSearchOptionValueBa
     }
     buildOptions() {
         const translatedOptions = super.buildOptions();
-        return translatedOptions?.pipe(switchMap(options => this.selectionChange.pipe(tap(value => {
+        return translatedOptions.pipe(switchMap(options => this.selectionChange.pipe(tap(value => {
             selectOptions(options, value);
         }), map(() => options))));
     }
     processTypeaheadOptions(options) {
         const value = this.criterionValue().value;
-        this.optionValue.set(options.filter(option => value.includes(option.value) ||
-            // TODO: remove this. I don't know why, but it seems like previously FS accepted labels as well
-            value.includes(option.translatedLabel)));
-        // Sneaky patch the value.
-        // We did not emit a change, as no user interaction happened.
-        // We should consider dropping this, but there is currently a unit test checking this behavior.
-        value.splice(0, value.length, ...this.optionValue().map(option => option.value));
+        const matchingOptions = value.map(item => findOption(item, options, this.initialValueText() === item));
+        this.optionValue.set(options.filter(option => matchingOptions.includes(option)));
+        const normalizedValue = [
+            ...this.optionValue().map(option => option.value),
+            ...value.filter((_, index) => !matchingOptions[index])
+        ];
+        this.selectionChange.next(normalizedValue);
+        return normalizedValue.length === value.length &&
+            normalizedValue.every((item, index) => item === value[index])
+            ? undefined
+            : normalizedValue;
     }
     hasOptionValue() {
         return !!this.optionValue().length;
@@ -474,13 +544,13 @@ class SiFilteredSearchMultiSelectComponent extends SiFilteredSearchOptionValueBa
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFilteredSearchMultiSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiFilteredSearchMultiSelectComponent, isStandalone: true, selector: "si-filtered-search-multi-select", inputs: { itemCountText: { classPropertyName: "itemCountText", publicName: "itemCountText", isSignal: true, isRequired: true, transformFunction: null }, scrollStrategy: { classPropertyName: "scrollStrategy", publicName: "scrollStrategy", 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    [typeaheadScrollStrategy]=\"scrollStrategy()\"\n    [typeaheadMinLength]=\"0\"\n    [typeaheadOptionsLimit]=\"maxCriteriaOptions()\"\n    [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}.criterion-value-text{block-size:100%;display:flex;align-items:center}\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", "typeaheadScrollStrategy", "typeaheadCreateOption"], outputs: ["typeaheadOnInput", "typeaheadOnSelect", "typeaheadOnFullMatch", "typeaheadOpenChange", "typeaheadOnCreateOption"], exportAs: ["si-typeahead"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
+        ], 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    [typeaheadScrollStrategy]=\"scrollStrategy()\"\n    [typeaheadMinLength]=\"0\"\n    [typeaheadOptionsLimit]=\"maxCriteriaOptions()\"\n    [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}.criterion-value-text{block-size:100%;display:flex;align-items:center}\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", "typeaheadScrollStrategy", "typeaheadCreateOption"], outputs: ["typeaheadOnInput", "typeaheadOnSelect", "typeaheadOnFullMatch", "typeaheadOpenChange", "typeaheadOnCreateOption"], exportAs: ["si-typeahead"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFilteredSearchMultiSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-filtered-search-multi-select', imports: [SiTranslatePipe, SiTypeaheadDirective], providers: [
                         { provide: SiFilteredSearchValueBase, useExisting: SiFilteredSearchMultiSelectComponent }
-                    ], 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    [typeaheadScrollStrategy]=\"scrollStrategy()\"\n    [typeaheadMinLength]=\"0\"\n    [typeaheadOptionsLimit]=\"maxCriteriaOptions()\"\n    [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}.criterion-value-text{block-size:100%;display:flex;align-items:center}\n"] }]
+                    ], 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    [typeaheadScrollStrategy]=\"scrollStrategy()\"\n    [typeaheadMinLength]=\"0\"\n    [typeaheadOptionsLimit]=\"maxCriteriaOptions()\"\n    [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}.criterion-value-text{block-size:100%;display:flex;align-items:center}\n"] }]
         }], propDecorators: { itemCountText: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemCountText", required: true }] }], scrollStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollStrategy", required: true }] }], valueInput: [{ type: i0.ViewChild, args: ['valueInput', { isSignal: true }] }] } });
 
 class SiFilteredSearchTypeaheadComponent extends SiFilteredSearchOptionValueBase {
@@ -535,15 +605,21 @@ class SiFilteredSearchTypeaheadComponent extends SiFilteredSearchOptionValueBase
             else {
                 value = newValue;
             }
-            this.optionValue.set(undefined);
-            this.criterionValue.update(v => ({ ...v, value }));
-            this.inputChange.next(newValue);
+            const option = findOption(value, this.loadedOptions() ?? [], true);
+            value = option?.value ?? value;
+            this.optionValue.set(option);
+            if (this.criterionValue().value !== value) {
+                this.criterionValue.update(v => ({ ...v, value }));
+                this.inputChange.next(newValue);
+            }
         }
     }
     valueTypeaheadFullMatch(match) {
         const option = match.option;
         this.optionValue.set(option);
-        this.criterionValue.update(v => ({ ...v, value: option.value }));
+        if (this.criterionValue().value !== option.value) {
+            this.criterionValue.update(v => ({ ...v, value: option.value }));
+        }
     }
     valueTypeaheadSelect(match) {
         this.valueTypeaheadFullMatch(match);
@@ -558,16 +634,10 @@ class SiFilteredSearchTypeaheadComponent extends SiFilteredSearchOptionValueBase
         }
     }
     processTypeaheadOptions(options) {
-        this.optionValue.set(options.find(option => option.value === this.criterionValue().value ||
-            // TODO: remove this. I don't know why, but it seems like previously FS accepted labels as well
-            option.translatedLabel === this.criterionValue().value));
-        // Sneaky patch the value.
-        // We did not emit a change, as no user interaction happened.
-        // We should consider dropping this, but there is currently a unit test checking this behavior.
-        const optionValue = this.optionValue();
-        if (optionValue) {
-            this.criterionValue().value = optionValue.value;
-        }
+        const value = this.criterionValue().value;
+        const option = findOption(value, options, this.initialValueText() === value);
+        this.optionValue.set(option);
+        return option && option.value !== value ? option.value : undefined;
     }
     hasOptionValue() {
         return !!this.optionValue();
@@ -575,13 +645,13 @@ class SiFilteredSearchTypeaheadComponent extends SiFilteredSearchOptionValueBase
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFilteredSearchTypeaheadComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiFilteredSearchTypeaheadComponent, isStandalone: true, selector: "si-filtered-search-typeahead", inputs: { scrollStrategy: { classPropertyName: "scrollStrategy", publicName: "scrollStrategy", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
             { provide: SiFilteredSearchValueBase, useExisting: SiFilteredSearchTypeaheadComponent }
-        ], 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    [value]=\"valueLabel()\"\n    [siTypeahead]=\"options() ?? []\"\n    [typeaheadScrollStrategy]=\"scrollStrategy()\"\n    [typeaheadProcess]=\"!onlySelectValue()\"\n    [typeaheadMinLength]=\"0\"\n    [typeaheadOptionsLimit]=\"maxCriteriaOptions()\"\n    [typeaheadAutoSelectIndex]=\"value?.length ? 0 : -1\"\n    [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    (typeaheadOnInput)=\"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}.criterion-value-text{block-size:100%;display:flex;align-items:center}\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", "typeaheadScrollStrategy", "typeaheadCreateOption"], outputs: ["typeaheadOnInput", "typeaheadOnSelect", "typeaheadOnFullMatch", "typeaheadOpenChange", "typeaheadOnCreateOption"], exportAs: ["si-typeahead"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
+        ], 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    [value]=\"valueLabel()\"\n    [siTypeahead]=\"options()\"\n    [typeaheadScrollStrategy]=\"scrollStrategy()\"\n    [typeaheadProcess]=\"!onlySelectValue()\"\n    [typeaheadMinLength]=\"0\"\n    [typeaheadOptionsLimit]=\"maxCriteriaOptions()\"\n    [typeaheadAutoSelectIndex]=\"value?.length ? 0 : -1\"\n    [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    (typeaheadOnInput)=\"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}.criterion-value-text{block-size:100%;display:flex;align-items:center}\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", "typeaheadScrollStrategy", "typeaheadCreateOption"], outputs: ["typeaheadOnInput", "typeaheadOnSelect", "typeaheadOnFullMatch", "typeaheadOpenChange", "typeaheadOnCreateOption"], exportAs: ["si-typeahead"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFilteredSearchTypeaheadComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-filtered-search-typeahead', imports: [SiTypeaheadDirective, SiTranslatePipe], providers: [
                         { provide: SiFilteredSearchValueBase, useExisting: SiFilteredSearchTypeaheadComponent }
-                    ], 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    [value]=\"valueLabel()\"\n    [siTypeahead]=\"options() ?? []\"\n    [typeaheadScrollStrategy]=\"scrollStrategy()\"\n    [typeaheadProcess]=\"!onlySelectValue()\"\n    [typeaheadMinLength]=\"0\"\n    [typeaheadOptionsLimit]=\"maxCriteriaOptions()\"\n    [typeaheadAutoSelectIndex]=\"value?.length ? 0 : -1\"\n    [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    (typeaheadOnInput)=\"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}.criterion-value-text{block-size:100%;display:flex;align-items:center}\n"] }]
+                    ], 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    [value]=\"valueLabel()\"\n    [siTypeahead]=\"options()\"\n    [typeaheadScrollStrategy]=\"scrollStrategy()\"\n    [typeaheadProcess]=\"!onlySelectValue()\"\n    [typeaheadMinLength]=\"0\"\n    [typeaheadOptionsLimit]=\"maxCriteriaOptions()\"\n    [typeaheadAutoSelectIndex]=\"value?.length ? 0 : -1\"\n    [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    (typeaheadOnInput)=\"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}.criterion-value-text{block-size:100%;display:flex;align-items:center}\n"] }]
         }], propDecorators: { scrollStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollStrategy", required: true }] }], valueInput: [{ type: i0.ViewChild, args: ['valueInput', { isSignal: true }] }] } });
 
 /**
@@ -593,6 +663,9 @@ class SiFilteredSearchValueComponent {
     /** Current criterion value. Supports two-way binding through `valueChange`. */
     value = model.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Original text used to resolve a newly entered criterion value. */
+    initialValueText = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "initialValueText" }] : /* istanbul ignore next */ []));
     /** Definition that configures the criterion label, operators, and value type. */
     definition = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "definition" }] : /* istanbul ignore next */ []));
@@ -658,8 +731,8 @@ class SiFilteredSearchValueComponent {
     ...(ngDevMode ? [{ debugName: "operatorInput" }] : /* istanbul ignore next */ []));
     valueInput = viewChild(SiFilteredSearchValueBase, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "valueInput" }] : /* istanbul ignore next */ []));
+    /** Selects the editor from the pill kind, validation type and selection mode. */
     type = computed(() => {
-        // Check if this is a free text criterion first
         const definition = this.definition();
         if (definition.type === 'free-text') {
             return 'free-text';
@@ -769,7 +842,7 @@ class SiFilteredSearchValueComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFilteredSearchValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiFilteredSearchValueComponent, isStandalone: true, selector: "si-filtered-search-value", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, definition: { classPropertyName: "definition", publicName: "definition", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: true, transformFunction: null }, onlySelectValue: { classPropertyName: "onlySelectValue", publicName: "onlySelectValue", isSignal: true, isRequired: true, transformFunction: null }, maxCriteriaOptions: { classPropertyName: "maxCriteriaOptions", publicName: "maxCriteriaOptions", isSignal: true, isRequired: true, transformFunction: null }, optionsInScrollableView: { classPropertyName: "optionsInScrollableView", publicName: "optionsInScrollableView", isSignal: true, isRequired: true, transformFunction: null }, clearButtonLabel: { classPropertyName: "clearButtonLabel", publicName: "clearButtonLabel", isSignal: true, isRequired: true, transformFunction: null }, lazyValueProvider: { classPropertyName: "lazyValueProvider", publicName: "lazyValueProvider", isSignal: true, isRequired: false, transformFunction: null }, searchDebounceTime: { classPropertyName: "searchDebounceTime", publicName: "searchDebounceTime", isSignal: true, isRequired: true, transformFunction: null }, itemCountText: { classPropertyName: "itemCountText", publicName: "itemCountText", isSignal: true, isRequired: true, transformFunction: null }, disableSelectionByColonAndSemicolon: { classPropertyName: "disableSelectionByColonAndSemicolon", publicName: "disableSelectionByColonAndSemicolon", isSignal: true, isRequired: true, transformFunction: null }, searchLabel: { classPropertyName: "searchLabel", publicName: "searchLabel", isSignal: true, isRequired: true, transformFunction: null }, invalidCriterion: { classPropertyName: "invalidCriterion", publicName: "invalidCriterion", isSignal: true, isRequired: true, transformFunction: null }, isStrictOrOnlySelectValue: { classPropertyName: "isStrictOrOnlySelectValue", publicName: "isStrictOrOnlySelectValue", isSignal: true, isRequired: true, transformFunction: null }, editOnCreation: { classPropertyName: "editOnCreation", publicName: "editOnCreation", isSignal: true, isRequired: true, transformFunction: null }, scrollStrategyFactory: { classPropertyName: "scrollStrategyFactory", publicName: "scrollStrategyFactory", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { value: "valueChange", deleteCriterion: "deleteCriterion", submitCriterion: "submitCriterion" }, viewQueries: [{ propertyName: "operatorInput", first: true, predicate: ["operatorInput"], descendants: true, isSignal: true }, { propertyName: "valueInput", first: true, predicate: SiFilteredSearchValueBase, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  cdkMonitorSubtreeFocus\n  class=\"criteria pill-group\"\n  [class.disabled]=\"disabled()\"\n  [attr.aria-disabled]=\"disabled()\"\n  [class.invalid-criterion]=\"invalidCriterion()\"\n  (cdkFocusChange)=\"focusChange($event)\"\n>\n  @if (type() !== 'free-text') {\n    <div class=\"pill pill-interactive criterion-label si-h5\" (click)=\"edit()\">\n      {{ definition().label | translate }}\n    </div>\n  }\n  @if (definition().operators?.length) {\n    <div class=\"pill pill-interactive px-0 criterion-operator-section\">\n      <!-- criterion operator input -->\n      @if (active()) {\n        <input\n          #operatorInput\n          type=\"text\"\n          class=\"focus-inside operator-input py-0 border-0\"\n          [siTypeahead]=\"definition().operators!\"\n          [typeaheadScrollStrategy]=\"operatorScrollStrategy()\"\n          [typeaheadProcess]=\"false\"\n          [typeaheadAutoSelectIndex]=\"selectedOperatorIndex()\"\n          [typeaheadMinLength]=\"0\"\n          [typeaheadOptionsLimit]=\"0\"\n          [readOnly]=\"false\"\n          [typeaheadScrollable]=\"true\"\n          [typeaheadOptionsInScrollableView]=\"optionsInScrollableView()\"\n          [attr.aria-label]=\"searchLabel() | translate\"\n          [attr.size]=\"longestOperatorLength()\"\n          [ngModel]=\"value().operator\"\n          (ngModelChange)=\"operatorUpdate($event)\"\n          (keydown.backspace)=\"operatorBackspace()\"\n          (keydown.enter)=\"operatorEnter()\"\n          (typeaheadOnSelect)=\"operatorEnter()\"\n          (blur)=\"operatorBlur()\"\n        />\n      } @else {\n        <!-- criterion operator field -->\n        <div\n          class=\"criterion-operator-text px-2 focus-inside\"\n          [tabindex]=\"!disabled() ? 0 : -1\"\n          (keydown.enter)=\"edit('operator')\"\n          (click)=\"edit('operator')\"\n        >\n          {{ value().operator }}\n        </div>\n      }\n    </div>\n  }\n  @switch (type()) {\n    @case ('free-text') {\n      <si-filtered-search-free-text\n        [definition]=\"definition()\"\n        [disabled]=\"disabled()\"\n        [searchLabel]=\"searchLabel()\"\n        [(active)]=\"active\"\n        [(criterionValue)]=\"value\"\n        (backspaceOverflow)=\"backspaceOverflow()\"\n        (editValue)=\"edit('value')\"\n        (submitValue)=\"submitCriterion.emit($event)\"\n        (activeChange)=\"freeTextActiveChange($event)\"\n      />\n    }\n    @case ('date') {\n      <si-filtered-search-date-value\n        [definition]=\"definition()\"\n        [disabled]=\"disabled()\"\n        [searchLabel]=\"searchLabel()\"\n        [scrollStrategy]=\"datepickerScrollStrategy()\"\n        [(active)]=\"active\"\n        [(criterionValue)]=\"value\"\n        (backspaceOverflow)=\"backspaceOverflow()\"\n        (editValue)=\"edit('value')\"\n        (submitValue)=\"submitCriterion.emit($event)\"\n      />\n    }\n    @case ('multi-select') {\n      <si-filtered-search-multi-select\n        [definition]=\"definition()\"\n        [disabled]=\"disabled()\"\n        [searchLabel]=\"searchLabel()\"\n        [scrollStrategy]=\"multiSelectScrollStrategy()\"\n        [searchDebounceTime]=\"searchDebounceTime()\"\n        [onlySelectValue]=\"onlySelectValue()\"\n        [optionsInScrollableView]=\"optionsInScrollableView()\"\n        [maxCriteriaOptions]=\"maxCriteriaOptions()\"\n        [lazyValueProvider]=\"lazyValueProvider()\"\n        [itemCountText]=\"itemCountText()\"\n        [isStrictOrOnlySelectValue]=\"isStrictOrOnlySelectValue()\"\n        [disableSelectionByColonAndSemicolon]=\"disableSelectionByColonAndSemicolon()\"\n        [(active)]=\"active\"\n        [(criterionValue)]=\"value\"\n        (backspaceOverflow)=\"backspaceOverflow()\"\n        (editValue)=\"edit('value')\"\n        (submitValue)=\"submitCriterion.emit($event)\"\n      />\n    }\n    @case ('typeahead') {\n      <si-filtered-search-typeahead\n        [definition]=\"definition()\"\n        [disabled]=\"disabled()\"\n        [searchLabel]=\"searchLabel()\"\n        [scrollStrategy]=\"typeaheadScrollStrategy()\"\n        [searchDebounceTime]=\"searchDebounceTime()\"\n        [onlySelectValue]=\"onlySelectValue()\"\n        [optionsInScrollableView]=\"optionsInScrollableView()\"\n        [maxCriteriaOptions]=\"maxCriteriaOptions()\"\n        [lazyValueProvider]=\"lazyValueProvider()\"\n        [isStrictOrOnlySelectValue]=\"isStrictOrOnlySelectValue()\"\n        [disableSelectionByColonAndSemicolon]=\"disableSelectionByColonAndSemicolon()\"\n        [(active)]=\"active\"\n        [(criterionValue)]=\"value\"\n        (backspaceOverflow)=\"backspaceOverflow()\"\n        (editValue)=\"edit('value')\"\n        (submitValue)=\"submitCriterion.emit($event)\"\n      />\n    }\n  }\n  <div class=\"pill px-0 ms-n1\">\n    <button\n      type=\"button\"\n      class=\"btn btn-circle btn-sm btn-tertiary-ghost focus-inside\"\n      [attr.aria-label]=\"clearButtonLabel() | translate\"\n      [disabled]=\"disabled()\"\n      (click)=\"clear()\"\n      (mousedown)=\"$event.preventDefault()\"\n    >\n      <si-icon [icon]=\"icons.elementCancel\" />\n    </button>\n  </div>\n</div>\n", styles: [".criteria{cursor:pointer;white-space:nowrap}.criteria.invalid-criterion{border-radius:.75rem;box-shadow:0 0 0 1px var(--si-sys-color-border-danger)}.criteria:not(.invalid-criterion) .invalid-criterion{box-shadow:inset 0 0 0 1px var(--si-sys-color-border-danger)}.criteria.disabled{cursor:inherit;pointer-events:none}.operator-input{padding-inline:var(--si-sys-sizing-spacing-x-20);inline-size:calc(1ch + 2 * var(--si-sys-sizing-spacing-x-20))}input{background:transparent}\n"], dependencies: [{ kind: "directive", type: CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { 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", "typeaheadScrollStrategy", "typeaheadCreateOption"], outputs: ["typeaheadOnInput", "typeaheadOnSelect", "typeaheadOnFullMatch", "typeaheadOpenChange", "typeaheadOnCreateOption"], exportAs: ["si-typeahead"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[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: "component", type: SiFilteredSearchDateValueComponent, selector: "si-filtered-search-date-value", inputs: ["scrollStrategy"] }, { kind: "component", type: SiFilteredSearchFreeTextComponent, selector: "si-filtered-search-free-text" }, { kind: "component", type: SiFilteredSearchTypeaheadComponent, selector: "si-filtered-search-typeahead", inputs: ["scrollStrategy"] }, { kind: "component", type: SiFilteredSearchMultiSelectComponent, selector: "si-filtered-search-multi-select", inputs: ["itemCountText", "scrollStrategy"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiFilteredSearchValueComponent, isStandalone: true, selector: "si-filtered-search-value", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, initialValueText: { classPropertyName: "initialValueText", publicName: "initialValueText", isSignal: true, isRequired: false, transformFunction: null }, definition: { classPropertyName: "definition", publicName: "definition", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: true, transformFunction: null }, onlySelectValue: { classPropertyName: "onlySelectValue", publicName: "onlySelectValue", isSignal: true, isRequired: true, transformFunction: null }, maxCriteriaOptions: { classPropertyName: "maxCriteriaOptions", publicName: "maxCriteriaOptions", isSignal: true, isRequired: true, transformFunction: null }, optionsInScrollableView: { classPropertyName: "optionsInScrollableView", publicName: "optionsInScrollableView", isSignal: true, isRequired: true, transformFunction: null }, clearButtonLabel: { classPropertyName: "clearButtonLabel", publicName: "clearButtonLabel", isSignal: true, isRequired: true, transformFunction: null }, lazyValueProvider: { classPropertyName: "lazyValueProvider", publicName: "lazyValueProvider", isSignal: true, isRequired: false, transformFunction: null }, searchDebounceTime: { classPropertyName: "searchDebounceTime", publicName: "searchDebounceTime", isSignal: true, isRequired: true, transformFunction: null }, itemCountText: { classPropertyName: "itemCountText", publicName: "itemCountText", isSignal: true, isRequired: true, transformFunction: null }, disableSelectionByColonAndSemicolon: { classPropertyName: "disableSelectionByColonAndSemicolon", publicName: "disableSelectionByColonAndSemicolon", isSignal: true, isRequired: true, transformFunction: null }, searchLabel: { classPropertyName: "searchLabel", publicName: "searchLabel", isSignal: true, isRequired: true, transformFunction: null }, invalidCriterion: { classPropertyName: "invalidCriterion", publicName: "invalidCriterion", isSignal: true, isRequired: true, transformFunction: null }, isStrictOrOnlySelectValue: { classPropertyName: "isStrictOrOnlySelectValue", publicName: "isStrictOrOnlySelectValue", isSignal: true, isRequired: true, transformFunction: null }, editOnCreation: { classPropertyName: "editOnCreation", publicName: "editOnCreation", isSignal: true, isRequired: true, transformFunction: null }, scrollStrategyFactory: { classPropertyName: "scrollStrategyFactory", publicName: "scrollStrategyFactory", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { value: "valueChange", deleteCriterion: "deleteCriterion", submitCriterion: "submitCriterion" }, viewQueries: [{ propertyName: "operatorInput", first: true, predicate: ["operatorInput"], descendants: true, isSignal: true }, { propertyName: "valueInput", first: true, predicate: SiFilteredSearchValueBase, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  cdkMonitorSubtreeFocus\n  class=\"criteria pill-group\"\n  [class.disabled]=\"disabled()\"\n  [attr.aria-disabled]=\"disabled()\"\n  [class.invalid-criterion]=\"invalidCriterion()\"\n  (cdkFocusChange)=\"focusChange($event)\"\n>\n  @if (type() !== 'free-text') {\n    <div class=\"pill pill-interactive criterion-label si-h5\" (click)=\"edit()\">\n      {{ definition().label | translate }}\n    </div>\n  }\n  @if (definition().operators?.length) {\n    <div class=\"pill pill-interactive px-0 criterion-operator-section\">\n      <!-- criterion operator input -->\n      @if (active()) {\n        <input\n          #operatorInput\n          type=\"text\"\n          class=\"focus-inside operator-input py-0 border-0\"\n          [siTypeahead]=\"definition().operators!\"\n          [typeaheadScrollStrategy]=\"operatorScrollStrategy()\"\n          [typeaheadProcess]=\"false\"\n          [typeaheadAutoSelectIndex]=\"selectedOperatorIndex()\"\n          [typeaheadMinLength]=\"0\"\n          [typeaheadOptionsLimit]=\"0\"\n          [readOnly]=\"false\"\n          [typeaheadScrollable]=\"true\"\n          [typeaheadOptionsInScrollableView]=\"optionsInScrollableView()\"\n          [attr.aria-label]=\"searchLabel() | translate\"\n          [attr.size]=\"longestOperatorLength()\"\n          [ngModel]=\"value().operator\"\n          (ngModelChange)=\"operatorUpdate($event)\"\n          (keydown.backspace)=\"operatorBackspace()\"\n          (keydown.enter)=\"operatorEnter()\"\n          (typeaheadOnSelect)=\"operatorEnter()\"\n          (blur)=\"operatorBlur()\"\n        />\n      } @else {\n        <!-- criterion operator field -->\n        <div\n          class=\"criterion-operator-text px-2 focus-inside\"\n          [tabindex]=\"!disabled() ? 0 : -1\"\n          (keydown.enter)=\"edit('operator')\"\n          (click)=\"edit('operator')\"\n        >\n          {{ value().operator }}\n        </div>\n      }\n    </div>\n  }\n  @switch (type()) {\n    @case ('free-text') {\n      <si-filtered-search-free-text\n        [definition]=\"definition()\"\n        [disabled]=\"disabled()\"\n        [searchLabel]=\"searchLabel()\"\n        [(active)]=\"active\"\n        [(criterionValue)]=\"value\"\n        (backspaceOverflow)=\"backspaceOverflow()\"\n        (editValue)=\"edit('value')\"\n        (submitValue)=\"submitCriterion.emit($event)\"\n        (activeChange)=\"freeTextActiveChange($event)\"\n      />\n    }\n    @case ('date') {\n      <si-filtered-search-date-value\n        [definition]=\"definition()\"\n        [disabled]=\"disabled()\"\n        [searchLabel]=\"searchLabel()\"\n        [scrollStrategy]=\"datepickerScrollStrategy()\"\n        [(active)]=\"active\"\n        [(criterionValue)]=\"value\"\n        (backspaceOverflow)=\"backspaceOverflow()\"\n        (editValue)=\"edit('value')\"\n        (submitValue)=\"submitCriterion.emit($event)\"\n      />\n    }\n    @case ('multi-select') {\n      <si-filtered-search-multi-select\n        [definition]=\"definition()\"\n        [initialValueText]=\"initialValueText()\"\n        [disabled]=\"disabled()\"\n        [searchLabel]=\"searchLabel()\"\n        [scrollStrategy]=\"multiSelectScrollStrategy()\"\n        [searchDebounceTime]=\"searchDebounceTime()\"\n        [onlySelectValue]=\"onlySelectValue()\"\n        [optionsInScrollableView]=\"optionsInScrollableView()\"\n        [maxCriteriaOptions]=\"maxCriteriaOptions()\"\n        [lazyValueProvider]=\"lazyValueProvider()\"\n        [itemCountText]=\"itemCountText()\"\n        [isStrictOrOnlySelectValue]=\"isStrictOrOnlySelectValue()\"\n        [disableSelectionByColonAndSemicolon]=\"disableSelectionByColonAndSemicolon()\"\n        [(active)]=\"active\"\n        [(criterionValue)]=\"value\"\n        (backspaceOverflow)=\"backspaceOverflow()\"\n        (editValue)=\"edit('value')\"\n        (submitValue)=\"submitCriterion.emit($event)\"\n      />\n    }\n    @case ('typeahead') {\n      <si-filtered-search-typeahead\n        [definition]=\"definition()\"\n        [initialValueText]=\"initialValueText()\"\n        [disabled]=\"disabled()\"\n        [searchLabel]=\"searchLabel()\"\n        [scrollStrategy]=\"typeaheadScrollStrategy()\"\n        [searchDebounceTime]=\"searchDebounceTime()\"\n        [onlySelectValue]=\"onlySelectValue()\"\n        [optionsInScrollableView]=\"optionsInScrollableView()\"\n        [maxCriteriaOptions]=\"maxCriteriaOptions()\"\n        [lazyValueProvider]=\"lazyValueProvider()\"\n        [isStrictOrOnlySelectValue]=\"isStrictOrOnlySelectValue()\"\n        [disableSelectionByColonAndSemicolon]=\"disableSelectionByColonAndSemicolon()\"\n        [(active)]=\"active\"\n        [(criterionValue)]=\"value\"\n        (backspaceOverflow)=\"backspaceOverflow()\"\n        (editValue)=\"edit('value')\"\n        (submitValue)=\"submitCriterion.emit($event)\"\n      />\n    }\n  }\n  <div class=\"pill px-0 ms-n1\">\n    <button\n      type=\"button\"\n      class=\"btn btn-circle btn-sm btn-tertiary-ghost focus-inside\"\n      [attr.aria-label]=\"clearButtonLabel() | translate\"\n      [disabled]=\"disabled()\"\n      (click)=\"clear()\"\n      (mousedown)=\"$event.preventDefault()\"\n    >\n      <si-icon [icon]=\"icons.elementCancel\" />\n    </button>\n  </div>\n</div>\n", styles: [".criteria{cursor:pointer;white-space:nowrap}.criteria.invalid-criterion{border-radius:.75rem;box-shadow:0 0 0 1px var(--si-sys-color-border-danger)}.criteria:not(.invalid-criterion) .invalid-criterion{box-shadow:inset 0 0 0 1px var(--si-sys-color-border-danger)}.criteria.disabled{cursor:inherit;pointer-events:none}.operator-input{padding-inline:var(--si-sys-sizing-spacing-x-20);inline-size:calc(1ch + 2 * var(--si-sys-sizing-spacing-x-20))}input{background:transparent}\n"], dependencies: [{ kind: "directive", type: CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { 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", "typeaheadScrollStrategy", "typeaheadCreateOption"], outputs: ["typeaheadOnInput", "typeaheadOnSelect", "typeaheadOnFullMatch", "typeaheadOpenChange", "typeaheadOnCreateOption"], exportAs: ["si-typeahead"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[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: "component", type: SiFilteredSearchDateValueComponent, selector: "si-filtered-search-date-value", inputs: ["scrollStrategy"] }, { kind: "component", type: SiFilteredSearchFreeTextComponent, selector: "si-filtered-search-free-text" }, { kind: "component", type: SiFilteredSearchTypeaheadComponent, selector: "si-filtered-search-typeahead", inputs: ["scrollStrategy"] }, { kind: "component", type: SiFilteredSearchMultiSelectComponent, selector: "si-filtered-search-multi-select", inputs: ["itemCountText", "scrollStrategy"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFilteredSearchValueComponent, decorators: [{
             type: Component,
@@ -783,8 +856,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         SiFilteredSearchTypeaheadComponent,
                         SiFilteredSearchMultiSelectComponent,
                         SiIconComponent
-                    ], template: "<div\n  cdkMonitorSubtreeFocus\n  class=\"criteria pill-group\"\n  [class.disabled]=\"disabled()\"\n  [attr.aria-disabled]=\"disabled()\"\n  [class.invalid-criterion]=\"invalidCriterion()\"\n  (cdkFocusChange)=\"focusChange($event)\"\n>\n  @if (type() !== 'free-text') {\n    <div class=\"pill pill-interactive criterion-label si-h5\" (click)=\"edit()\">\n      {{ definition().label | translate }}\n    </div>\n  }\n  @if (definition().operators?.length) {\n    <div class=\"pill pill-interactive px-0 criterion-operator-section\">\n      <!-- criterion operator input -->\n      @if (active()) {\n        <input\n          #operatorInput\n          type=\"text\"\n          class=\"focus-inside operator-input py-0 border-0\"\n          [siTypeahead]=\"definition().operators!\"\n          [typeaheadScrollStrategy]=\"operatorScrollStrategy()\"\n          [typeaheadProcess]=\"false\"\n          [typeaheadAutoSelectIndex]=\"selectedOperatorIndex()\"\n          [typeaheadMinLength]=\"0\"\n          [typeaheadOptionsLimit]=\"0\"\n          [readOnly]=\"false\"\n          [typeaheadScrollable]=\"true\"\n          [typeaheadOptionsInScrollableView]=\"optionsInScrollableView()\"\n          [attr.aria-label]=\"searchLabel() | translate\"\n          [attr.size]=\"longestOperatorLength()\"\n          [ngModel]=\"value().operator\"\n          (ngModelChange)=\"operatorUpdate($event)\"\n          (keydown.backspace)=\"operatorBackspace()\"\n          (keydown.enter)=\"operatorEnter()\"\n          (typeaheadOnSelect)=\"operatorEnter()\"\n          (blur)=\"operatorBlur()\"\n        />\n      } @else {\n        <!-- criterion operator field -->\n        <div\n          class=\"criterion-operator-text px-2 focus-inside\"\n          [tabindex]=\"!disabled() ? 0 : -1\"\n          (keydown.enter)=\"edit('operator')\"\n          (click)=\"edit('operator')\"\n        >\n          {{ value().operator }}\n        </div>\n      }\n    </div>\n  }\n  @switch (type()) {\n    @case ('free-text') {\n      <si-filtered-search-free-text\n        [definition]=\"definition()\"\n        [disabled]=\"disabled()\"\n        [searchLabel]=\"searchLabel()\"\n        [(active)]=\"active\"\n        [(criterionValue)]=\"value\"\n        (backspaceOverflow)=\"backspaceOverflow()\"\n        (editValue)=\"edit('value')\"\n        (submitValue)=\"submitCriterion.emit($event)\"\n        (activeChange)=\"freeTextActiveChange($event)\"\n      />\n    }\n    @case ('date') {\n      <si-filtered-search-date-value\n        [definition]=\"definition()\"\n        [disabled]=\"disabled()\"\n        [searchLabel]=\"searchLabel()\"\n        [scrollStrategy]=\"datepickerScrollStrategy()\"\n        [(active)]=\"active\"\n        [(criterionValue)]=\"value\"\n        (backspaceOverflow)=\"backspaceOverflow()\"\n        (editValue)=\"edit('value')\"\n        (submitValue)=\"submitCriterion.emit($event)\"\n      />\n    }\n    @case ('multi-select') {\n      <si-filtered-search-multi-select\n        [definition]=\"definition()\"\n        [disabled]=\"disabled()\"\n        [searchLabel]=\"searchLabel()\"\n        [scrollStrategy]=\"multiSelectScrollStrategy()\"\n        [searchDebounceTime]=\"searchDebounceTime()\"\n        [onlySelectValue]=\"onlySelectValue()\"\n        [optionsInScrollableView]=\"optionsInScrollableView()\"\n        [maxCriteriaOptions]=\"maxCriteriaOptions()\"\n        [lazyValueProvider]=\"lazyValueProvider()\"\n        [itemCountText]=\"itemCountText()\"\n        [isStrictOrOnlySelectValue]=\"isStrictOrOnlySelectValue()\"\n        [disableSelectionByColonAndSemicolon]=\"disableSelectionByColonAndSemicolon()\"\n        [(active)]=\"active\"\n        [(criterionValue)]=\"value\"\n        (backspaceOverflow)=\"backspaceOverflow()\"\n        (editValue)=\"edit('value')\"\n        (submitValue)=\"submitCriterion.emit($event)\"\n      />\n    }\n    @case ('typeahead') {\n      <si-filtered-search-typeahead\n        [definition]=\"definition()\"\n        [disabled]=\"disabled()\"\n        [searchLabel]=\"searchLabel()\"\n        [scrollStrategy]=\"typeaheadScrollStrategy()\"\n        [searchDebounceTime]=\"searchDebounceTime()\"\n        [onlySelectValue]=\"onlySelectValue()\"\n        [optionsInScrollableView]=\"optionsInScrollableView()\"\n        [maxCriteriaOptions]=\"maxCriteriaOptions()\"\n        [lazyValueProvider]=\"lazyValueProvider()\"\n        [isStrictOrOnlySelectValue]=\"isStrictOrOnlySelectValue()\"\n        [disableSelectionByColonAndSemicolon]=\"disableSelectionByColonAndSemicolon()\"\n        [(active)]=\"active\"\n        [(criterionValue)]=\"value\"\n        (backspaceOverflow)=\"backspaceOverflow()\"\n        (editValue)=\"edit('value')\"\n        (submitValue)=\"submitCriterion.emit($event)\"\n      />\n    }\n  }\n  <div class=\"pill px-0 ms-n1\">\n    <button\n      type=\"button\"\n      class=\"btn btn-circle btn-sm btn-tertiary-ghost focus-inside\"\n      [attr.aria-label]=\"clearButtonLabel() | translate\"\n      [disabled]=\"disabled()\"\n      (click)=\"clear()\"\n      (mousedown)=\"$event.preventDefault()\"\n    >\n      <si-icon [icon]=\"icons.elementCancel\" />\n    </button>\n  </div>\n</div>\n", styles: [".criteria{cursor:pointer;white-space:nowrap}.criteria.invalid-criterion{border-radius:.75rem;box-shadow:0 0 0 1px var(--si-sys-color-border-danger)}.criteria:not(.invalid-criterion) .invalid-criterion{box-shadow:inset 0 0 0 1px var(--si-sys-color-border-danger)}.criteria.disabled{cursor:inherit;pointer-events:none}.operator-input{padding-inline:var(--si-sys-sizing-spacing-x-20);inline-size:calc(1ch + 2 * var(--si-sys-sizing-spacing-x-20))}input{background:transparent}\n"] }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }, { type: i0.Output, args: ["valueChange"] }], definition: [{ type: i0.Input, args: [{ isSignal: true, alias: "definition", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: true }] }], onlySelectValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "onlySelectValue", required: true }] }], maxCriteriaOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxCriteriaOptions", required: true }] }], optionsInScrollableView: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsInScrollableView", required: true }] }], clearButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearButtonLabel", required: true }] }], lazyValueProvider: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazyValueProvider", required: false }] }], searchDebounceTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchDebounceTime", required: true }] }], itemCountText: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemCountText", required: true }] }], disableSelectionByColonAndSemicolon: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableSelectionByColonAndSemicolon", required: true }] }], searchLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchLabel", required: true }] }], invalidCriterion: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidCriterion", required: true }] }], isStrictOrOnlySelectValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "isStrictOrOnlySelectValue", required: true }] }], editOnCreation: [{ type: i0.Input, args: [{ isSignal: true, alias: "editOnCreation", required: true }] }], scrollStrategyFactory: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollStrategyFactory", required: true }] }], deleteCriterion: [{ type: i0.Output, args: ["deleteCriterion"] }], submitCriterion: [{ type: i0.Output, args: ["submitCriterion"] }], operatorInput: [{ type: i0.ViewChild, args: ['operatorInput', { isSignal: true }] }], valueInput: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SiFilteredSearchValueBase), { isSignal: true }] }] } });
+                    ], template: "<div\n  cdkMonitorSubtreeFocus\n  class=\"criteria pill-group\"\n  [class.disabled]=\"disabled()\"\n  [attr.aria-disabled]=\"disabled()\"\n  [class.invalid-criterion]=\"invalidCriterion()\"\n  (cdkFocusChange)=\"focusChange($event)\"\n>\n  @if (type() !== 'free-text') {\n    <div class=\"pill pill-interactive criterion-label si-h5\" (click)=\"edit()\">\n      {{ definition().label | translate }}\n    </div>\n  }\n  @if (definition().operators?.length) {\n    <div class=\"pill pill-interactive px-0 criterion-operator-section\">\n      <!-- criterion operator input -->\n      @if (active()) {\n        <input\n          #operatorInput\n          type=\"text\"\n          class=\"focus-inside operator-input py-0 border-0\"\n          [siTypeahead]=\"definition().operators!\"\n          [typeaheadScrollStrategy]=\"operatorScrollStrategy()\"\n          [typeaheadProcess]=\"false\"\n          [typeaheadAutoSelectIndex]=\"selectedOperatorIndex()\"\n          [typeaheadMinLength]=\"0\"\n          [typeaheadOptionsLimit]=\"0\"\n          [readOnly]=\"false\"\n          [typeaheadScrollable]=\"true\"\n          [typeaheadOptionsInScrollableView]=\"optionsInScrollableView()\"\n          [attr.aria-label]=\"searchLabel() | translate\"\n          [attr.size]=\"longestOperatorLength()\"\n          [ngModel]=\"value().operator\"\n          (ngModelChange)=\"operatorUpdate($event)\"\n          (keydown.backspace)=\"operatorBackspace()\"\n          (keydown.enter)=\"operatorEnter()\"\n          (typeaheadOnSelect)=\"operatorEnter()\"\n          (blur)=\"operatorBlur()\"\n        />\n      } @else {\n        <!-- criterion operator field -->\n        <div\n          class=\"criterion-operator-text px-2 focus-inside\"\n          [tabindex]=\"!disabled() ? 0 : -1\"\n          (keydown.enter)=\"edit('operator')\"\n          (click)=\"edit('operator')\"\n        >\n          {{ value().operator }}\n        </div>\n      }\n    </div>\n  }\n  @switch (type()) {\n    @case ('free-text') {\n      <si-filtered-search-free-text\n        [definition]=\"definition()\"\n        [disabled]=\"disabled()\"\n        [searchLabel]=\"searchLabel()\"\n        [(active)]=\"active\"\n        [(criterionValue)]=\"value\"\n        (backspaceOverflow)=\"backspaceOverflow()\"\n        (editValue)=\"edit('value')\"\n        (submitValue)=\"submitCriterion.emit($event)\"\n        (activeChange)=\"freeTextActiveChange($event)\"\n      />\n    }\n    @case ('date') {\n      <si-filtered-search-date-value\n        [definition]=\"definition()\"\n        [disabled]=\"disabled()\"\n        [searchLabel]=\"searchLabel()\"\n        [scrollStrategy]=\"datepickerScrollStrategy()\"\n        [(active)]=\"active\"\n        [(criterionValue)]=\"value\"\n        (backspaceOverflow)=\"backspaceOverflow()\"\n        (editValue)=\"edit('value')\"\n        (submitValue)=\"submitCriterion.emit($event)\"\n      />\n    }\n    @case ('multi-select') {\n      <si-filtered-search-multi-select\n        [definition]=\"definition()\"\n        [initialValueText]=\"initialValueText()\"\n        [disabled]=\"disabled()\"\n        [searchLabel]=\"searchLabel()\"\n        [scrollStrategy]=\"multiSelectScrollStrategy()\"\n        [searchDebounceTime]=\"searchDebounceTime()\"\n        [onlySelectValue]=\"onlySelectValue()\"\n        [optionsInScrollableView]=\"optionsInScrollableView()\"\n        [maxCriteriaOptions]=\"maxCriteriaOptions()\"\n        [lazyValueProvider]=\"lazyValueProvider()\"\n        [itemCountText]=\"itemCountText()\"\n        [isStrictOrOnlySelectValue]=\"isStrictOrOnlySelectValue()\"\n        [disableSelectionByColonAndSemicolon]=\"disableSelectionByColonAndSemicolon()\"\n        [(active)]=\"active\"\n        [(criterionValue)]=\"value\"\n        (backspaceOverflow)=\"backspaceOverflow()\"\n        (editValue)=\"edit('value')\"\n        (submitValue)=\"submitCriterion.emit($event)\"\n      />\n    }\n    @case ('typeahead') {\n      <si-filtered-search-typeahead\n        [definition]=\"definition()\"\n        [initialValueText]=\"initialValueText()\"\n        [disabled]=\"disabled()\"\n        [searchLabel]=\"searchLabel()\"\n        [scrollStrategy]=\"typeaheadScrollStrategy()\"\n        [searchDebounceTime]=\"searchDebounceTime()\"\n        [onlySelectValue]=\"onlySelectValue()\"\n        [optionsInScrollableView]=\"optionsInScrollableView()\"\n        [maxCriteriaOptions]=\"maxCriteriaOptions()\"\n        [lazyValueProvider]=\"lazyValueProvider()\"\n        [isStrictOrOnlySelectValue]=\"isStrictOrOnlySelectValue()\"\n        [disableSelectionByColonAndSemicolon]=\"disableSelectionByColonAndSemicolon()\"\n        [(active)]=\"active\"\n        [(criterionValue)]=\"value\"\n        (backspaceOverflow)=\"backspaceOverflow()\"\n        (editValue)=\"edit('value')\"\n        (submitValue)=\"submitCriterion.emit($event)\"\n      />\n    }\n  }\n  <div class=\"pill px-0 ms-n1\">\n    <button\n      type=\"button\"\n      class=\"btn btn-circle btn-sm btn-tertiary-ghost focus-inside\"\n      [attr.aria-label]=\"clearButtonLabel() | translate\"\n      [disabled]=\"disabled()\"\n      (click)=\"clear()\"\n      (mousedown)=\"$event.preventDefault()\"\n    >\n      <si-icon [icon]=\"icons.elementCancel\" />\n    </button>\n  </div>\n</div>\n", styles: [".criteria{cursor:pointer;white-space:nowrap}.criteria.invalid-criterion{border-radius:.75rem;box-shadow:0 0 0 1px var(--si-sys-color-border-danger)}.criteria:not(.invalid-criterion) .invalid-criterion{box-shadow:inset 0 0 0 1px var(--si-sys-color-border-danger)}.criteria.disabled{cursor:inherit;pointer-events:none}.operator-input{padding-inline:var(--si-sys-sizing-spacing-x-20);inline-size:calc(1ch + 2 * var(--si-sys-sizing-spacing-x-20))}input{background:transparent}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }, { type: i0.Output, args: ["valueChange"] }], initialValueText: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialValueText", required: false }] }], definition: [{ type: i0.Input, args: [{ isSignal: true, alias: "definition", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: true }] }], onlySelectValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "onlySelectValue", required: true }] }], maxCriteriaOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxCriteriaOptions", required: true }] }], optionsInScrollableView: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsInScrollableView", required: true }] }], clearButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearButtonLabel", required: true }] }], lazyValueProvider: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazyValueProvider", required: false }] }], searchDebounceTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchDebounceTime", required: true }] }], itemCountText: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemCountText", required: true }] }], disableSelectionByColonAndSemicolon: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableSelectionByColonAndSemicolon", required: true }] }], searchLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchLabel", required: true }] }], invalidCriterion: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidCriterion", required: true }] }], isStrictOrOnlySelectValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "isStrictOrOnlySelectValue", required: true }] }], editOnCreation: [{ type: i0.Input, args: [{ isSignal: true, alias: "editOnCreation", required: true }] }], scrollStrategyFactory: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollStrategyFactory", required: true }] }], deleteCriterion: [{ type: i0.Output, args: ["deleteCriterion"] }], submitCriterion: [{ type: i0.Output, args: ["submitCriterion"] }], operatorInput: [{ type: i0.ViewChild, args: ['operatorInput', { isSignal: true }] }], valueInput: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SiFilteredSearchValueBase), { isSignal: true }] }] } });
 
 /**
  * Copyright (c) Siemens 2016 - 2026
@@ -1040,9 +1113,13 @@ class SiFilteredSearchComponent {
     valueComponents = viewChildren(SiFilteredSearchValueComponent, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "valueComponents" }] : /* istanbul ignore next */ []));
     dataSource;
-    autoEditCriteria = false;
     values = signal([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []));
+    maxCriteriaReached = computed(() => {
+        const maxCriteria = this.maxCriteria();
+        return maxCriteria !== undefined && this.values().length >= maxCriteria;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxCriteriaReached" }] : /* istanbul ignore next */ []));
     searchValue = signal('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "searchValue" }] : /* istanbul ignore next */ []));
     /** Internal criteria model */
@@ -1151,7 +1228,6 @@ class SiFilteredSearchComponent {
         return undefined;
     }
     initValue() {
-        this.autoEditCriteria = false;
         this.searchValue.set(this.searchCriteria()?.value ?? '');
         this.values.set(this.searchCriteria()?.criteria.map(c => {
             const config = this.findCriterionConfig(c) ??
@@ -1165,13 +1241,9 @@ class SiFilteredSearchComponent {
             if (config.multiSelect && typeof value === 'string') {
                 value = value !== '' ? [value] : [];
             }
-            let dateValue;
-            if (config.validationType === 'date' || config.validationType === 'date-time') {
-                dateValue = value ? new Date(value.toString()) : new Date();
-                value ??= getISODateString(dateValue, config.validationType === 'date' || config.datepickerConfig?.disabledTime
-                    ? 'date'
-                    : 'date-time', this.locale);
-            }
+            const dateValue = this.isDateCriterion(config)
+                ? (c.dateValue ?? this.parseModelDate(value))
+                : undefined;
             return {
                 value: {
                     name: c.name,
@@ -1179,7 +1251,8 @@ class SiFilteredSearchComponent {
                     ...(dateValue ? { dateValue } : {}),
                     ...(c.operator ? { operator: c.operator } : {})
                 },
-                config
+                config,
+                editOnCreation: false
             };
         }) ?? []);
         this.lastEmittedSearchCriteria = this.searchCriteria();
@@ -1247,29 +1320,93 @@ class SiFilteredSearchComponent {
         }
         return correctedCriteria;
     }
-    addCriterion(config, value) {
-        if (config.multiSelect) {
-            this.values.update(v => [...v, { value: { value: [], name: config.name }, config }]);
+    addCriterion(config, value, editOnCreation = true) {
+        if (this.maxCriteriaReached()) {
+            return false;
         }
-        else if (config.validationType === 'date' || config.validationType === 'date-time') {
-            const validationType = config.validationType;
-            this.values.update(v => [
-                ...v,
-                {
-                    value: {
-                        dateValue: new Date(),
-                        value: getISODateString(new Date(), validationType, this.locale),
-                        name: config.name
-                    },
-                    config
-                }
-            ]);
+        const criterionValue = { name: config.name, value: value ?? '' };
+        let initialValueText;
+        if (config.type === 'free-text') {
+            this.getAllowedCriteria(this.values(), this.exclusiveCriteria());
+            if (!this.allowFreeTextCache()) {
+                return false;
+            }
         }
         else {
-            this.values.update(v => [...v, { value: { value: value ?? '', name: config.name }, config }]);
+            if (!this.validateCriterionLabel(config) ||
+                (this.internalCriterionDefinitions.includes(config) &&
+                    !this.getAllowedCriteria(this.values(), this.exclusiveCriteria()).includes(config))) {
+                return false;
+            }
+            initialValueText = value;
+            if (this.isDateCriterion(config)) {
+                const dateValue = this.parseInputDate(value, config);
+                if (!dateValue) {
+                    return false;
+                }
+                criterionValue.dateValue = dateValue;
+                criterionValue.value = value
+                    ? value.trim()
+                    : formatDate(dateValue, getDatepickerFormat(this.locale, config.datepickerConfig), this.locale);
+            }
+            else {
+                criterionValue.value = this.resolveValue(value, config);
+            }
         }
-        this.autoEditCriteria = true;
+        const criterion = {
+            config,
+            value: criterionValue,
+            editOnCreation,
+            initialValueText
+        };
+        this.values.update(values => [...values, criterion]);
         this.emitChangeEvent();
+        return true;
+    }
+    resolveValue(value, config) {
+        const trimmedValue = value?.trim() ?? '';
+        const matchingOption = trimmedValue
+            ? findOption(trimmedValue, toTranslatedOptions(config.options, label => this.translateService.translateSync(label)), true)
+            : undefined;
+        const normalizedValue = matchingOption?.value ?? trimmedValue;
+        if (config.multiSelect) {
+            return normalizedValue ? [normalizedValue] : [];
+        }
+        return normalizedValue;
+    }
+    isDateCriterion(config) {
+        return config.validationType === 'date' || config.validationType === 'date-time';
+    }
+    parseModelDate(value) {
+        const dateValue = value ? new Date(value.toString()) : new Date();
+        return isValid(dateValue) ? dateValue : undefined;
+    }
+    parseInputDate(value, config) {
+        if (!value) {
+            return new Date();
+        }
+        const format = getDatepickerFormat(this.locale, config.datepickerConfig);
+        const dateValue = parseDate(value, format, this.locale);
+        return isValid(dateValue) ? dateValue : undefined;
+    }
+    getAllowedCriteria(values, exclusiveCriteria) {
+        const allowedCriteria = !exclusiveCriteria
+            ? this.internalCriterionDefinitions
+            : differenceByName(this.internalCriterionDefinitions, values);
+        let allowedCriterionNames = allowedCriteria.map(c => c.name);
+        if (!this.lazyCriterionProvider()) {
+            this.interceptDisplayedCriteria.emit({
+                criteria: allowedCriterionNames,
+                searchCriteria: this.convertToExternalModel(),
+                allow: (criteriaNamesToDisplay, allowFreeTextSearch) => {
+                    allowedCriterionNames = criteriaNamesToDisplay;
+                    if (allowFreeTextSearch !== undefined) {
+                        this.allowFreeTextCache.set(allowFreeTextSearch);
+                    }
+                }
+            });
+        }
+        return allowedCriteria.filter(c => allowedCriterionNames.includes(c.name));
     }
     /**
      * Get criteria list to be shown in typeahead.
@@ -1277,29 +1414,7 @@ class SiFilteredSearchComponent {
      */
     getFilteredTypeaheadCriteria(maxCriteria, values, exclusiveCriteria) {
         if (maxCriteria === undefined || values.length < maxCriteria) {
-            const allowedCriteria = !exclusiveCriteria
-                ? this.internalCriterionDefinitions
-                : differenceByName(this.internalCriterionDefinitions, values);
-            let allowedCriteriaCache;
-            if (allowedCriteria.length > 0) {
-                // Call interceptor to allow applications to customize the list of available criteria
-                const available = allowedCriteria.map(c => c.name);
-                // Ensure that all entries are allowed in case the consumer doesn't use the allow callback
-                allowedCriteriaCache = available;
-                this.interceptDisplayedCriteria.emit({
-                    criteria: available,
-                    searchCriteria: this.convertToExternalModel(),
-                    allow: (criteriaNamesToDisplay, allowFreeTextSearch) => {
-                        if (criteriaNamesToDisplay) {
-                            allowedCriteriaCache = criteriaNamesToDisplay;
-                        }
-                        if (allowFreeTextSearch !== undefined) {
-                            this.allowFreeTextCache.set(allowFreeTextSearch);
-                        }
-                    }
-                });
-            }
-            return allowedCriteria.filter(c => allowedCriteriaCache?.includes(c.name));
+            return this.getAllowedCriteria(values, exclusiveCriteria);
         }
         else {
             return [];
@@ -1316,12 +1431,7 @@ class SiFilteredSearchComponent {
             value: v.value,
             config: this.findCriterionConfig(v.value) ?? v.config
         })));
-        if (this.maxCriteria() === undefined || this.values().length < this.maxCriteria()) {
-            return !this.exclusiveCriteria()
-                ? this.internalCriterionDefinitions
-                : differenceByName(this.internalCriterionDefinitions, this.values());
-        }
-        return [];
+        return this.getFilteredTypeaheadCriteria(this.maxCriteria(), this.values(), this.exclusiveCriteria());
     }
     freeTextFocus() {
         // Ensure that the free text input is fully visible in the scroll container
@@ -1338,16 +1448,17 @@ class SiFilteredSearchComponent {
         }
     }
     onCreateCriterion(event) {
-        this.addCriterion(event.criterion, event.value);
+        if (this.addCriterion(event.criterion, event.value)) {
+            event.accept();
+        }
     }
     onCreateCriterionByName(event) {
-        const nameLowerCase = event.criterionName.toLocaleLowerCase();
-        const criterion = this.internalCriterionDefinitions.find(ic => ic.translatedLabel.toLocaleLowerCase() === nameLowerCase) ?? {
-            name: event.criterionName,
-            label: event.criterionName,
-            translatedLabel: event.criterionName
-        };
-        this.addCriterion(criterion, event.value);
+        const normalizedName = event.criterionName.toLocaleLowerCase();
+        const configuredCriterion = this.internalCriterionDefinitions.find(criterion => criterion.translatedLabel.toLocaleLowerCase() === normalizedName);
+        const config = configuredCriterion ?? toInternalCriteria({ name: event.criterionName });
+        if (this.addCriterion(config, event.value, event.editOnCreation)) {
+            event.accept();
+        }
     }
     onSearchValueChange() {
         // Only emit a change event if free text pills are not enabled and the free text search is enabled.
@@ -1379,26 +1490,14 @@ class SiFilteredSearchComponent {
             this.searchEmitQueue.next(this.searchCriteria());
         }
     }
-    createFreeTextPill(query) {
+    createFreeTextPill(event) {
         const freeTextDefinition = this.internalFreeTextCriterion();
-        const maxCriteria = this.maxCriteria();
-        if (!freeTextDefinition || (maxCriteria && this.values().length >= maxCriteria)) {
-            return;
+        if (freeTextDefinition && this.addCriterion(freeTextDefinition, event.query, false)) {
+            event.accept();
         }
-        this.values.update(v => [
-            ...v,
-            {
-                value: {
-                    name: freeTextDefinition.name,
-                    value: query
-                },
-                config: freeTextDefinition
-            }
-        ]);
-        this.emitChangeEvent();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFilteredSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiFilteredSearchComponent, isStandalone: true, selector: "si-filtered-search", inputs: { scrollStrategy: { classPropertyName: "scrollStrategy", publicName: "scrollStrategy", isSignal: true, isRequired: false, transformFunction: null }, doSearchOnInputChange: { classPropertyName: "doSearchOnInputChange", publicName: "doSearchOnInputChange", isSignal: true, isRequired: false, transformFunction: null }, lazyCriterionProvider: { classPropertyName: "lazyCriterionProvider", publicName: "lazyCriterionProvider", isSignal: true, isRequired: false, transformFunction: null }, lazyValueProvider: { classPropertyName: "lazyValueProvider", publicName: "lazyValueProvider", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, strictCriterion: { classPropertyName: "strictCriterion", publicName: "strictCriterion", isSignal: true, isRequired: false, transformFunction: null }, strictValue: { classPropertyName: "strictValue", publicName: "strictValue", isSignal: true, isRequired: false, transformFunction: null }, onlySelectValue: { classPropertyName: "onlySelectValue", publicName: "onlySelectValue", isSignal: true, isRequired: false, transformFunction: null }, lazyLoadingDebounceTime: { classPropertyName: "lazyLoadingDebounceTime", publicName: "lazyLoadingDebounceTime", isSignal: true, isRequired: false, transformFunction: null }, searchDebounceTime: { classPropertyName: "searchDebounceTime", publicName: "searchDebounceTime", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, optionsInScrollableView: { classPropertyName: "optionsInScrollableView", publicName: "optionsInScrollableView", isSignal: true, isRequired: false, transformFunction: null }, searchCriteria: { classPropertyName: "searchCriteria", publicName: "searchCriteria", isSignal: true, isRequired: false, transformFunction: null }, criteria: { classPropertyName: "criteria", publicName: "criteria", isSignal: true, isRequired: false, transformFunction: null }, exclusiveCriteria: { classPropertyName: "exclusiveCriteria", publicName: "exclusiveCriteria", isSignal: true, isRequired: false, transformFunction: null }, maxCriteria: { classPropertyName: "maxCriteria", publicName: "maxCriteria", isSignal: true, isRequired: false, transformFunction: null }, maxCriteriaOptions: { classPropertyName: "maxCriteriaOptions", publicName: "maxCriteriaOptions", isSignal: true, isRequired: false, transformFunction: null }, searchLabel: { classPropertyName: "searchLabel", publicName: "searchLabel", isSignal: true, isRequired: false, transformFunction: null }, clearButtonLabel: { classPropertyName: "clearButtonLabel", publicName: "clearButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, submitButtonLabel: { classPropertyName: "submitButtonLabel", publicName: "submitButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, itemCountText: { classPropertyName: "itemCountText", publicName: "itemCountText", isSignal: true, isRequired: false, transformFunction: null }, colorVariant: { classPropertyName: "colorVariant", publicName: "colorVariant", isSignal: true, isRequired: false, transformFunction: null }, disableFreeTextSearch: { classPropertyName: "disableFreeTextSearch", publicName: "disableFreeTextSearch", isSignal: true, isRequired: false, transformFunction: null }, typeaheadOptionsLimit: { classPropertyName: "typeaheadOptionsLimit", publicName: "typeaheadOptionsLimit", isSignal: true, isRequired: false, transformFunction: null }, disableSelectionByColonAndSemicolon: { classPropertyName: "disableSelectionByColonAndSemicolon", publicName: "disableSelectionByColonAndSemicolon", isSignal: true, isRequired: false, transformFunction: null }, freeTextCriterion: { classPropertyName: "freeTextCriterion", publicName: "freeTextCriterion", isSignal: true, isRequired: false, transformFunction: null }, searchForFreeTextLabel: { classPropertyName: "searchForFreeTextLabel", publicName: "searchForFreeTextLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { doSearch: "doSearch", searchCriteria: "searchCriteriaChange", interceptDisplayedCriteria: "interceptDisplayedCriteria" }, host: { properties: { "class.disabled": "disabled()", "class.dark-background": "colorVariant() === 'base-0'" } }, viewQueries: [{ propertyName: "freeTextInput", first: true, predicate: SiFilteredSearchInputComponent, descendants: true, isSignal: true }, { propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "valueComponents", predicate: SiFilteredSearchValueComponent, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  #scrollContainer\n  class=\"search-container d-flex align-items-center overflow-auto py-2 w-100 ps-2 pe-2\"\n>\n  @for (criterion of values(); track criterion) {\n    <si-filtered-search-value\n      [editOnCreation]=\"autoEditCriteria\"\n      [definition]=\"criterion.config\"\n      [value]=\"criterion.value\"\n      [invalidCriterion]=\"!validateCriterionLabel(criterion.config)\"\n      [disabled]=\"disabled()\"\n      [clearButtonLabel]=\"clearButtonLabel()\"\n      [disableSelectionByColonAndSemicolon]=\"disableSelectionByColonAndSemicolon()\"\n      [isStrictOrOnlySelectValue]=\"isStrictOrOnlySelectValue()\"\n      [itemCountText]=\"itemCountText()\"\n      [lazyValueProvider]=\"lazyValueProvider()\"\n      [maxCriteriaOptions]=\"maxCriteriaOptions()\"\n      [optionsInScrollableView]=\"optionsInScrollableView()\"\n      [searchLabel]=\"searchLabel()\"\n      [onlySelectValue]=\"onlySelectValue()\"\n      [searchDebounceTime]=\"searchDebounceTime()\"\n      [scrollStrategyFactory]=\"scrollStrategy()\"\n      (submitCriterion)=\"focusNext($index, $event)\"\n      (deleteCriterion)=\"deleteCriterion($index, $event)\"\n      (valueChange)=\"valueChange($event, criterion)\"\n    />\n  }\n  <!-- criterion input -->\n  <si-filtered-search-input\n    [dataSource]=\"dataSource\"\n    [typeaheadOptionsLimit]=\"typeaheadOptionsLimit()\"\n    [optionsInScrollableView]=\"optionsInScrollableView()\"\n    [disabled]=\"disabled()\"\n    [placeholder]=\"placeholder()\"\n    [searchLabel]=\"searchLabel()\"\n    [freeTextCriterion]=\"!!freeTextCriterion()\"\n    [maxCriteriaReached]=\"!!maxCriteria() && values().length >= maxCriteria()!\"\n    [allowFreeText]=\"allowFreeTextCache()\"\n    [searchForFreeTextLabel]=\"searchForFreeTextLabel()\"\n    [scrollStrategyFactory]=\"scrollStrategy()\"\n    [disableSelectionByColonAndSemicolon]=\"disableSelectionByColonAndSemicolon()\"\n    [onlySelectValue]=\"onlySelectValue()\"\n    [(searchValue)]=\"searchValue\"\n    (createCriterion)=\"onCreateCriterion($event)\"\n    (createCriterionByName)=\"onCreateCriterionByName($event)\"\n    (backspaceOverflow)=\"freeTextBackspace()\"\n    (createFreeTextPill)=\"createFreeTextPill($event)\"\n    (searchValueChange)=\"onSearchValueChange()\"\n    (inputFocus)=\"freeTextFocus()\"\n    (enterSubmit)=\"submit()\"\n  />\n</div>\n<!-- clear all searchCriteria -->\n@if (values().length || searchValue().length) {\n  <div class=\"clear-button-container\">\n    <button\n      type=\"button\"\n      class=\"btn btn-icon btn-sm btn-tertiary-ghost mx-2\"\n      [disabled]=\"disabled()\"\n      [attr.aria-label]=\"clearButtonLabel() | translate\"\n      (click)=\"deleteAllCriteria($event)\"\n    >\n      <si-icon [icon]=\"icons.elementCancel\" />\n    </button>\n  </div>\n}\n\n@if (!disabled()) {\n  <button\n    type=\"button\"\n    class=\"search-button btn btn-icon btn-sm btn-secondary focus-inside\"\n    [disabled]=\"disabled()\"\n    [attr.aria-label]=\"submitButtonLabel() | translate\"\n    (click)=\"submit()\"\n  >\n    <si-icon [icon]=\"icons.elementSearch\" />\n  </button>\n}\n", styles: [":host{--search-bar-icon-color: var(--si-sys-color-text-primary);--input-background-color: var(--si-sys-color-background-1);--input-background-hover-color: var(--si-sys-color-background-1);--filter-search-background-color: var(--si-sys-color-background-1);--filter-pill-background-color: var(--si-sys-color-background-2)}:host.dark-background{--input-background-color: var(--si-sys-color-background-2);--input-background-hover-color: var(--si-sys-color-background-hover);--filter-search-background-color: var(--si-sys-color-background-2);--filter-pill-background-color: var(--si-sys-color-background-1)}:host{display:flex;align-items:center;block-size:fit-content;line-height:var(--si-sys-sizing-spacing-y-80);min-inline-size:0}:host.disabled{color:var(--si-sys-color-text-disabled)}.search-container{border-start-start-radius:4px;border-end-start-radius:4px;background-color:var(--filter-search-background-color);gap:var(--si-sys-sizing-spacing-y-20) var(--si-sys-sizing-spacing-x-20)}.clear-button-container{display:flex;align-items:flex-start;align-self:stretch;padding-block:var(--si-sys-sizing-spacing-y-20);background-color:var(--filter-search-background-color)}.search-button{align-self:stretch;background-color:var(--filter-search-background-color);border:0;border-radius:0;border-end-end-radius:4px;border-start-end-radius:4px;margin-block:0;margin-inline:1px 0;aspect-ratio:auto;block-size:auto;inline-size:auto;padding-inline:var(--si-sys-sizing-spacing-y-20)!important}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiFilteredSearchInputComponent, selector: "si-filtered-search-input", inputs: ["dataSource", "typeaheadOptionsLimit", "optionsInScrollableView", "disabled", "placeholder", "searchLabel", "scrollStrategyFactory", "searchValue", "freeTextCriterion", "maxCriteriaReached", "allowFreeText", "searchForFreeTextLabel", "disableSelectionByColonAndSemicolon", "onlySelectValue"], outputs: ["searchValueChange", "createCriterion", "createCriterionByName", "backspaceOverflow", "createFreeTextPill", "inputFocus", "enterSubmit"] }, { kind: "component", type: SiFilteredSearchValueComponent, selector: "si-filtered-search-value", inputs: ["value", "definition", "disabled", "onlySelectValue", "maxCriteriaOptions", "optionsInScrollableView", "clearButtonLabel", "lazyValueProvider", "searchDebounceTime", "itemCountText", "disableSelectionByColonAndSemicolon", "searchLabel", "invalidCriterion", "isStrictOrOnlySelectValue", "editOnCreation", "scrollStrategyFactory"], outputs: ["valueChange", "deleteCriterion", "submitCriterion"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiFilteredSearchComponent, isStandalone: true, selector: "si-filtered-search", inputs: { scrollStrategy: { classPropertyName: "scrollStrategy", publicName: "scrollStrategy", isSignal: true, isRequired: false, transformFunction: null }, doSearchOnInputChange: { classPropertyName: "doSearchOnInputChange", publicName: "doSearchOnInputChange", isSignal: true, isRequired: false, transformFunction: null }, lazyCriterionProvider: { classPropertyName: "lazyCriterionProvider", publicName: "lazyCriterionProvider", isSignal: true, isRequired: false, transformFunction: null }, lazyValueProvider: { classPropertyName: "lazyValueProvider", publicName: "lazyValueProvider", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, strictCriterion: { classPropertyName: "strictCriterion", publicName: "strictCriterion", isSignal: true, isRequired: false, transformFunction: null }, strictValue: { classPropertyName: "strictValue", publicName: "strictValue", isSignal: true, isRequired: false, transformFunction: null }, onlySelectValue: { classPropertyName: "onlySelectValue", publicName: "onlySelectValue", isSignal: true, isRequired: false, transformFunction: null }, lazyLoadingDebounceTime: { classPropertyName: "lazyLoadingDebounceTime", publicName: "lazyLoadingDebounceTime", isSignal: true, isRequired: false, transformFunction: null }, searchDebounceTime: { classPropertyName: "searchDebounceTime", publicName: "searchDebounceTime", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, optionsInScrollableView: { classPropertyName: "optionsInScrollableView", publicName: "optionsInScrollableView", isSignal: true, isRequired: false, transformFunction: null }, searchCriteria: { classPropertyName: "searchCriteria", publicName: "searchCriteria", isSignal: true, isRequired: false, transformFunction: null }, criteria: { classPropertyName: "criteria", publicName: "criteria", isSignal: true, isRequired: false, transformFunction: null }, exclusiveCriteria: { classPropertyName: "exclusiveCriteria", publicName: "exclusiveCriteria", isSignal: true, isRequired: false, transformFunction: null }, maxCriteria: { classPropertyName: "maxCriteria", publicName: "maxCriteria", isSignal: true, isRequired: false, transformFunction: null }, maxCriteriaOptions: { classPropertyName: "maxCriteriaOptions", publicName: "maxCriteriaOptions", isSignal: true, isRequired: false, transformFunction: null }, searchLabel: { classPropertyName: "searchLabel", publicName: "searchLabel", isSignal: true, isRequired: false, transformFunction: null }, clearButtonLabel: { classPropertyName: "clearButtonLabel", publicName: "clearButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, submitButtonLabel: { classPropertyName: "submitButtonLabel", publicName: "submitButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, itemCountText: { classPropertyName: "itemCountText", publicName: "itemCountText", isSignal: true, isRequired: false, transformFunction: null }, colorVariant: { classPropertyName: "colorVariant", publicName: "colorVariant", isSignal: true, isRequired: false, transformFunction: null }, disableFreeTextSearch: { classPropertyName: "disableFreeTextSearch", publicName: "disableFreeTextSearch", isSignal: true, isRequired: false, transformFunction: null }, typeaheadOptionsLimit: { classPropertyName: "typeaheadOptionsLimit", publicName: "typeaheadOptionsLimit", isSignal: true, isRequired: false, transformFunction: null }, disableSelectionByColonAndSemicolon: { classPropertyName: "disableSelectionByColonAndSemicolon", publicName: "disableSelectionByColonAndSemicolon", isSignal: true, isRequired: false, transformFunction: null }, freeTextCriterion: { classPropertyName: "freeTextCriterion", publicName: "freeTextCriterion", isSignal: true, isRequired: false, transformFunction: null }, searchForFreeTextLabel: { classPropertyName: "searchForFreeTextLabel", publicName: "searchForFreeTextLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { doSearch: "doSearch", searchCriteria: "searchCriteriaChange", interceptDisplayedCriteria: "interceptDisplayedCriteria" }, host: { properties: { "class.disabled": "disabled()", "class.dark-background": "colorVariant() === 'base-0'" } }, viewQueries: [{ propertyName: "freeTextInput", first: true, predicate: SiFilteredSearchInputComponent, descendants: true, isSignal: true }, { propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "valueComponents", predicate: SiFilteredSearchValueComponent, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  #scrollContainer\n  class=\"search-container d-flex align-items-center overflow-auto py-2 w-100 ps-2 pe-2\"\n>\n  @for (criterion of values(); track criterion) {\n    <si-filtered-search-value\n      [editOnCreation]=\"criterion.editOnCreation\"\n      [definition]=\"criterion.config\"\n      [value]=\"criterion.value\"\n      [initialValueText]=\"criterion.initialValueText\"\n      [invalidCriterion]=\"!validateCriterionLabel(criterion.config)\"\n      [disabled]=\"disabled()\"\n      [clearButtonLabel]=\"clearButtonLabel()\"\n      [disableSelectionByColonAndSemicolon]=\"disableSelectionByColonAndSemicolon()\"\n      [isStrictOrOnlySelectValue]=\"isStrictOrOnlySelectValue()\"\n      [itemCountText]=\"itemCountText()\"\n      [lazyValueProvider]=\"lazyValueProvider()\"\n      [maxCriteriaOptions]=\"maxCriteriaOptions()\"\n      [optionsInScrollableView]=\"optionsInScrollableView()\"\n      [searchLabel]=\"searchLabel()\"\n      [onlySelectValue]=\"onlySelectValue()\"\n      [searchDebounceTime]=\"searchDebounceTime()\"\n      [scrollStrategyFactory]=\"scrollStrategy()\"\n      (submitCriterion)=\"focusNext($index, $event)\"\n      (deleteCriterion)=\"deleteCriterion($index, $event)\"\n      (valueChange)=\"valueChange($event, criterion)\"\n    />\n  }\n  <!-- criterion input -->\n  <si-filtered-search-input\n    [dataSource]=\"dataSource\"\n    [typeaheadOptionsLimit]=\"typeaheadOptionsLimit()\"\n    [optionsInScrollableView]=\"optionsInScrollableView()\"\n    [disabled]=\"disabled()\"\n    [placeholder]=\"placeholder()\"\n    [searchLabel]=\"searchLabel()\"\n    [freeTextCriterion]=\"!!freeTextCriterion()\"\n    [maxCriteriaReached]=\"maxCriteriaReached()\"\n    [allowFreeText]=\"allowFreeTextCache()\"\n    [searchForFreeTextLabel]=\"searchForFreeTextLabel()\"\n    [scrollStrategyFactory]=\"scrollStrategy()\"\n    [disableSelectionByColonAndSemicolon]=\"disableSelectionByColonAndSemicolon()\"\n    [onlySelectValue]=\"onlySelectValue()\"\n    [(searchValue)]=\"searchValue\"\n    (createCriterion)=\"onCreateCriterion($event)\"\n    (createCriterionByName)=\"onCreateCriterionByName($event)\"\n    (backspaceOverflow)=\"freeTextBackspace()\"\n    (createFreeTextPill)=\"createFreeTextPill($event)\"\n    (searchValueChange)=\"onSearchValueChange()\"\n    (inputFocus)=\"freeTextFocus()\"\n    (enterSubmit)=\"submit()\"\n  />\n</div>\n<!-- clear all searchCriteria -->\n@if (values().length || searchValue().length) {\n  <div class=\"clear-button-container\">\n    <button\n      type=\"button\"\n      class=\"btn btn-icon btn-sm btn-tertiary-ghost mx-2\"\n      [disabled]=\"disabled()\"\n      [attr.aria-label]=\"clearButtonLabel() | translate\"\n      (click)=\"deleteAllCriteria($event)\"\n    >\n      <si-icon [icon]=\"icons.elementCancel\" />\n    </button>\n  </div>\n}\n\n@if (!disabled()) {\n  <button\n    type=\"button\"\n    class=\"search-button btn btn-icon btn-sm btn-secondary focus-inside\"\n    [disabled]=\"disabled()\"\n    [attr.aria-label]=\"submitButtonLabel() | translate\"\n    (click)=\"submit()\"\n  >\n    <si-icon [icon]=\"icons.elementSearch\" />\n  </button>\n}\n", styles: [":host{--search-bar-icon-color: var(--si-sys-color-text-primary);--input-background-color: var(--si-sys-color-background-1);--input-background-hover-color: var(--si-sys-color-background-1);--filter-search-background-color: var(--si-sys-color-background-1);--filter-pill-background-color: var(--si-sys-color-background-2)}:host.dark-background{--input-background-color: var(--si-sys-color-background-2);--input-background-hover-color: var(--si-sys-color-background-hover);--filter-search-background-color: var(--si-sys-color-background-2);--filter-pill-background-color: var(--si-sys-color-background-1)}:host{display:flex;align-items:center;block-size:fit-content;line-height:var(--si-sys-sizing-spacing-y-80);min-inline-size:0}:host.disabled{color:var(--si-sys-color-text-disabled)}.search-container{border-start-start-radius:4px;border-end-start-radius:4px;background-color:var(--filter-search-background-color);gap:var(--si-sys-sizing-spacing-y-20) var(--si-sys-sizing-spacing-x-20)}.clear-button-container{display:flex;align-items:flex-start;align-self:stretch;padding-block:var(--si-sys-sizing-spacing-y-20);background-color:var(--filter-search-background-color)}.search-button{align-self:stretch;background-color:var(--filter-search-background-color);border:0;border-radius:0;border-end-end-radius:4px;border-start-end-radius:4px;margin-block:0;margin-inline:1px 0;aspect-ratio:auto;block-size:auto;inline-size:auto;padding-inline:var(--si-sys-sizing-spacing-y-20)!important}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiFilteredSearchInputComponent, selector: "si-filtered-search-input", inputs: ["dataSource", "typeaheadOptionsLimit", "optionsInScrollableView", "disabled", "placeholder", "searchLabel", "scrollStrategyFactory", "searchValue", "freeTextCriterion", "maxCriteriaReached", "allowFreeText", "searchForFreeTextLabel", "disableSelectionByColonAndSemicolon", "onlySelectValue"], outputs: ["searchValueChange", "createCriterion", "createCriterionByName", "backspaceOverflow", "createFreeTextPill", "inputFocus", "enterSubmit"] }, { kind: "component", type: SiFilteredSearchValueComponent, selector: "si-filtered-search-value", inputs: ["value", "initialValueText", "definition", "disabled", "onlySelectValue", "maxCriteriaOptions", "optionsInScrollableView", "clearButtonLabel", "lazyValueProvider", "searchDebounceTime", "itemCountText", "disableSelectionByColonAndSemicolon", "searchLabel", "invalidCriterion", "isStrictOrOnlySelectValue", "editOnCreation", "scrollStrategyFactory"], outputs: ["valueChange", "deleteCriterion", "submitCriterion"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFilteredSearchComponent, decorators: [{
             type: Component,
@@ -1410,7 +1509,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                     ], changeDetection: ChangeDetectionStrategy.Eager, host: {
                         '[class.disabled]': 'disabled()',
                         '[class.dark-background]': "colorVariant() === 'base-0'"
-                    }, template: "<div\n  #scrollContainer\n  class=\"search-container d-flex align-items-center overflow-auto py-2 w-100 ps-2 pe-2\"\n>\n  @for (criterion of values(); track criterion) {\n    <si-filtered-search-value\n      [editOnCreation]=\"autoEditCriteria\"\n      [definition]=\"criterion.config\"\n      [value]=\"criterion.value\"\n      [invalidCriterion]=\"!validateCriterionLabel(criterion.config)\"\n      [disabled]=\"disabled()\"\n      [clearButtonLabel]=\"clearButtonLabel()\"\n      [disableSelectionByColonAndSemicolon]=\"disableSelectionByColonAndSemicolon()\"\n      [isStrictOrOnlySelectValue]=\"isStrictOrOnlySelectValue()\"\n      [itemCountText]=\"itemCountText()\"\n      [lazyValueProvider]=\"lazyValueProvider()\"\n      [maxCriteriaOptions]=\"maxCriteriaOptions()\"\n      [optionsInScrollableView]=\"optionsInScrollableView()\"\n      [searchLabel]=\"searchLabel()\"\n      [onlySelectValue]=\"onlySelectValue()\"\n      [searchDebounceTime]=\"searchDebounceTime()\"\n      [scrollStrategyFactory]=\"scrollStrategy()\"\n      (submitCriterion)=\"focusNext($index, $event)\"\n      (deleteCriterion)=\"deleteCriterion($index, $event)\"\n      (valueChange)=\"valueChange($event, criterion)\"\n    />\n  }\n  <!-- criterion input -->\n  <si-filtered-search-input\n    [dataSource]=\"dataSource\"\n    [typeaheadOptionsLimit]=\"typeaheadOptionsLimit()\"\n    [optionsInScrollableView]=\"optionsInScrollableView()\"\n    [disabled]=\"disabled()\"\n    [placeholder]=\"placeholder()\"\n    [searchLabel]=\"searchLabel()\"\n    [freeTextCriterion]=\"!!freeTextCriterion()\"\n    [maxCriteriaReached]=\"!!maxCriteria() && values().length >= maxCriteria()!\"\n    [allowFreeText]=\"allowFreeTextCache()\"\n    [searchForFreeTextLabel]=\"searchForFreeTextLabel()\"\n    [scrollStrategyFactory]=\"scrollStrategy()\"\n    [disableSelectionByColonAndSemicolon]=\"disableSelectionByColonAndSemicolon()\"\n    [onlySelectValue]=\"onlySelectValue()\"\n    [(searchValue)]=\"searchValue\"\n    (createCriterion)=\"onCreateCriterion($event)\"\n    (createCriterionByName)=\"onCreateCriterionByName($event)\"\n    (backspaceOverflow)=\"freeTextBackspace()\"\n    (createFreeTextPill)=\"createFreeTextPill($event)\"\n    (searchValueChange)=\"onSearchValueChange()\"\n    (inputFocus)=\"freeTextFocus()\"\n    (enterSubmit)=\"submit()\"\n  />\n</div>\n<!-- clear all searchCriteria -->\n@if (values().length || searchValue().length) {\n  <div class=\"clear-button-container\">\n    <button\n      type=\"button\"\n      class=\"btn btn-icon btn-sm btn-tertiary-ghost mx-2\"\n      [disabled]=\"disabled()\"\n      [attr.aria-label]=\"clearButtonLabel() | translate\"\n      (click)=\"deleteAllCriteria($event)\"\n    >\n      <si-icon [icon]=\"icons.elementCancel\" />\n    </button>\n  </div>\n}\n\n@if (!disabled()) {\n  <button\n    type=\"button\"\n    class=\"search-button btn btn-icon btn-sm btn-secondary focus-inside\"\n    [disabled]=\"disabled()\"\n    [attr.aria-label]=\"submitButtonLabel() | translate\"\n    (click)=\"submit()\"\n  >\n    <si-icon [icon]=\"icons.elementSearch\" />\n  </button>\n}\n", styles: [":host{--search-bar-icon-color: var(--si-sys-color-text-primary);--input-background-color: var(--si-sys-color-background-1);--input-background-hover-color: var(--si-sys-color-background-1);--filter-search-background-color: var(--si-sys-color-background-1);--filter-pill-background-color: var(--si-sys-color-background-2)}:host.dark-background{--input-background-color: var(--si-sys-color-background-2);--input-background-hover-color: var(--si-sys-color-background-hover);--filter-search-background-color: var(--si-sys-color-background-2);--filter-pill-background-color: var(--si-sys-color-background-1)}:host{display:flex;align-items:center;block-size:fit-content;line-height:var(--si-sys-sizing-spacing-y-80);min-inline-size:0}:host.disabled{color:var(--si-sys-color-text-disabled)}.search-container{border-start-start-radius:4px;border-end-start-radius:4px;background-color:var(--filter-search-background-color);gap:var(--si-sys-sizing-spacing-y-20) var(--si-sys-sizing-spacing-x-20)}.clear-button-container{display:flex;align-items:flex-start;align-self:stretch;padding-block:var(--si-sys-sizing-spacing-y-20);background-color:var(--filter-search-background-color)}.search-button{align-self:stretch;background-color:var(--filter-search-background-color);border:0;border-radius:0;border-end-end-radius:4px;border-start-end-radius:4px;margin-block:0;margin-inline:1px 0;aspect-ratio:auto;block-size:auto;inline-size:auto;padding-inline:var(--si-sys-sizing-spacing-y-20)!important}\n"] }]
+                    }, template: "<div\n  #scrollContainer\n  class=\"search-container d-flex align-items-center overflow-auto py-2 w-100 ps-2 pe-2\"\n>\n  @for (criterion of values(); track criterion) {\n    <si-filtered-search-value\n      [editOnCreation]=\"criterion.editOnCreation\"\n      [definition]=\"criterion.config\"\n      [value]=\"criterion.value\"\n      [initialValueText]=\"criterion.initialValueText\"\n      [invalidCriterion]=\"!validateCriterionLabel(criterion.config)\"\n      [disabled]=\"disabled()\"\n      [clearButtonLabel]=\"clearButtonLabel()\"\n      [disableSelectionByColonAndSemicolon]=\"disableSelectionByColonAndSemicolon()\"\n      [isStrictOrOnlySelectValue]=\"isStrictOrOnlySelectValue()\"\n      [itemCountText]=\"itemCountText()\"\n      [lazyValueProvider]=\"lazyValueProvider()\"\n      [maxCriteriaOptions]=\"maxCriteriaOptions()\"\n      [optionsInScrollableView]=\"optionsInScrollableView()\"\n      [searchLabel]=\"searchLabel()\"\n      [onlySelectValue]=\"onlySelectValue()\"\n      [searchDebounceTime]=\"searchDebounceTime()\"\n      [scrollStrategyFactory]=\"scrollStrategy()\"\n      (submitCriterion)=\"focusNext($index, $event)\"\n      (deleteCriterion)=\"deleteCriterion($index, $event)\"\n      (valueChange)=\"valueChange($event, criterion)\"\n    />\n  }\n  <!-- criterion input -->\n  <si-filtered-search-input\n    [dataSource]=\"dataSource\"\n    [typeaheadOptionsLimit]=\"typeaheadOptionsLimit()\"\n    [optionsInScrollableView]=\"optionsInScrollableView()\"\n    [disabled]=\"disabled()\"\n    [placeholder]=\"placeholder()\"\n    [searchLabel]=\"searchLabel()\"\n    [freeTextCriterion]=\"!!freeTextCriterion()\"\n    [maxCriteriaReached]=\"maxCriteriaReached()\"\n    [allowFreeText]=\"allowFreeTextCache()\"\n    [searchForFreeTextLabel]=\"searchForFreeTextLabel()\"\n    [scrollStrategyFactory]=\"scrollStrategy()\"\n    [disableSelectionByColonAndSemicolon]=\"disableSelectionByColonAndSemicolon()\"\n    [onlySelectValue]=\"onlySelectValue()\"\n    [(searchValue)]=\"searchValue\"\n    (createCriterion)=\"onCreateCriterion($event)\"\n    (createCriterionByName)=\"onCreateCriterionByName($event)\"\n    (backspaceOverflow)=\"freeTextBackspace()\"\n    (createFreeTextPill)=\"createFreeTextPill($event)\"\n    (searchValueChange)=\"onSearchValueChange()\"\n    (inputFocus)=\"freeTextFocus()\"\n    (enterSubmit)=\"submit()\"\n  />\n</div>\n<!-- clear all searchCriteria -->\n@if (values().length || searchValue().length) {\n  <div class=\"clear-button-container\">\n    <button\n      type=\"button\"\n      class=\"btn btn-icon btn-sm btn-tertiary-ghost mx-2\"\n      [disabled]=\"disabled()\"\n      [attr.aria-label]=\"clearButtonLabel() | translate\"\n      (click)=\"deleteAllCriteria($event)\"\n    >\n      <si-icon [icon]=\"icons.elementCancel\" />\n    </button>\n  </div>\n}\n\n@if (!disabled()) {\n  <button\n    type=\"button\"\n    class=\"search-button btn btn-icon btn-sm btn-secondary focus-inside\"\n    [disabled]=\"disabled()\"\n    [attr.aria-label]=\"submitButtonLabel() | translate\"\n    (click)=\"submit()\"\n  >\n    <si-icon [icon]=\"icons.elementSearch\" />\n  </button>\n}\n", styles: [":host{--search-bar-icon-color: var(--si-sys-color-text-primary);--input-background-color: var(--si-sys-color-background-1);--input-background-hover-color: var(--si-sys-color-background-1);--filter-search-background-color: var(--si-sys-color-background-1);--filter-pill-background-color: var(--si-sys-color-background-2)}:host.dark-background{--input-background-color: var(--si-sys-color-background-2);--input-background-hover-color: var(--si-sys-color-background-hover);--filter-search-background-color: var(--si-sys-color-background-2);--filter-pill-background-color: var(--si-sys-color-background-1)}:host{display:flex;align-items:center;block-size:fit-content;line-height:var(--si-sys-sizing-spacing-y-80);min-inline-size:0}:host.disabled{color:var(--si-sys-color-text-disabled)}.search-container{border-start-start-radius:4px;border-end-start-radius:4px;background-color:var(--filter-search-background-color);gap:var(--si-sys-sizing-spacing-y-20) var(--si-sys-sizing-spacing-x-20)}.clear-button-container{display:flex;align-items:flex-start;align-self:stretch;padding-block:var(--si-sys-sizing-spacing-y-20);background-color:var(--filter-search-background-color)}.search-button{align-self:stretch;background-color:var(--filter-search-background-color);border:0;border-radius:0;border-end-end-radius:4px;border-start-end-radius:4px;margin-block:0;margin-inline:1px 0;aspect-ratio:auto;block-size:auto;inline-size:auto;padding-inline:var(--si-sys-sizing-spacing-y-20)!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { scrollStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollStrategy", required: false }] }], doSearch: [{ type: i0.Output, args: ["doSearch"] }], doSearchOnInputChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "doSearchOnInputChange", required: false }] }], lazyCriterionProvider: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazyCriterionProvider", required: false }] }], lazyValueProvider: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazyValueProvider", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], strictCriterion: [{ type: i0.Input, args: [{ isSignal: true, alias: "strictCriterion", required: false }] }], strictValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "strictValue", required: false }] }], onlySelectValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "onlySelectValue", required: false }] }], lazyLoadingDebounceTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazyLoadingDebounceTime", required: false }] }], searchDebounceTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchDebounceTime", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], optionsInScrollableView: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsInScrollableView", required: false }] }], searchCriteria: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchCriteria", required: false }] }, { type: i0.Output, args: ["searchCriteriaChange"] }], criteria: [{ type: i0.Input, args: [{ isSignal: true, alias: "criteria", required: false }] }], exclusiveCriteria: [{ type: i0.Input, args: [{ isSignal: true, alias: "exclusiveCriteria", required: false }] }], maxCriteria: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxCriteria", required: false }] }], maxCriteriaOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxCriteriaOptions", required: false }] }], searchLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchLabel", required: false }] }], clearButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearButtonLabel", required: false }] }], submitButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitButtonLabel", required: false }] }], itemCountText: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemCountText", required: false }] }], colorVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorVariant", required: false }] }], disableFreeTextSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableFreeTextSearch", required: false }] }], typeaheadOptionsLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeaheadOptionsLimit", required: false }] }], disableSelectionByColonAndSemicolon: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableSelectionByColonAndSemicolon", required: false }] }], freeTextCriterion: [{ type: i0.Input, args: [{ isSignal: true, alias: "freeTextCriterion", required: false }] }], searchForFreeTextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchForFreeTextLabel", required: false }] }], interceptDisplayedCriteria: [{ type: i0.Output, args: ["interceptDisplayedCriteria"] }], freeTextInput: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SiFilteredSearchInputComponent), { isSignal: true }] }], scrollContainer: [{ type: i0.ViewChild, args: ['scrollContainer', { ...{ read: ElementRef }, isSignal: true }] }], valueComponents: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => SiFilteredSearchValueComponent), { isSignal: true }] }] } });
 
 /**