@siemens/element-ng 47.4.0 → 47.5.0

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

@@ -0,0 +1,1139 @@
+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 * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { isRTL } from '@siemens/element-ng/common';
+import { addIcons, elementCancel, SiIconNextComponent, elementSearch } from '@siemens/element-ng/icon';
+import { SiTypeaheadDirective } from '@siemens/element-ng/typeahead';
+import * as i2 from '@siemens/element-translate-ng/translate';
+import { SiTranslateModule, SiTranslateService } from '@siemens/element-translate-ng/translate';
+import { BehaviorSubject, switchMap, of, Subject } from 'rxjs';
+import { debounceTime, map, tap, first, takeUntil } from 'rxjs/operators';
+import { formatDate, DatePipe } from '@angular/common';
+import { isValid, SiDatepickerOverlayDirective, getDatepickerFormat, getNamedFormat, SiDatepickerDirective } from '@siemens/element-ng/datepicker';
+import { CdkMonitorFocus } from '@angular/cdk/a11y';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+/** Convert options to option criterions */
+const toOptionCriteria = (values) => values?.map(v => typeof v === 'string'
+    ? { value: v }
+    : { label: v.label, value: v.value, iconClass: v.iconClass }) ?? [];
+/*
+ * Update selected state the matching is based on value since plain
+ * string options will automatically fill the value attribute with the
+ * actual string value.
+ */
+const selectOptions = (options, toSelect) => options.forEach(val => (val.selected = toSelect.includes(val.value)));
+/**
+ * Difference by name, create an array that contains those elements of criteria's a that are not in criteria's b.
+ * This operation is also sometimes called minus (-).
+ */
+const differenceByName = (a, b) => a.filter(x => b.filter(y => y.config.name === x.name).length === 0);
+/** Convert criteria to internal model criteria */
+const toInternalCriteria = (crit) => {
+    return {
+        ...crit,
+        label: crit.label ?? crit.name,
+        translatedLabel: crit.label ?? crit.name
+    };
+};
+const getISODateString = (date, format, locale) => {
+    if (!isValid(date)) {
+        return '';
+    }
+    switch (format) {
+        case 'date':
+            return formatDate(date, 'yyyy-MM-dd', locale);
+        case 'date-time':
+            return date.toISOString();
+    }
+};
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiFilteredSearchValueBase {
+    active = model.required();
+    criterionValue = model.required();
+    definition = input.required();
+    disabled = input.required();
+    searchLabel = input.required();
+    submitValue = output();
+    editValue = output();
+    backspaceOverflow = output();
+    focusInOverlay = signal(false).asReadonly();
+    focus() {
+        this.valueInput()?.nativeElement.focus();
+    }
+    valueEnter() {
+        if (!this.definition().multiSelect &&
+            (this.criterionValue().value || this.criterionValue().dateValue)) {
+            this.active.set(false);
+            this.submitValue.emit();
+        }
+    }
+    valueBackspace() {
+        if (!this.valueInput().nativeElement.value) {
+            this.backspaceOverflow.emit();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiFilteredSearchValueBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.6", type: SiFilteredSearchValueBase, isStandalone: true, inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: true, transformFunction: null }, criterionValue: { classPropertyName: "criterionValue", publicName: "criterionValue", 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 }, searchLabel: { classPropertyName: "searchLabel", publicName: "searchLabel", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { active: "activeChange", criterionValue: "criterionValueChange", submitValue: "submitValue", editValue: "editValue", backspaceOverflow: "backspaceOverflow" }, host: { properties: { "class.invalid-criterion": "!validValue()" }, classAttribute: "pill pill-interactive px-0 criterion-value-section" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiFilteredSearchValueBase, decorators: [{
+            type: Directive,
+            args: [{
+                    host: {
+                        '[class.invalid-criterion]': '!validValue()',
+                        'class': 'pill pill-interactive px-0 criterion-value-section'
+                    }
+                }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiFilteredSearchDateValueComponent extends SiFilteredSearchValueBase {
+    locale = inject(LOCALE_ID).toString();
+    valueInput = viewChild('valueInput');
+    datepickerOverlay = viewChild(SiDatepickerOverlayDirective);
+    disableTime = signal(false);
+    shortDateFormat;
+    focusInOverlay = computed(() => !!this.datepickerOverlay()?.isShown());
+    validFormat = computed(() => isValid(this.criterionValue().dateValue));
+    // The information if the time is currently disabled is only present in the
+    // current search criterion instance and not in the generic configuration.
+    // So we need to merge the initial config with the current instance config.
+    dateConfig = computed(() => ({
+        ...this.definition().datepickerConfig,
+        disabledTime: this.disableTime()
+    }));
+    dateFormat = computed(() => getDatepickerFormat(this.locale, this.dateConfig()));
+    validValue = computed(() => {
+        const dateConfig = this.dateConfig();
+        const minDate = dateConfig?.minDate ?? false;
+        const maxDate = dateConfig?.maxDate ?? false;
+        const dateValue = this.criterionValue().dateValue ?? false;
+        return ((!minDate || (minDate && dateValue && dateValue >= minDate)) &&
+            (!maxDate || (maxDate && dateValue && dateValue <= maxDate)));
+    });
+    constructor() {
+        super();
+        this.shortDateFormat = getNamedFormat(this.locale, 'shortDate');
+        if (!this.shortDateFormat.includes('yyyy')) {
+            this.shortDateFormat = this.shortDateFormat.replace('yy', 'yyyy');
+        }
+    }
+    valueDateSelect(date) {
+        // In case the user type an illegal date into the date input,
+        // our directive emits a new undefined value and keeps
+        if (!date && this.criterionValue().dateValue) {
+            date = new Date(this.criterionValue().dateValue);
+        }
+        let value;
+        const validationType = this.definition().validationType;
+        if (validationType === 'date') {
+            value = getISODateString(date, 'date', this.locale);
+        }
+        else if (validationType === 'date-time') {
+            if (this.disableTime()) {
+                value = getISODateString(date, 'date', this.locale);
+            }
+            else {
+                value = getISODateString(date, 'date-time', this.locale);
+            }
+        }
+        this.criterionValue.update(v => ({ ...v, value, dateValue: date }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiFilteredSearchDateValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: SiFilteredSearchDateValueComponent, isStandalone: true, selector: "si-filtered-search-date-value", providers: [
+            { provide: SiFilteredSearchValueBase, useExisting: SiFilteredSearchDateValueComponent }
+        ], viewQueries: [{ propertyName: "valueInput", first: true, predicate: ["valueInput"], descendants: true, isSignal: true }, { propertyName: "datepickerOverlay", first: true, predicate: SiDatepickerOverlayDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@let dateValue = criterionValue().dateValue;\n@if (!active()) {\n  <div\n    class=\"criterion-value-text focus-inside px-4\"\n    [tabindex]=\"disabled() ? -1 : 0\"\n    (keydown.enter)=\"editValue.emit()\"\n    (click)=\"editValue.emit()\"\n  >\n    @if (!validFormat()) {\n      <!-- DatePipe throws an error if the date is invalid, so we have to do it on our own. -->\n      <!-- We may should have a better solution here. Ideally we would keep the broken string so that a user can fix it later. -->\n      <!-- eslint-disable-next-line @angular-eslint/template/no-any -->\n      {{ $any(dateValue).toString() }}\n    } @else if (!disableTime() || definition().validationType === 'date-time') {\n      {{ dateValue | date: dateFormat() }}\n    } @else {\n      {{ dateValue | date: shortDateFormat }}\n    }\n  </div>\n} @else {\n  <input\n    #valueInput\n    type=\"text\"\n    siDatepicker\n    class=\"px-4 py-0 border-0 focus-inside\"\n    [attr.aria-label]=\"searchLabel() | translate\"\n    [siDatepickerConfig]=\"dateConfig()\"\n    [ngModel]=\"dateValue\"\n    (keydown.backspace)=\"valueBackspace()\"\n    (keydown.enter)=\"valueEnter()\"\n    (siDatepickerDisabledTime)=\"disableTime.set($event)\"\n    (ngModelChange)=\"valueDateSelect($event)\"\n  />\n}\n", styles: ["input{background:transparent}\n"], dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: SiDatepickerDirective, selector: "[siDatepicker]", inputs: ["autoClose", "triggeringInput"], exportAs: ["siDatepicker"] }, { kind: "ngmodule", type: SiTranslateModule }, { kind: "pipe", type: i2.SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiFilteredSearchDateValueComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-filtered-search-date-value', imports: [DatePipe, FormsModule, SiDatepickerDirective, SiTranslateModule], providers: [
+                        { provide: SiFilteredSearchValueBase, useExisting: SiFilteredSearchDateValueComponent }
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let dateValue = criterionValue().dateValue;\n@if (!active()) {\n  <div\n    class=\"criterion-value-text focus-inside px-4\"\n    [tabindex]=\"disabled() ? -1 : 0\"\n    (keydown.enter)=\"editValue.emit()\"\n    (click)=\"editValue.emit()\"\n  >\n    @if (!validFormat()) {\n      <!-- DatePipe throws an error if the date is invalid, so we have to do it on our own. -->\n      <!-- We may should have a better solution here. Ideally we would keep the broken string so that a user can fix it later. -->\n      <!-- eslint-disable-next-line @angular-eslint/template/no-any -->\n      {{ $any(dateValue).toString() }}\n    } @else if (!disableTime() || definition().validationType === 'date-time') {\n      {{ dateValue | date: dateFormat() }}\n    } @else {\n      {{ dateValue | date: shortDateFormat }}\n    }\n  </div>\n} @else {\n  <input\n    #valueInput\n    type=\"text\"\n    siDatepicker\n    class=\"px-4 py-0 border-0 focus-inside\"\n    [attr.aria-label]=\"searchLabel() | translate\"\n    [siDatepickerConfig]=\"dateConfig()\"\n    [ngModel]=\"dateValue\"\n    (keydown.backspace)=\"valueBackspace()\"\n    (keydown.enter)=\"valueEnter()\"\n    (siDatepickerDisabledTime)=\"disableTime.set($event)\"\n    (ngModelChange)=\"valueDateSelect($event)\"\n  />\n}\n", styles: ["input{background:transparent}\n"] }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiFilteredSearchTypeaheadComponent extends SiFilteredSearchValueBase {
+    lazyValueProvider = input();
+    searchDebounceTime = input.required();
+    itemCountText = input.required();
+    items = input.required();
+    onlySelectValue = input.required();
+    maxCriteriaOptions = input.required();
+    optionsInScrollableView = input.required();
+    readonly = input.required();
+    disableSelectionByColonAndSemicolon = input.required();
+    isStrictOrOnlySelectValue = input.required();
+    inputChange = new BehaviorSubject('');
+    selectionChange = new BehaviorSubject([]);
+    valueInput = viewChild('valueInput');
+    optionValue = signal([]);
+    destroyRef = inject(DestroyRef);
+    translateService = inject(SiTranslateService);
+    inputType = computed(() => this.definition().validationType === 'integer' || this.definition().validationType === 'float'
+        ? 'number'
+        : 'text');
+    step = computed(() => (this.definition().validationType === 'integer' ? '1' : 'any'));
+    options = computed(() => this.buildOptions());
+    hasMultiSelections = computed(() => this.definition().multiSelect &&
+        Array.isArray(this.criterionValue().value) &&
+        this.criterionValue().value.length > 1);
+    validValue = computed(() => {
+        const config = this.definition();
+        if (!this.isStrictOrOnlySelectValue() && !config.strictValue && !config.onlySelectValue) {
+            return true;
+        }
+        // TODO: this never worked with lazy options. We should fix that.
+        // TODO: checking if options are empty is also questionable. Should be changed v47.
+        return !!((config.options?.length && this.optionValue().length) ||
+            (!config.options?.length && !!this.criterionValue().value));
+    });
+    // This MUST only be updated if the active state changes.
+    // Otherwise, user values might be overridden.
+    // It is only used to pass the initial input value if the user starts editing the input.
+    valueLabel = computed(() => {
+        if (this.active()) {
+            const optionValue = untracked(() => this.optionValue());
+            const definition = untracked(() => this.definition());
+            if (optionValue.length && !definition.multiSelect) {
+                const [option] = optionValue;
+                return option.label ? this.translateService.translateSync(option.label) : option.value;
+            }
+            else if (!definition.multiSelect) {
+                return untracked(() => this.criterionValue().value);
+            }
+        }
+        return '';
+    });
+    ngOnChanges(changes) {
+        if (this.definition().multiSelect &&
+            changes.criterionValue &&
+            this.criterionValue().value?.length !== this.optionValue().length) {
+            this.optionValue.set([]);
+            this.selectionChange.next([]);
+        }
+    }
+    ngOnInit() {
+        this.inputChange.next(this.definition().multiSelect ? '' : (this.criterionValue().value ?? ''));
+        if (this.definition().multiSelect) {
+            this.selectionChange.next(this.criterionValue().value);
+        }
+        this.buildOptionValue();
+    }
+    valueFilterKeys(event) {
+        if (this.definition().validationType === 'integer' &&
+            (event.key === '.' || event.key === ',')) {
+            event.preventDefault();
+        }
+    }
+    valueChange(newValue) {
+        if (!this.definition().multiSelect && typeof newValue === 'string') {
+            const match = newValue.match(/(.+?);(.*)$/);
+            let value;
+            if (!this.disableSelectionByColonAndSemicolon() && match) {
+                value = match[1];
+                this.submitValue.emit({ freeText: match[2] });
+            }
+            else {
+                value = newValue;
+            }
+            this.optionValue.set([]);
+            this.criterionValue.update(v => ({ ...v, value }));
+            this.inputChange.next(newValue);
+        }
+    }
+    valueTypeaheadFullMatch(match) {
+        if (this.definition().multiSelect) {
+            return;
+        }
+        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 }));
+        }
+    }
+    valueTypeaheadSelect(match) {
+        if (!this.definition().multiSelect) {
+            this.valueTypeaheadFullMatch(match);
+            this.submitValue.emit();
+        }
+        else {
+            // In multi-select scenarios, the internal model value is always of type array
+            const option = match.option;
+            if (match.itemSelected) {
+                this.criterionValue.update(v => ({ ...v, value: [...v.value, option.value] }));
+                this.optionValue.update(v => [...v, option]);
+            }
+            else {
+                const value = this.criterionValue();
+                if (typeof value.value !== 'string') {
+                    this.criterionValue.set({
+                        ...value,
+                        value: value.value?.filter(elem => elem !== option.value)
+                    });
+                }
+                this.optionValue.update(v => v.filter(elem => elem.value !== option.value));
+            }
+            this.selectionChange.next(this.criterionValue().value);
+        }
+    }
+    buildOptions() {
+        let optionsStream;
+        if (this.lazyValueProvider()) {
+            optionsStream = this.inputChange.pipe(debounceTime(this.searchDebounceTime()), takeUntilDestroyed(this.destroyRef), switchMap(value => {
+                return this.lazyValueProvider()(this.definition().name, 
+                // TODO: fix lazy loading for multi-select. Seems to be not needed, but it should work.
+                this.definition().multiSelect ? '' : (value ?? '')).pipe(map(options => toOptionCriteria(options)), tap(options => ((this.definition() ?? {}).options = options)));
+            }));
+        }
+        else if (this.definition()) {
+            optionsStream = of(toOptionCriteria(this.definition().options));
+        }
+        let translatedOptionsStream = optionsStream?.pipe(switchMap(options => {
+            const keys = options.map(option => option.label).filter(label => !!label);
+            return this.translateService.translateAsync(keys).pipe(map(translations => options.map(option => ({
+                ...option,
+                translatedLabel: translations[option.label] ?? option.label ?? option.value
+            }))));
+        }));
+        if (this.definition().multiSelect && this.definition().options) {
+            translatedOptionsStream = translatedOptionsStream?.pipe(switchMap(options => this.selectionChange.pipe(tap(value => selectOptions(options, value)), map(() => options))));
+        }
+        return translatedOptionsStream;
+    }
+    buildOptionValue() {
+        if (!this.criterionValue().value?.length) {
+            this.optionValue.set([]);
+        }
+        else {
+            // resolve options for initial values
+            this.options()
+                .pipe(first())
+                .subscribe(options => {
+                if (this.definition().multiSelect) {
+                    const value = this.criterionValue().value;
+                    this.optionValue.set(options.filter(option => value.includes(option.value) ||
+                        // TODO: remove this. I don't know why, but it seems like previously FS accepted labels as well
+                        value.includes(option.translatedLabel)));
+                    // Sneaky patch the value.
+                    // We did not emit a change, as no user interaction happened.
+                    // We should consider dropping this, but there is currently a unit test checking this behavior.
+                    value.splice(0, value.length, ...this.optionValue().map(option => option.value));
+                }
+                else {
+                    this.optionValue.set(options.filter(option => option.value === this.criterionValue().value ||
+                        // TODO: remove this. I don't know why, but it seems like previously FS accepted labels as well
+                        option.translatedLabel === this.criterionValue().value));
+                    // Sneaky patch the value.
+                    // We did not emit a change, as no user interaction happened.
+                    // We should consider dropping this, but there is currently a unit test checking this behavior.
+                    const [optionValue] = this.optionValue();
+                    if (optionValue) {
+                        // TODO: The last ?? optionValue.label is non-sense, but we have a unit test checking this behavior.
+                        this.criterionValue().value = optionValue.value ?? optionValue.label;
+                    }
+                }
+            });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiFilteredSearchTypeaheadComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: SiFilteredSearchTypeaheadComponent, isStandalone: true, selector: "si-filtered-search-typeahead", inputs: { 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 }, items: { classPropertyName: "items", publicName: "items", 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 }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: true, transformFunction: null }, disableSelectionByColonAndSemicolon: { classPropertyName: "disableSelectionByColonAndSemicolon", publicName: "disableSelectionByColonAndSemicolon", isSignal: true, isRequired: true, transformFunction: null }, isStrictOrOnlySelectValue: { classPropertyName: "isStrictOrOnlySelectValue", publicName: "isStrictOrOnlySelectValue", isSignal: true, isRequired: true, transformFunction: null } }, 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    @if (!!value && hasMultiSelections()) {\n      @if (itemCountText()) {\n        {{ itemCountText() | translate: { itemCount: value.length } }}\n      } @else {\n        {{ value!.length }} {{ items() | translate }}\n      }\n    } @else if (optionValue()[0]) {\n      {{ optionValue()[0].label ?? optionValue()[0].value | translate }}\n    } @else {\n      {{ value }}\n    }\n  </div>\n} @else {\n  <input\n    #valueInput\n    typeaheadOptionField=\"translatedLabel\"\n    class=\"px-4 py-0 border-0 focus-inside\"\n    typeaheadScrollable\n    [type]=\"inputType()\"\n    [step]=\"step()\"\n    [ngModel]=\"valueLabel()\"\n    [siTypeahead]=\"options() ?? []\"\n    [typeaheadProcess]=\"definition().multiSelect || !onlySelectValue()\"\n    [typeaheadMultiSelect]=\"definition().multiSelect\"\n    [typeaheadMinLength]=\"0\"\n    [typeaheadOptionsLimit]=\"maxCriteriaOptions()\"\n    [typeaheadAutoSelectIndex]=\"definition().multiSelect || value?.length ? 0 : -1\"\n    [readOnly]=\"\n      readonly() || onlySelectValue() || (definition().onlySelectValue && !definition().multiSelect)\n    \"\n    [typeaheadOptionsInScrollableView]=\"optionsInScrollableView()\"\n    [attr.aria-label]=\"searchLabel() | translate\"\n    (keydown)=\"valueFilterKeys($event)\"\n    (keydown.backspace)=\"valueBackspace()\"\n    (keydown.enter)=\"valueEnter()\"\n    (ngModelChange)=\"valueChange($event)\"\n    (typeaheadOnFullMatch)=\"valueTypeaheadFullMatch($event)\"\n    (typeaheadOnSelect)=\"valueTypeaheadSelect($event)\"\n  />\n}\n", styles: ["input{background:transparent;-moz-appearance:textfield}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}\n"], dependencies: [{ kind: "directive", type: SiTypeaheadDirective, selector: "[siTypeahead]", inputs: ["siTypeahead", "typeaheadProcess", "typeaheadScrollable", "typeaheadOptionsInScrollableView", "typeaheadOptionsLimit", "typeaheadScrollableAdditionalHeight", "typeaheadAutoSelectIndex", "typeaheadCloseOnEsc", "typeaheadClearValueOnSelect", "typeaheadWaitMs", "typeaheadMinLength", "typeaheadOptionField", "typeaheadMultiSelect", "typeaheadTokenize", "typeaheadMatchAllTokens", "typeaheadItemTemplate", "typeaheadSkipSortingMatches", "typeaheadAutocompleteListLabel", "typeaheadFullWidth"], outputs: ["typeaheadOnInput", "typeaheadOnSelect", "typeaheadOnMultiselectClose", "typeaheadOnFullMatch", "typeaheadClosed", "typeaheadOpenChange"], exportAs: ["si-typeahead"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SiTranslateModule }, { kind: "pipe", type: i2.SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiFilteredSearchTypeaheadComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-filtered-search-typeahead', imports: [SiTypeaheadDirective, FormsModule, SiTranslateModule], 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    @if (!!value && hasMultiSelections()) {\n      @if (itemCountText()) {\n        {{ itemCountText() | translate: { itemCount: value.length } }}\n      } @else {\n        {{ value!.length }} {{ items() | translate }}\n      }\n    } @else if (optionValue()[0]) {\n      {{ optionValue()[0].label ?? optionValue()[0].value | translate }}\n    } @else {\n      {{ value }}\n    }\n  </div>\n} @else {\n  <input\n    #valueInput\n    typeaheadOptionField=\"translatedLabel\"\n    class=\"px-4 py-0 border-0 focus-inside\"\n    typeaheadScrollable\n    [type]=\"inputType()\"\n    [step]=\"step()\"\n    [ngModel]=\"valueLabel()\"\n    [siTypeahead]=\"options() ?? []\"\n    [typeaheadProcess]=\"definition().multiSelect || !onlySelectValue()\"\n    [typeaheadMultiSelect]=\"definition().multiSelect\"\n    [typeaheadMinLength]=\"0\"\n    [typeaheadOptionsLimit]=\"maxCriteriaOptions()\"\n    [typeaheadAutoSelectIndex]=\"definition().multiSelect || value?.length ? 0 : -1\"\n    [readOnly]=\"\n      readonly() || onlySelectValue() || (definition().onlySelectValue && !definition().multiSelect)\n    \"\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"] }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiFilteredSearchValueComponent {
+    value = model.required();
+    definition = input.required();
+    disabled = input.required();
+    readonly = input.required();
+    onlySelectValue = input.required();
+    maxCriteriaOptions = input.required();
+    optionsInScrollableView = input.required();
+    clearButtonLabel = input.required();
+    lazyValueProvider = input();
+    searchDebounceTime = input.required();
+    itemCountText = input.required();
+    items = input.required();
+    disableSelectionByColonAndSemicolon = input.required();
+    searchLabel = input.required();
+    invalidCriterion = input.required();
+    isStrictOrOnlySelectValue = input.required();
+    editOnCreation = input.required();
+    deleteCriterion = output();
+    submitCriterion = output();
+    active = signal(false);
+    icons = addIcons({ elementCancel });
+    hasPendingFocus = false;
+    operatorInput = viewChild('operatorInput');
+    valueInput = viewChild(SiFilteredSearchValueBase);
+    type = computed(() => {
+        switch (this.definition().validationType) {
+            case 'date':
+            case 'date-time':
+                return 'date';
+            default:
+                return 'typeahead';
+        }
+    });
+    selectedOperatorIndex = computed(() => {
+        const operator = this.value().operator;
+        const operators = this.definition().operators;
+        if (!operator || !operators) {
+            return -1;
+        }
+        return operators.findIndex(op => op.includes(operator));
+    });
+    longestOperatorLength = computed(() => {
+        const operators = this.definition().operators;
+        if (!operators) {
+            return 0;
+        }
+        return Math.max(...operators.map(a => a.length));
+    });
+    ngOnInit() {
+        if (this.editOnCreation()) {
+            this.edit();
+        }
+    }
+    edit(field) {
+        if (this.readonly()) {
+            return;
+        }
+        this.active.set(true);
+        this.hasPendingFocus = true;
+        setTimeout(() => {
+            if (field === 'value') {
+                this.valueInput()?.focus();
+            }
+            else if (field === 'operator') {
+                this.operatorInput()?.nativeElement.focus();
+            }
+            else {
+                (this.operatorInput()?.nativeElement ?? this.valueInput())?.focus();
+            }
+            this.hasPendingFocus = false;
+        });
+    }
+    backspaceOverflow() {
+        const operatorInput = this.operatorInput()?.nativeElement;
+        if (operatorInput) {
+            operatorInput.focus();
+        }
+        else {
+            this.deleteCriterion.emit();
+        }
+    }
+    focusChange(focusOrigin) {
+        if (this.hasPendingFocus) {
+            return;
+        }
+        setTimeout(() => {
+            // We need to wait for the overlay, that might be shown and now close as well on onside click.
+            if (this.active() && !focusOrigin && !this.valueInput()?.focusInOverlay()) {
+                this.active.set(false);
+            }
+        });
+    }
+    operatorUpdate(operator) {
+        this.value.update(value => ({ ...value, operator }));
+    }
+    operatorBackspace() {
+        if (!this.operatorInput()?.nativeElement.value) {
+            this.deleteCriterion.emit();
+        }
+    }
+    operatorEnter() {
+        this.valueInput().focus();
+    }
+    operatorBlur() {
+        const operators = this.definition().operators;
+        if (operators && !operators.includes(this.value().operator)) {
+            this.operatorUpdate(operators.includes('=') ? '=' : operators[0]);
+        }
+    }
+    clear() {
+        if (!this.active() || !this.value().value?.length) {
+            this.deleteCriterion.emit({ triggerSearch: true });
+            return;
+        }
+        this.value.update(v => ({
+            ...v,
+            dateValue: undefined,
+            value: this.definition().multiSelect ? [] : ''
+        }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiFilteredSearchValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.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 }, items: { classPropertyName: "items", publicName: "items", 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-title-2\" (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 ('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        [itemCountText]=\"itemCountText()\"\n        [isStrictOrOnlySelectValue]=\"isStrictOrOnlySelectValue()\"\n        [disableSelectionByColonAndSemicolon]=\"disableSelectionByColonAndSemicolon()\"\n        [items]=\"items()\"\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-next [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"], outputs: ["typeaheadOnInput", "typeaheadOnSelect", "typeaheadOnMultiselectClose", "typeaheadOnFullMatch", "typeaheadClosed", "typeaheadOpenChange"], exportAs: ["si-typeahead"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SiTranslateModule }, { kind: "pipe", type: i2.SiTranslatePipe, name: "translate" }, { kind: "component", type: SiFilteredSearchDateValueComponent, selector: "si-filtered-search-date-value" }, { kind: "component", type: SiFilteredSearchTypeaheadComponent, selector: "si-filtered-search-typeahead", inputs: ["lazyValueProvider", "searchDebounceTime", "itemCountText", "items", "onlySelectValue", "maxCriteriaOptions", "optionsInScrollableView", "readonly", "disableSelectionByColonAndSemicolon", "isStrictOrOnlySelectValue"] }, { kind: "component", type: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiFilteredSearchValueComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-filtered-search-value', imports: [
+                        CdkMonitorFocus,
+                        SiTypeaheadDirective,
+                        FormsModule,
+                        SiTranslateModule,
+                        SiFilteredSearchDateValueComponent,
+                        SiFilteredSearchTypeaheadComponent,
+                        SiIconNextComponent
+                    ], 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-title-2\" (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 ('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        [itemCountText]=\"itemCountText()\"\n        [isStrictOrOnlySelectValue]=\"isStrictOrOnlySelectValue()\"\n        [disableSelectionByColonAndSemicolon]=\"disableSelectionByColonAndSemicolon()\"\n        [items]=\"items()\"\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-next [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"] }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiFilteredSearchComponent {
+    static criterionRegex = /(.+?):(.*)$/;
+    /**
+     * Output callback event that provides an object describing the
+     * selected criteria and additional filter text.
+     */
+    doSearch = output();
+    /**
+     * If this is set to `true`, the search triggers for each input (implicit search).
+     * By default, the search is triggered when the user submits by pressing the
+     * search button or by pressing enter.
+     *
+     * @defaultValue false
+     */
+    doSearchOnInputChange = input(false, {
+        transform: booleanAttribute
+    });
+    /**
+     * In addition to lazy loaded value, you can also lazy load the criteria itself
+     */
+    lazyCriterionProvider = input();
+    /**
+     * In many cases, your application defines the criteria, but the values need
+     * to be loaded from a server. In this case you can provide a function that
+     * returns the possible criterion options as an Observable.
+     */
+    lazyValueProvider = input();
+    /**
+     * Disable any interactivity.
+     *
+     * @defaultValue false
+     */
+    disabled = input(false, { transform: booleanAttribute });
+    /**
+     * Do not allow changes. Search can still be triggered.
+     *
+     * @deprecated Use {@link disabled} instead.
+     *
+     * @defaultValue false
+     */
+    readonly = input(false, { transform: booleanAttribute });
+    /**
+     * Limit criteria to the predefined ones.
+     *
+     * @defaultValue false
+     */
+    strictCriterion = input(false, { transform: booleanAttribute });
+    /**
+     * Limit criterion options to the predefined ones. `[strictValue]`
+     * enforces `[strictCriterion]` to true automatically.
+     *
+     * @defaultValue false
+     */
+    strictValue = input(false, { transform: booleanAttribute });
+    /**
+     * Limit criterion options to the predefined ones and prevent typing. `[onlySelectValue]`
+     * enforces `[strictValue]` and `[strictCriterion]` to true automatically.
+     *
+     * @defaultValue false
+     */
+    onlySelectValue = input(false, { transform: booleanAttribute });
+    /**
+     * Custom debounce time for lazy loading of criteria data.
+     *
+     * @defaultValue 500
+     */
+    lazyLoadingDebounceTime = input(500);
+    /**
+     * Custom debounce time (in mills) to delay the search emission.
+     * (Default is 0 as in most cases a users manually triggers a search.
+     * Recommended to increase a bit when using doSearchOnInputChange=true)
+     *
+     * @defaultValue 0
+     */
+    searchDebounceTime = input(0);
+    /**
+     * The placeholder for input field.
+     *
+     * @defaultValue ''
+     */
+    placeholder = input('');
+    /**
+     * @deprecated This property is unused and will be removed without a replacement.
+     *
+     * @defaultValue false
+     */
+    showIcon = input(false, { transform: booleanAttribute });
+    /**
+     * @deprecated This property is unused and will be removed without a replacement.
+     * To provide translation for the new search button, use the {@link submitButtonLabel} input.
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_FILTERED_SEARCH.SUBMIT:Apply search criteria`
+     * ```
+     */
+    submitText = input($localize `:@@SI_FILTERED_SEARCH.SUBMIT:Apply search criteria`);
+    /**
+     *  @deprecated Setting this property will make it harder for user to submit a search.
+     *  Instead of using this property to preselect to most relevant option, sort the options by relevance.
+     */
+    selectedCriteriaIndex = input();
+    /**
+     * Defines the number of criteria, criteria values and operators visible at once.
+     *
+     * @defaultValue 10
+     */
+    optionsInScrollableView = input(10);
+    /**
+     * The current selected search criteria and entered search text.
+     *
+     * @defaultValue
+     * ```
+     * { criteria: [], value: '' }
+     * ```
+     */
+    searchCriteria = model({ criteria: [], value: '' });
+    /**
+     * Predefine criteria options.
+     *
+     * @defaultValue []
+     */
+    criteria = input([]);
+    /**
+     * Opt-in to search for each criterion only once.
+     *
+     * @defaultValue false
+     */
+    exclusiveCriteria = input(false, {
+        transform: booleanAttribute
+    });
+    /**
+     * Limit the number of possible criteria. The default is undefined so that any number of criteria can be used.
+     * For example, setting the value to 1 let you only select one criterion that you need to remove before being
+     * able to set another one.
+     *
+     * @defaultValue undefined
+     */
+    maxCriteria = input(undefined);
+    /**
+     * Defines the maximum options within one criterion. The default is 20 and 0 means unlimited.
+     *
+     * @defaultValue 20
+     */
+    maxCriteriaOptions = input(20);
+    /**
+     * Search input aria label, Needed by a11y
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_FILTERED_SEARCH.SEARCH:Search`
+     * ```
+     */
+    searchLabel = input($localize `:@@SI_FILTERED_SEARCH.SEARCH:Search`);
+    /**
+     * Clear button aria label. Needed for a11y
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_FILTERED_SEARCH.CLEAR:Clear`
+     * ```
+     */
+    clearButtonLabel = input($localize `:@@SI_FILTERED_SEARCH.CLEAR:Clear`);
+    /**
+     * The accessible label of the search button.
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_FILTERED_SEARCH.SUBMIT_BUTTON:Submit search`
+     * ```
+     */
+    submitButtonLabel = input($localize `:@@SI_FILTERED_SEARCH.SUBMIT_BUTTON:Submit search`);
+    /**
+     * Items count text appended to the count in case of multi-selection of values.
+     * Translation key, `{{itemCount}}` in the translation will be replaced with the actual value.
+     *
+     * @defaultValue ''
+     */
+    itemCountText = input('');
+    /**
+     * Color variant to determine component background
+     *
+     * @defaultValue 'base-1'
+     */
+    colorVariant = input('base-1');
+    /**
+     * Text or translate key for multi selection pills text.
+     *
+     * @deprecated Use the new input {@link itemCountText} instead.
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_FILTERED_SEARCH.ITEMS:items`
+     * ```
+     */
+    items = input($localize `:@@SI_FILTERED_SEARCH.ITEMS:items`);
+    /**
+     * Disables the free text search to only use the criterion for filtering.
+     *
+     * @defaultValue false
+     */
+    disableFreeTextSearch = input(false, { transform: booleanAttribute });
+    /**
+     * Limit on the number of criteria/criteria value to be displayed by the typeahead
+     *
+     * @defaultValue 20
+     */
+    typeaheadOptionsLimit = input(20);
+    /**
+     * @deprecated This property is unused and will be removed without a replacement.
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_FILTERED_SEARCH.NO_MATCHING_CRITERIA:No matching criteria`
+     * ```
+     */
+    noMatchingCriteriaText = input($localize `:@@SI_FILTERED_SEARCH.NO_MATCHING_CRITERIA:No matching criteria`);
+    /**
+     * By default, the Filtered Search will treat `:` as a special character
+     * to submit the current input in the freetext and immediately create a criterion.
+     * Use this input to disable this behavior.
+     *
+     * @defaultValue false
+     */
+    disableSelectionByColonAndSemicolon = input(false, { transform: booleanAttribute });
+    /**
+     * 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.
+     *
+     * **Note:** The interceptor is called as long as the {@link searchCriteria} does not exceed {@link maxCriteria}.
+     * Further, the interceptor is not called when using the {@link lazyCriterionProvider}.
+     *
+     * @example
+     * ```
+     * <si-filtered-search
+     *   [criteria]="[{ name: 'foo', label: 'Foo' }, { name: 'bar', label: 'Bar' }]"
+     *   (interceptDisplayedCriteria)="$event.allow(
+     *       $event.searchCriteria.criteria.some(s => s.name === 'foo')
+     *         ? $event.criteria.filter(c => c !== 'foo')
+     *         : $event.criteria
+     *     )">
+     * </si-filtered-search>
+     * ```
+     */
+    interceptDisplayedCriteria = output();
+    freeTextInputElement = viewChild.required('freeTextInputElement');
+    scrollContainer = viewChild.required('scrollContainer', { read: ElementRef });
+    valueComponents = viewChildren(SiFilteredSearchValueComponent);
+    dataSource;
+    autoEditCriteria = false;
+    values = [];
+    searchValue = '';
+    /** 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();
+    destroySubscriptions = new Subject();
+    cdRef = inject(ChangeDetectorRef);
+    translateService = inject(SiTranslateService);
+    locale = inject(LOCALE_ID).toString();
+    /**
+     * The cache is used to control when the interceptDisplayedCriteria event needs to be called.
+     * Every time a criteria gain the focus we have to reset the cache to call the interceptor.
+     */
+    allowedCriteriaCache;
+    // 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;
+    isStrictOrOnlySelectValue = computed(() => {
+        return this.strictValue() || this.onlySelectValue();
+    });
+    strictCriterionOrValue = computed(() => {
+        return this.strictCriterion() || this.isStrictOrOnlySelectValue();
+    });
+    lazyLoadedCriteria = signal(undefined);
+    loadedCriteria = computed(() => {
+        const lazyLoadedCriteria = this.lazyLoadedCriteria();
+        if (lazyLoadedCriteria) {
+            return lazyLoadedCriteria;
+        }
+        else {
+            return this.criteria() ?? [];
+        }
+    });
+    isReadOnly = computed(() => this.readonly() || this.disabled());
+    constructor() {
+        this.dataSource = this.typeaheadInputChange.pipe(switchMap(value => {
+            if (this.lazyCriterionProvider()) {
+                return this.lazyCriterionProvider()(value, this.searchCriteria()).pipe(debounceTime(this.lazyLoadingDebounceTime()), map(result => this.getCriteriaToDisplayFromSubscription(result)));
+            }
+            else {
+                return of(this.getFilteredTypeaheadCriteria(value));
+            }
+        }), switchMap(criteria => {
+            return this.translateService.translateAsync(criteria.map(c => c.label)).pipe(map(translations => {
+                criteria.forEach(c => (c.translatedLabel = translations[c.label] ?? c.label ?? c.name));
+                return criteria;
+            }));
+        }));
+    }
+    ngOnChanges(changes) {
+        if (changes.criteria) {
+            this.initCriteria();
+        }
+        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() {
+        if (this.strictCriterionOrValue() && this.internalCriterionDefinitions.length === 0) {
+            throw new Error('strict criterion mode activated without predefined criteria!');
+        }
+        this.searchEmitQueue
+            .pipe(debounceTime(this.searchDebounceTime()), takeUntil(this.destroySubscriptions))
+            .subscribe(searchCriteria => this.doSearch.emit(searchCriteria));
+    }
+    ngOnDestroy() {
+        this.destroySubscriptions.next(true);
+        this.destroySubscriptions.unsubscribe();
+    }
+    initCriteria() {
+        this.internalCriterionDefinitions = this.loadedCriteria().map(c => toInternalCriteria(c));
+    }
+    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) ??
+                    {
+                        name: c.name,
+                        label: c.label ?? c.name,
+                        translatedLabel: c.label ?? c.name
+                    };
+                let value = c.value ?? '';
+                // Fix input, in case the user provided the value as string for the multi-select use case.
+                if (config.multiSelect && typeof value === 'string') {
+                    value = value !== '' ? [value] : [];
+                }
+                let dateValue;
+                if (config.validationType === 'date' || config.validationType === 'date-time') {
+                    dateValue = value ? new Date(value.toString()) : new Date();
+                    value ??= getISODateString(dateValue, config.validationType === 'date' || config.datepickerConfig?.disabledTime
+                        ? 'date'
+                        : 'date-time', this.locale);
+                }
+                return {
+                    value: {
+                        name: c.name,
+                        value,
+                        ...(dateValue ? { dateValue } : {}),
+                        ...(c.operator ? { operator: c.operator } : {})
+                    },
+                    config
+                };
+            }) ?? [];
+        this.lastEmittedSearchCriteria = this.searchCriteria();
+        this.allowedCriteriaCache = undefined;
+    }
+    /**
+     * Deletes all currently selected criteria and effectively resets the filtered search.
+     */
+    deleteAllCriteria(event) {
+        if (this.isReadOnly()) {
+            return;
+        }
+        event?.stopPropagation();
+        // Reset search criteria
+        this.values = [];
+        this.searchValue = '';
+        this.emitChangeEvent();
+        this.allowedCriteriaCache = undefined;
+        this.typeaheadInputChange.next(this.searchValue);
+        this.submit();
+    }
+    deleteCriterion(criterion, index, event) {
+        if (this.isReadOnly()) {
+            return;
+        }
+        this.values = this.values.filter(v => v.value !== criterion);
+        this.emitChangeEvent();
+        this.allowedCriteriaCache = undefined;
+        if (this.values.length !== index) {
+            this.valueComponents()[index + 1].edit('value');
+        }
+        else {
+            this.freeTextInputElement().nativeElement.focus();
+        }
+        this.typeaheadInputChange.next(this.searchValue);
+        if (event?.triggerSearch) {
+            this.submit();
+        }
+    }
+    submit() {
+        if (!this.doSearchOnInputChange()) {
+            this.doSearch.emit(this.searchCriteria());
+        }
+    }
+    typeaheadOnSelectCriterion(event) {
+        const criterion = event;
+        // Timeout is needed otherwise siTypeahead will overwrite the value
+        setTimeout(() => {
+            // Removes the focus border before creating a new criterion to prevent the impression of jumping content.
+            this.freeTextInputElement().nativeElement.blur();
+            this.searchValue = '';
+            this.addCriterion(criterion);
+            // The user selected a criterion so we remove the free text search value and add the criterion.
+            this.allowedCriteriaCache = undefined;
+            this.typeaheadInputChange.next('');
+        }, 0);
+    }
+    validateCriterionLabel(criterion) {
+        if (!this.strictCriterionOrValue()) {
+            return true;
+        }
+        return this.internalCriterionDefinitions.includes(criterion);
+    }
+    /**
+     * Converts the internally used data model to the external model.
+     * In case options for Criterion is Option[] map to the value from the label.
+     */
+    convertToExternalModel() {
+        const correctedCriteria = {
+            value: this.searchValue,
+            criteria: this.values.map(v => v.value)
+        };
+        if (this.disableFreeTextSearch()) {
+            correctedCriteria.value = '';
+        }
+        return correctedCriteria;
+    }
+    addCriterion(config, value) {
+        if (config.multiSelect) {
+            this.values = [...this.values, { value: { value: [], name: config.name }, config }];
+        }
+        else if (config.validationType === 'date' || config.validationType === 'date-time') {
+            this.values = [
+                ...this.values,
+                {
+                    value: {
+                        dateValue: new Date(),
+                        value: getISODateString(new Date(), config.validationType, this.locale),
+                        name: config.name
+                    },
+                    config
+                }
+            ];
+        }
+        else {
+            this.values = [...this.values, { value: { value: value ?? '', name: config.name }, config }];
+        }
+        this.autoEditCriteria = true;
+        this.emitChangeEvent();
+    }
+    /**
+     * Get criteria list to be shown in typeahead.
+     * @param token - input field value.
+     * @returns list of criteria to be shown in typeahead.
+     */
+    getFilteredTypeaheadCriteria(token) {
+        if (this.maxCriteria() === undefined || this.values.length < this.maxCriteria()) {
+            const allowedCriteria = !this.exclusiveCriteria()
+                ? this.internalCriterionDefinitions
+                : differenceByName(this.internalCriterionDefinitions, this.values);
+            if (allowedCriteria.length > 0 && !this.allowedCriteriaCache) {
+                // Call interceptor to allow applications to customize the list of available criteria
+                const available = allowedCriteria.map(c => c.name);
+                // Ensure that all entries are allowed in case the consumer doesn't use the allow callback
+                this.allowedCriteriaCache = available;
+                this.interceptDisplayedCriteria.emit({
+                    criteria: available,
+                    searchCriteria: this.convertToExternalModel(),
+                    allow: criteriaNamesToDisplay => {
+                        if (criteriaNamesToDisplay) {
+                            this.allowedCriteriaCache = criteriaNamesToDisplay;
+                        }
+                    }
+                });
+            }
+            return allowedCriteria.filter(c => this.allowedCriteriaCache?.includes(c.name));
+        }
+        else {
+            return [];
+        }
+    }
+    getCriteriaToDisplayFromSubscription(result) {
+        this.lazyLoadedCriteria.set(result);
+        this.internalCriterionDefinitions = this.loadedCriteria().map(c => toInternalCriteria(c));
+        // It's necessary to update the criteria configuration since consuming applications may change the options.
+        // A common case are criteria which depend on each other like Country, Site and Building. If the user change
+        // the site the building options might become invalid.
+        // 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
+        }));
+        if (this.maxCriteria() === undefined || this.values.length < this.maxCriteria()) {
+            return !this.exclusiveCriteria()
+                ? this.internalCriterionDefinitions
+                : differenceByName(this.internalCriterionDefinitions, this.values);
+        }
+        return [];
+    }
+    freeTextFocus() {
+        // Ensure that the free text input is fully visible in the scroll container
+        const scrollDirection = isRTL() ? -1 : 1;
+        const position = scrollDirection * this.scrollContainer().nativeElement.scrollWidth;
+        this.scrollContainer().nativeElement.scrollLeft = position;
+        this.typeaheadInputChange.next(this.freeTextInputElement().nativeElement.value);
+    }
+    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');
+            }
+        }
+    }
+    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 = value;
+                this.cdRef.detectChanges();
+            }
+            this.searchValue = '';
+            this.allowedCriteriaCache = undefined;
+            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 = value;
+            if (!this.disableFreeTextSearch()) {
+                this.emitChangeEvent();
+            }
+            this.typeaheadInputChange.next(value);
+        }
+    }
+    valueChange(value, criterion) {
+        criterion.value = value;
+        this.emitChangeEvent();
+    }
+    focusNext(index, event) {
+        const next = this.valueComponents()[index + 1];
+        if (next) {
+            next.edit();
+        }
+        else {
+            this.searchValue = event?.freeText ?? this.searchValue;
+            this.freeTextInputElement().nativeElement.focus();
+        }
+    }
+    updateAndEmitSearchCriteria() {
+        this.searchCriteria.set(this.convertToExternalModel());
+        this.lastEmittedSearchCriteria = this.searchCriteria();
+    }
+    emitChangeEvent() {
+        this.updateAndEmitSearchCriteria();
+        if (this.doSearchOnInputChange()) {
+            this.searchEmitQueue.next(this.searchCriteria());
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiFilteredSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.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 }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, submitText: { classPropertyName: "submitText", publicName: "submitText", isSignal: true, isRequired: false, transformFunction: null }, selectedCriteriaIndex: { classPropertyName: "selectedCriteriaIndex", publicName: "selectedCriteriaIndex", 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 }, items: { classPropertyName: "items", publicName: "items", 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 }, noMatchingCriteriaText: { classPropertyName: "noMatchingCriteriaText", publicName: "noMatchingCriteriaText", 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      [items]=\"items()\"\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]=\"selectedCriteriaIndex() ?? (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-next [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-next [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-0);display:flex;align-items:center;line-height:24px;min-inline-size:0}:host.dark-background{--input-background-color: var(--element-base-0);--input-background-hover-color: var(--element-ui-4);--filter-search-background-color: var(--element-base-0);--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: SiIconNextComponent, selector: "si-icon-next", 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"], outputs: ["typeaheadOnInput", "typeaheadOnSelect", "typeaheadOnMultiselectClose", "typeaheadOnFullMatch", "typeaheadClosed", "typeaheadOpenChange"], exportAs: ["si-typeahead"] }, { kind: "ngmodule", type: SiTranslateModule }, { kind: "pipe", type: i2.SiTranslatePipe, name: "translate" }, { kind: "component", type: SiFilteredSearchValueComponent, selector: "si-filtered-search-value", inputs: ["value", "definition", "disabled", "readonly", "onlySelectValue", "maxCriteriaOptions", "optionsInScrollableView", "clearButtonLabel", "lazyValueProvider", "searchDebounceTime", "itemCountText", "items", "disableSelectionByColonAndSemicolon", "searchLabel", "invalidCriterion", "isStrictOrOnlySelectValue", "editOnCreation"], outputs: ["valueChange", "deleteCriterion", "submitCriterion"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiFilteredSearchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-filtered-search', imports: [
+                        FormsModule,
+                        SiIconNextComponent,
+                        SiTypeaheadDirective,
+                        SiTranslateModule,
+                        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      [items]=\"items()\"\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]=\"selectedCriteriaIndex() ?? (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-next [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-next [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-0);display:flex;align-items:center;line-height:24px;min-inline-size:0}:host.dark-background{--input-background-color: var(--element-base-0);--input-background-hover-color: var(--element-ui-4);--filter-search-background-color: var(--element-base-0);--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: () => [] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiFilteredSearchModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiFilteredSearchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: SiFilteredSearchModule, imports: [SiFilteredSearchComponent], exports: [SiFilteredSearchComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiFilteredSearchModule, imports: [SiFilteredSearchComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiFilteredSearchModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [SiFilteredSearchComponent],
+                    exports: [SiFilteredSearchComponent]
+                }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SiFilteredSearchComponent, SiFilteredSearchModule };
+//# sourceMappingURL=siemens-element-ng-filtered-search.mjs.map