@siemens/element-ng 48.8.0 → 48.9.0

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

@@ -162,6 +162,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                     ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let dateValue = criterionValue().dateValue;\n@if (!active()) {\n  <div\n    class=\"criterion-value-text focus-inside px-4\"\n    [tabindex]=\"disabled() ? -1 : 0\"\n    (keydown.enter)=\"editValue.emit()\"\n    (click)=\"editValue.emit()\"\n  >\n    @if (!validFormat()) {\n      <!-- DatePipe throws an error if the date is invalid, so we have to do it on our own. -->\n      <!-- We may should have a better solution here. Ideally we would keep the broken string so that a user can fix it later. -->\n\n      {{ $any(dateValue)?.toString() }}\n    } @else if (!disableTime() || definition().validationType === 'date-time') {\n      {{ dateValue | date: dateFormat() }}\n    } @else {\n      {{ dateValue | date: shortDateFormat }}\n    }\n  </div>\n} @else {\n  <input\n    #valueInput\n    type=\"text\"\n    siDatepicker\n    class=\"px-4 py-0 border-0 focus-inside\"\n    [attr.aria-label]=\"searchLabel() | translate\"\n    [siDatepickerConfig]=\"dateConfig()\"\n    [ngModel]=\"dateValue\"\n    (keydown.backspace)=\"valueBackspace()\"\n    (keydown.enter)=\"valueEnter()\"\n    (siDatepickerDisabledTime)=\"disableTime.set($event)\"\n    (ngModelChange)=\"valueDateSelect($event)\"\n  />\n}\n", styles: ["input{background:transparent}\n"] }]
         }], ctorParameters: () => [] });
 
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+class SiFilteredSearchFreeTextComponent extends SiFilteredSearchValueBase {
+    valueInput = viewChild('freeTextInput');
+    validValue = computed(() => true);
+    freeTextValueChange(event) {
+        const inputElement = event.target;
+        this.criterionValue.update(v => ({ ...v, value: inputElement.value }));
+    }
+    valueEnter() {
+        this.active.set(false);
+        this.submitValue.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFilteredSearchFreeTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiFilteredSearchFreeTextComponent, isStandalone: true, selector: "si-filtered-search-free-text", providers: [
+            { provide: SiFilteredSearchValueBase, useExisting: SiFilteredSearchFreeTextComponent }
+        ], viewQueries: [{ propertyName: "valueInput", first: true, predicate: ["freeTextInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@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    {{ criterionValue().value }}\n  </div>\n} @else {\n  <input\n    #freeTextInput\n    type=\"text\"\n    class=\"px-4 py-0 border-0 focus-inside\"\n    [attr.aria-label]=\"searchLabel() | translate\"\n    [disabled]=\"disabled()\"\n    [value]=\"criterionValue().value\"\n    (input)=\"freeTextValueChange($event)\"\n    (keydown.backspace)=\"valueBackspace()\"\n    (keydown.enter)=\"valueEnter()\"\n    (blur)=\"active.set(false)\"\n  />\n}\n", styles: ["input{background:transparent}\n"], dependencies: [{ kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFilteredSearchFreeTextComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-filtered-search-free-text', imports: [SiTranslatePipe], providers: [
+                        { provide: SiFilteredSearchValueBase, useExisting: SiFilteredSearchFreeTextComponent }
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@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    {{ criterionValue().value }}\n  </div>\n} @else {\n  <input\n    #freeTextInput\n    type=\"text\"\n    class=\"px-4 py-0 border-0 focus-inside\"\n    [attr.aria-label]=\"searchLabel() | translate\"\n    [disabled]=\"disabled()\"\n    [value]=\"criterionValue().value\"\n    (input)=\"freeTextValueChange($event)\"\n    (keydown.backspace)=\"valueBackspace()\"\n    (keydown.enter)=\"valueEnter()\"\n    (blur)=\"active.set(false)\"\n  />\n}\n", styles: ["input{background:transparent}\n"] }]
+        }] });
+
 /**
  * Copyright (c) Siemens 2016 - 2025
  * SPDX-License-Identifier: MIT
@@ -433,7 +460,11 @@ class SiFilteredSearchValueComponent {
     operatorInput = viewChild('operatorInput');
     valueInput = viewChild(SiFilteredSearchValueBase);
     type = computed(() => {
+        // Check if this is a free text criterion first
         const definition = this.definition();
+        if (definition.type === 'free-text') {
+            return 'free-text';
+        }
         const validationType = definition.validationType;
         if (validationType === 'date' || validationType === 'date-time') {
             return 'date';
@@ -457,7 +488,7 @@ class SiFilteredSearchValueComponent {
         return Math.max(...operators.map(a => a.length));
     });
     ngOnInit() {
-        if (this.editOnCreation()) {
+        if (this.editOnCreation() && this.type() !== 'free-text') {
             this.edit();
         }
     }
@@ -533,8 +564,13 @@ class SiFilteredSearchValueComponent {
             value: this.definition().multiSelect ? [] : ''
         }));
     }
+    freeTextActiveChange(value) {
+        if (!value && !this.value().value) {
+            this.deleteCriterion.emit({ triggerSearch: true });
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFilteredSearchValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", 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 }, readonly: { classPropertyName: "readonly", publicName: "readonly", 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  <div class=\"pill pill-interactive criterion-label si-h5\" (click)=\"edit()\">\n    {{ definition().label | translate }}\n  </div>\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 ('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        [readonly]=\"readonly()\"\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        [readonly]=\"readonly()\"\n        [(active)]=\"active\"\n        [(criterionValue)]=\"value\"\n        (backspaceOverflow)=\"backspaceOverflow()\"\n        (editValue)=\"edit('value')\"\n        (submitValue)=\"submitCriterion.emit($event)\"\n      />\n    }\n  }\n  @if (!readonly()) {\n    <div class=\"pill px-0 ms-n1\">\n      <button\n        type=\"button\"\n        class=\"btn btn-circle btn-xs 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  }\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", "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" }, { kind: "component", type: SiFilteredSearchDateValueComponent, selector: "si-filtered-search-date-value" }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", 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 }, readonly: { classPropertyName: "readonly", publicName: "readonly", 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        [readonly]=\"readonly()\"\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        [readonly]=\"readonly()\"\n        [(active)]=\"active\"\n        [(criterionValue)]=\"value\"\n        (backspaceOverflow)=\"backspaceOverflow()\"\n        (editValue)=\"edit('value')\"\n        (submitValue)=\"submitCriterion.emit($event)\"\n      />\n    }\n  }\n  @if (!readonly()) {\n    <div class=\"pill px-0 ms-n1\">\n      <button\n        type=\"button\"\n        class=\"btn btn-circle btn-xs 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  }\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", "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" }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFilteredSearchValueComponent, decorators: [{
             type: Component,
@@ -544,10 +580,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                         FormsModule,
                         SiTranslatePipe,
                         SiFilteredSearchDateValueComponent,
+                        SiFilteredSearchFreeTextComponent,
                         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  <div class=\"pill pill-interactive criterion-label si-h5\" (click)=\"edit()\">\n    {{ definition().label | translate }}\n  </div>\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 ('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        [readonly]=\"readonly()\"\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        [readonly]=\"readonly()\"\n        [(active)]=\"active\"\n        [(criterionValue)]=\"value\"\n        (backspaceOverflow)=\"backspaceOverflow()\"\n        (editValue)=\"edit('value')\"\n        (submitValue)=\"submitCriterion.emit($event)\"\n      />\n    }\n  }\n  @if (!readonly()) {\n    <div class=\"pill px-0 ms-n1\">\n      <button\n        type=\"button\"\n        class=\"btn btn-circle btn-xs 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  }\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        [readonly]=\"readonly()\"\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        [readonly]=\"readonly()\"\n        [(active)]=\"active\"\n        [(criterionValue)]=\"value\"\n        (backspaceOverflow)=\"backspaceOverflow()\"\n        (editValue)=\"edit('value')\"\n        (submitValue)=\"submitCriterion.emit($event)\"\n      />\n    }\n  }\n  @if (!readonly()) {\n    <div class=\"pill px-0 ms-n1\">\n      <button\n        type=\"button\"\n        class=\"btn btn-circle btn-xs 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  }\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"] }]
         }] });
 
 /**
@@ -741,6 +778,31 @@ class SiFilteredSearchComponent {
      * @defaultValue false
      */
     disableSelectionByColonAndSemicolon = input(false, { transform: booleanAttribute });
+    /**
+     * Criterion definition for free-text pills.
+     * When set, free-text values will be added as a pill with this criterion.
+     * If not set, free-text pills are disabled.
+     *
+     * Enabling this will only emit valueChange events when the free-text pill is created.
+     * When the text input is blurred and there is text inside, a free-text pill will be created.
+     *
+     *
+     * @experimental
+     */
+    freeTextCriterion = input();
+    /**
+     * The value to be shown for creating free-text pills.
+     * Use the `{{query}}` placeholder to show the user input in the label.
+     *
+     *
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@SI_FILTERED_SEARCH.SEARCH_FOR_FREE_TEXT:Search for "{{query}}"`)
+     * ```
+     *
+     * @experimental
+     */
+    searchForFreeTextLabel = input(t(() => $localize `:@@SI_FILTERED_SEARCH.SEARCH_FOR_FREE_TEXT:Search for "{{query}}"`));
     /**
      * The interceptor is called when the list of criteria is shown as soon as the user starts typing in the input field.
      * The interceptor's {@link DisplayedCriteriaEventArgs.allow} method can be used to filter the list of displayed criteria.
@@ -784,6 +846,7 @@ class SiFilteredSearchComponent {
      * Every time a criteria gain the focus we have to reset the cache to call the interceptor.
      */
     allowedCriteriaCache;
+    allowFreeTextCache = signal(true);
     // 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.
     lastEmittedSearchCriteria;
@@ -803,6 +866,18 @@ class SiFilteredSearchComponent {
             return this.criteria() ?? [];
         }
     });
+    internalFreeTextCriterion = computed(() => {
+        const freeTextDef = this.freeTextCriterion();
+        if (!freeTextDef) {
+            return undefined;
+        }
+        return {
+            ...freeTextDef,
+            label: freeTextDef.label ?? freeTextDef.name,
+            translatedLabel: freeTextDef.label ?? freeTextDef.name,
+            type: 'free-text'
+        };
+    });
     isReadOnly = computed(() => this.readonly() || this.disabled());
     constructor() {
         this.dataSource = this.typeaheadInputChange.pipe(switchMap(value => {
@@ -842,12 +917,29 @@ class SiFilteredSearchComponent {
     initCriteria() {
         this.internalCriterionDefinitions = this.loadedCriteria().map(c => toInternalCriteria(c));
     }
+    /**
+     * Finds a criterion config for a given criterion value.
+     * Checks internalCriterionDefinitions first, then freeTextCriterion.
+     * Returns undefined if no config was found.
+     */
+    findCriterionConfig(criterionValue) {
+        const config = this.internalCriterionDefinitions.find(ic => ic.name === criterionValue.name);
+        if (config) {
+            return config;
+        }
+        // Check if this matches the freeTextCriterion
+        const freeTextDef = this.internalFreeTextCriterion();
+        if (freeTextDef && freeTextDef.name === criterionValue.name) {
+            return freeTextDef;
+        }
+        return undefined;
+    }
     initValue() {
         this.autoEditCriteria = false;
         this.searchValue = this.searchCriteria()?.value ?? '';
         this.values =
             this.searchCriteria()?.criteria.map(c => {
-                const config = this.internalCriterionDefinitions.find(ic => ic.name === c.name) ??
+                const config = this.findCriterionConfig(c) ??
                     {
                         name: c.name,
                         label: c.label ?? c.name,
@@ -952,7 +1044,9 @@ class SiFilteredSearchComponent {
             value: this.searchValue,
             criteria: this.values.map(v => v.value)
         };
-        if (this.disableFreeTextSearch()) {
+        // When free text search is disabled or free text pills are being used,
+        // we must not return any free text value.
+        if (this.disableFreeTextSearch() || this.freeTextCriterion()) {
             correctedCriteria.value = '';
         }
         return correctedCriteria;
@@ -998,10 +1092,13 @@ class SiFilteredSearchComponent {
                 this.interceptDisplayedCriteria.emit({
                     criteria: available,
                     searchCriteria: this.convertToExternalModel(),
-                    allow: criteriaNamesToDisplay => {
+                    allow: (criteriaNamesToDisplay, allowFreeTextSearch) => {
                         if (criteriaNamesToDisplay) {
                             this.allowedCriteriaCache = criteriaNamesToDisplay;
                         }
+                        if (allowFreeTextSearch !== undefined) {
+                            this.allowFreeTextCache.set(allowFreeTextSearch);
+                        }
                     }
                 });
             }
@@ -1020,7 +1117,7 @@ class SiFilteredSearchComponent {
         // KEEP THE REFERENCE, otherwise CD is broken
         this.values = this.values.map(v => Object.assign(v, {
             value: v.value,
-            config: this.internalCriterionDefinitions.find(ic => ic.name === v.config.name) ?? v.config
+            config: this.findCriterionConfig(v.value) ?? v.config
         }));
         if (this.maxCriteria() === undefined || this.values.length < this.maxCriteria()) {
             return !this.exclusiveCriteria()
@@ -1070,12 +1167,20 @@ class SiFilteredSearchComponent {
         }
         else {
             this.searchValue = value;
-            if (!this.disableFreeTextSearch()) {
+            // 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);
         }
     }
+    freeTextBlur() {
+        queueMicrotask(() => {
+            if (this.freeTextCriterion() && this.searchValue.length > 0) {
+                this.createFreeTextPill(this.searchValue);
+            }
+        });
+    }
     valueChange(value, criterion) {
         criterion.value = value;
         this.emitChangeEvent();
@@ -1100,8 +1205,28 @@ class SiFilteredSearchComponent {
             this.searchEmitQueue.next(this.searchCriteria());
         }
     }
+    createFreeTextPill(query) {
+        const freeTextDefinition = this.internalFreeTextCriterion();
+        const maxCriteria = this.maxCriteria();
+        if (!freeTextDefinition || (maxCriteria && this.values.length >= maxCriteria)) {
+            return;
+        }
+        this.values = [
+            ...this.values,
+            {
+                value: {
+                    name: freeTextDefinition.name,
+                    value: query
+                },
+                config: freeTextDefinition
+            }
+        ];
+        this.searchValue = '';
+        this.allowedCriteriaCache = undefined;
+        this.emitChangeEvent();
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFilteredSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", 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 }, readonly: { classPropertyName: "readonly", publicName: "readonly", 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 } }, 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      [readonly]=\"readonly()\"\n      [searchLabel]=\"searchLabel()\"\n      [onlySelectValue]=\"onlySelectValue()\"\n      [searchDebounceTime]=\"searchDebounceTime()\"\n      (submitCriterion)=\"focusNext($index, $event)\"\n      (deleteCriterion)=\"deleteCriterion(criterion.value, $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    [siTypeahead]=\"dataSource\"\n    [typeaheadMinLength]=\"readonly() ? 1 : 0\"\n    [typeaheadOptionsLimit]=\"typeaheadOptionsLimit()\"\n    [typeaheadScrollable]=\"true\"\n    [typeaheadOptionsInScrollableView]=\"optionsInScrollableView()\"\n    [typeaheadAutoSelectIndex]=\"searchValue ? 0 : -1\"\n    [readonly]=\"readonly()\"\n    [disabled]=\"disabled()\"\n    [placeholder]=\"placeholder()\"\n    [attr.aria-label]=\"searchLabel() | translate\"\n    [value]=\"searchValue\"\n    (focus)=\"freeTextFocus()\"\n    (input)=\"freeTextInput($event)\"\n    (keydown.backspace)=\"freeTextBackspace($event)\"\n    (keydown.enter)=\"submit()\"\n    (typeaheadOnSelect)=\"typeaheadOnSelectCriterion($event.option)\"\n  />\n</div>\n<!-- clear all searchCriteria -->\n@if ((values.length || searchValue.length) && !readonly()) {\n  <div class=\"clear-button-container\">\n    <button\n      type=\"button\"\n      class=\"btn btn-circle btn-xs 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-circle btn-xs 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);display:flex;align-items:center;line-height:24px;min-inline-size:0}: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.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", "typeaheadCreateOption"], outputs: ["typeaheadOnInput", "typeaheadOnSelect", "typeaheadOnFullMatch", "typeaheadOpenChange", "typeaheadOnCreateOption"], exportAs: ["si-typeahead"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }, { kind: "component", type: SiFilteredSearchValueComponent, selector: "si-filtered-search-value", inputs: ["value", "definition", "disabled", "readonly", "onlySelectValue", "maxCriteriaOptions", "optionsInScrollableView", "clearButtonLabel", "lazyValueProvider", "searchDebounceTime", "itemCountText", "disableSelectionByColonAndSemicolon", "searchLabel", "invalidCriterion", "isStrictOrOnlySelectValue", "editOnCreation"], outputs: ["valueChange", "deleteCriterion", "submitCriterion"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", 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 }, readonly: { classPropertyName: "readonly", publicName: "readonly", 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      [readonly]=\"readonly()\"\n      [searchLabel]=\"searchLabel()\"\n      [onlySelectValue]=\"onlySelectValue()\"\n      [searchDebounceTime]=\"searchDebounceTime()\"\n      (submitCriterion)=\"focusNext($index, $event)\"\n      (deleteCriterion)=\"deleteCriterion(criterion.value, $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    [siTypeahead]=\"dataSource\"\n    [typeaheadMinLength]=\"readonly() ? 1 : 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    [readonly]=\"readonly()\"\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) && !readonly()) {\n  <div class=\"clear-button-container\">\n    <button\n      type=\"button\"\n      class=\"btn btn-circle btn-xs 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-circle btn-xs 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);display:flex;align-items:center;line-height:24px;min-inline-size:0}: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.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", "typeaheadCreateOption"], outputs: ["typeaheadOnInput", "typeaheadOnSelect", "typeaheadOnFullMatch", "typeaheadOpenChange", "typeaheadOnCreateOption"], exportAs: ["si-typeahead"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }, { kind: "component", type: SiFilteredSearchValueComponent, selector: "si-filtered-search-value", inputs: ["value", "definition", "disabled", "readonly", "onlySelectValue", "maxCriteriaOptions", "optionsInScrollableView", "clearButtonLabel", "lazyValueProvider", "searchDebounceTime", "itemCountText", "disableSelectionByColonAndSemicolon", "searchLabel", "invalidCriterion", "isStrictOrOnlySelectValue", "editOnCreation"], outputs: ["valueChange", "deleteCriterion", "submitCriterion"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFilteredSearchComponent, decorators: [{
             type: Component,
@@ -1114,7 +1239,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                     ], 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      [readonly]=\"readonly()\"\n      [searchLabel]=\"searchLabel()\"\n      [onlySelectValue]=\"onlySelectValue()\"\n      [searchDebounceTime]=\"searchDebounceTime()\"\n      (submitCriterion)=\"focusNext($index, $event)\"\n      (deleteCriterion)=\"deleteCriterion(criterion.value, $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    [siTypeahead]=\"dataSource\"\n    [typeaheadMinLength]=\"readonly() ? 1 : 0\"\n    [typeaheadOptionsLimit]=\"typeaheadOptionsLimit()\"\n    [typeaheadScrollable]=\"true\"\n    [typeaheadOptionsInScrollableView]=\"optionsInScrollableView()\"\n    [typeaheadAutoSelectIndex]=\"searchValue ? 0 : -1\"\n    [readonly]=\"readonly()\"\n    [disabled]=\"disabled()\"\n    [placeholder]=\"placeholder()\"\n    [attr.aria-label]=\"searchLabel() | translate\"\n    [value]=\"searchValue\"\n    (focus)=\"freeTextFocus()\"\n    (input)=\"freeTextInput($event)\"\n    (keydown.backspace)=\"freeTextBackspace($event)\"\n    (keydown.enter)=\"submit()\"\n    (typeaheadOnSelect)=\"typeaheadOnSelectCriterion($event.option)\"\n  />\n</div>\n<!-- clear all searchCriteria -->\n@if ((values.length || searchValue.length) && !readonly()) {\n  <div class=\"clear-button-container\">\n    <button\n      type=\"button\"\n      class=\"btn btn-circle btn-xs 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-circle btn-xs 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);display:flex;align-items:center;line-height:24px;min-inline-size:0}: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.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"] }]
+                    }, 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      [readonly]=\"readonly()\"\n      [searchLabel]=\"searchLabel()\"\n      [onlySelectValue]=\"onlySelectValue()\"\n      [searchDebounceTime]=\"searchDebounceTime()\"\n      (submitCriterion)=\"focusNext($index, $event)\"\n      (deleteCriterion)=\"deleteCriterion(criterion.value, $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    [siTypeahead]=\"dataSource\"\n    [typeaheadMinLength]=\"readonly() ? 1 : 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    [readonly]=\"readonly()\"\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) && !readonly()) {\n  <div class=\"clear-button-container\">\n    <button\n      type=\"button\"\n      class=\"btn btn-circle btn-xs 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-circle btn-xs 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);display:flex;align-items:center;line-height:24px;min-inline-size:0}: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.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: () => [] });
 
 /**