@siemens/element-ng 49.4.0 → 49.5.0

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

@@ -1,17 +1,17 @@
 import * as i0 from '@angular/core';
-import { model, input, output, signal, Directive, inject, LOCALE_ID, viewChild, computed, ChangeDetectionStrategy, Component, DestroyRef, untracked, booleanAttribute, ElementRef, viewChildren, ChangeDetectorRef, NgModule } from '@angular/core';
+import { input, model, output, viewChild, computed, ChangeDetectionStrategy, Component, signal, Directive, inject, LOCALE_ID, DestroyRef, untracked, booleanAttribute, ElementRef, viewChildren, NgModule } from '@angular/core';
 import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
-import * as i1 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
 import { elementCancel, elementSearch } from '@siemens/element-icons';
 import { isRTL } from '@siemens/element-ng/common';
 import { addIcons, SiIconComponent } from '@siemens/element-ng/icon';
-import { SiTypeaheadDirective } from '@siemens/element-ng/typeahead';
 import { SiTranslatePipe, injectSiTranslateService, t } from '@siemens/element-translate-ng/translate';
-import { BehaviorSubject, switchMap, of, Subject } from 'rxjs';
+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 { SiTypeaheadDirective } from '@siemens/element-ng/typeahead';
 import { CdkMonitorFocus } from '@angular/cdk/a11y';
 
 /**
@@ -53,6 +53,85 @@ const getISODateString = (date, format, locale) => {
     }
 };
 
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+class SiFilteredSearchInputComponent {
+    static criterionRegex = /(.+?):(.*)$/;
+    dataSource = input.required(...(ngDevMode ? [{ debugName: "dataSource" }] : []));
+    typeaheadOptionsLimit = input.required(...(ngDevMode ? [{ debugName: "typeaheadOptionsLimit" }] : []));
+    optionsInScrollableView = input.required(...(ngDevMode ? [{ debugName: "optionsInScrollableView" }] : []));
+    disabled = input.required(...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    placeholder = input.required(...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    searchLabel = input.required(...(ngDevMode ? [{ debugName: "searchLabel" }] : []));
+    searchValue = model.required(...(ngDevMode ? [{ debugName: "searchValue" }] : []));
+    freeTextCriterion = input.required(...(ngDevMode ? [{ debugName: "freeTextCriterion" }] : []));
+    maxCriteriaReached = input.required(...(ngDevMode ? [{ debugName: "maxCriteriaReached" }] : []));
+    allowFreeText = input.required(...(ngDevMode ? [{ debugName: "allowFreeText" }] : []));
+    searchForFreeTextLabel = input.required(...(ngDevMode ? [{ debugName: "searchForFreeTextLabel" }] : []));
+    disableSelectionByColonAndSemicolon = input.required(...(ngDevMode ? [{ debugName: "disableSelectionByColonAndSemicolon" }] : []));
+    onlySelectValue = input.required(...(ngDevMode ? [{ debugName: "onlySelectValue" }] : []));
+    createCriterion = output();
+    createCriterionByName = output();
+    backspaceOverflow = output();
+    createFreeTextPill = output();
+    inputFocus = output();
+    enterSubmit = output();
+    inputElement = viewChild.required('freeTextInputElement');
+    /** Public method to focus the input element */
+    focus() {
+        this.inputElement().nativeElement.focus();
+    }
+    typeaheadCreateOption = computed(() => this.freeTextCriterion() && !this.maxCriteriaReached() && this.allowFreeText()
+        ? this.searchForFreeTextLabel()
+        : undefined, ...(ngDevMode ? [{ debugName: "typeaheadCreateOption" }] : []));
+    freeTextBackspaceHandler(event) {
+        if (!event.target.value) {
+            this.backspaceOverflow.emit();
+        }
+    }
+    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] });
+        }
+        else {
+            this.searchValue.set(value);
+        }
+    }
+    freeTextBlurHandler() {
+        queueMicrotask(() => {
+            if (this.freeTextCriterion() && this.searchValue().length > 0) {
+                this.createFreeTextPill.emit(this.searchValue());
+            }
+        });
+    }
+    typeaheadOnSelectCriterionHandler(event) {
+        const criterion = event;
+        // 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('');
+    }
+    createFreeTextPillHandler(query) {
+        this.createFreeTextPill.emit(query);
+        this.searchValue.set('');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFilteredSearchInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.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 }, 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  [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: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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFilteredSearchInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-filtered-search-input', imports: [FormsModule, SiTypeaheadDirective, SiTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, 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  [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: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 }] }], 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 }] }] } });
+
 /**
  * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
@@ -365,7 +444,7 @@ class SiFilteredSearchTypeaheadComponent extends SiFilteredSearchOptionValueBase
         this.buildOptionValue();
     }
     valueChange(newValue) {
-        if (typeof newValue === 'string') {
+        if (typeof newValue === 'string' && this.criterionValue().value !== newValue) {
             const match = newValue.match(/(.+?);(.*)$/);
             let value;
             if (!this.disableSelectionByColonAndSemicolon() && match) {
@@ -383,13 +462,7 @@ class SiFilteredSearchTypeaheadComponent extends SiFilteredSearchOptionValueBase
     valueTypeaheadFullMatch(match) {
         const option = match.option;
         this.optionValue.set(option);
-        // Usually, we already emitted a change in onCriterionValueInputChange using the text entered by the user.
-        // In case of a fullMatch, we should check if the value is different from label.
-        // If it is different, we must emit another event using the value instead of the label.
-        // TODO: prevent the emit of the label matching the option. This is currently not possible due to the order events.
-        if (option.value !== option.translatedLabel) {
-            this.criterionValue.update(v => ({ ...v, value: option.value }));
-        }
+        this.criterionValue.update(v => ({ ...v, value: option.value }));
     }
     valueTypeaheadSelect(match) {
         this.valueTypeaheadFullMatch(match);
@@ -421,13 +494,13 @@ class SiFilteredSearchTypeaheadComponent extends SiFilteredSearchOptionValueBase
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFilteredSearchTypeaheadComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiFilteredSearchTypeaheadComponent, isStandalone: true, selector: "si-filtered-search-typeahead", providers: [
             { provide: SiFilteredSearchValueBase, useExisting: SiFilteredSearchTypeaheadComponent }
-        ], viewQueries: [{ propertyName: "valueInput", first: true, predicate: ["valueInput"], descendants: true, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let value = criterionValue().value;\n@if (!active()) {\n  <div\n    class=\"criterion-value-text focus-inside px-4\"\n    [tabindex]=\"disabled() ? -1 : 0\"\n    (keydown.enter)=\"editValue.emit()\"\n    (click)=\"editValue.emit()\"\n  >\n    @let optionValue = this.optionValue();\n    @if (optionValue) {\n      {{ optionValue.label ?? optionValue.value | translate }}\n    } @else {\n      {{ value }}\n    }\n  </div>\n} @else {\n  <input\n    #valueInput\n    typeaheadOptionField=\"translatedLabel\"\n    class=\"px-4 py-0 border-0 focus-inside\"\n    typeaheadScrollable\n    [type]=\"inputType()\"\n    [step]=\"step()\"\n    [ngModel]=\"valueLabel()\"\n    [siTypeahead]=\"options() ?? []\"\n    [typeaheadProcess]=\"!onlySelectValue()\"\n    [typeaheadMinLength]=\"0\"\n    [typeaheadOptionsLimit]=\"maxCriteriaOptions()\"\n    [typeaheadAutoSelectIndex]=\"value?.length ? 0 : -1\"\n    [readOnly]=\"onlySelectValue() || definition().onlySelectValue\"\n    [typeaheadOptionsInScrollableView]=\"optionsInScrollableView()\"\n    [attr.aria-label]=\"searchLabel() | translate\"\n    (keydown)=\"valueFilterKeys($event)\"\n    (keydown.backspace)=\"valueBackspace()\"\n    (keydown.enter)=\"valueEnter()\"\n    (ngModelChange)=\"valueChange($event)\"\n    (typeaheadOnFullMatch)=\"valueTypeaheadFullMatch($event)\"\n    (typeaheadOnSelect)=\"valueTypeaheadSelect($event)\"\n  />\n}\n", styles: ["input{background:transparent;-moz-appearance:textfield}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}\n"], dependencies: [{ kind: "directive", type: SiTypeaheadDirective, selector: "[siTypeahead]", inputs: ["siTypeahead", "typeaheadProcess", "typeaheadScrollable", "typeaheadOptionsInScrollableView", "typeaheadOptionsLimit", "typeaheadScrollableAdditionalHeight", "typeaheadAutoSelectIndex", "typeaheadCloseOnEsc", "typeaheadClearValueOnSelect", "typeaheadWaitMs", "typeaheadMinLength", "typeaheadOptionField", "typeaheadMultiSelect", "typeaheadTokenize", "typeaheadMatchAllTokens", "typeaheadItemTemplate", "typeaheadSkipSortingMatches", "typeaheadAutocompleteListLabel", "typeaheadFullWidth", "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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "valueInput", first: true, predicate: ["valueInput"], descendants: true, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let value = criterionValue().value;\n@if (!active()) {\n  <div\n    class=\"criterion-value-text focus-inside px-4\"\n    [tabindex]=\"disabled() ? -1 : 0\"\n    (keydown.enter)=\"editValue.emit()\"\n    (click)=\"editValue.emit()\"\n  >\n    @let optionValue = this.optionValue();\n    @if (optionValue) {\n      {{ optionValue.label ?? optionValue.value | translate }}\n    } @else {\n      {{ value }}\n    }\n  </div>\n} @else {\n  <input\n    #valueInput\n    typeaheadOptionField=\"translatedLabel\"\n    class=\"px-4 py-0 border-0 focus-inside\"\n    typeaheadScrollable\n    [type]=\"inputType()\"\n    [step]=\"step()\"\n    [value]=\"valueLabel()\"\n    [siTypeahead]=\"options() ?? []\"\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}\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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFilteredSearchTypeaheadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-filtered-search-typeahead', imports: [SiTypeaheadDirective, FormsModule, SiTranslatePipe], providers: [
+            args: [{ selector: 'si-filtered-search-typeahead', imports: [SiTypeaheadDirective, SiTranslatePipe], providers: [
                         { provide: SiFilteredSearchValueBase, useExisting: SiFilteredSearchTypeaheadComponent }
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let value = criterionValue().value;\n@if (!active()) {\n  <div\n    class=\"criterion-value-text focus-inside px-4\"\n    [tabindex]=\"disabled() ? -1 : 0\"\n    (keydown.enter)=\"editValue.emit()\"\n    (click)=\"editValue.emit()\"\n  >\n    @let optionValue = this.optionValue();\n    @if (optionValue) {\n      {{ optionValue.label ?? optionValue.value | translate }}\n    } @else {\n      {{ value }}\n    }\n  </div>\n} @else {\n  <input\n    #valueInput\n    typeaheadOptionField=\"translatedLabel\"\n    class=\"px-4 py-0 border-0 focus-inside\"\n    typeaheadScrollable\n    [type]=\"inputType()\"\n    [step]=\"step()\"\n    [ngModel]=\"valueLabel()\"\n    [siTypeahead]=\"options() ?? []\"\n    [typeaheadProcess]=\"!onlySelectValue()\"\n    [typeaheadMinLength]=\"0\"\n    [typeaheadOptionsLimit]=\"maxCriteriaOptions()\"\n    [typeaheadAutoSelectIndex]=\"value?.length ? 0 : -1\"\n    [readOnly]=\"onlySelectValue() || definition().onlySelectValue\"\n    [typeaheadOptionsInScrollableView]=\"optionsInScrollableView()\"\n    [attr.aria-label]=\"searchLabel() | translate\"\n    (keydown)=\"valueFilterKeys($event)\"\n    (keydown.backspace)=\"valueBackspace()\"\n    (keydown.enter)=\"valueEnter()\"\n    (ngModelChange)=\"valueChange($event)\"\n    (typeaheadOnFullMatch)=\"valueTypeaheadFullMatch($event)\"\n    (typeaheadOnSelect)=\"valueTypeaheadSelect($event)\"\n  />\n}\n", styles: ["input{background:transparent;-moz-appearance:textfield}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let value = criterionValue().value;\n@if (!active()) {\n  <div\n    class=\"criterion-value-text focus-inside px-4\"\n    [tabindex]=\"disabled() ? -1 : 0\"\n    (keydown.enter)=\"editValue.emit()\"\n    (click)=\"editValue.emit()\"\n  >\n    @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    [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}\n"] }]
         }], propDecorators: { valueInput: [{ type: i0.ViewChild, args: ['valueInput', { isSignal: true }] }] } });
 
 /**
@@ -565,7 +638,7 @@ class SiFilteredSearchValueComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFilteredSearchValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.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 } }, 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          [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        [(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        [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        [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-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: [":host-context(.disabled) input,:host-context(.disabled) ::placeholder{color:var(--element-text-disabled)}.pill{background:var(--filter-pill-background-color)}.criteria{display:flex;cursor:pointer;white-space:nowrap;border-radius:12px}.criteria.invalid-criterion{box-shadow:0 0 0 1px var(--element-status-danger)}.criteria:not(.invalid-criterion) .invalid-criterion{box-shadow:inset 0 0 0 1px var(--element-status-danger)}.criteria.disabled{cursor:inherit;pointer-events:none}.operator-input{background:var(--filter-pill-background-color);padding-inline:4px;inline-size:calc(1ch + 8px)}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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SiFilteredSearchDateValueComponent, selector: "si-filtered-search-date-value" }, { kind: "component", type: SiFilteredSearchFreeTextComponent, selector: "si-filtered-search-free-text" }, { kind: "component", type: SiFilteredSearchTypeaheadComponent, selector: "si-filtered-search-typeahead" }, { kind: "component", type: SiFilteredSearchMultiSelectComponent, selector: "si-filtered-search-multi-select", inputs: ["itemCountText"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.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 } }, 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          [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        [(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        [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        [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-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: [".pill{background:var(--filter-pill-background-color)}.criteria{display:flex;cursor:pointer;white-space:nowrap;border-radius:12px}.criteria.invalid-criterion{box-shadow:0 0 0 1px var(--element-status-danger)}.criteria:not(.invalid-criterion) .invalid-criterion{box-shadow:inset 0 0 0 1px var(--element-status-danger)}.criteria.disabled{cursor:inherit;pointer-events:none}.operator-input{background:var(--filter-pill-background-color);padding-inline:4px;inline-size:calc(1ch + 8px)}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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SiFilteredSearchDateValueComponent, selector: "si-filtered-search-date-value" }, { kind: "component", type: SiFilteredSearchFreeTextComponent, selector: "si-filtered-search-free-text" }, { kind: "component", type: SiFilteredSearchTypeaheadComponent, selector: "si-filtered-search-typeahead" }, { kind: "component", type: SiFilteredSearchMultiSelectComponent, selector: "si-filtered-search-multi-select", inputs: ["itemCountText"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFilteredSearchValueComponent, decorators: [{
             type: Component,
@@ -579,7 +652,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         SiFilteredSearchTypeaheadComponent,
                         SiFilteredSearchMultiSelectComponent,
                         SiIconComponent
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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          [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        [(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        [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        [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-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: [":host-context(.disabled) input,:host-context(.disabled) ::placeholder{color:var(--element-text-disabled)}.pill{background:var(--filter-pill-background-color)}.criteria{display:flex;cursor:pointer;white-space:nowrap;border-radius:12px}.criteria.invalid-criterion{box-shadow:0 0 0 1px var(--element-status-danger)}.criteria:not(.invalid-criterion) .invalid-criterion{box-shadow:inset 0 0 0 1px var(--element-status-danger)}.criteria.disabled{cursor:inherit;pointer-events:none}.operator-input{background:var(--filter-pill-background-color);padding-inline:4px;inline-size:calc(1ch + 8px)}input{background:transparent}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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          [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        [(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        [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        [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-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: [".pill{background:var(--filter-pill-background-color)}.criteria{display:flex;cursor:pointer;white-space:nowrap;border-radius:12px}.criteria.invalid-criterion{box-shadow:0 0 0 1px var(--element-status-danger)}.criteria:not(.invalid-criterion) .invalid-criterion{box-shadow:inset 0 0 0 1px var(--element-status-danger)}.criteria.disabled{cursor:inherit;pointer-events:none}.operator-input{background:var(--filter-pill-background-color);padding-inline:4px;inline-size:calc(1ch + 8px)}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 }] }], 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 }] }] } });
 
 /**
@@ -587,7 +660,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  * SPDX-License-Identifier: MIT
  */
 class SiFilteredSearchComponent {
-    static criterionRegex = /(.+?):(.*)$/;
     /**
      * Output callback event that provides an object describing the
      * selected criteria and additional filter text.
@@ -806,7 +878,7 @@ class SiFilteredSearchComponent {
      * ```
      */
     interceptDisplayedCriteria = output();
-    freeTextInputElement = viewChild.required('freeTextInputElement');
+    freeTextInput = viewChild.required(SiFilteredSearchInputComponent);
     scrollContainer = viewChild.required('scrollContainer', { read: ElementRef });
     valueComponents = viewChildren(SiFilteredSearchValueComponent, ...(ngDevMode ? [{ debugName: "valueComponents" }] : []));
     dataSource;
@@ -816,14 +888,12 @@ class SiFilteredSearchComponent {
     /** Internal criteria model */
     internalCriterionDefinitions = [];
     icons = addIcons({ elementCancel, elementSearch });
-    /** Used to trigger a renewed search */
-    typeaheadInputChange = new BehaviorSubject('');
     /** Used to debounce the Search emissions */
     searchEmitQueue = new Subject();
     destroyRef = inject(DestroyRef);
-    cdRef = inject(ChangeDetectorRef);
     translateService = injectSiTranslateService();
     locale = inject(LOCALE_ID).toString();
+    freeTextFocused = new Subject();
     allowFreeTextCache = signal(true, ...(ngDevMode ? [{ debugName: "allowFreeTextCache" }] : []));
     // Angular also calls ngOnChanges if we emitted a change and then two-way-databinding writes back our own change.
     // We use this to ensure that we do not write our own change back to the input.
@@ -857,6 +927,7 @@ class SiFilteredSearchComponent {
         };
     }, ...(ngDevMode ? [{ debugName: "internalFreeTextCriterion" }] : []));
     constructor() {
+        const typeaheadInputChange = merge(toObservable(this.searchValue), this.freeTextFocused.pipe(map(() => this.searchValue())));
         const criteriaRestrictions = toObservable(computed(() => ({
             maxCriteria: this.maxCriteria(),
             values: this.values(),
@@ -864,7 +935,7 @@ class SiFilteredSearchComponent {
         })));
         this.dataSource = toObservable(this.lazyCriterionProvider).pipe(switchMap(lazyCriterionProvider => {
             if (lazyCriterionProvider) {
-                return this.typeaheadInputChange.pipe(switchMap(value => this.lazyCriterionProvider()(value, this.searchCriteria()).pipe(debounceTime(this.lazyLoadingDebounceTime()), map(result => this.getCriteriaToDisplayFromSubscription(result)))));
+                return typeaheadInputChange.pipe(switchMap(value => this.lazyCriterionProvider()(value, this.searchCriteria()).pipe(debounceTime(this.lazyLoadingDebounceTime()), map(result => this.getCriteriaToDisplayFromSubscription(result)))));
             }
             else {
                 return criteriaRestrictions.pipe(map(({ maxCriteria, values, exclusiveCriteria }) => this.getFilteredTypeaheadCriteria(maxCriteria, values, exclusiveCriteria)));
@@ -883,9 +954,6 @@ class SiFilteredSearchComponent {
         if ((changes.searchCriteria && this.searchCriteria() !== this.lastEmittedSearchCriteria) ||
             changes.criteria) {
             this.initValue();
-            // Update typeahead since the criteria input can change while the free text input is focused.
-            // This is necessary since the criteria are set as a result of an API call response.
-            this.typeaheadInputChange.next(this.freeTextInputElement().nativeElement.value ?? '');
         }
     }
     ngOnInit() {
@@ -962,7 +1030,6 @@ class SiFilteredSearchComponent {
         this.values.set([]);
         this.searchValue.set('');
         this.emitChangeEvent();
-        this.typeaheadInputChange.next(this.searchValue());
         this.submit();
     }
     deleteCriterion(index, event) {
@@ -975,16 +1042,14 @@ class SiFilteredSearchComponent {
         this.valueComponents().forEach(component => {
             component.closeOverlay();
         });
-        this.cdRef.detectChanges();
         this.values.update(v => v.filter((_, i) => i !== index));
         this.emitChangeEvent();
         if (this.values().length !== index) {
             this.valueComponents()[index + 1].edit('value');
         }
         else {
-            this.freeTextInputElement().nativeElement.focus();
+            this.freeTextInput().focus();
         }
-        this.typeaheadInputChange.next(this.searchValue());
         if (event?.triggerSearch) {
             this.submit();
         }
@@ -994,15 +1059,6 @@ class SiFilteredSearchComponent {
             this.doSearch.emit(this.searchCriteria());
         }
     }
-    typeaheadOnSelectCriterion(event) {
-        const criterion = event;
-        // Removes the focus border before creating a new criterion to prevent the impression of jumping content.
-        this.freeTextInputElement().nativeElement.blur();
-        this.addCriterion(criterion);
-        // The user selected a criterion so we remove the free text search value and add the criterion.
-        this.typeaheadInputChange.next('');
-        this.searchValue.set('');
-    }
     validateCriterionLabel(criterion) {
         if (!this.strictCriterionOrValue()) {
             return true;
@@ -1106,54 +1162,32 @@ class SiFilteredSearchComponent {
         const scrollDirection = isRTL() ? -1 : 1;
         const position = scrollDirection * this.scrollContainer().nativeElement.scrollWidth;
         this.scrollContainer().nativeElement.scrollLeft = position;
-        this.typeaheadInputChange.next(this.freeTextInputElement().nativeElement.value);
+        this.freeTextFocused.next();
     }
-    freeTextBackspace(event) {
-        if (!event.target.value) {
-            // edit last criterion if a user presses backspace in empty search input.
-            const valueComponents = this.valueComponents();
-            if (valueComponents.length) {
-                valueComponents[valueComponents.length - 1].edit('value');
-            }
+    freeTextBackspace() {
+        // edit last criterion if a user presses backspace in empty search input.
+        const valueComponents = this.valueComponents();
+        if (valueComponents.length) {
+            valueComponents[valueComponents.length - 1].edit('value');
         }
     }
-    freeTextInput(event) {
-        const value = event.target.value;
-        const match = value.match(SiFilteredSearchComponent.criterionRegex);
-        if (!this.disableSelectionByColonAndSemicolon() && !this.onlySelectValue() && match) {
-            const criterionName = match[1];
-            if (this.searchValue() === '') {
-                // The value was empty before, so we must make angular detect a change here.
-                // Otherwise, the entire value which was pasted will remain in the input.
-                // This happens if the user pasts something like: 'key:value'
-                this.searchValue.set(value);
-                this.cdRef.detectChanges();
-            }
-            this.searchValue.set('');
-            const nameLowerCase = criterionName.toLocaleLowerCase();
-            const criterion = this.internalCriterionDefinitions.find(ic => ic.translatedLabel.toLocaleLowerCase() === nameLowerCase) ?? {
-                name: criterionName,
-                label: criterionName,
-                translatedLabel: criterionName
-            };
-            this.typeaheadInputChange.next('');
-            this.addCriterion(criterion, match[2]);
-        }
-        else {
-            this.searchValue.set(value);
-            // Only emit a change event if free text pills are not enabled and the free text search is enabled.
-            if (!this.disableFreeTextSearch() && !this.freeTextCriterion()) {
-                this.emitChangeEvent();
-            }
-            this.typeaheadInputChange.next(value);
-        }
+    onCreateCriterion(event) {
+        this.addCriterion(event.criterion, event.value);
     }
-    freeTextBlur() {
-        queueMicrotask(() => {
-            if (this.freeTextCriterion() && this.searchValue().length > 0) {
-                this.createFreeTextPill(this.searchValue());
-            }
-        });
+    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);
+    }
+    onSearchValueChange(value) {
+        // Only emit a change event if free text pills are not enabled and the free text search is enabled.
+        if (value && !this.disableFreeTextSearch() && !this.freeTextCriterion()) {
+            this.emitChangeEvent();
+        }
     }
     valueChange(value, criterion) {
         criterion.value = value;
@@ -1166,7 +1200,7 @@ class SiFilteredSearchComponent {
         }
         else {
             this.searchValue.set(event?.freeText ?? this.searchValue());
-            this.freeTextInputElement().nativeElement.focus();
+            this.freeTextInput().focus();
         }
     }
     updateAndEmitSearchCriteria() {
@@ -1195,25 +1229,23 @@ class SiFilteredSearchComponent {
                 config: freeTextDefinition
             }
         ]);
-        this.searchValue.set('');
         this.emitChangeEvent();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFilteredSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiFilteredSearchComponent, isStandalone: true, selector: "si-filtered-search", inputs: { 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: "freeTextInputElement", first: true, predicate: ["freeTextInputElement"], 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      (submitCriterion)=\"focusNext($index, $event)\"\n      (deleteCriterion)=\"deleteCriterion($index, $event)\"\n      (valueChange)=\"valueChange($event, criterion)\"\n    />\n  }\n  <!-- criterion input -->\n  <input\n    #freeTextInputElement\n    type=\"text\"\n    class=\"value-input ps-2 me-2 flex-grow-1\"\n    typeaheadOptionField=\"translatedLabel\"\n    typeaheadClearValueOnSelect\n    [siTypeahead]=\"dataSource\"\n    [typeaheadMinLength]=\"0\"\n    [typeaheadOptionsLimit]=\"typeaheadOptionsLimit()\"\n    [typeaheadScrollable]=\"true\"\n    [typeaheadOptionsInScrollableView]=\"optionsInScrollableView()\"\n    [typeaheadAutoSelectIndex]=\"searchValue() ? 0 : -1\"\n    [typeaheadCreateOption]=\"\n      freeTextCriterion() &&\n      (!maxCriteria() || values().length < maxCriteria()!) &&\n      allowFreeTextCache()\n        ? searchForFreeTextLabel()\n        : undefined\n    \"\n    [disabled]=\"disabled()\"\n    [placeholder]=\"placeholder()\"\n    [attr.aria-label]=\"searchLabel() | translate\"\n    [value]=\"searchValue()\"\n    (focus)=\"freeTextFocus()\"\n    (input)=\"freeTextInput($event)\"\n    (blur)=\"freeTextBlur()\"\n    (keydown.backspace)=\"freeTextBackspace($event)\"\n    (keydown.enter)=\"submit()\"\n    (typeaheadOnSelect)=\"typeaheadOnSelectCriterion($event.option)\"\n    (typeaheadOnCreateOption)=\"createFreeTextPill($event)\"\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-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(--element-text-primary);--input-background-color: var(--element-base-1);--input-background-hover-color: var(--element-base-1);--filter-search-background-color: var(--element-base-1);--filter-pill-background-color: var(--element-base-4)}:host.dark-background{--input-background-color: var(--element-base-4);--input-background-hover-color: var(--element-ui-4);--filter-search-background-color: var(--element-base-4);--filter-pill-background-color: var(--element-base-1)}:host{display:flex;align-items:center;line-height:24px;min-inline-size:0}:host.disabled{color:var(--element-text-disabled)}:host.disabled input,:host.disabled ::placeholder{color:var(--element-text-disabled)}:host si-filtered-search-value+input::placeholder{color:transparent}.search-container{border-start-start-radius:4px;border-end-start-radius:4px;background-color:var(--filter-search-background-color);gap:4px}input{background:transparent;border:0;padding-block:0}input:hover::placeholder{opacity:1}:host(.disabled) input::placeholder{opacity:var(--element-action-disabled-opacity)}.clear-button-container{display:flex;align-items:flex-start;align-self:stretch;padding-block:4px;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;block-size:auto;inline-size:auto;padding-inline:4px!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { 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: "component", type: SiFilteredSearchValueComponent, selector: "si-filtered-search-value", inputs: ["value", "definition", "disabled", "onlySelectValue", "maxCriteriaOptions", "optionsInScrollableView", "clearButtonLabel", "lazyValueProvider", "searchDebounceTime", "itemCountText", "disableSelectionByColonAndSemicolon", "searchLabel", "invalidCriterion", "isStrictOrOnlySelectValue", "editOnCreation"], outputs: ["valueChange", "deleteCriterion", "submitCriterion"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiFilteredSearchComponent, isStandalone: true, selector: "si-filtered-search", inputs: { 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      (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    [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($event)\"\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-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(--element-text-primary);--input-background-color: var(--element-base-1);--input-background-hover-color: var(--element-base-1);--filter-search-background-color: var(--element-base-1);--filter-pill-background-color: var(--element-base-4)}:host.dark-background{--input-background-color: var(--element-base-4);--input-background-hover-color: var(--element-ui-4);--filter-search-background-color: var(--element-base-4);--filter-pill-background-color: var(--element-base-1)}:host{display:flex;align-items:center;line-height:24px;min-inline-size:0}:host.disabled{color:var(--element-text-disabled)}.search-container{border-start-start-radius:4px;border-end-start-radius:4px;background-color:var(--filter-search-background-color);gap:4px}.clear-button-container{display:flex;align-items:flex-start;align-self:stretch;padding-block:4px;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;block-size:auto;inline-size:auto;padding-inline:4px!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", "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"], outputs: ["valueChange", "deleteCriterion", "submitCriterion"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFilteredSearchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-filtered-search', imports: [
-                        FormsModule,
                         SiIconComponent,
-                        SiTypeaheadDirective,
                         SiTranslatePipe,
+                        SiFilteredSearchInputComponent,
                         SiFilteredSearchValueComponent
                     ], 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      (submitCriterion)=\"focusNext($index, $event)\"\n      (deleteCriterion)=\"deleteCriterion($index, $event)\"\n      (valueChange)=\"valueChange($event, criterion)\"\n    />\n  }\n  <!-- criterion input -->\n  <input\n    #freeTextInputElement\n    type=\"text\"\n    class=\"value-input ps-2 me-2 flex-grow-1\"\n    typeaheadOptionField=\"translatedLabel\"\n    typeaheadClearValueOnSelect\n    [siTypeahead]=\"dataSource\"\n    [typeaheadMinLength]=\"0\"\n    [typeaheadOptionsLimit]=\"typeaheadOptionsLimit()\"\n    [typeaheadScrollable]=\"true\"\n    [typeaheadOptionsInScrollableView]=\"optionsInScrollableView()\"\n    [typeaheadAutoSelectIndex]=\"searchValue() ? 0 : -1\"\n    [typeaheadCreateOption]=\"\n      freeTextCriterion() &&\n      (!maxCriteria() || values().length < maxCriteria()!) &&\n      allowFreeTextCache()\n        ? searchForFreeTextLabel()\n        : undefined\n    \"\n    [disabled]=\"disabled()\"\n    [placeholder]=\"placeholder()\"\n    [attr.aria-label]=\"searchLabel() | translate\"\n    [value]=\"searchValue()\"\n    (focus)=\"freeTextFocus()\"\n    (input)=\"freeTextInput($event)\"\n    (blur)=\"freeTextBlur()\"\n    (keydown.backspace)=\"freeTextBackspace($event)\"\n    (keydown.enter)=\"submit()\"\n    (typeaheadOnSelect)=\"typeaheadOnSelectCriterion($event.option)\"\n    (typeaheadOnCreateOption)=\"createFreeTextPill($event)\"\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-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(--element-text-primary);--input-background-color: var(--element-base-1);--input-background-hover-color: var(--element-base-1);--filter-search-background-color: var(--element-base-1);--filter-pill-background-color: var(--element-base-4)}:host.dark-background{--input-background-color: var(--element-base-4);--input-background-hover-color: var(--element-ui-4);--filter-search-background-color: var(--element-base-4);--filter-pill-background-color: var(--element-base-1)}:host{display:flex;align-items:center;line-height:24px;min-inline-size:0}:host.disabled{color:var(--element-text-disabled)}:host.disabled input,:host.disabled ::placeholder{color:var(--element-text-disabled)}:host si-filtered-search-value+input::placeholder{color:transparent}.search-container{border-start-start-radius:4px;border-end-start-radius:4px;background-color:var(--filter-search-background-color);gap:4px}input{background:transparent;border:0;padding-block:0}input:hover::placeholder{opacity:1}:host(.disabled) input::placeholder{opacity:var(--element-action-disabled-opacity)}.clear-button-container{display:flex;align-items:flex-start;align-self:stretch;padding-block:4px;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;block-size:auto;inline-size:auto;padding-inline:4px!important}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { 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"] }], freeTextInputElement: [{ type: i0.ViewChild, args: ['freeTextInputElement', { isSignal: true }] }], scrollContainer: [{ type: i0.ViewChild, args: ['scrollContainer', { ...{ read: ElementRef }, isSignal: true }] }], valueComponents: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => SiFilteredSearchValueComponent), { isSignal: true }] }] } });
+                    }, 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      (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    [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($event)\"\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-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(--element-text-primary);--input-background-color: var(--element-base-1);--input-background-hover-color: var(--element-base-1);--filter-search-background-color: var(--element-base-1);--filter-pill-background-color: var(--element-base-4)}:host.dark-background{--input-background-color: var(--element-base-4);--input-background-hover-color: var(--element-ui-4);--filter-search-background-color: var(--element-base-4);--filter-pill-background-color: var(--element-base-1)}:host{display:flex;align-items:center;line-height:24px;min-inline-size:0}:host.disabled{color:var(--element-text-disabled)}.search-container{border-start-start-radius:4px;border-end-start-radius:4px;background-color:var(--filter-search-background-color);gap:4px}.clear-button-container{display:flex;align-items:flex-start;align-self:stretch;padding-block:4px;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;block-size:auto;inline-size:auto;padding-inline:4px!important}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { 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 }] }] } });
 
 /**
  * Copyright (c) Siemens 2016 - 2026